From f28a6fbe320e61ada8319b107cc28823e4e6feb4 Mon Sep 17 00:00:00 2001 From: lihongxiang Date: Wed, 10 Jul 2024 15:29:42 +0800 Subject: [PATCH 1/9] feat: Cascader.Panel support default expand cells --- examples/panel.tsx | 1 + src/Cascader.tsx | 2 ++ src/OptionList/List.tsx | 7 ++++++- src/Panel.tsx | 5 ++++- 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/examples/panel.tsx b/examples/panel.tsx index c0c51353..35a93e1a 100644 --- a/examples/panel.tsx +++ b/examples/panel.tsx @@ -99,6 +99,7 @@ export default () => { setValue2(nextValue); }} disabled={disabled} + defaultActiveValueCells={value} /> diff --git a/src/Cascader.tsx b/src/Cascader.tsx index c746af10..cf895819 100644 --- a/src/Cascader.tsx +++ b/src/Cascader.tsx @@ -159,6 +159,7 @@ export interface CascaderProps< value: GetValueType, selectOptions: OptionType[], ) => void; + defaultActiveValueCells?: React.Key[]; } export type SingleValueType = (string | number)[]; @@ -175,6 +176,7 @@ export type InternalCascaderProps = Omit void; + defaultActiveValueCells?: React.Key[]; }; export type CascaderRef = Omit; diff --git a/src/OptionList/List.tsx b/src/OptionList/List.tsx index d495af23..f1165726 100644 --- a/src/OptionList/List.tsx +++ b/src/OptionList/List.tsx @@ -29,7 +29,7 @@ export type RawOptionListProps = Pick< | 'direction' | 'open' | 'disabled' ->; +> & { defaultActiveValueCells?: React.Key[]; }; const RawOptionList = React.forwardRef((props, ref) => { const { @@ -41,6 +41,7 @@ const RawOptionList = React.forwardRef(( direction, open, disabled, + defaultActiveValueCells, } = props; const containerRef = React.useRef(null); @@ -115,6 +116,10 @@ const RawOptionList = React.forwardRef(( internalLoadData(nextValueCells); }; + React.useEffect(() => { + setActiveValueCells(defaultActiveValueCells ?? []) + }, [defaultActiveValueCells, setActiveValueCells]); + const isSelectable = (option: DefaultOptionType) => { if (disabled) { return false; diff --git a/src/Panel.tsx b/src/Panel.tsx index 15e36b83..29df84d0 100644 --- a/src/Panel.tsx +++ b/src/Panel.tsx @@ -36,7 +36,8 @@ export type PickType = | 'style' | 'direction' | 'notFoundContent' - | 'disabled'; + | 'disabled' + | 'defaultActiveValueCells'; export type PanelProps< OptionType extends DefaultOptionType = DefaultOptionType, @@ -70,6 +71,7 @@ export default function Panel< direction, notFoundContent = 'Not Found', disabled, + defaultActiveValueCells } = props as Pick; // ======================== Multiple ======================== @@ -203,6 +205,7 @@ export default function Panel< open direction={direction} disabled={disabled} + defaultActiveValueCells={defaultActiveValueCells} /> )} From 18dd680344cdf81fe4e742b2107b06473bb73a4a Mon Sep 17 00:00:00 2001 From: lihongxiang Date: Wed, 10 Jul 2024 19:10:39 +0800 Subject: [PATCH 2/9] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DPanel=20=E5=8D=95?= =?UTF-8?q?=E6=B5=8B=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/OptionList/List.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/OptionList/List.tsx b/src/OptionList/List.tsx index f1165726..cb446127 100644 --- a/src/OptionList/List.tsx +++ b/src/OptionList/List.tsx @@ -117,7 +117,9 @@ const RawOptionList = React.forwardRef(( }; React.useEffect(() => { - setActiveValueCells(defaultActiveValueCells ?? []) + if (defaultActiveValueCells) { + setActiveValueCells(defaultActiveValueCells) + } }, [defaultActiveValueCells, setActiveValueCells]); const isSelectable = (option: DefaultOptionType) => { From ae7f322c4505a9f9fcc9a04150f06125d66433de Mon Sep 17 00:00:00 2001 From: lihongxiang Date: Thu, 11 Jul 2024 10:23:03 +0800 Subject: [PATCH 3/9] refactor: panel demo support defaultActiveValueCells --- examples/panel.tsx | 4 +++- src/OptionList/List.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/panel.tsx b/examples/panel.tsx index 35a93e1a..b0f09489 100644 --- a/examples/panel.tsx +++ b/examples/panel.tsx @@ -62,6 +62,7 @@ export default () => { const [value2, setValue2] = React.useState([]); const [disabled, setDisabled] = React.useState(false); + const [defaultActiveValueCells, setDefaultActiveValueCells] = React.useState([]); return ( <> @@ -69,6 +70,7 @@ export default () => { Date: Fri, 25 Oct 2024 16:34:03 +0800 Subject: [PATCH 7/9] =?UTF-8?q?refactor:=20Panel=20=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E5=B1=95=E5=BC=80=E5=B1=9E=E6=80=A7=E9=87=8D=E5=91=BD=E5=90=8D?= =?UTF-8?q?=20&=20=E7=A7=BB=E9=99=A4=E5=9C=A8effect=E4=B8=AD=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=20defaultActiveKey?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/panel.tsx | 10 +--------- src/Panel.tsx | 4 ++-- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/examples/panel.tsx b/examples/panel.tsx index 9f611b45..1bfb2417 100644 --- a/examples/panel.tsx +++ b/examples/panel.tsx @@ -62,7 +62,6 @@ export default () => { const [value2, setValue2] = React.useState([]); const [disabled, setDisabled] = React.useState(false); - const [defaultActiveValueCells, setDefaultActiveValueCells] = React.useState([]); return ( <> @@ -91,13 +90,6 @@ export default () => { disabled={disabled} /> - { setValue2(nextValue); }} disabled={disabled} - defaultActiveValueCells={defaultActiveValueCells} + defaultActiveKey={['bj', 'haidian']} /> diff --git a/src/Panel.tsx b/src/Panel.tsx index 29df84d0..279f2510 100644 --- a/src/Panel.tsx +++ b/src/Panel.tsx @@ -37,7 +37,7 @@ export type PickType = | 'direction' | 'notFoundContent' | 'disabled' - | 'defaultActiveValueCells'; + | 'defaultActiveKey'; export type PanelProps< OptionType extends DefaultOptionType = DefaultOptionType, @@ -205,7 +205,7 @@ export default function Panel< open direction={direction} disabled={disabled} - defaultActiveValueCells={defaultActiveValueCells} + defaultActiveKey={defaultActiveKey} /> )} From a29a6e4b91ecc21a3d52ba6a9a2710661b91b62d Mon Sep 17 00:00:00 2001 From: lihongxiang Date: Tue, 19 Nov 2024 15:40:15 +0800 Subject: [PATCH 8/9] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4defaultActiveKey?= =?UTF-8?q?=E5=A4=9A=E4=BD=99=E5=A3=B0=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/panel.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/panel.tsx b/examples/panel.tsx index 1bfb2417..c0c51353 100644 --- a/examples/panel.tsx +++ b/examples/panel.tsx @@ -99,7 +99,6 @@ export default () => { setValue2(nextValue); }} disabled={disabled} - defaultActiveKey={['bj', 'haidian']} /> From 173d4de85ae5fd4b238e0595510c3c5e1659b77e Mon Sep 17 00:00:00 2001 From: lihongxiang Date: Tue, 19 Nov 2024 15:50:42 +0800 Subject: [PATCH 9/9] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E9=87=8D=E5=A4=8D?= =?UTF-8?q?=E5=A3=B0=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/panel.tsx | 1 + src/Cascader.tsx | 4 ++-- src/OptionList/List.tsx | 12 +++--------- src/OptionList/useActive.ts | 3 ++- src/Panel.tsx | 2 +- tests/Panel.spec.tsx | 4 ++-- tests/selector.spec.tsx | 4 ++-- 7 files changed, 13 insertions(+), 17 deletions(-) diff --git a/examples/panel.tsx b/examples/panel.tsx index c0c51353..1bfb2417 100644 --- a/examples/panel.tsx +++ b/examples/panel.tsx @@ -99,6 +99,7 @@ export default () => { setValue2(nextValue); }} disabled={disabled} + defaultActiveKey={['bj', 'haidian']} /> diff --git a/src/Cascader.tsx b/src/Cascader.tsx index cf895819..5a66dee1 100644 --- a/src/Cascader.tsx +++ b/src/Cascader.tsx @@ -159,7 +159,7 @@ export interface CascaderProps< value: GetValueType, selectOptions: OptionType[], ) => void; - defaultActiveValueCells?: React.Key[]; + defaultActiveKey?: React.Key[]; } export type SingleValueType = (string | number)[]; @@ -176,7 +176,7 @@ export type InternalCascaderProps = Omit void; - defaultActiveValueCells?: React.Key[]; + defaultActiveKey?: React.Key[]; }; export type CascaderRef = Omit; diff --git a/src/OptionList/List.tsx b/src/OptionList/List.tsx index 3c63432b..e4f21ba5 100644 --- a/src/OptionList/List.tsx +++ b/src/OptionList/List.tsx @@ -29,7 +29,7 @@ export type RawOptionListProps = Pick< | 'direction' | 'open' | 'disabled' -> & { defaultActiveValueCells?: React.Key[]; }; +> & { defaultActiveKey?: React.Key[]; }; const RawOptionList = React.forwardRef((props, ref) => { const { @@ -41,7 +41,7 @@ const RawOptionList = React.forwardRef(( direction, open, disabled, - defaultActiveValueCells, + defaultActiveKey, } = props; const containerRef = React.useRef(null); @@ -106,7 +106,7 @@ const RawOptionList = React.forwardRef(( const halfCheckedSet = React.useMemo(() => new Set(toPathKeys(halfValues)), [halfValues]); // ====================== Accessibility ======================= - const [activeValueCells, setActiveValueCells] = useActive(multiple, open); + const [activeValueCells, setActiveValueCells] = useActive(multiple, open, defaultActiveKey); // =========================== Path =========================== const onPathOpen = (nextValueCells: React.Key[]) => { @@ -116,12 +116,6 @@ const RawOptionList = React.forwardRef(( internalLoadData(nextValueCells); }; - React.useEffect(() => { - if (defaultActiveValueCells && defaultActiveValueCells?.length > 0) { - setActiveValueCells(defaultActiveValueCells) - } - }, [defaultActiveValueCells]); - const isSelectable = (option: DefaultOptionType) => { if (disabled) { return false; diff --git a/src/OptionList/useActive.ts b/src/OptionList/useActive.ts index ca0519ec..513464f3 100644 --- a/src/OptionList/useActive.ts +++ b/src/OptionList/useActive.ts @@ -7,6 +7,7 @@ import CascaderContext from '../context'; const useActive = ( multiple?: boolean, open?: boolean, + defaultActiveKey?: React.Key[], ): [React.Key[], (activeValueCells: React.Key[]) => void] => { const { values } = React.useContext(CascaderContext); @@ -14,7 +15,7 @@ const useActive = ( // Record current dropdown active options // This also control the open status - const [activeValueCells, setActiveValueCells] = React.useState([]); + const [activeValueCells, setActiveValueCells] = React.useState(defaultActiveKey ?? []); React.useEffect( () => { diff --git a/src/Panel.tsx b/src/Panel.tsx index 279f2510..8bdaed40 100644 --- a/src/Panel.tsx +++ b/src/Panel.tsx @@ -71,7 +71,7 @@ export default function Panel< direction, notFoundContent = 'Not Found', disabled, - defaultActiveValueCells + defaultActiveKey, } = props as Pick; // ======================== Multiple ======================== diff --git a/tests/Panel.spec.tsx b/tests/Panel.spec.tsx index 1408e30b..ad917dc0 100644 --- a/tests/Panel.spec.tsx +++ b/tests/Panel.spec.tsx @@ -79,14 +79,14 @@ describe('Cascader.Panel', () => { expect(onChange).toHaveBeenCalledWith([['bamboo', 'little']], expect.anything()); }); - it('multiple with defaultActiveValueCells', () => { + it('multiple with defaultActiveKey', () => { const onChange = jest.fn(); const { container } = render( , ); expect(container.querySelectorAll('.rc-cascader-menu')).toHaveLength(2); diff --git a/tests/selector.spec.tsx b/tests/selector.spec.tsx index e7387714..dbd92540 100644 --- a/tests/selector.spec.tsx +++ b/tests/selector.spec.tsx @@ -5,10 +5,10 @@ import Cascader from '../src'; import { addressOptions } from './demoOptions'; // Mock `useActive` hook -jest.mock('../src/OptionList/useActive', () => (multiple: boolean, open: boolean) => { +jest.mock('../src/OptionList/useActive', () => (multiple: boolean, open: boolean, defaultActiveKey: React.Key[]) => { // Pass to origin hooks const originHook = jest.requireActual('../src/OptionList/useActive').default; - const [activeValueCells, setActiveValueCells] = originHook(multiple, open); + const [activeValueCells, setActiveValueCells] = originHook(multiple, open, defaultActiveKey); (global as any).activeValueCells = activeValueCells;