uiwjs / uiw Goto Github PK

View Code? Open in Web Editor NEW

706.0 30.0 117.0 301.41 MB

⚛️ @uiwjs A high quality UI Toolkit, A Component Library for React 16+.

Home Page: https://uiwjs.github.io

License: MIT License

TypeScript 78.99% JavaScript 0.38% HTML 0.12% Less 20.49% Shell 0.01%

react ui-components react16 css react-component frontend ui-kit compoment javascript uiw

uiw's Introduction

uiw

The official documentation site for uiw. A high quality UI Toolkit, A Component Library for React 16+. 💘

Installation

npm install uiw --save

You can use kkt to quickly create a react + uiw project.

npx create-kkt my-app -e uiw

You can use the uiw v1.x version. Please see here for instructions. (npx comes with npm 5.2+ and higher.)

Basic Usage

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "uiw";

ReactDOM.render(
  <Button type="primary">Hello</Button>,
  document.getElementById("app")
);

Documentation

Visit the uiwjs.github.io website for more information.

Or Open in VSCode Preview :

Packages

This git repository is a repo built using Lerna. It contains several packages:

Package	Downloads	Version	Description
`uiw`			-
`@uiw/react-affix`			-
`@uiw/react-alert`			-
`@uiw/react-avatar`			-
`@uiw/react-back-top`			-
`@uiw/react-badge`			-
`@uiw/react-breadcrumb`			-
`@uiw/react-button`			-
`@uiw/react-button-group`			-
`@uiw/react-calendar`			-
`@uiw/react-card`			-
`@uiw/react-checkbox`			-
`@uiw/react-collapse`			-
`@uiw/react-copy-to-clipboard`			-
`@uiw/react-date-input`			-
`@uiw/react-date-picker`			-
`@uiw/react-descriptions`			-
`@uiw/react-divider`			-
`@uiw/react-drawer`			-
`@uiw/react-dropdown`
`@uiw/react-empty`			-
`@uiw/react-file-input`			-
`@uiw/react-form`			-
`@uiw/react-grid`			-
`@uiw/react-icon`			-
`@uiw/react-input`			-
`@uiw/react-list`			-
`@uiw/react-loader`			-
`@uiw/react-menu`			-
`@uiw/react-message`			-
`@uiw/react-modal`			-
`@uiw/react-month-picker`			-
`@uiw/react-notify`			-
`@uiw/react-overlay`			-
`@uiw/react-overlay-trigger`			-
`@uiw/react-pagination`			-
`@uiw/react-pin-code`			-
`@uiw/react-popover`			-
`@uiw/react-portal`			-
`@uiw/react-progress`			-
`@uiw/react-radio`			-
`@uiw/react-rate`			-
`@uiw/react-search-select`			-
`@uiw/react-search-tree`			-
`@uiw/react-select`			-
`@uiw/react-slider`			-
`@uiw/react-steps`			-
`@uiw/react-switch`			-
`@uiw/react-table`			-
`@uiw/react-tabs`			-
`@uiw/react-tag`			-
`@uiw/react-textarea`			-
`@uiw/react-time-picker`			-
`@uiw/react-tooltip`			-
`@uiw/react-tree`			-
`@uiw/react-tree-checked`			-
`@uiw/utils`			-
Package	Downloads	Version	Description
`@uiw/react-split`			-
`@uiw/react-layout`			-
`@uiw/formatter`			-

Development

Use Gitpod, a free online dev environment for GitHub.

Or clone locally:

$ git clone [email protected]:uiwjs/uiw.git

Install dependencies & compile component code.

$ npm install # Install dependencies

$ npm run hoist
$ npm run build

To develop, run the self-reloading build:

# Run the app
# Restart the app automatically every time code changes.
# Useful during development.
$ npm run lib:watch
$ npm run start
$ lerna run --scope uiw watch --stream
$ lerna exec --scope @uiw/button -- tsbb types --outDir lib/esm --target ESNEXT --watch
$ lerna exec --scope @uiw/button -- tsbb watch --target react --env-name esm:dev --env-name cjs

