CascaderProps 重构

.gitignore

@@ -38,3 +38,4 @@ coverage
 .dumi/tmp
 .dumi/tmp-production
 dist
+.vscode

examples/adjust-overflow.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import type { BuildInPlacements } from '@rc-component/trigger/lib/interface';
 import '../assets/index.less';
+import type { CascaderProps } from '../src';
 import Cascader from '../src';
+import type { Option2 } from './utils';
 
 const addressOptions = [
   {
@@ -60,7 +62,7 @@ const addressOptions = [
 const MyCascader = ({ builtinPlacements }: { builtinPlacements?: BuildInPlacements }) => {
   const [inputValue, setInputValue] = useState('');
 
-  const onChange = (value, selectedOptions) => {
+  const onChange: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
     console.log(value, selectedOptions);
     setInputValue(selectedOptions.map(o => o.label).join(', '));
   };

examples/animation.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import '../assets/index.less';
+import type { CascaderProps } from '../src';
 import Cascader from '../src';
+import type { Option2 } from './utils';
 
 const addressOptions = [
   {
@@ -58,7 +60,7 @@ const addressOptions = [
 const Demo = () => {
   const [inputValue, setInputValue] = useState('');
 
-  const onChange = (value, selectedOptions) => {
+  const onChange: CascaderProps<Option2, 'value'>['onChange'] = (value, selectedOptions) => {
     console.log(value, selectedOptions);
     setInputValue(selectedOptions.map(o => o.label).join(', '));
   };

examples/change-on-select.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import '../assets/index.less';
+import type { CascaderProps } from '../src';
 import Cascader from '../src';
+import type { Option2 } from './utils';
 
 const options = [
   {
@@ -61,7 +63,7 @@ const options = [
   },
 ];
 
-const onChange = (value, selectedOptions) => {
+const onChange: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
   console.log(value, selectedOptions);
 };
 

examples/custom-arrow-icon.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
 import '../assets/index.less';
+import type { CascaderProps } from '../src';
 import Cascader from '../src';
+import type { Option2 } from './utils';
 
-const addressOptions = [
+const addressOptions: CascaderProps<Option2>['options'] = [
   {
     label: '福建',
     value: 'fj',
@@ -96,12 +98,12 @@ const Demo = () => {
     },
   ]);
 
-  const onChange = (value, selectedOptions) => {
+  const onChange: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
     console.log(value, selectedOptions);
     setInputValue(selectedOptions.map(o => o.label).join(', '));
   };
 
-  const onChangeDynamic = (value, selectedOptions) => {
+  const onChangeDynamic: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
     console.log(value, selectedOptions);
     setDynamicInputValue(selectedOptions.map(o => o.label).join(', '));
   };
@@ -146,7 +148,7 @@ const Demo = () => {
     </i>
   );
 
-  const loadData = selectedOptions => {
+  const loadData: CascaderProps<Option2>['loadData'] = selectedOptions => {
     const targetOption = selectedOptions[selectedOptions.length - 1];
     targetOption.loading = true;
     // 动态加载下级数据

examples/custom-field-name.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
 import '../assets/index.less';
+import type { CascaderProps } from '../src';
 import Cascader from '../src';
+import type { Option } from './utils';
 
-const addressOptions = [
+const addressOptions: Option[] = [
   {
     name: '福建',
     code: 'fj',
@@ -59,7 +61,7 @@ const addressOptions = [
 const Demo = () => {
   const [inputValue, setInputValue] = useState('');
 
-  const onChange = (value, selectedOptions) => {
+  const onChange: CascaderProps<Option, 'code'>['onChange'] = (value, selectedOptions) => {
     console.log(value, selectedOptions);
     setInputValue(selectedOptions.map(o => o.name).join(', '));
   };

examples/debug.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import '../assets/index.less';
 import Cascader from '../src';
+import type { Option2 } from './utils';
 
-const addressOptions = [
+const addressOptions: Option2[] = [
   // ...new Array(20).fill(null).map((_, i) => ({ label: String(i), value: `99${i}` })),
   {
     label: <span>空孩子</span>,
@@ -88,7 +89,7 @@ const addressOptions = [
 const Demo = () => {
   const [multiple, setMultiple] = React.useState(true);
 
-  const onChange = (value: any, selectedOptions: any) => {
+  const onChange = (value: string[], selectedOptions: Option2[]) => {
     console.log('[DEBUG] onChange - value:', value);
     console.log('[DEBUG] onChange - selectedOptions:', selectedOptions);
   };
@@ -105,27 +106,19 @@ const Demo = () => {
         />
         Multiple
       </label>
-      <Cascader
-        style={{ width: 200 }}
-        options={addressOptions}
-        onChange={onChange}
-        checkable={multiple}
-        allowClear
-        // defaultValue={multiple ? [defaultValue] : defaultValue}
-        // defaultValue={[['not', 'yet'], ['exist']]}
-        // defaultValue={[['empty']]}
-        defaultValue={['fj', 'fuzhou']}
-        showSearch
-        // showSearch={{ limit: 1 }}
-        // open
-        // tagRender={props => {
-        //   console.log(props);
-        //   return props.label as any;
-        // }}
-        // direction="rtl"
-        // searchValue="福a"
-        // changeOnSelect
-      />
+      {multiple ? (
+        <Cascader style={{ width: 200 }} checkable defaultValue={[['fj'], ['fuzhou']]} showSearch />
+      ) : (
+        <Cascader
+          style={{ width: 200 }}
+          options={addressOptions}
+          onChange={onChange}
+          checkable={false}
+          allowClear
+          defaultValue={['fj', 'fuzhou']}
+          showSearch
+        />
+      )}
     </>
   );
 };

examples/default-expand-single-option.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 import React, { useState } from 'react';
 import '../assets/index.less';
+import type { CascaderProps } from '../src';
 import Cascader from '../src';
+import type { Option2 } from './utils';
 
 const options = [
   {
@@ -41,12 +43,12 @@ const options = [
 const App = () => {
   const [inputValue, setInputValue] = useState('');
 
-  const [value, setValue] = useState([]);
+  const [value, setValue] = useState<string[]>([]);
 
-  const onChange = (value, selectedOptions) => {
+  const onChange: CascaderProps<Option2, 'value'>['onChange'] = (value, selectedOptions) => {
     const lastSelected = selectedOptions[selectedOptions.length - 1];
     if (lastSelected.children && lastSelected.children.length === 1) {
-      value.push(lastSelected.children[0].value);
+      value.push(lastSelected.children[0].value as string);
       setInputValue(selectedOptions.map(o => o.label).join(', '));
       setValue(value);
       return;

examples/defaultValue.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import '../assets/index.less';
+import type { CascaderProps } from '../src';
 import Cascader from '../src';
+import type { Option2 } from './utils';
 
 const addressOptions = [
   {
@@ -93,7 +95,7 @@ const defaultOptions = [
 const Demo = () => {
   const [inputValue, setInputValue] = useState(defaultOptions.map(o => o.label).join(', '));
 
-  const onChange = (value, selectedOptions) => {
+  const onChange: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
     console.log(value, selectedOptions);
     setInputValue(selectedOptions.map(o => o.label).join(', '));
   };

examples/dropdown-render.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import '../assets/index.less';
+import type { CascaderProps } from '../src';
 import Cascader from '../src';
+import type { Option2 } from './utils';
 
 const addressOptions = [
   {
@@ -59,7 +61,7 @@ const addressOptions = [
 const Demo = () => {
   const [inputValue, setInputValue] = useState('');
 
-  const onChange = (value, selectedOptions) => {
+  const onChange: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
     console.log(value, selectedOptions);
     setInputValue(selectedOptions.map(o => o.label).join(', '));
   };

examples/dynamic-options.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import '../assets/index.less';
+import type { CascaderProps } from '../src';
 import Cascader from '../src';
+import type { Option2 } from './utils';
 
 const addressOptions = [
   {
@@ -19,12 +21,12 @@ const Demo = () => {
   const [inputValue, setInputValue] = useState('');
   const [options, setOptions] = useState(addressOptions);
 
-  const onChange = (value, selectedOptions) => {
+  const onChange: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
     console.log('OnChange:', value, selectedOptions);
     setInputValue(selectedOptions.map(o => o.label).join(', '));
   };
 
-  const loadData = selectedOptions => {
+  const loadData: CascaderProps<Option2>['loadData'] = selectedOptions => {
     console.log('onLoad:', selectedOptions);
     const targetOption = selectedOptions[selectedOptions.length - 1];
     targetOption.loading = true;

examples/hover.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import '../assets/index.less';
+import type { CascaderProps } from '../src';
 import Cascader from '../src';
+import type { Option2 } from './utils';
 
 const addressOptions = [
   {
@@ -82,7 +84,7 @@ const addressOptions = [
 const Demo = () => {
   const [inputValue, setInputValue] = useState('');
 
-  const onChange = (value, selectedOptions) => {
+  const onChange: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
     console.log(value, selectedOptions);
     setInputValue(selectedOptions.map(o => o.label).join(', '));
   };

examples/multiple.tsx

@@ -1,6 +1,10 @@
-import React from 'react';
+/* eslint-disable @typescript-eslint/no-shadow */
+import React, { useState } from 'react';
 import '../assets/index.less';
+import type { CascaderProps } from '../src';
 import Cascader from '../src';
+import type { Option2 } from './utils';
+
 const { SHOW_CHILD } = Cascader;
 
 const optionLists = [
@@ -20,12 +24,14 @@ const optionLists = [
 
 const Demo = () => {
   const [options, setOptions] = React.useState(optionLists);
+  const [value, setValue] = useState<string[][]>([]);
 
-  const onChange = (value, selectedOptions) => {
+  const onChange: CascaderProps<Option2, 'value', true>['onChange'] = (value, selectedOptions) => {
     console.log(value, selectedOptions);
+    setValue(value);
   };
 
-  const loadData = selectedOptions => {
+  const loadData: CascaderProps<Option2, 'value'>['loadData'] = selectedOptions => {
     const targetOption = selectedOptions[selectedOptions.length - 1];
     targetOption.loading = true;
 
@@ -55,6 +61,7 @@ const Demo = () => {
       options={options}
       showCheckedStrategy={SHOW_CHILD}
       loadData={loadData}
+      value={value}
       onChange={onChange}
       changeOnSelect
     />

examples/panel.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-shadow */
 import React from 'react';
 import '../assets/index.less';
 import Cascader from '../src';
@@ -56,7 +57,9 @@ const addressOptions = [
 ];
 
 export default () => {
-  const [value, setValue] = React.useState([]);
+  const [value, setValue] = React.useState<string[]>([]);
+
+  const [value2, setValue2] = React.useState<string[][]>([]);
 
   return (
     <>
@@ -79,10 +82,11 @@ export default () => {
 
       <Cascader.Panel
         checkable
-        value={value}
+        value={value2}
         options={addressOptions}
         onChange={nextValue => {
           console.log('Change:', nextValue);
+          setValue2(nextValue);
         }}
       />
 

examples/rc-form.tsx

@@ -1,8 +1,10 @@
 import arrayTreeFilter from 'array-tree-filter';
 import Form, { Field } from 'rc-field-form';
 import '../assets/index.less';
+import type { CascaderProps } from '../src';
 import Cascader from '../src';
 import React from 'react';
+import type { Option2 } from './utils';
 
 const addressOptions = [
   {
@@ -58,7 +60,7 @@ const addressOptions = [
 ];
 
 const CascaderInput = (props: any) => {
-  const onChange = value => {
+  const onChange: CascaderProps<Option2>['onChange'] = value => {
     if (props.onChange) {
       props.onChange(value);
     }

examples/simple.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import '../assets/index.less';
+import type { CascaderProps } from '../src';
 import Cascader from '../src';
+import type { Option2 } from './utils';
 
 const addressOptions = [
   {
@@ -59,7 +61,7 @@ const addressOptions = [
 const Demo = () => {
   const [inputValue, setInputValue] = useState('');
 
-  const onChange = (value, selectedOptions) => {
+  const onChange: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
     console.log(value, selectedOptions);
     setInputValue(selectedOptions.map(o => o.label).join(', '));
   };