Skip to content

Commit

Permalink
feat(Panel, Tree, CheckTree): add support for scrollShadow (#3818)
Browse files Browse the repository at this point in the history 
* feat(Panel): add support for scrollShadow

* feat(Panel): add support for scrollShadow

* fix: fix failed tests

* feat(Tree,CheckTree): add support for scrollShadow

* fix: fix failed tests
  • Loading branch information
@simonguo
simonguo committed May 24, 2024
1 parent f455182 commit 8183e92
Show file tree
Hide file tree
Showing 60 changed files with 1,085 additions and 407 deletions.
6 changes: 6 additions & 0 deletions docs/pages/components/check-tree/en-US/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@ The cascade attribute can set whether or not CheckTree can consider the cascade

<!--{include:`disabled.md`}-->

### Scroll Shadows

<!--{include:`scroll-shadow.md`}-->

## Accessibility

### ARIA properties
Expand Down Expand Up @@ -95,6 +99,7 @@ The cascade attribute can set whether or not CheckTree can consider the cascade
| onSelect | (item: [TreeNode][node], value:string, event) => void | Called when the tree node is selected |
| renderTreeIcon | (item: [TreeNode][node], expanded: boolean) => ReactNode | Custom render the icon in tree node |
| renderTreeNode | (item: [TreeNode][node]) => ReactNode | Custom render tree node |
| scrollShadow | boolean | The shadow of the content when scrolling<br/>![][5.62.0] |
| searchable | boolean | Whether to show the search box <br/>![][5.61.0] |
| searchKeyword | string | Set search keywords for the search box |
| uncheckableItemValues | string[] | Set the tree node values that do not display checkboxes |
Expand All @@ -114,3 +119,4 @@ The cascade attribute can set whether or not CheckTree can consider the cascade
[listprops]: #code-ts-list-props-code
[node]: #code-ts-tree-node-code
[5.61.0]: https://img.shields.io/badge/min-v5.61.0-blue
[5.62.0]: https://img.shields.io/badge/min-v5.62.0-blue
24 changes: 24 additions & 0 deletions docs/pages/components/check-tree/fragments/scroll-shadow.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!--start-code-->

```js
import { CheckTree } from 'rsuite';
import { mockTreeData } from './mock';

const data = mockTreeData({
limits: [3, 3, 4],
labels: (layer, value, faker) => {
const methodName = ['jobArea', 'jobType', 'firstName'];
return faker.person[methodName[layer]]();
}
});

const App = () => (
<>
<CheckTree data={data} defaultExpandAll scrollShadow />
</>
);

ReactDOM.render(<App />, document.getElementById('root'));
```

<!--end-code-->
2 changes: 1 addition & 1 deletion docs/pages/components/check-tree/fragments/virtualized.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const App = () => {
return (
<div>
<Panel bordered>
<CheckTree data={data} listRef={listRef} defaultExpandAll virtualized />
<CheckTree data={data} listRef={listRef} defaultExpandAll virtualized scrollShadow />
</Panel>
<hr />
<Stack spacing={6}>
Expand Down
58 changes: 32 additions & 26 deletions docs/pages/components/check-tree/zh-CN/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@

<!--{include:`disabled.md`}-->

### 滚动阴影

<!--{include:`scroll-shadow.md`}-->

## 可访问性

### ARIA 属性
Expand Down Expand Up @@ -75,32 +79,33 @@

### `<CheckTree>`

| 属性名称 | 类型 `(默认值)` | 描述 |
| ----------------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------- |
| cascade | boolean `(true)` | 是否启用级联选择 |
| childrenKey | string `('children')` | 设置树节点的子节点在 `data` 中的 `key` |
| data \* | [TreeNode][node][] | 渲染树的数据 |
| defaultExpandAll | boolean | 默认展开所有节点 |
| defaultExpandItemValues | string[] | 设置默认展开节点的值 |
| defaultValue | string[] | 默认选中的值 |
| disabledItemValues | string[] | 禁用节点列表 |
| expandItemValues | string[] | 设置展开节点的值（受控） |
| getChildren | (item: [TreeNode][node]) => Promise&lt;[TreeNode][node]&gt; | 异步加载节点数据 |
| height | number `(360px)` | 设置树的高度 |
| labelKey | string `('label')` | 设置树节点显示内容在 `data` 中的 `key` |
| listProps | [ListProps][listprops] | 虚拟化长列表的相关属性 |
| onChange | (values: string[]) => void | 值改变的回调 |
| onExpand | (expandItemValues: string[], item: [TreeNode][node], concat:(data, children) => Array) => void | 树节点展开子节点时的回调 |
| onSearch | (keyword: string) => void | 搜索回调函数 |
| onSelect | (item: [TreeNode][node],value: string, event) => void | 选择树节点后的回调函数 |
| renderTreeIcon | (item:[TreeNode][node], expanded: boolean) => ReactNode | 自定义渲染树节点图标 |
| renderTreeNode | (item: [TreeNode][node]) => ReactNode | 自定义渲染树节点 |
| searchable | boolean | 是否显示搜索框<br/>![][5.61.0] |
| searchKeyword | string | 为搜索框设置搜索关键词 |
| uncheckableItemValues | string[] | 设置不显示复选框的树节点值 |
| value | string[] | 当前选中的值 |
| valueKey | string `('value')` | 设置树节点值在 `data` 中的 `key` |
| virtualized | boolean | 是否开启虚拟列表 |
| 属性名称 | 类型 `(默认值)` | 描述 |
| ----------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------ |
| cascade | boolean `(true)` | 是否启用级联选择 |
| childrenKey | string `('children')` | 设置树节点的子节点在 `data` 中的 `key` |
| data \* | [TreeNode][node][] | 渲染树的数据 |
| defaultExpandAll | boolean | 默认展开所有节点 |
| defaultExpandItemValues | string[] | 设置默认展开节点的值 |
| defaultValue | string[] | 默认选中的值 |
| disabledItemValues | string[] | 禁用节点列表 |
| expandItemValues | string[] | 设置展开节点的值（受控） |
| getChildren | (item: [TreeNode][node]) => Promise&lt;[TreeNode][node]&gt; | 异步加载节点数据 |
| height | number `(360px)` | 设置树的高度 |
| labelKey | string `('label')` | 设置树节点显示内容在 `data` 中的 `key` |
| listProps | [ListProps][listprops] | 虚拟化长列表的相关属性 |
| onChange | (values: string[]) => void | 值改变的回调 |
| onExpand | (expandItemValues: string[], item: [TreeNode][node], concat:(data, children) => Array) => void | 树节点展开子节点时的回调 |
| onSearch | (keyword: string) => void | 搜索回调函数 |
| onSelect | (item: [TreeNode][node],value: string, event) => void | 选择树节点后的回调函数 |
| renderTreeIcon | (item:[TreeNode][node], expanded: boolean) => ReactNode | 自定义渲染树节点图标 |
| renderTreeNode | (item: [TreeNode][node]) => ReactNode | 自定义渲染树节点 |
| scrollShadow | boolean | 滚动时候显示内容区域的阴影<br/>![][5.62.0] |
| searchable | boolean | 是否显示搜索框<br/>![][5.61.0] |
| searchKeyword | string | 为搜索框设置搜索关键词 |
| uncheckableItemValues | string[] | 设置不显示复选框的树节点值 |
| value | string[] | 当前选中的值 |
| valueKey | string `('value')` | 设置树节点值在 `data` 中的 `key` |
| virtualized | boolean | 是否开启虚拟列表 |

<!--{include:(_common/types/tree-node.md)}-->
<!--{include:(_common/types/list-props.md)}-->
Expand All @@ -114,3 +119,4 @@
[listprops]: #code-ts-list-props-code
[node]: #code-ts-tree-node-code
[5.61.0]: https://img.shields.io/badge/min-v5.61.0-blue
[5.62.0]: https://img.shields.io/badge/min-v5.62.0-blue
37 changes: 22 additions & 15 deletions docs/pages/components/panel/en-US/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Panel

A content panel that supports folding panels. The Panel can have all the ' Data Display ' components and can be used as a container for the form.
A content panel that supports collapsible, shadow, and border containers.

## Import

Expand All @@ -20,6 +20,10 @@ A content panel that supports folding panels. The Panel can have all the ' Data

<!--{include:`shaded.md`}-->

### Scroll shadows

<!--{include:`scroll-shadow.md`}-->

### With action button

<!--{include:`with-action.md`}-->
Expand Down Expand Up @@ -77,25 +81,28 @@ Only one panel can be expanded.

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

| Property | Type `(Default)` | Description |
| --------------- | ------------------ | ----------------------------------------- |
| bodyFill | boolean | Content area filled with containers |
| bordered | boolean | Show border |
| classPrefix | string `('panel')` | The prefix of the component CSS class |
| collapsible | boolean | Whether it is a collapsible panel |
| defaultExpanded | boolean | Expand by default |
| eventKey | string | The event key corresponding to the panel. |
| expanded | boolean | Expand the Panel. |
| header | ReactNode | The head displays information. |
| id | string | HTML ID attribute |
| shaded | boolean | With shadow |
| Property | Type `(Default)` | Description |
| --------------- | ------------------ | -------------------------------------------------------- |
| bodyFill | boolean | Content area filled with containers |
| bordered | boolean | Show border |
| classPrefix | string `('panel')` | The prefix of the component CSS class |
| collapsible | boolean | Whether it is a collapsible panel |
| defaultExpanded | boolean | Expand by default |
| eventKey | string | The event key corresponding to the panel. |
| expanded | boolean | Expand the Panel |
| header | ReactNode | The head displays information. |
| id | string | HTML ID attribute |
| scrollShadow | boolean | The shadow of the content when scrolling<br/>![][5.62.0] |
| shaded | boolean | Add shadow effect to the border |

### `<PanelGroup>`

| Property | Type `(Default)` | Description |
| ---------------- | --------------------------------- | ------------------------------------------------------------ |
| accordion | boolean | Whether it is a collapsible panel. |
| accordion | boolean | Whether it is a collapsible panel |
| activeKey | string | Expand the Panel, corresponding to the 'Panel' of 'eventkey' |
| classPrefix | string | The prefix of the component CSS class |
| defaultActiveKey | string | The default expansion panel. |
| defaultActiveKey | string | The default expansion panel |
| onSelect | (eventKey: string, event) => void | Toggles the callback function for the expand panel |

[5.62.0]: https://img.shields.io/badge/min-v5.62.0-blue
2 changes: 1 addition & 1 deletion docs/pages/components/panel/fragments/card.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Panel } from 'rsuite';

const App = () => (
<Panel shaded bordered bodyFill style={{ display: 'inline-block', width: 240 }}>
<img src="https://via.placeholder.com/240x240" height="240" />
<img src="https://via.placeholder.com/240x180" height="180" />
<Panel header="RSUITE">
<p>
<small>
Expand Down
28 changes: 28 additions & 0 deletions docs/pages/components/panel/fragments/scroll-shadow.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!--start-code-->

```js
import { Panel, Placeholder } from 'rsuite';

const bodyProps = {
style: {
height: 300
}
};

const App = () => (
<Panel header="Scroll Shadow" scrollShadow bodyProps={bodyProps}>
<div style={{ padding: 20 }}>
<Placeholder.Paragraph rows={20} graph="image" />
<Placeholder.Paragraph rows={20} graph="image" />
<Placeholder.Paragraph rows={20} graph="image" />
<Placeholder.Paragraph rows={20} graph="image" />
<Placeholder.Paragraph rows={20} graph="image" />
<Placeholder.Paragraph rows={20} graph="image" />
</div>
</Panel>
);

ReactDOM.render(<App />, document.getElementById('root'));
```

<!--end-code-->

0 comments on commit 8183e92

Please sign in to comment.