Skip to content

Commit

Permalink
refactor: part of the components reconstructed by function component (r…
Browse files Browse the repository at this point in the history 
…suite#1209)

* refactor: part of the components reconstructed by function component

* refactor: part of the components reconstructed by function component

* chore(useclassnames): update useClassNames

* refactor(form): refactored Form related components
  • Loading branch information
@simonguo
simonguo authored Aug 3, 2020
1 parent d348d79 commit cfcb6bb
Show file tree
Hide file tree
Showing 655 changed files with 5,253 additions and 6,509 deletions.
4 changes: 2 additions & 2 deletions docs/components/GlobalLoader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ export default function GlobalLoader() {
body {
overflow: hidden;
}
#nprogress .bar{
z-index: 10001
#nprogress .bar {
z-index: 10001;
}
`}</style>
<style jsx>{`
Expand Down
2 changes: 1 addition & 1 deletion docs/components/ImageToColors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ function ImageColor(img) {
this.context.drawImage(img, 0, 0);
this.accuracy = 5;
this.progress = '';
this.getColorByXY = function(x, y) {
this.getColorByXY = function (x, y) {
const imageData = this.context.getImageData(x, y, 1, 1);
const arr = imageData.data.toString().split(',');

Expand Down
2 changes: 1 addition & 1 deletion docs/components/SideNavbar/SideNavbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export default React.memo(function SideNavbar(props: SideNavbarProps) {
);
} else {
navItems.push(
<Nav.Item key={child.id} href={pathname} active={active} componentClass={Link}>
<Nav.Item key={child.id} href={pathname} active={active} as={Link}>
{child.name}
{title}
</Nav.Item>
Expand Down
13 changes: 4 additions & 9 deletions docs/components/TopLevelNav/TopLevelNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,19 @@ interface ButtonWithTooltipProps {
children: React.ReactNode;
tip: React.ReactNode;
className?: string;
componentClass?: React.ElementType;
as?: React.ElementType;
[key: string]: any;
}

function ButtonWithTooltip({
children,
componentClass = 'a',
as = 'a',
tip,
className,
...props
}: ButtonWithTooltipProps) {
const btn = (
<Button
{...props}
size="lg"
className={classNames('icon-btn-circle', className)}
componentClass={componentClass}
>
<Button {...props} size="lg" className={classNames('icon-btn-circle', className)} as={as}>
{children}
</Button>
);
Expand Down Expand Up @@ -133,7 +128,7 @@ export default function TopLevelNav(props: TopLevelNavProps) {
tip={item.tip}
key={item.key}
href={item.to}
componentClass={Link}
as={Link}
onClick={event => {
onToggleMenu(event, true);
}}
Expand Down
8 changes: 2 additions & 6 deletions docs/components/TypesDrawer/Types.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ type NotificationPlacement = 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd'

```ts
type DataItemType = {
value: string; // property value is the value of valueKey
value: string; // property value is the value of valueKey
label: React.Node; // property value is the vaue of labelKey
children?: Array<DataItemType>; // property value is the value of childrenKey
groupBy?: string;
Expand All @@ -48,11 +48,7 @@ type Range = {
#### Trigger

```js
type Trigger =
| 'click'
| 'hover'
| 'contextMenu'
| Array<'click' | 'hover' | 'contextMenu'>;
type Trigger = 'click' | 'hover' | 'contextMenu' | Array<'click' | 'hover' | 'contextMenu'>;
```

#### FileType
Expand Down
2 changes: 2 additions & 0 deletions docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,13 @@
"isomorphic-fetch": "^2.2.1",
"loadsh": "0.0.4",
"nprogress": "^0.2.0",
"react": "^16.13.1",
"react-code-view": "^1.2.5",
"react-color": "^2.18.0",
"react-device-detect": "^1.11.14",
"react-dnd": "^10.0.2",
"react-dnd-html5-backend": "^10.0.2",
"react-dom": "^16.13.1",
"react-json-tree": "^0.11.2",
"react-loadable": "^5.5.0",
"react-text-mask": "^5.4.3",
Expand Down
8 changes: 5 additions & 3 deletions docs/pages/components/auto-complete/en-US/email.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,11 @@ class CustomizedAutoComplete extends React.Component {
handleChange(value) {
const at = value.match(/@[\S]*/);
const nextData = at
? data.filter(item => item.indexOf(at[0]) >= 0).map(item => {
return `${value}${item.replace(at[0], '')}`;
})
? data
.filter(item => item.indexOf(at[0]) >= 0)
.map(item => {
return `${value}${item.replace(at[0], '')}`;
})
: data.map(item => `${value}${item}`);

this.setState({
Expand Down
47 changes: 25 additions & 22 deletions docs/pages/components/auto-complete/en-US/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@

Autocomplete function of input field.

## Usage
## Import

```js
import { AutoComplete } from 'rsuite';

// or
import AutoComplete from 'rsuite/lib/AutoComplete';
```

## Examples
Expand All @@ -16,24 +19,24 @@ import { AutoComplete } from 'rsuite';

### `<AutoComplete>`

| Property | Type`(Default)` | Description |
| ------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------- |
| classPrefix | string `('auto-complete')` | The prefix of the component CSS class |
| data \* | string[], Array&lt;[DataItemType](#types)&gt; | The data of component |
| defaultValue | string | Default value |
| disabled | boolean | Whether disabled select |
| filterBy | (value: string, item: [DataItemType](#types)) => boolean | Custom filter rules (will only display items that value is a substring of which by default)|
| menuClassName | string | A css class to apply to the Menu DOM |
| onChange | (value:string, event) => void | Called when select an option or input value change, or value of input is changed |
| onClose | () => void | Callback fired when hidden |
| onEnter | () => void | Callback fired before the overlay transitions in |
| onEntered | () => void | Callback fired after the overlay finishes transitioning in |
| onEntering | () => void | Callback fired as the overlay begins to transition in |
| onExit | () => void | Callback fired right before the overlay transitions out |
| onExited | () => void | Callback fired after the overlay finishes transitioning out |
| onExiting | () => void | Callback fired as the overlay begins to transition out |
| onSelect | (item: DataItemType, event) => void | Called when a option is selected. |
| placeholder | React.Node | The placeholder of input |
| renderItem | (label:React.Node, item: DataItemType) => React.Node | Custom selected option |
| selectOnEnter | boolean `(true)` | When set to `false`, the Enter key selection function is invalid |
| value | string | Value (Controlled) |
| Property | Type`(Default)` | Description |
| ------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| classPrefix | string `('auto-complete')` | The prefix of the component CSS class |
| data \* | string[], Array&lt;[DataItemType](#types)&gt; | The data of component |
| defaultValue | string | Default value |
| disabled | boolean | Whether disabled select |
| filterBy | (value: string, item: [DataItemType](#types)) => boolean | Custom filter rules (will only display items that value is a substring of which by default) |
| menuClassName | string | A css class to apply to the Menu DOM |
| onChange | (value:string, event) => void | Called when select an option or input value change, or value of input is changed |
| onClose | () => void | Callback fired when hidden |
| onEnter | () => void | Callback fired before the overlay transitions in |
| onEntered | () => void | Callback fired after the overlay finishes transitioning in |
| onEntering | () => void | Callback fired as the overlay begins to transition in |
| onExit | () => void | Callback fired right before the overlay transitions out |
| onExited | () => void | Callback fired after the overlay finishes transitioning out |
| onExiting | () => void | Callback fired as the overlay begins to transition out |
| onSelect | (item: DataItemType, event) => void | Called when a option is selected. |
| placeholder | React.Node | The placeholder of input |
| renderItem | (label:React.Node, item: DataItemType) => React.Node | Custom selected option |
| selectOnEnter | boolean `(true)` | When set to `false`, the Enter key selection function is invalid |
| value | string | Value (Controlled) |
8 changes: 5 additions & 3 deletions docs/pages/components/auto-complete/zh-CN/email.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,11 @@ class CustomizedAutoComplete extends React.Component {
handleChange(value) {
const at = value.match(/@[\S]*/);
const nextData = at
? data.filter(item => item.indexOf(at[0]) >= 0).map(item => {
return `${value}${item.replace(at[0], '')}`;
})
? data
.filter(item => item.indexOf(at[0]) >= 0)
.map(item => {
return `${value}${item.replace(at[0], '')}`;
})
: data.map(item => `${value}${item}`);

this.setState({
Expand Down
45 changes: 24 additions & 21 deletions docs/pages/components/auto-complete/zh-CN/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@

```js
import { AutoComplete } from 'rsuite';

// or
import AutoComplete from 'rsuite/lib/AutoComplete';
```

## 演示
Expand All @@ -16,24 +19,24 @@ import { AutoComplete } from 'rsuite';

### `<AutoComplete>`

| 属性名称 | 类型`(默认值)` | 描述 |
| ------------- | -------------------------------------------------------------- | --------------------------------------- |
| classPrefix | string `('auto-complete')` | 组件 CSS 类的前缀 |
| data \* | string[], Array&lt;[DataItemType](#types)&gt; | 组件数据 |
| defaultValue | string | 设置默认值 `非受控` |
| disabled | boolean | 禁用组件 |
| filterBy | (value: string, item: [DataItemType](#types)) => boolean | 自定义每个item是否显示（默认只会显示data中value是它的子字符串的项）|
| menuClassName | string | 选项菜单的 className |
| onChange | (value:string, event) => void | `value` 发生改变时的回调函数 |
| onClose | () => void | 隐藏时的回调函数 |
| onEnter | () => void | 显示前动画过渡的回调函数 |
| onEntered | () => void | 显示后动画过渡的回调函数 |
| onEntering | () => void | 显示中动画过渡的回调函数 |
| onExit | () => void | 退出前动画过渡的回调函数 |
| onExited | () => void | 退出后动画过渡的回调函数 |
| onExiting | () => void | 退出中动画过渡的回调函数 |
| onSelect | (item:[DataItemType](#types), event) => void | 选项被点击选择后的回调函数 |
| placeholder | React.Node | 占位符 |
| renderItem | (label:React.Node, item: [DataItemType](#types)) => React.Node | 自定义被选中的选项 |
| selectOnEnter | boolean `(true)` | 当设为 `false` 时，回车键不能作选值操作 |
| value | string | 设置值 `受控` |
| 属性名称 | 类型`(默认值)` | 描述 |
| ------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------- |
| classPrefix | string `('auto-complete')` | 组件 CSS 类的前缀 |
| data \* | string[], Array&lt;[DataItemType](#types)&gt; | 组件数据 |
| defaultValue | string | 设置默认值 `非受控` |
| disabled | boolean | 禁用组件 |
| filterBy | (value: string, item: [DataItemType](#types)) => boolean | 自定义每个 item 是否显示（默认只会显示 data 中 value 是它的子字符串的项） |
| menuClassName | string | 选项菜单的 className |
| onChange | (value:string, event) => void | `value` 发生改变时的回调函数 |
| onClose | () => void | 隐藏时的回调函数 |
| onEnter | () => void | 显示前动画过渡的回调函数 |
| onEntered | () => void | 显示后动画过渡的回调函数 |
| onEntering | () => void | 显示中动画过渡的回调函数 |
| onExit | () => void | 退出前动画过渡的回调函数 |
| onExited | () => void | 退出后动画过渡的回调函数 |
| onExiting | () => void | 退出中动画过渡的回调函数 |
| onSelect | (item:[DataItemType](#types), event) => void | 选项被点击选择后的回调函数 |
| placeholder | React.Node | 占位符 |
| renderItem | (label:React.Node, item: [DataItemType](#types)) => React.Node | 自定义被选中的选项 |
| selectOnEnter | boolean `(true)` | 当设为 `false` 时，回车键不能作选值操作 |
| value | string | 设置值 `受控` |
5 changes: 1 addition & 4 deletions docs/pages/components/avatar/en-US/image.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,7 @@ const instance = (
<div className="avatar-group">
<Avatar src="https://404.error" alt="RS" />
<Avatar src="https://avatars2.githubusercontent.com/u/12592949?s=460&v=4" />
<Avatar
circle
src="https://avatars2.githubusercontent.com/u/12592949?s=460&v=4"
/>
<Avatar circle src="https://avatars2.githubusercontent.com/u/12592949?s=460&v=4" />
</div>
);

Expand Down
Loading

0 comments on commit cfcb6bb

Please sign in to comment.