Folders

├── LICENSE
├── README.md
├── package.json
├── website
│   ├── uiw        # Documentation website source code
└── packages
    ├── uiw        # Component library source code
    ├── react-alert
    ├── react-tree
    ├── ...
    └── react-affix

Contributors

License

Licensed under the MIT License.

uiw's People

Contributors

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 shanghaife

uiw's Issues

hi~ I hope know that what library or js framework dose your component doc site use to built

https://uiw.gitee.io/#/components

能否大致说一下打包原理

Hi 你好

我们也在做react + typescript组件封装

抛开你的kkt

可否大致讲一下打包原理以及如何打包支持react ssr

value 初始化为null 。时间获取不到无法改变input的值

菜单类型为 horizontal（水平）时候，二级菜单不能出现下拉菜单

使用Card组件title值使用 Select组件时，弹出的option 无法显示

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.

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.

我在使用您Form组件遇到一个问题,希望能得到解决!

当我进行提交数据,但是服务端返回错误,如在再一次请求还是返回错误,这时Form表单就会被重置

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?

Object.assign on purpose?

Is Object.assign preferred in your codebase over the spread operator?
I'm looking at

uiw/packages/react-radio/src/RadioGroup.tsx

Line 22 in 481104f

return React.cloneElement(element, Object.assign({}, element.props, {

I can create a pull request if it's not intended

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.

chore(deps): update dependency @types/react-test-renderer to ~18.3.0
chore(deps): update react monorepo to ~18.3.0 (@types/react, @types/react-dom, react, react-dom, react-test-renderer)
fix(deps): update dependency @babel/runtime to ~7.25.0
chore(deps): update dependency husky to v9
Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/deploy.yml

actions/checkout v3

actions/setup-node v3

peaceiris/actions-gh-pages v3

peaceiris/actions-gh-pages v3

.github/workflows/npm.yml

actions/checkout v3

actions/setup-node v3

peaceiris/actions-gh-pages v3

peaceiris/actions-gh-pages v3

ncipollo/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.4

compile-less-cli ^1.9.1

husky ~8.0.0

kkt ^7.5.4

lerna ^8.0.0

lint-staged ^15.1.0

prettier ^3.0.3

react ~18.2.0

react-dom ~18.2.0

react-test-renderer ~18.2.0

tsbb ^4.1.14

node >=16.0.0

packages/doc/package.json

packages/react-affix/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-alert/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-auto-link/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-avatar/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-back-top/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-badge/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-breadcrumb/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-button-group/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-button/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-calendar/package.json

@uiw/formatter ~2.0.0

react >=16.9.0

react-dom >=16.9.0

packages/react-card/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-carousel/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-cascader/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-checkbox/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-collapse/package.json

react-transition-group ~4.4.2

react >=16.9.0

react-dom >=16.9.0

packages/react-copy-to-clipboard/package.json

@uiw/copy-to-clipboard ~1.0.11

react >=16.9.0

react-dom >=16.9.0

packages/react-date-input/package.json

@uiw/formatter ~2.0.0

react >=16.9.0

react-dom >=16.9.0

packages/react-date-picker/package.json

@uiw/formatter ~2.0.0

react >=16.9.0

react-dom >=16.9.0

packages/react-descriptions/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-divider/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-drawer/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-dropdown/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-empty/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-file-input/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-form/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-grid/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-icon/package.json

@uiw/icons ~2.6.0

react >=16.9.0

react-dom >=16.9.0

packages/react-input/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-list/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-loader/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-menu/package.json

react-transition-group ~4.4.2

react >=16.9.0

react-dom >=16.9.0

packages/react-message/package.json

react-transition-group ~4.4.2

react >=16.9.0

react-dom >=16.9.0

packages/react-modal/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-month-picker/package.json

@uiw/formatter ~2.0.0

react >=16.9.0

react-dom >=16.9.0

packages/react-notify/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-overlay-trigger/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-overlay/package.json

react-transition-group ~4.4.2

react >=16.9.0

react-dom >=16.9.0

packages/react-pagination/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-pin-code/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-popover/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-portal/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-progress/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-radio/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-rate/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-search-select/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-search-tree/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-select/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-slider/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-steps/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-switch/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-table/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-tabs/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-tag/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-textarea/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-time-picker/package.json

@uiw/formatter ~2.0.0

react >=16.9.0

react-dom >=16.9.0

packages/react-tooltip/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-transfer/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-tree-checked/package.json

react >=16.9.0

react-dom >=16.9.0

packages/react-tree/package.json

react-transition-group ~4.4.2

react >=16.9.0

react-dom >=16.9.0

packages/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.0

react >=16.9.0

react-dom >=16.9.0

packages/utils/package.json

react >=16.9.0

react-dom >=16.9.0

website/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.5

markdown-react-code-preview-loader ^2.1.2

react >=16.9.0

react-code-preview-layout ^3.1.4

react-dom >=16.9.0

react-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.0

kkt ^7.5.2

react-test-renderer ~18.2.0

react >=16.9.0

react-dom >=16.9.0

Check this box to trigger a request for Renovate to run again on this repository

Carousel Imperfect ？Borrowed react-slick

Carousel Imperfect ？Borrowed react-slick
react-slick this is an excellent component library

使用环境 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

css file should import ?how to import ?

css file should import ?how to import ? what is the path ?

关于时间的组件显示异常

配合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",

modal--点击Button弹出modal时页面会抖动

在页面上引用modal，点击Button弹出modal时，页面会抖动一下

TimePicker出现NaN

重现步骤：
输入框中随便点几下键盘，再连续选两次时分秒任意一个。

Menu 菜单不能动态的去改变defaultActive值

直接使用create-react-app 在yarn add uiw 没有样式

我是直接用create-react-app 创建项目, 然后用yarn 添加uiw依赖, 在项目引用uiw组件, 怎么没有样式

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.

日期选择器(DatePicker)中onChange特定情况不触发

日期选择器组件点击左右切换月份按钮时，不会触发onChange事件。

English documentation

Would it be possible to translate the documentation into english ?

tree组件希望可以支持不同层级之间拖拽

使用Card组件时title值使用 Select组，弹出的option 无法显示

侧边栏弹出提示框问题

鼠标放到侧边栏这里时，有个弹出提示框，然后滑动鼠标上下移动，结果这个提示框也下去了。

运行示列代码出错

克隆代码后运行 npm run start ，打开页面，浏览器报错

datepicker 当月显示两个相同日期。showToday会同时展示两个

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

大数据量该如何做虚拟化列表处理

SearchSelect 搜索选择器初始化下拉选择框错位

paging 分页无法显示最后一页

与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;

难道没人发现官网的教程有问题吗？

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 !

DatePicker 现在不能使用？

正在做的这个项目急需DatePicker这个组件，

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)

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 容易出错，将在未来的主要版本中删除。

const md = await import('./components/affix/index.md');

why did the above code return a new path not a compiled content string

Descriptions 使用占位样式问题

问题描述：

当Descriptions.Item 在列头部设置span为2时，样式的展示和占位并不正确。

uiwjs / uiw Goto Github PK

uiw's Introduction

uiw

Installation

Basic Usage

Documentation

Packages

Development

Contributors

License

uiw's People

Contributors

Stargazers

Watchers

Forkers

uiw's Issues

value 初始化为null 。时间获取不到无法改变input的值

Other Branches

Open

Detected dependencies

过时 API：String 类型的 Refs

关于使用废弃的 findDOMNode 方法的警告

检测过时的 context API

问题描述：

Recommend Projects

Recommend Topics

Recommend Org

`过时 API：String 类型的 Refs`

`关于使用废弃的 findDOMNode 方法的警告`

`检测过时的 context API`