fix(list-picker): optimization list-picker (#1561)

growingio · Nov 30, 2021 · a014a86 · a014a86 · vercel · Nov 30, 2021
1 parent 76b6fee
commit a014a86
Show file tree

Hide file tree

Showing 21 changed files with 263 additions and 132 deletions.
diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
@@ -73,9 +73,14 @@ export const Cascader: React.FC<CascaderProps> = ({
     e.stopPropagation();
   };
 
-  const renderTrigger = () => {
+  const triggerClick = () => !disabled && setVisible(!visible);
+  // trigger
+  const renderTrigger = (): React.ReactElement => {
     if (typeof propsRenderTrigger === 'function') {
-      return propsRenderTrigger?.();
+      const node = propsRenderTrigger?.();
+      return React.cloneElement(node, {
+        onClick: triggerClick,
+      });
     }
     return (
       <Trigger
@@ -90,7 +95,7 @@ export const Cascader: React.FC<CascaderProps> = ({
         disabled={disabled}
         allowClear={allowClear}
         onClear={handleOnClear}
-        onClick={() => !disabled && setVisible(!visible)}
+        onClick={triggerClick}
         onInputChange={(val) => {
           isEmpty(val) && handleChange();
         }}

diff --git a/src/cascader/interfance.ts b/src/cascader/interfance.ts
@@ -65,6 +65,7 @@ export interface OptionProps extends ListOptionProps {
   value: string;
   childrens?: OptionProps[];
 }
+
 export interface TriggerProps extends Omit<InputButtonProps, 'value' | 'active'> {
   value?: string;
 }
diff --git a/src/input/style/InputButton.less b/src/input/style/InputButton.less
@@ -4,53 +4,51 @@
 @input-btn-prefix-cls: ~'@{component-prefix}-input-btn';
 @icon-prefix-cls: ~'@{component-prefix}-input__prefix';
 
-@input-btn-input-prefix-cls: ~'@{component-prefix}-input-btn__input';
+@input-btn-input-prefix-cls: ~'@{component-prefix}-input-btn';
 
-.@{input-btn-prefix-cls} {
+.@{input-btn-input-prefix-cls} {
+  input {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  background-color: @gray-0;
   cursor: pointer;
-  .@{input-btn-input-prefix-cls} {
-    input {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-    background-color: @gray-0;
-    cursor: pointer;
 
-    &:not([disabled])::placeholder {
-      color: @gray-5;
+  &:not([disabled])::placeholder {
+    color: @gray-5;
+    .text-body1();
+  }
+  &:disabled {
+    color: @gray-3;
+    background-color: @gray-0;
+    &::placeholder {
+      color: @gray-3;
       .text-body1();
     }
-    &:disabled {
+    &:hover {
       color: @gray-3;
       background-color: @gray-0;
       &::placeholder {
         color: @gray-3;
-        .text-body1();
-      }
-      &:hover {
-        color: @gray-3;
-        background-color: @gray-0;
-        &::placeholder {
-          color: @gray-3;
-        }
       }
     }
+  }
 
-    &:not([disabled]):hover {
-      color: @blue-3;
-      border: 1px solid @gray-2;
-    }
-    &:is([disabled]):hover {
-      color: @gray-3;
-      border: 1px solid @gray-2;
-    }
+  &:not([disabled]):hover {
+    color: @blue-3;
+    border: 1px solid @gray-2;
+  }
+  &:is([disabled]):hover {
+    color: @gray-3;
+    border: 1px solid @gray-2;
+  }
 
-    &:not([disabled]):focus {
-      border: 1px solid @gray-2;
-      outline: none;
-    }
+  &:not([disabled]):focus {
+    border: 1px solid @gray-2;
+    outline: none;
   }
+
   &__active,
   &__hover {
     &:hover {

diff --git a/src/list-picker/Recent.tsx b/src/list-picker/Recent.tsx
@@ -11,7 +11,7 @@ interface RecentProps {
 }
 
 const Recent: React.FC<RecentProps> & { isRecent: boolean } = (props) => {
-  const { max = 5, title } = props;
+  const { max = 5, title = '最近使用' } = props;
   const context = useContext(ListContext);
   const localStorageValue = window?.localStorage?.getItem(ITEM_KEY) || '[]';
   const matchValue = JSON.parse(localStorageValue); // localStorage.getItem('__GIO_SELECTION_KEY')

diff --git a/src/list-picker/Trigger.tsx b/src/list-picker/Trigger.tsx
@@ -1,16 +1,53 @@
-import React from 'react';
+import React, { useContext, useMemo } from 'react';
 import Input from '../input';
+import { ListContext } from '../list/context';
+import { collectOptions } from '../list/util';
 import WithRef from '../utils/withRef';
 import { TriggerProps } from './interfance';
 
 const Trigger: React.ForwardRefRenderFunction<HTMLInputElement, TriggerProps> = (props, ref) => {
-  const { value, placeholder, onClear, ...rest } = props;
+  const {
+    value,
+    title,
+    placeholder,
+    onClear,
+    children,
+    hidePrefix = false,
+    prefix: propPrefix,
+    suffix: propSuffix,
+    ...rest
+  } = props;
+  const { options, setOptions, getOptionByValue, getLabelByValue } = useContext(ListContext);
+  setOptions?.(collectOptions(children));
+
   const handleClear = (e: React.MouseEvent<Element, MouseEvent>) => {
     onClear?.(e);
     e.stopPropagation();
   };
+
+  const prefix = useMemo(() => {
+    if (!hidePrefix) {
+      return propPrefix ?? getOptionByValue?.(value as string)?.prefix;
+    }
+    return undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options?.size, hidePrefix, propPrefix, value]);
+
+  const suffix = useMemo(
+    () => propSuffix ?? getOptionByValue?.(value as string)?.suffix,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [options?.size, hidePrefix, propPrefix, value]
+  );
   return (
-    <Input.Button ref={ref} placeholder={placeholder} value={(value as string) ?? ''} onClear={handleClear} {...rest} />
+    <Input.Button
+      ref={ref}
+      prefix={prefix}
+      suffix={suffix}
+      placeholder={placeholder}
+      value={title ?? getLabelByValue?.(value as string)}
+      onClear={handleClear}
+      {...rest}
+    />
   );
 };
 

diff --git a/src/list-picker/demos/List-picker.stories.tsx b/src/list-picker/demos/List-picker.stories.tsx
@@ -2,11 +2,11 @@ import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import '../style';
 import { isEqual, uniqueId } from 'lodash';
+// import { UserOutlined } from '@gio-design/icons';
 import CheckboxItem from '../../list/inner/CheckboxItem';
 import { OptionProps } from '../../list/interfance';
 // import { uniqueId } from 'lodash';
 // import { uniqBy, uniqueId } from 'lodash';
-// import { AttributionPropertyOutlined, EditOutlined, ItemOutlined, TagOutlined, UserOutlined } from '@gio-design/icons';
 import { ListPickerProps } from '../interfance';
 import ListPicker from '../listPicker';
 import SearchBar from '../../search-bar';
@@ -47,7 +47,7 @@ const createSingleOption = (index: number) => ({
 const largeOptions = new Array(200).fill(0).map((v, i) => createOption(i));
 const simpleLargeOptions = new Array(200).fill(0).map((v, i) => createSingleOption(i));
 const Template: Story<ListPickerProps> = () => {
-  const [value, setValue] = useState<undefined | string>('banana');
+  const [value, setValue] = useState<undefined | string>('ziyi');
   const [multipleValue, setMultipleValue] = useState<undefined | string[]>(undefined);
   const [activeTab, setActiveTab] = useState('tab1');
   const [search, setSearch] = useState('');
@@ -238,11 +238,7 @@ const Template: Story<ListPickerProps> = () => {
               <Tab label="tab1" value="tab1">
                 <List.Selection>
                   {(context) => {
-                    const isEqualValue = isEqual(
-                      Array.from(context.options.values()).reduce((p, v) => [...p, v.value], []),
-                      context.value
-                    );
-                    console.log(isEqualValue);
+                    const isEqualValue = context.value.length === 2;
                     return (
                       <>
                         <CheckboxItem
@@ -370,6 +366,7 @@ const Template: Story<ListPickerProps> = () => {
             <List.Selection options={largeOptions} />
           </ListPicker>
         </div>
+        <div className="demo-box" />
       </div>
     </div>
   );

diff --git a/src/list-picker/interfance.ts b/src/list-picker/interfance.ts
@@ -86,4 +86,5 @@ export interface TriggerProps extends Omit<InputButtonProps, 'value' | 'active'>
   disabled?: boolean;
   value?: string | React.ReactNode;
   separator?: string;
+  [key: string]: any;
 }
diff --git a/src/list-picker/listPicker.tsx b/src/list-picker/listPicker.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
-import { isEqual, isNil, isString } from 'lodash';
+import { isEqual, isNil } from 'lodash';
 import { ListPickerProps } from './interfance';
 import Popover from '../popover';
 import Trigger from './Trigger';
@@ -42,29 +42,18 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
     needConfim = model === 'multiple',
 
     allowClear,
-    title: controlledTitle,
+    title,
     triggerPrefix,
     triggerSuffix,
     hidePrefix = false,
     maxWidth,
   } = props;
   const defaultPrefix = usePrefixCls(prefixCls);
   const [visible, setVisible] = useControlledState(controlledVisible, false);
-  const [value, setValue] = useState(controlledValue || defaultValue);
-  const [title, setTitle] = useState<string | React.ReactNode>(controlledTitle);
-  const [titlePrefix, setTitlePrefix] = useState<string | React.ReactNode>(undefined);
-  const { options, setOptions, getLabelByValue, getOptionByValue, getOptionsByValue } = useCacheOptions();
 
-  // title仅跟随controlledValue变动
-  useEffect(() => {
-    setTitle(getLabelByValue(controlledValue, separator));
-  }, [controlledValue, getLabelByValue, separator, setTitle]);
-  // prefix
-  useEffect(() => {
-    if (model === 'single' && isString(controlledValue) && !hidePrefix) {
-      setTitlePrefix(triggerPrefix ?? getOptionByValue(controlledValue)?.prefix);
-    }
-  }, [controlledValue, getOptionByValue, hidePrefix, model, triggerPrefix]);
+  const [value, setValue] = useControlledState(controlledValue, defaultValue);
+  const { options, setOptions, getOptionByValue, getLabelByValue, getOptionsByValue } = useCacheOptions();
+
   useEffect(() => {
     setValue(controlledValue);
   }, [controlledValue, setValue]);
@@ -101,27 +90,35 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
     setValue(undefined);
     onClear?.();
   };
+  const triggerClick = () => !disabled && setVisible(!visible);
   // trigger
   const renderTrigger = (): React.ReactElement => {
     if (typeof propsRenderTrigger === 'function') {
-      return propsRenderTrigger?.();
+      const node = propsRenderTrigger?.();
+      return React.cloneElement(node, {
+        onClick: triggerClick,
+      });
     }
     return (
       <Trigger
         size={size}
-        value={controlledTitle ?? title}
+        value={controlledValue}
         style={style}
         className={className}
         maxWidth={maxWidth}
         disabled={disabled}
         placeholder={placeholder}
         suffix={triggerSuffix}
-        prefix={titlePrefix}
+        prefix={triggerPrefix}
         allowClear={allowClear}
         onClear={clearInput}
         separator={separator}
-        onClick={() => !disabled && setVisible(!visible)}
-      />
+        onClick={triggerClick}
+        title={title}
+        hidePrefix={hidePrefix}
+      >
+        {children}
+      </Trigger>
     );
   };
   // render
@@ -138,9 +135,19 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
   );
 
   return (
-    <ListContext.Provider value={{ value, model, onChange: handleChange, options, setOptions }}>
+    <ListContext.Provider
+      value={{
+        value,
+        model,
+        onChange: handleChange,
+        options,
+        setOptions,
+        getOptionByValue,
+        getOptionsByValue,
+        getLabelByValue,
+      }}
+    >
       <Popover
-        distoryOnHide={false}
         disabled={disabled}
         content={renderOverlay()}
         trigger={trigger}
@@ -150,6 +157,7 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
         overlayClassName={classNames(`${defaultPrefix}--content`, overlayClassName)}
         placement={placement}
         overlayStyle={overlayStyle}
+        strategy="fixed"
       >
         {renderTrigger()}
       </Popover>

diff --git a/src/list/List.tsx b/src/list/List.tsx
@@ -19,7 +19,7 @@ const selectStatus = (value?: string, values?: string | string[]) => {
   return undefined;
 };
 
-export const List = WithRef<HTMLDivElement, ListProps>((props, ref?) => {
+export const InnerList = WithRef<HTMLDivElement, ListProps>((props, ref?) => {
   const {
     id,
     title,
@@ -185,4 +185,8 @@ export const List = WithRef<HTMLDivElement, ListProps>((props, ref?) => {
     </ListContext.Provider>
   );
 });
+
+const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>> & { isList?: boolean } =
+  InnerList;
+List.isList = true;
 export default List;
diff --git a/src/list/Selection.tsx b/src/list/Selection.tsx
@@ -12,7 +12,7 @@ import useCacheOptions from './hooks/useCacheOptions';
 
 type nodeType = React.ReactElement<ListProps> & { type: { isGIOList: boolean; isRecent: boolean } };
 
-const Selection: React.FC<SelectionProps> = (props) => {
+const Selection: React.FC<SelectionProps> & { isSelection?: boolean } = (props) => {
   const { className, style, options = [], children, ...rest } = props;
   const prefixCls = `${usePrefixCls(PREFIX)}--selection`;
   const isSelection = options?.every((val) => 'groupId' in val) ?? false;
@@ -108,5 +108,5 @@ const Selection: React.FC<SelectionProps> = (props) => {
   );
   return selectionProvider(renderNormal);
 };
-
+Selection.isSelection = true;
 export default Selection;