From 9fdfd95eb161211c3642e3de0ff0dde8417ecdeb Mon Sep 17 00:00:00 2001 From: jzh <1587315093@qq.com> Date: Wed, 28 Jun 2023 15:25:11 +0800 Subject: [PATCH 1/3] =?UTF-8?q?doc:=20infinitescroll=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E8=AF=AD=E4=B9=89=E4=BF=AE=E6=94=B9&cascaderview=E9=AA=A8?= =?UTF-8?q?=E6=9E=B6=E5=B1=8Fdemo=E6=A1=88=E4=BE=8B=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/cascader-view/demos/demo1.tsx | 4 +--- src/components/cascader/cascader.tsx | 1 + src/components/infinite-scroll/index.en.md | 6 ++++-- src/components/infinite-scroll/index.zh.md | 6 ++++-- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/cascader-view/demos/demo1.tsx b/src/components/cascader-view/demos/demo1.tsx index c00d7494e2..6d128577cd 100644 --- a/src/components/cascader-view/demos/demo1.tsx +++ b/src/components/cascader-view/demos/demo1.tsx @@ -24,8 +24,6 @@ export default () => { const [value, setValue] = useState([]) const [list, setList] = useState([]) - console.log(list, 'list') - return ( <> @@ -56,7 +54,7 @@ export default () => { /> - + diff --git a/src/components/cascader/cascader.tsx b/src/components/cascader/cascader.tsx index 65e4bed8d3..3d4a8a0e49 100644 --- a/src/components/cascader/cascader.tsx +++ b/src/components/cascader/cascader.tsx @@ -40,6 +40,7 @@ export type CascaderProps = { title?: ReactNode confirmText?: ReactNode cancelText?: ReactNode + loading?: boolean children?: ( items: (CascaderOption | null)[], actions: CascaderActions diff --git a/src/components/infinite-scroll/index.en.md b/src/components/infinite-scroll/index.en.md index bca49131af..4dfe7cee0b 100644 --- a/src/components/infinite-scroll/index.en.md +++ b/src/components/infinite-scroll/index.en.md @@ -45,7 +45,7 @@ function loadMore() { // ok ### Customized Content -If necessary, `` 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. @@ -93,7 +93,9 @@ But in some scenarios (for example, when used with the `Tabs` component), you ma ``` -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. diff --git a/src/components/infinite-scroll/index.zh.md b/src/components/infinite-scroll/index.zh.md index 826240a932..47bf6d02e7 100644 --- a/src/components/infinite-scroll/index.zh.md +++ b/src/components/infinite-scroll/index.zh.md @@ -45,7 +45,7 @@ function loadMore() { // 正确 ### 自定义 Content -如果需要的话，`` 允许自定义展示内容，这个内容可以包含任何元素，包括 svg 和带有 css 动画的元素。 +如果需要的话，`InfiniteScroll` 允许自定义展示内容，这个内容可以包含任何元素，包括 svg 和带有 css 动画的元素。 @@ -93,7 +93,9 @@ InfiniteScroll 本身已经包含了防止并发的重复请求的逻辑，所 ``` -问题描述：`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` 组件并不会重新渲染，也就没有再次触发它的检查机制。 From 017bef1cbecec0ce335c3a4346dda5a0f0caf02d Mon Sep 17 00:00:00 2001 From: jzh <1587315093@qq.com> Date: Wed, 28 Jun 2023 16:27:50 +0800 Subject: [PATCH 2/3] =?UTF-8?q?doc:=20=E8=A1=A5=E5=85=85casvader=E7=9A=84l?= =?UTF-8?q?oading=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/cascader/index.en.md | 1 + src/components/cascader/index.zh.md | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/cascader/index.en.md b/src/components/cascader/index.en.md index 8a5316c754..78100ec70f 100644 --- a/src/components/cascader/index.en.md +++ b/src/components/cascader/index.en.md @@ -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. diff --git a/src/components/cascader/index.zh.md b/src/components/cascader/index.zh.md index 7e8008080d..9310cb7bd1 100644 --- a/src/components/cascader/index.zh.md +++ b/src/components/cascader/index.zh.md @@ -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 组件才能将其正确地识别。 From 8d1cf9f5d70d95c834684e29ce9bde8f0dd6003a Mon Sep 17 00:00:00 2001 From: jzh <1587315093@qq.com> Date: Thu, 29 Jun 2023 10:24:44 +0800 Subject: [PATCH 3/3] doc: update docs --- src/components/cascader-view/demos/demo1.tsx | 24 +++----------------- 1 file changed, 3 insertions(+), 21 deletions(-) diff --git a/src/components/cascader-view/demos/demo1.tsx b/src/components/cascader-view/demos/demo1.tsx index 6d128577cd..8efd9f163f 100644 --- a/src/components/cascader-view/demos/demo1.tsx +++ b/src/components/cascader-view/demos/demo1.tsx @@ -1,28 +1,11 @@ import React, { useState } from 'react' -import { CascaderView, Button } from 'antd-mobile' +import { CascaderView } from 'antd-mobile' import { DemoBlock } from 'demos' import { options, sameValueOptions } from '../../cascader/demos/data' -const list1 = [ - { - label: '西湖区', - value: '西湖区', - }, - { - label: '上城区', - value: '上城区', - }, - { - label: '余杭区', - value: '余杭区', - disabled: true, - }, -] - export default () => { const [value, setValue] = useState([]) - const [list, setList] = useState([]) return ( <> @@ -53,9 +36,8 @@ export default () => { }} /> - - - + + )