uiwjs / uiw Goto Github PK
View Code? Open in Web Editor NEW⚛️ @uiwjs A high quality UI Toolkit, A Component Library for React 16+.
Home Page: https://uiwjs.github.io
License: MIT License
uiw's People
Contributors
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
Stargazers
Watchers
Forkers
hsp8712 shangguanmr libin1991 ma7226087 yaochuxia dongliang1993 shenwzl gonghengda zanjs liwen0526 onelazyboy liumin1128 vensonhub kooff88 tibic hybaobao yangchunjian keyzf wsgouwan dividez margox kingctan forging2012 z2xy hi-noikiy liuxiaoli2world admxj heyuncoder sarveshpro ooyoow handrijunaidi saintlast miaoxu1com hcxiong canjian215215 twins49 xurui3762791 xingyuefeng colla2me hardfist trendingtechnology youling4438 krishna2nd litteze luorijin peipeiyumi ykshao won21kr mtsee zhanglina1990 yueyongxidain cpanmac mrhikari wj0990 wcxing skyformat99 fun3c hadeas wangkailang junlinzhu-tommy nickynodejs doc22940 sodatodo yaswanthsvist anns87 xamitn lsqy minice mrjain0187 mmmystery xelac odongohcoder spurgeonprakash jobayer1007 eaglefly keanebj rounsifer xiaochen-frontend yangzero erickwang lyhourchhen 00mjk tolgagigel sunlxy shervinchen whyzsm skylingfly anandjeechoubey git91pk julianadams4 sanyampunia dibenny gssggssg wangwei88 amber-nan icrous00 obedomm matuancc chenlingasmx shanghaifeuiw's Issues
Dependency Dashboard
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Other Branches
These updates are pending. To force PRs open, click the checkbox below.
- chore(deps): update actions/checkout action to v4
- chore(deps): update actions/setup-node action to v4
- chore(deps): update peaceiris/actions-gh-pages action to v4
Open
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
Detected dependencies
github-actions
.github/workflows/deploy.yml
actions/checkout v3actions/setup-node v3peaceiris/actions-gh-pages v3peaceiris/actions-gh-pages v3.github/workflows/npm.yml
actions/checkout v3actions/setup-node v3peaceiris/actions-gh-pages v3peaceiris/actions-gh-pages v3ncipollo/release-action v1
npm
package.json
@kkt/less-modules ^7.5.4@kkt/ncc ^1.1.1@types/react ~18.2.0@types/react-dom ~18.2.0@types/react-test-renderer ~18.0.0@types/react-transition-group ~4.4.4compile-less-cli ^1.9.1husky ~8.0.0kkt ^7.5.4lerna ^8.0.0lint-staged ^15.1.0prettier ^3.0.3react ~18.2.0react-dom ~18.2.0react-test-renderer ~18.2.0tsbb ^4.1.14node >=16.0.0packages/doc/package.json
packages/react-affix/package.json
react >=16.9.0react-dom >=16.9.0packages/react-alert/package.json
react >=16.9.0react-dom >=16.9.0packages/react-auto-link/package.json
react >=16.9.0react-dom >=16.9.0packages/react-avatar/package.json
react >=16.9.0react-dom >=16.9.0packages/react-back-top/package.json
react >=16.9.0react-dom >=16.9.0packages/react-badge/package.json
react >=16.9.0react-dom >=16.9.0packages/react-breadcrumb/package.json
react >=16.9.0react-dom >=16.9.0packages/react-button-group/package.json
react >=16.9.0react-dom >=16.9.0packages/react-button/package.json
react >=16.9.0react-dom >=16.9.0packages/react-calendar/package.json
@uiw/formatter ~2.0.0react >=16.9.0react-dom >=16.9.0packages/react-card/package.json
react >=16.9.0react-dom >=16.9.0packages/react-carousel/package.json
react >=16.9.0react-dom >=16.9.0packages/react-cascader/package.json
react >=16.9.0react-dom >=16.9.0packages/react-checkbox/package.json
react >=16.9.0react-dom >=16.9.0packages/react-collapse/package.json
react-transition-group ~4.4.2react >=16.9.0react-dom >=16.9.0packages/react-copy-to-clipboard/package.json
@uiw/copy-to-clipboard ~1.0.11react >=16.9.0react-dom >=16.9.0packages/react-date-input/package.json
@uiw/formatter ~2.0.0react >=16.9.0react-dom >=16.9.0packages/react-date-picker/package.json
@uiw/formatter ~2.0.0react >=16.9.0react-dom >=16.9.0packages/react-descriptions/package.json
react >=16.9.0react-dom >=16.9.0packages/react-divider/package.json
react >=16.9.0react-dom >=16.9.0packages/react-drawer/package.json
react >=16.9.0react-dom >=16.9.0packages/react-dropdown/package.json
react >=16.9.0react-dom >=16.9.0packages/react-empty/package.json
react >=16.9.0react-dom >=16.9.0packages/react-file-input/package.json
react >=16.9.0react-dom >=16.9.0packages/react-form/package.json
react >=16.9.0react-dom >=16.9.0packages/react-grid/package.json
react >=16.9.0react-dom >=16.9.0packages/react-icon/package.json
@uiw/icons ~2.6.0react >=16.9.0react-dom >=16.9.0packages/react-input/package.json
react >=16.9.0react-dom >=16.9.0packages/react-list/package.json
react >=16.9.0react-dom >=16.9.0packages/react-loader/package.json
react >=16.9.0react-dom >=16.9.0packages/react-menu/package.json
react-transition-group ~4.4.2react >=16.9.0react-dom >=16.9.0packages/react-message/package.json
react-transition-group ~4.4.2react >=16.9.0react-dom >=16.9.0packages/react-modal/package.json
react >=16.9.0react-dom >=16.9.0packages/react-month-picker/package.json
@uiw/formatter ~2.0.0react >=16.9.0react-dom >=16.9.0packages/react-notify/package.json
react >=16.9.0react-dom >=16.9.0packages/react-overlay-trigger/package.json
react >=16.9.0react-dom >=16.9.0packages/react-overlay/package.json
react-transition-group ~4.4.2react >=16.9.0react-dom >=16.9.0packages/react-pagination/package.json
react >=16.9.0react-dom >=16.9.0packages/react-pin-code/package.json
react >=16.9.0react-dom >=16.9.0packages/react-popover/package.json
react >=16.9.0react-dom >=16.9.0packages/react-portal/package.json
react >=16.9.0react-dom >=16.9.0packages/react-progress/package.json
react >=16.9.0react-dom >=16.9.0packages/react-radio/package.json
react >=16.9.0react-dom >=16.9.0packages/react-rate/package.json
react >=16.9.0react-dom >=16.9.0packages/react-search-select/package.json
react >=16.9.0react-dom >=16.9.0packages/react-search-tree/package.json
react >=16.9.0react-dom >=16.9.0packages/react-select/package.json
react >=16.9.0react-dom >=16.9.0packages/react-slider/package.json
react >=16.9.0react-dom >=16.9.0packages/react-steps/package.json
react >=16.9.0react-dom >=16.9.0packages/react-switch/package.json
react >=16.9.0react-dom >=16.9.0packages/react-table/package.json
react >=16.9.0react-dom >=16.9.0packages/react-tabs/package.json
react >=16.9.0react-dom >=16.9.0packages/react-tag/package.json
react >=16.9.0react-dom >=16.9.0packages/react-textarea/package.json
react >=16.9.0react-dom >=16.9.0packages/react-time-picker/package.json
@uiw/formatter ~2.0.0react >=16.9.0react-dom >=16.9.0packages/react-tooltip/package.json
react >=16.9.0react-dom >=16.9.0packages/react-transfer/package.json
react >=16.9.0react-dom >=16.9.0packages/react-tree-checked/package.json
react >=16.9.0react-dom >=16.9.0packages/react-tree/package.json
react-transition-group ~4.4.2react >=16.9.0react-dom >=16.9.0packages/uiw/package.json
@babel/runtime ~7.23.0@types/react ~18.2.0@types/react-dom ~18.2.0@uiw/formatter ~2.0.0@uiw/react-layout ~4.10.0@uiw/react-split ~5.9.0react >=16.9.0react-dom >=16.9.0packages/utils/package.json
react >=16.9.0react-dom >=16.9.0website/package.json
@uiw/formatter ~2.0.0@uiw/react-back-to-top ^1.2.0@uiw/react-markdown-preview ^5.0.3@uiw/reset.css ~1.0.5markdown-react-code-preview-loader ^2.1.2react >=16.9.0react-code-preview-layout ^3.1.4react-dom >=16.9.0react-router-dom ^6.16.0@kkt/less-modules ^7.5.2@kkt/raw-modules ^7.5.2@kkt/scope-plugin-options ^7.5.2@types/react ~18.2.0@types/react-dom ~18.2.0kkt ^7.5.2react-test-renderer ~18.2.0react >=16.9.0react-dom >=16.9.0
- Check this box to trigger a request for Renovate to run again on this repository
Support React Strict Mode
StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。
⚠️ 严格模式检查仅在开发模式下运行；它们不会影响生产构建。
你可以为应用程序的任何部分启用严格模式。例如：
import React from 'react';
function ExampleApplication() {
return (
<div>
<Header />
<React.StrictMode>
<div>
<ComponentOne />
<ComponentTwo />
</div>
</React.StrictMode>
<Footer />
</div>
);
}StrictMode 目前有助于：
- 识别不安全的生命周期
- 关于使用过时字符串 ref API 的警告
- 关于使用废弃的 findDOMNode 方法的警告
- 检测意外的副作用
- 检测过时的 context API
过时 API：String 类型的 Refs
如果你之前使用过 React，你可能了解过之前的 API 中的 string 类型的 ref 属性，例如 "textInput"。你可以通过 this.refs.textInput 来访问 DOM 节点。我们不建议使用它，因为 string 类型的 refs 存在 一些问题。它已过时并可能会在未来的版本被移除。
关于使用废弃的 findDOMNode 方法的警告
findDOMNode 也可用于 class 组件，但它违反了抽象原则，它使得父组件需要单独渲染子组件。它会产生重构危险，你不能更改组件的实现细节，因为父组件可能正在访问它的 DOM 节点。findDOMNode 只返回第一个子节点，但是使用 Fragments，组件可以渲染多个 DOM 节点。findDOMNode 是一个只读一次的 API。调用该方法只会返回第一次查询的结果。如果子组件渲染了不同的节点，则无法跟踪此更改。因此，findDOMNode 仅在组件返回单个且不可变的 DOM 节点时才有效。
你可以通过将 ref 传递给自定义组件并使用 ref 转发来将其传递给 DOM 节点。
你也可以在组件中创建一个 DOM 节点的 wrapper，并将 ref 直接绑定到它。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.wrapper = React.createRef();
}
render() {
return <div ref={this.wrapper}>{this.props.children}</div>;
}
}检测过时的 context API
过时的 context API 容易出错，将在未来的主要版本中删除。
TimeSelect value值初始化为"" 会出现警告
value 初始化为null 。时间获取不到无法改变input的值
大数据量该如何做虚拟化列表处理
Table 固定宽度 右侧操作栏使用Tooltip被遮挡
Modal 对话框 文字描述错误
Descriptions 使用占位样式问题
问题描述：
当Descriptions.Item 在列头部设置span为2时，样式的展示和占位并不正确。
paging 分页 无法显示最后一页
难道没人发现官网的教程有问题吗？
关于时间的组件显示异常
我本地 引用你这个uiw 说找不到模块是什么原因？
错误信息
ERROR in ./src/Module/index.jsx
Module not found: Error: Can't resolve 'uiw' in 'G:\github\react\react-practice\react-dome\src\Module'
@ ./src/Module/index.jsx 15:11-25
@ ./src/Routes/routes.jsx
@ ./src/main.jsx
@ multi ./src/main.jsx
引用代码：
import React from 'react';
import { Router, Route, Link } from 'react-router';
import { Button } from 'uiw';
import Header from './Common/header';
class App extends React.Component {
constructor(props){
super(props);
this.getAttribute = function(){};
this.logo = "http:\//ww4.sinaimg.cn/thumb180/0069kQGBgy1foaj1sj8grj32c0340e81.jpg";
};
render() {
return (
<div>
<Header></Header>
<Button></Button>
<div className="App-header">
<img src={this.logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
{this.props.children}
</div>
);
}
}
export default App;
引用步骤：
cnpm install uiw --save
Menu 菜单 不能动态的去改变defaultActive值
datepicker 当月显示两个相同日期 。showToday会同时展示两个
垂直slider有bug，一直划一直划，可以突破天际。。
尤其是这个带范围的slider
SearchSelect 搜索选择器 初始化 下拉选择框错位
Impossible to set a default panelDate
Hi, first thank you for the month-picker module, it's doing what I needed :) .
My issue is that I want to set a default value to the month-picker when loading a page, I can show the value I want in the input but the panelDate seems to be initialized with new Date() and I couldn't find a way to change that.
I though I could pass a panelDate through the datePickerProps object but looks those props are not used, at least not the panelDate.
Could that be fixed/changed easily ? Seems like it wouldn't be too much to change looking at the code. Or if you think I'm doing it wrong and you have a working exemple of changing the default panelDate for the month-picker that'd be great !
Thanks !
English documentation
Would it be possible to translate the documentation into english ?
我在使用您Form组件遇到一个问题,希望能得到解决!
当我进行提交数据,但是服务端返回错误,如在再一次请求还是返回错误,这时Form表单就会被重置
Add @types/uiw, not works on typescript project.
For example: Popover
Error:
(alias) class Popover
import Popover
JSX element class does not support attributes because it does not have a 'props' property.ts(2607)
'Popover' cannot be used as a JSX component.
Its instance type 'Popover' is not a valid JSX element.
Type 'Popover' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.ts(2786)
Action Required: Fix Renovate Configuration
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.
Object.assign on purpose?
Is Object.assign preferred in your codebase over the spread operator?
I'm looking at
I can create a pull request if it's not intended
css file should import ?how to import ?
css file should import ?how to import ? what is the path ?
Input Number 默认值为0 更新后0不会消失
与mobx的出现的异常
import React from 'react';
// import './css/Index.css';
import { observable, action, computed } from "mobx";
import {observer} from "mobx-react";
// import dataSetApi from "./apis/DataSet";
import { Table, Pagination, Button } from 'uiw';
const store = observable({
title: 'this is home page',
columns: [
{key: "id", title: "ID", style: {color: "red"}},
{key: "name", title: "名称"},
{key: "createdBy", title: "创建人"},
{key: "updatedBy", title: "更新人"},
{key: "createdAt", title: "创建时间"},
{key: "updatedAt", title: "更新时间"},
{
title: '操作',
key: 'edit',
width: 98,
render: (text, key, rowData, rowNumber, columnNumber) => (
<div>
<Button size="small" type="danger">删除</Button>
<Button size="small" type="success">修改</Button>
</div>
)
}
],
list: [],
total: 0,
// 获取首页数据
async getList(page, size) {
// let resp = await dataSetApi.getList(page, size);
// this.list = resp.data;
// this.total = resp.total;
}
});
@observer
class DataSetList extends React.Component {
componentDidMount() {
store.getList(1, 20);
}
render() {
return (
<div className="App">
<Table
columns={store.columns}
data={store.list}
bordered
footer={
<Pagination
current={1}
pageSize={10}
total={store.total}
divider
onChange={(current, total, pageSize) => {
store.getList(current, pageSize)
}}
/>
}
/>
</div>
);
}
}
export default DataSetList;Waiting to upgrade jest
多栏分割那个侧边栏不能往右边拉
侧边栏弹出提示框问题
鼠标放到侧边栏这里时，有个弹出提示框，然后滑动鼠标上下移动，结果这个提示框也下去了。
Carousel Imperfect ？Borrowed react-slick
Carousel Imperfect ？Borrowed react-slick
react-slick this is an excellent component library
Hi, when I use Tabs, I hope that I will set the style of the header and content separately.
Now, they used the same font-size.
Show you my code.Please help to review.
create-react-app引入报错
使用环境 windows10 && macOS 10.15.4
uiw版本 3.10.10
使用create-react-app --template typescript 创建的项目在引入uiw后会出现TypeScript error in /node_modules/uiw/lib/cjs/index.d.ts
已经将node_module写入tsconfig的exclude中，且在3.10.9版本中无此bug
How does it compare to ant design?
I use https://ant.design/ a lot recently.
I come across uiw and it seems promising.
Could you please explain the pros and cons of uiw, comparing to ant design?
菜单类型为 horizontal（水平）时候，二级菜单不能出现下拉菜单
菜单类型为 horizontal（水平）时候，二级菜单不能出现下拉菜单
DatePicker 现在不能使用？
正在做的这个项目急需DatePicker这个组件，
const md = await import('./components/affix/index.md');
why did the above code return a new path not a compiled content string
The latest version 1.15.9 causes issue on the Menu component
As you can see from the picture up here, the sidebar can not be folded up as usual.
配合react-heat-map显示时有bug
鼠标快速滑动时出现对话框不会消失
"react": "^17.0.2",
"react-dom": "^17.0.2",
"@uiw/react-heat-map": "^1.3.3",
"@uiw/react-tooltip": "^4.9.4",
能否大致说一下打包原理
Hi 你好
我们也在做react + typescript组件封装
抛开你的kkt
可否大致讲一下打包原理以及如何打包支持react ssr
modal--点击Button弹出modal时页面会抖动
在页面上引用modal，点击Button弹出modal时，页面会抖动一下
tree组件希望可以支持不同层级之间拖拽
使用Card组件时title值使用 Select组， 弹出的option 无法显示
运行示列代码出错
克隆代码后 运行 npm run start ， 打开页面， 浏览器报错
使用Card组件title值使用 Select组件时， 弹出的option 无法显示
overylay hooks问题
把overlay改成hooks时推出弹窗没有动画显示
日期选择器(DatePicker)中onChange特定情况不触发
日期选择器组件点击左右切换月份按钮时，不会触发onChange事件。
怎么找不到 d.ts 文件了？
是做了改版吗？
我记得之前是有d.ts文件的，
还能找到这个版本吗？
Dropdown Position
Dropdown position on first load is not loading in the right place but after clearing the search field and type again it shows at the exact place it should
禁用数字输入框时，点击按钮还是能改变num
直接使用create-react-app 在yarn add uiw 没有样式
我是直接用create-react-app 创建项目, 然后用yarn 添加uiw依赖, 在项目引用uiw组件, 怎么没有样式
hi~ I hope know that what library or js framework dose your component doc site use to built
TimePicker出现NaN
重现步骤：
输入框中随便点几下键盘，再连续选两次时分秒任意一个。
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.