fix(list-picker): 优化list-picker、cascader性能 (#1579)

src/cascader/Cascader.tsx

@@ -79,7 +79,10 @@ export const Cascader: React.FC<CascaderProps> = ({
     if (typeof propsRenderTrigger === 'function') {
       const node = propsRenderTrigger?.();
       return React.cloneElement(node, {
-        onClick: triggerClick,
+        onClick: (e: MouseEvent) => {
+          node?.props?.onClick?.(e);
+          triggerClick();
+        },
       });
     }
     return (

src/cascader/demos/Cascader.stories.tsx

@@ -82,7 +82,7 @@ const demoTemplate: Story<CascaderProps> = (props) => (
       <Cascader
         onChange={(val: any, opt: any) => console.log('val', val, opt)}
         options={defaultOptions}
-        placeholder="请选择"
+        placeholder="haha"
         size="normal"
         {...props}
       />
@@ -159,6 +159,6 @@ export const Demo = demoTemplate.bind({
   },
 });
 export const Default: Story<CascaderProps> = (args) => (
-  <Cascader {...args} options={defaultOptions} placeholder="请选择" size="normal" />
+  <Cascader {...args} value="apple.cut.bad" options={defaultOptions} placeholder="请选择" size="normal" />
 );
 Default.args = {};

src/list-picker/Recent.tsx

@@ -1,5 +1,5 @@
 import { slice } from 'lodash';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { List, OptionProps } from '../list';
 import { ListContext } from '../list/context';
 
@@ -12,18 +12,34 @@ interface RecentProps {
 
 const Recent: React.FC<RecentProps> & { isRecent: boolean } = (props) => {
   const { max = 5, title = '最近使用' } = props;
+  const [mayBeArray, setMayBearray] = useState<Map<string, OptionProps> | undefined>(new Map());
   const context = useContext(ListContext);
+  const { options } = context;
   const localStorageValue = window?.localStorage?.getItem(ITEM_KEY) || '[]';
   const matchValue = JSON.parse(localStorageValue); // localStorage.getItem('__GIO_SELECTION_KEY')
-  const mayBeArray = Array.from((context?.options ?? new Map())?.values());
-  const options = slice(
-    mayBeArray?.filter((value?: OptionProps) => matchValue?.includes(value?.value)),
-    0,
-    max
+  useEffect(() => {
+    setTimeout(() => {
+      setMayBearray(options);
+    }, 0);
+  }, [options]);
+  const listOptions: OptionProps[] = useMemo(
+    () =>
+      slice(
+        matchValue?.reduce((prev: OptionProps[], curr: string) => {
+          if (mayBeArray?.has(curr)) {
+            return [...prev, mayBeArray?.get(curr)];
+          }
+          return [...prev];
+        }, []),
+        0,
+        max
+      ),
+
+    [matchValue, max, mayBeArray]
   );
   const handleOnChange = (value?: string | string[], opts?: OptionProps | OptionProps[]) =>
     context?.onChange?.(value, opts);
-  return <List title={title} id={ITEM_KEY} options={options} value="" onChange={handleOnChange} />;
+  return <List title={title} id={ITEM_KEY} options={listOptions} value="" onChange={handleOnChange} />;
 };
 Recent.isRecent = true;
 export default Recent;

src/list-picker/demos/List-picker.stories.tsx

@@ -237,27 +237,24 @@ const Template: Story<ListPickerProps> = () => {
             <Tabs value={activeTab} defaultValue="tab1" onChange={(key: string) => setActiveTab(key)}>
               <Tab label="tab1" value="tab1">
                 <List.Selection>
-                  {(context) => {
-                    const isEqualValue = context.value.length === 2;
-                    return (
-                      <>
-                        <CheckboxItem
-                          selected={isEqualValue}
-                          onClick={() => {
-                            if (isEqualValue) {
-                              context.onChange([]);
-                            } else {
-                              context.onChange(Array.from(context.options.keys()));
-                            }
-                          }}
-                          label="全部"
-                          value="all"
-                        />
+                  {(context) => (
+                    <>
+                      <CheckboxItem
+                        selected={context?.value?.length === 2}
+                        onClick={() => {
+                          if (context?.value?.length === 2) {
+                            context?.onChange([]);
+                          } else {
+                            context?.onChange(Array.from(context?.options.keys()));
+                          }
+                        }}
+                        label="全部"
+                        value="all"
+                      />
 
-                        <List options={multipleOptions} id="id" title="有item" />
-                      </>
-                    );
-                  }}
+                      <List options={multipleOptions} id="id" title="有item" />
+                    </>
+                  )}
                 </List.Selection>
               </Tab>
               <Tab label="tab2" value="tab2">
@@ -366,7 +363,11 @@ const Template: Story<ListPickerProps> = () => {
             <List.Selection options={largeOptions} />
           </ListPicker>
         </div>
-        <div className="demo-box" />
+        <div className="demo-box">
+          <ListPicker value="1.2" model="cascader">
+            <List options={[{ label: '1', value: '1', childrens: [{ label: '2', value: '2' }] }]} />
+          </ListPicker>
+        </div>
       </div>
     </div>
   );

src/list-picker/style/index.less

@@ -3,6 +3,7 @@
 @list-picker-prefix-cls: ~'@{component-prefix}-list-picker';
 @selection-prefix-cls: ~'@{component-prefix}-list--selection';
 @tab-panel-cls: ~'@{component-prefix}-tabs-tabpanel';
+@cascader-prefix-cls: ~'@{component-prefix}-cascader';
 
 @list-prefix-cls: ~'@{component-prefix}-list';
 .@{list-picker-prefix-cls} {
@@ -29,6 +30,9 @@
     padding: 0;
     .scrollbar(@x: hidden, @y: initial);
   }
+  & .@{cascader-prefix-cls}--list {
+    padding: 8px;
+  }
   & .@{selection-prefix-cls} {
     height: auto;
     max-height: 360px;

src/list/DragItem.tsx

@@ -57,12 +57,18 @@ const DragItem: React.FC<DragItemProps> = (props) => {
   return (
     <div
       className={classNames(`${prefixCls}--item`, `${prefixCls}--item--drag`, {
-        [`${prefixCls}--item--drag--disabled`]: disabled,
+        [`${prefixCls}--item--disabled`]: disabled,
       })}
       ref={ref}
       data-handler-id={handlerId}
     >
-      <MoveOutlined className={`${prefixCls}--item--drag--icon`} color="#ADB2C2" size="14px" />
+      <MoveOutlined
+        className={classNames(`${prefixCls}--item--drag--icon`, {
+          [`${prefixCls}--item--drag--icon--disabled`]: disabled,
+        })}
+        color="#ADB2C2"
+        size="14px"
+      />
       <Item label={label} value={value} disabled={disabled} {...rest} />
     </div>
   );

src/list/Item.tsx

@@ -1,31 +1,21 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { ItemProps } from './interfance';
 import BaseItem from './inner/baseItem';
 import CheckboxItem from './inner/CheckboxItem';
 import CalcaderItem from './inner/CascaderItem';
 import WithRef from '../utils/withRef';
+import { ListContext } from './context';
 
-export const Item = WithRef<HTMLLIElement, ItemProps & { isMultiple?: boolean; isCascader?: boolean }>(
-  (props, ref?) => {
-    const { label, value, disabled, isMultiple = false, isCascader, selectValue, ...rest } = props;
-
-    if (isMultiple) {
-      return <CheckboxItem ref={ref} label={label} value={value} disabled={disabled} {...rest} />;
-    }
-    if (isCascader) {
-      return (
-        <CalcaderItem
-          ref={ref}
-          label={label as string}
-          value={value as string}
-          selectValue={selectValue as string}
-          disabled={disabled}
-          {...rest}
-        />
-      );
-    }
-    return <BaseItem ref={ref} label={label} value={value} disabled={disabled} {...rest} />;
+export const Item = WithRef<HTMLLIElement, ItemProps>((props, ref?) => {
+  const { label, value, disabled, ...rest } = props;
+  const { model } = useContext(ListContext);
+  if (model === 'multiple') {
+    return <CheckboxItem ref={ref} label={label} value={value} disabled={disabled} {...rest} />;
+  }
+  if (model === 'cascader') {
+    return <CalcaderItem ref={ref} label={label as string} value={value as string} disabled={disabled} {...rest} />;
   }
-);
+  return <BaseItem ref={ref} label={label} value={value} disabled={disabled} {...rest} />;
+});
 
 export default Item;