Skip to content

Commit

Permalink
feat: add loading prop for all pickers (#3444)
Browse files Browse the repository at this point in the history
  • Loading branch information
@simonguo
simonguo committed Nov 10, 2023
1 parent ae00f90 commit 3c5b2af
Show file tree
Hide file tree
Showing 40 changed files with 309 additions and 41 deletions.
5 changes: 4 additions & 1 deletion docs/pages/components/cascader/en-US/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,13 @@ Learn more in [Accessibility](/guide/accessibility).

### `<Cascader>`

<!-- prettier-sort-markdown-table -->

| Property | Type`(Default)` | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| appearance | 'default' &#124; 'subtle' `('default')` | Set picker appearence |
| block | boolean | Blocking an entire row |
| caretAs | ElementType | Custom component for the caret icon |
| childrenKey | string `('children')` | Set children key in data |
| classPrefix | string `('picker')` | The prefix of the component CSS class |
| cleanable | boolean `(true)` | Whether the selected value can be cleared |
Expand All @@ -84,6 +87,7 @@ Learn more in [Accessibility](/guide/accessibility).
| height | number `(320)` | The height of Dropdown |
| inline | boolean | The menu is displayed directly when the component is initialized |
| labelKey | string `('label')` | Set label key in data |
| loading | boolean `(false)` | Whether to display a loading state indicator |
| locale | [PickerLocaleType](/guide/i18n/#pickers) | Locale text |
| menuHeight | number | Sets the height of the menu |
| menuWidth | number | Sets the width of the menu |
Expand Down Expand Up @@ -114,7 +118,6 @@ Learn more in [Accessibility](/guide/accessibility).
| toggleAs | ElementType `('a')` | You can use a custom element for this component |
| value | string | Specifies the values of the selected items(Controlled) |
| valueKey | string `('value')` | Set value key in data |
| caretAs | ElementType | Custom component for the caret icon |

<!--{include:(_common/types/item-data-type.md)}-->
<!--{include:(_common/types/placement-start.md)}-->
Expand Down
5 changes: 4 additions & 1 deletion docs/pages/components/cascader/zh-CN/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,13 @@

### `<Cascader>`

<!-- prettier-sort-markdown-table -->

| 属性名称 | 类型`(默认值)` | 描述 |
| ------------------ | --------------------------------------------------------------------------------------------- | ------------------------------------ |
| appearance | 'default' &#124; 'subtle' `('default')` | 设置外观 |
| block | boolean | 堵塞整行 |
| caretAs | ElementType | 自定义右侧箭头图标的组件 |
| childrenKey | string `('children')` | 设置选项子节点在 `data` 中的 `key` |
| classPrefix | string `('picker')` | 组件 CSS 类的前缀 |
| cleanable | boolean `(true)` | 可以清除 |
Expand All @@ -84,6 +87,7 @@
| height | number `(320)` | 设置 Dropdown 的高度 |
| inline | boolean | 在组件初始后直接展示菜单 |
| labelKey | string `('label')` | 设置选项显示内容在 `data` 中的 `key` |
| loading | boolean `(false)` | 是否显示一个加载中状态指示器 |
| locale | [PickerLocaleType](/zh/guide/i18n/#pickers) | 本地化的文本 |
| menuClassName | string | 选项菜单的 className |
| menuHeight | number | 设置菜单的高度 |
Expand Down Expand Up @@ -115,7 +119,6 @@
| toggleAs | ElementType `('a')` | 为组件自定义元素类型 |
| value | string | 设置值（受控） |
| valueKey | string `('value')` | 设置选项值在 `data` 中的 `key` |
| caretAs | ElementType | 自定义右侧箭头图标的组件 |

<!--{include:(_common/types/item-data-type.md)}-->
<!--{include:(_common/types/placement-start.md)}-->
Expand Down
8 changes: 5 additions & 3 deletions docs/pages/components/check-picker/en-US/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,13 @@ Learn more in [Accessibility](/guide/accessibility).

### `<CheckPicker>`

<!-- prettier-sort-markdown-table -->

| Property | Type`(Default)` | Description |
| ------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| appearance | 'default' &#124; 'subtle' `('default')` | Set picker appearence |
| block | boolean | Blocking an entire row |
| caretAs | ElementType | Custom component for the caret icon |
| classPrefix | string `('picker')` | The prefix of the component CSS class |
| cleanable | boolean `(true)` | Whether the selected value can be cleared |
| container | HTMLElement &#124; (() => HTMLElement) | Sets the rendering container |
Expand All @@ -111,8 +114,8 @@ Learn more in [Accessibility](/guide/accessibility).
| listProps | [ListProps][listprops] | Properties of virtualized lists |
| loading | boolean `(false)` | Whether to display a loading state indicator |
| locale | [PickerLocaleType](/guide/i18n/#pickers) | Locale text |
| menuMaxHeight | number `(320)` | The max height of Dropdown |
| menuClassName | string | A css class to apply to the Menu DOM node. |
| menuMaxHeight | number `(320)` | The max height of Dropdown |
| menuStyle | CSSProperties | A style to apply to the Menu DOM node. |
| onChange | (value: [ValueType][value], event) => void | Callback fired when value change |
| onClean | (event:SyntheticEvent) => void | Callback fired when value clean |
Expand All @@ -136,16 +139,15 @@ Learn more in [Accessibility](/guide/accessibility).
| renderMenuGroup | (groupTitle:ReactNode, item:[ItemDataType][item]) => ReactNode | Custom render menu group |
| renderMenuItem | (label:ReactNode, item: [ItemDataType][item]) => ReactNode | Custom render menu items |
| renderValue | (value: [ValueType][value], items: [ItemDataType][item][], selectedElement:ReactNode) => ReactNode | Custom render selected items |
| searchBy | (keyword: string, label: ReactNode, item: ItemDataType) => boolean | Custom search rules |
| searchable | boolean `(true)` | Whether dispaly search input box |
| searchBy | (keyword: string, label: ReactNode, item: ItemDataType) => boolean | Custom search rules |
| size | 'lg' &#124; 'md' &#124; 'sm' &#124; 'xs' `('md')` | A picker can have different sizes |
| sort | (isGroup: boolean) => (a: any, b: any) => number | Sort options |
| sticky | boolean | Top the selected option in the options |
| toggleAs | ElementType `('a')` | You can use a custom element for this component |
| value | [ValueType][value] | Specifies the values of the selected items (Controlled) |
| valueKey | string `('value')` | Set value key in data |
| virtualized | boolean | Whether using Virtualized List |
| caretAs | ElementType | Custom component for the caret icon |

<!--{include:(_common/types/item-data-type.md)}-->
<!--{include:(_common/types/placement.md)}-->
Expand Down
10 changes: 6 additions & 4 deletions docs/pages/components/check-picker/zh-CN/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,13 @@

### `<CheckPicker>`

<!-- prettier-sort-markdown-table -->

| 属性名称 | 类型`(默认值)` | 描述 |
| ------------------ | --------------------------------------------------------------------------------- | ------------------------------------ |
| appearance | 'default' &#124; 'subtle' `('default')` | 设置外观 |
| block | boolean | 堵塞整行 |
| caretAs | ElementType | 自定义右侧箭头图标的组件 |
| classPrefix | string `('picker')` | 组件 CSS 类的前缀 |
| cleanable | boolean `(true)` | 可以清除 |
| container | HTMLElement &#124; (() => HTMLElement) | 设置渲染的容器 |
Expand All @@ -109,10 +112,10 @@
| label | ReactNode | 在按钮开头显示的标签 |
| labelKey | string `('label')` | 设置选项显示内容在 `data` 中的 `key` |
| listProps | [ListProps][listprops] | 虚拟化长列表的相关属性 |
| loading | boolean `(false)` | 是否显示一个加载中状态指示器 |
| loading | boolean `(false)` | 是否显示一个加载中状态指示器 |
| locale | [PickerLocaleType](/zh/guide/i18n/#pickers) | 本地化的文本 |
| menuMaxHeight | number `(320)` | 设置 Dropdown 的最大高度 |
| menuClassName | string | 应用于菜单 DOM 节点的 css class |
| menuMaxHeight | number `(320)` | 设置 Dropdown 的最大高度 |
| menuStyle | CSSProperties | 应用于菜单 DOM 节点的 style |
| onChange | (value: [ValueType][value] , event) => void | `value` 发生改变时的回调函数 |
| onClean | (event:SyntheticEvent) => void | 值清理时触发回调 |
Expand All @@ -136,16 +139,15 @@
| renderMenuGroup | (groupTitle:ReactNode, item: [ItemDataType][item]) => ReactNode | 自定义选项组 |
| renderMenuItem | (label:ReactNode, item: [ItemDataType][item]) => ReactNode | 自定义选项 |
| renderValue | (value: [ValueType][value] , items: any[],selectedElement:ReactNode) => ReactNode | 自定义被选中的选项 |
| searchBy | (keyword: string, label: ReactNode, item: [ItemDataType][item]) => boolean | 自定义搜索规则 |
| searchable | boolean `(true)` | 可以搜索 |
| searchBy | (keyword: string, label: ReactNode, item: [ItemDataType][item]) => boolean | 自定义搜索规则 |
| size | 'lg' &#124; 'md' &#124; 'sm' &#124; 'xs' `('md')` | 设置组件尺寸 |
| sort | (isGroup: boolean) => (a: any, b: any) => number | 对选项排序 |
| sticky | boolean | 把选项中已选择的选项置顶在最前面 |
| toggleAs | ElementType `('a')` | 为组件自定义元素类型 |
| value | [ValueType][value] | 设置值 `受控` |
| valueKey | string `('value')` | 设置选项值在 `data` 中的 `key` |
| virtualized | boolean | 是否开启虚拟列表 |
| caretAs | ElementType | 自定义右侧箭头图标的组件 |

<!--{include:(_common/types/item-data-type.md)}-->
<!--{include:(_common/types/placement.md)}-->
Expand Down

1 comment on commit 3c5b2af

@vercel
Copy link

@vercel vercel bot commented on 3c5b2af Nov 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

rsuite-nextjs – ./docs

rsuite.vercel.app
rsuite-nextjs-rsuite.vercel.app
rsuitejs.com
rsuite-nextjs-git-main-rsuite.vercel.app

Please sign in to comment.