Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

doc: update Cascader&Cascaderview&Infinitescroll docs #6225

Merged
merged 3 commits into from
Jun 29, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions src/components/cascader-view/demos/demo1.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@ export default () => {
const [value, setValue] = useState<string[]>([])
const [list, setList] = useState<any[]>([])

console.log(list, 'list')

return (
<>
<DemoBlock title='基础用法' padding='0'>
Expand Down Expand Up @@ -56,7 +54,7 @@ export default () => {
/>
</DemoBlock>
<DemoBlock title='开启loding并且options为空时会开启骨架屏' padding='0'>
<CascaderView options={list} loading />
<CascaderView options={list} loading={!list.length} />
1587315093 marked this conversation as resolved.
Show resolved Hide resolved
<Button onClick={() => setList(list1)}>push数据</Button>
</DemoBlock>
</>
Expand Down
1 change: 1 addition & 0 deletions src/components/cascader/cascader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export type CascaderProps = {
title?: ReactNode
confirmText?: ReactNode
cancelText?: ReactNode
loading?: boolean
children?: (
items: (CascaderOption | null)[],
actions: CascaderActions
Expand Down
1 change: 1 addition & 0 deletions src/components/cascader/index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ type CascaderValueExtend = {
| title | Title | `ReactNode` | - |
| value | Selected options | `CascaderValue[]` | - |
| visible | Whether to show or hide the Picker | `boolean` | `false` |
| loading | Open the skeleton screen | `boolean` | `false` |

Please pay attention to the `children` property of `CascaderOption`. If the `children` of an `option` is `[]`, then when the user selects this `option`, the Cascader component will automatically jump to the next level, even if There are currently no options at this level (because Cascader has no way to determine whether this empty array will become an array with content in subsequent updates). Therefore, please make sure that the `children` property of the last level option (aka "leaf node") does not exist or has the value `undefined`, so that the Cascader component can correctly recognize it.

Expand Down
1 change: 1 addition & 0 deletions src/components/cascader/index.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ type CascaderValueExtend = {
| title | 标题 | `ReactNode` | - |
| value | 选中项 | `CascaderValue[]` | - |
| visible | 是否显示级联选择 | `boolean` | `false` |
| loading | 开启骨架屏 | `boolean` | `false` |

请留意 `CascaderOption` 的 `children` 属性,如果某个 `option` 的 `children` 为 `[]`,那当用户选择了这个 `option` 时,Cascader 组件会自动跳转到下一级,即便这一级当前是没有任何选项的(因为 Cascader 没有办法判断,在后续的更新中,这个空数组会不会变为一个有内容的数组)。因此,请确保最末一级的 option(也就是"叶子节点")的 `children` 属性不存在或者值为 `undefined`,这样 Cascader 组件才能将其正确地识别。

Expand Down
6 changes: 4 additions & 2 deletions src/components/infinite-scroll/index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function loadMore() { // ok

### Customized Content

If necessary, `<InfiniteScroll>` allows custom display content, this content can contain any element, including svg and elements with css animation.
If necessary, `InfiniteScroll` allows custom display content, this content can contain any element, including svg and elements with css animation.

<code src="./demos/content.tsx"></code>

Expand Down Expand Up @@ -93,7 +93,9 @@ But in some scenarios (for example, when used with the `Tabs` component), you ma
</Tabs>
```

Problem description: The `Tabs` component displays the content of the first `Tab` item by default, so the content of the second `Tab` item `InfiniteScroll` is not visible. But the second `Tab` has a `forceRender` property added, so its content is rendered even if it is not visible. When the `InfiniteScroll` component is rendered this time, since the component is not visible, the `loadMore` function will not be called, which is normal and as expected. _However, when we switch to the second `Tab` to display the `InfiniteScroll` component, we find that the `InfiniteScroll` component does not call the `loadMore` function, which is different from what we expected. We hope that the `loadMore` function will be called at this time_.
Problem description: The `Tabs` component displays the content of the first `Tab` item by default, so the content of the second `Tab` item `InfiniteScroll` is not visible. But the second `Tab` has a `forceRender` property added, so its content is rendered even if it is not visible. When the `InfiniteScroll` component is rendered this time, since the component is not visible, the `loadMore` function will not be called, which is normal and as expected.

_However, when we switch to the second `Tab` to display the `InfiniteScroll` component, we find that the `InfiniteScroll` component does not call the `loadMore` function, which is different from what we expected. We hope that the `loadMore` function will be called at this time_.

Reason: When you click to switch the `Tab` item of the `Tabs` component, the highlight state of the `Tabs` component will be modified. At this time, the `Tabs` component will be re-rendered. However, it should be noted that **only the content of the `Tabs` component itself will be re-rendered, and the `InfiniteScroll` component is outside the `Tabs` component, not the `Tabs` component's own content**. So, when switching `Tab`, the `InfiniteScroll` component does not re-render, and it does not trigger its checking mechanism again.

Expand Down
6 changes: 4 additions & 2 deletions src/components/infinite-scroll/index.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function loadMore() { // 正确

### 自定义 Content

如果需要的话,`<InfiniteScroll>` 允许自定义展示内容,这个内容可以包含任何元素,包括 svg 和带有 css 动画的元素。
如果需要的话,`InfiniteScroll` 允许自定义展示内容,这个内容可以包含任何元素,包括 svg 和带有 css 动画的元素。

<code src="./demos/content.tsx"></code>

Expand Down Expand Up @@ -93,7 +93,9 @@ InfiniteScroll 本身已经包含了防止并发的重复请求的逻辑,所
</Tabs>
```

问题描述:`Tabs` 组件默认展示第一个 `Tab` 项的内容,所以,第二个 `Tab` 项的内容 `InfiniteScroll` 是不可见的。但第二个 `Tab` 添加了 `forceRender` 属性,所以即使不可见,其内容也会渲染。本次渲染 `InfiniteScroll`组件时,由于该组件不可见,所以,不会调用 `loadMore` 函数,这是正常的,跟我们的预期相同。_但是,当我们切换到第二个 `Tab` 展示 `InfiniteScroll` 组件时,发现 `InfiniteScroll` 组件并没有调用 `loadMore` 函数,这一点跟我们预期不同,我们希望此时 `loadMore` 函数被调用_。
问题描述:`Tabs` 组件默认展示第一个 `Tab` 项的内容,所以,第二个 `Tab` 项的内容 `InfiniteScroll` 是不可见的。但第二个 `Tab` 添加了 `forceRender` 属性,所以即使不可见,其内容也会渲染。本次渲染 `InfiniteScroll`组件时,由于该组件不可见,所以,不会调用 `loadMore` 函数,这是正常的,跟我们的预期相同。

_但是,当我们切换到第二个 `Tab` 展示 `InfiniteScroll` 组件时,发现 `InfiniteScroll` 组件并没有调用 `loadMore` 函数,这一点跟我们预期不同,我们希望此时 `loadMore` 函数被调用_。

原因说明:点击切换 `Tabs` 组件的 `Tab` 项时,会修改 `Tabs` 组件的高亮状态,此时,`Tabs` 组件会重新渲染。但是,要注意的是**只有在 `Tabs` 组件自身的内容才会被重新渲染,而 `InfiniteScroll` 组件是在 `Tabs` 组件外部的,并非 `Tabs` 组件自身内容**。所以,切换 `Tab` 时,`InfiniteScroll` 组件并不会重新渲染,也就没有再次触发它的检查机制。

Expand Down