feat(list-picker): list-picker multiple mode (#1487)

Co-authored-by: shiliqian <shiliqian@growingio.com>
growingio · Nov 19, 2021 · f4666bc · f4666bc · vercel · Nov 19, 2021
1 parent a499a2d
commit f4666bc
Show file tree

Hide file tree

Showing 17 changed files with 81 additions and 55 deletions.
diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
@@ -14,7 +14,7 @@ const Cascader: React.FC<CascaderProps> = (props) => {
   const {
     options,
     value: controlledValue,
-    defaultValue = '',
+    defaultValue = undefined,
     visible: controlledVisible,
     onChange,
     prefixCls = 'cascader--new',
@@ -37,7 +37,7 @@ const Cascader: React.FC<CascaderProps> = (props) => {
     ...rest
   } = props;
   const defaultPrefixCls = usePrefixCls(prefixCls);
-  const [value, setSelectValue] = useControlledState(controlledValue, defaultValue);
+  const [value, setValue] = useControlledState(controlledValue, defaultValue);
   const [visible, setVisible] = useControlledState(controlledVisible, false);
   const [title, setTitle] = useState('');
   const cache = useChacheOptions();
@@ -55,7 +55,7 @@ const Cascader: React.FC<CascaderProps> = (props) => {
 
   const handleChange = (val?: string | string[]) => {
     onChange?.(val);
-    setSelectValue((val as string) ?? '');
+    setValue(val as string);
     setVisible(false);
   };
 
@@ -77,7 +77,7 @@ const Cascader: React.FC<CascaderProps> = (props) => {
         disabled={disabled}
         onClear={handleOnClear}
         onInputChange={(val) => {
-          isEmpty(val) && handleChange('');
+          isEmpty(val) && handleChange();
         }}
         {...triggerProps}
       />

diff --git a/src/input/Input.tsx b/src/input/Input.tsx
@@ -69,7 +69,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     () => (customizeSuffix ? <div className={suffixCls}>{customizeSuffix}</div> : null),
     [suffixCls, customizeSuffix]
   );
-
   return (
     <span className={inputClass} {...rest} style={style}>
       {prefix}

diff --git a/src/list-picker/Trigger.tsx b/src/list-picker/Trigger.tsx
@@ -8,6 +8,7 @@ const Trigger: React.FC<TriggerProps> = (props) => {
     onClear?.(e);
     e.stopPropagation();
   };
+
   return <Input.Button placeholder={placeholder} value={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
@@ -30,6 +30,7 @@ export default {
 
 const Template: Story<ListPickerProps> = () => {
   const [value, setValue] = useState('banana2');
+  const [multipleValue, setMultipleValue] = useState(['ziyi']);
   const [activeTab, setActiveTab] = useState('tab1');
   const [search, setSearch] = useState('');
   const onChange = (val?: string, opt?: OptionProps | OptionProps[]) => {
@@ -149,6 +150,37 @@ const Template: Story<ListPickerProps> = () => {
             />
           </ListPicker>
         </div>
+        <div className="demo-box">
+          <ListPicker
+            value={multipleValue}
+            onChange={(val) => {
+              console.log('multiple onChange 并不会触发', val);
+            }}
+            onConfim={(val) => {
+              console.log(val);
+              setMultipleValue(val as string[]);
+            }}
+            overlayStyle={{ width: '240px' }}
+            model="multiple"
+            onClear={() => {
+              setValue('');
+            }}
+            placeholder="请选择"
+          >
+            <SearchBar
+              size="small"
+              style={{ width: '100%' }}
+              placeholder="请搜索名称"
+              onSearch={(val: string) => setSearch(val)}
+            />
+            <List.Selection
+              options={[
+                { label: '子一', value: 'ziyi' },
+                { label: '子二', value: 'zier' },
+              ]}
+            />
+          </ListPicker>
+        </div>
       </div>
     </div>
   );

diff --git a/src/list-picker/listPicker.tsx b/src/list-picker/listPicker.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
-import { isArray } from 'lodash';
 import { ListPickerProps } from './interfance';
 import Popover from '../popover';
 import Trigger from './Trigger';
@@ -32,12 +31,12 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
     overlayStyle,
     children,
     onConfim,
-    needConfim = false,
     confimText = '确定',
     separator = '',
     className,
     style,
-    model,
+    model = 'simple',
+    needConfim = model === 'multiple',
   } = props;
   const defaultPrefix = usePrefixCls(prefixCls);
   const [visible, setVisible] = useControlledState(controlledVisible, false);
@@ -46,20 +45,16 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
 
   const { options, setOptions, getLabelByValue, getOptionsByValue } = useCacheOptions();
 
+  // title仅跟随controlledValue变动
   useEffect(() => {
-    setValue(controlledValue);
-  }, [controlledValue]);
-
-  useEffect(() => {
-    console.log('getLabelByValue(value, separator)', getLabelByValue(value, separator));
-    setTitle(getLabelByValue(value, separator));
-  }, [value, getLabelByValue, separator]);
+    setTitle(getLabelByValue(controlledValue, separator));
+  }, [controlledValue, getLabelByValue, separator]);
 
   useEffect(() => {
     if (!needConfim) {
       setValue(controlledValue);
     }
-  }, [controlledValue, needConfim]);
+  }, [controlledValue, needConfim, setValue]);
   // methods
   const handVisibleChange = (vis: boolean) => {
     setVisible(vis);
@@ -72,7 +67,6 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
 
   const handleChange = (val?: string | string[], opts?: OptionProps | OptionProps[]) => {
     setValue(val);
-    setTitle(!isArray(opts) ? opts?.label : '');
     if (!needConfim) {
       onChange?.(val, opts);
     }
@@ -116,7 +110,7 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
   );
 
   return (
-    <ListContext.Provider value={{ value, onChange: handleChange, options, setOptions }}>
+    <ListContext.Provider value={{ value, model, onChange: handleChange, options, setOptions }}>
       <Popover
         content={renderOverlay()}
         trigger={trigger}

diff --git a/src/list-picker/style/index.less b/src/list-picker/style/index.less
@@ -1,8 +1,8 @@
 @import '../../stylesheet/variables/index.less';
 @import '~@gio-design/utils/lib/less/mixins.less';
 @list-picker-prefix-cls: ~'@{component-prefix}-list-picker--new';
-@selection-prefix-cls: ~'gio-list-new--selection';
-@list-prefix-cls: ~'gio-list-new';
+@selection-prefix-cls: ~'@{component-prefix}-list-new--selection';
+@list-prefix-cls: ~'@{component-prefix}-list-new';
 .@{list-picker-prefix-cls} {
   box-sizing: border-box;
   min-width: 120px;

diff --git a/src/list-picker/util.ts b/src/list-picker/util.ts
@@ -24,7 +24,6 @@ export const getFlattenOptions = (
     });
   });
   const flattenOption: { groupName: string; groupId: string; options: OptionProps[] }[] = [];
-  console.log('groupMap', groupMap);
   groupMap.forEach((value) => {
     flattenOption.push({
       groupName: value.label,

diff --git a/src/list/List.tsx b/src/list/List.tsx
@@ -47,13 +47,19 @@ const List: React.ForwardRefRenderFunction<HTMLDivElement, ListProps> & {
   const [collapse, setCollapse] = useState(initCollapse);
 
   // value and onChange
-  const { value: contextValue, onChange: contextOnChange, setOptions: contextSetOptions } = useContext(ListContext);
+  const {
+    value: contextValue,
+    model: contextModel,
+    onChange: contextOnChange,
+    setOptions: contextSetOptions,
+  } = useContext(ListContext);
+  const mergedModel = contextModel ?? model;
   const { value, onChange } = useValue(
     controlledValue,
     controlledOnChange,
     contextValue,
     contextOnChange,
-    isMultipe(model)
+    isMultipe(mergedModel)
   );
 
   const cache = useCacheOptions();
@@ -73,22 +79,21 @@ const List: React.ForwardRefRenderFunction<HTMLDivElement, ListProps> & {
   }, [mergedOptions, setOptions]);
 
   const renderOptions = initOptions?.length ? initOptions : React.Children.toArray(children);
-  console.log('renderOptions', renderOptions);
   const childrens = renderOptions.slice(0, collapse);
   const isNeedCollapse = useMemo(() => renderOptions?.length > collapse, [renderOptions, collapse]);
-  const handleClick = (val: string, opt?: OptionProps) => {
+  const handleClick = (val: string) => {
     // multiple
     if (isArray(value)) {
       const resultValue = indexOf(value, val) !== -1 ? difference(value, [val]) : [...value, val];
-      onChange?.(resultValue, opt ?? cache.getOptionsByValue(resultValue));
+      onChange?.(resultValue, cache.getOptionsByValue(resultValue));
     }
     // cascader
-    else if (isCascader(model)) {
-      onChange?.(val, opt);
+    else if (isCascader(mergedModel)) {
+      onChange?.(val, cache.getOptionsByValue(val));
     }
     // normal
     else if (value !== val) {
-      onChange?.(val, opt ?? cache.getOptionsByValue(val));
+      onChange?.(val, cache.getOptionsByValue(val));
     }
   };
 
@@ -119,8 +124,8 @@ const List: React.ForwardRefRenderFunction<HTMLDivElement, ListProps> & {
         prefix={prefix?.(option)}
         suffix={suffix?.(option)}
         disabled={option?.disabled ?? disabled}
-        isMultiple={isMultipe(model)}
-        isCascader={isCascader(model)}
+        isMultiple={isMultipe(mergedModel)}
+        isCascader={isCascader(mergedModel)}
         selectValue={value}
         selected={selectStatus(option?.value, value)}
         onClick={handleClick}
@@ -143,19 +148,19 @@ const List: React.ForwardRefRenderFunction<HTMLDivElement, ListProps> & {
         } = node;
 
         const item = { label: node?.props?.label, value: node?.props?.value } as OptionProps;
-        console.log('item', item);
+
         return React.cloneElement(node, {
           ...rest,
           disabled: itemDisabled ?? disabled,
           prefix: itemPrefix ?? prefix?.(item),
           suffix: itemSuffix ?? suffix?.(item),
-          isMultiple: isMultipe(model),
-          isCascader: isCascader(model),
+          isMultiple: isMultipe(mergedModel),
+          isCascader: isCascader(mergedModel),
           selectValue: value,
           selected: selectStatus(item.value, value),
-          onClick: (val: string, opt: OptionProps) => {
+          onClick: (val: string) => {
             handleClick(val);
-            onClick?.(val, opt);
+            onClick?.(val);
           },
         });
       }

diff --git a/src/list/Selection.tsx b/src/list/Selection.tsx
@@ -12,12 +12,10 @@ const Selection: React.FC<SelectionProps> & { isSelection: boolean } = (props) =
   const prefixCls = `${usePrefixCls(PREFIX)}--selection`;
   const childrens = React.Children.toArray(children);
   const isSelection = options?.every((val) => 'groupId' in val) ?? false;
-  console.log('isSelection', isSelection);
   const selectionOptions: { groupId: string; groupName: string; options: OptionProps[] }[] | OptionProps[] = useMemo(
     () => getFlattenOptions(options, isSelection),
     [isSelection, options]
   );
-  console.log('selectionOptions', selectionOptions);
   // var cars = [{ make: 'audi', model: 'r8', year: '2012' }, { make: 'audi', model: 'rs5', year: '2013' }, { make: 'ford', model: 'mustang', year: '2012' }, { make: 'ford', model: 'fusion', year: '2015' }, { make: 'kia', model: 'optima', year: '2012' }],
   // result = cars.reduce(function (r, a) {
   //     r[a.make] = r[a.make] || [];

diff --git a/src/list/context.tsx b/src/list/context.tsx
@@ -5,12 +5,14 @@ import { OptionProps, ListProps } from './interfance';
 
 interface ListContextProps {
   value?: string | string[];
+  model?: 'simple' | 'cascader' | 'multiple';
   onChange?: (value?: string | string[], options?: OptionProps | OptionProps[]) => void;
   options?: Map<string, OptionProps>;
   setOptions?: (options?: OptionProps[]) => void;
 }
-const defaultList = {
+const defaultList: ListContextProps = {
   value: '',
+  model: undefined,
   onChange: noop,
   setOptions: noop,
 };

diff --git a/src/list/hooks/useCacheOptions.ts b/src/list/hooks/useCacheOptions.ts
@@ -34,7 +34,6 @@ const useCacheOptions = () => {
       : getOptionByValue(optValue);
 
   const getLabelByValue = (val?: string | string[], separator = '') => {
-    console.log('val', val, separator);
     if (val === '' || typeof val === 'undefined') {
       return '';
     }

diff --git a/src/list/inner/CascaderItem.tsx b/src/list/inner/CascaderItem.tsx
@@ -41,10 +41,7 @@ const CascaderItem: React.ForwardRefRenderFunction<
 
   // list
   const prefixClsItem = `${prefixCls}--item`;
-  const onClick = () =>
-    !disabled
-      ? propsOnClick?.(generateString(value, selectParent), selectParent?.[0] ?? { label: '', value: '' })
-      : noop;
+  const onClick = () => (!disabled ? propsOnClick?.(generateString(value, selectParent)) : noop);
 
   const content = () => {
     if (!isEmpty(childrens)) {

diff --git a/src/list/inner/ChckboxItem.tsx b/src/list/inner/ChckboxItem.tsx
@@ -22,7 +22,7 @@ const CheckboxItem: React.ForwardRefRenderFunction<
         disabled={disabled}
         onClick={(e) => {
           if (!disabled) {
-            onClick?.(value, { label: '', value: '' });
+            onClick?.(value);
             e?.stopPropagation();
           }
         }}

diff --git a/src/list/inner/baseItem.tsx b/src/list/inner/baseItem.tsx
@@ -68,7 +68,7 @@ const BaseItem: React.ForwardRefRenderFunction<
         aria-hidden="true"
         ref={ref}
         {...rest}
-        onClick={() => (!disabled ? onClick?.(value, { label: content as string, value }) : noop)}
+        onClick={() => (!disabled ? onClick?.(value) : noop)}
       >
         {contentRender?.(contentElement)}
       </li>

diff --git a/src/list/interfance.ts b/src/list/interfance.ts
@@ -128,5 +128,5 @@ export interface BaseItemProps extends Pick<OptionProps, 'value' | 'disabled'> {
   selected?: boolean;
   prefix?: string | React.ReactNode;
   suffix?: string | React.ReactNode;
-  onClick?: (value: string, option: OptionProps) => void;
+  onClick?: (value: string) => void;
 }
diff --git a/src/list/style/index.less b/src/list/style/index.less
@@ -1,8 +1,8 @@
 @import '../../stylesheet/variables/index.less';
 @import '~@gio-design/utils/lib/less/mixins.less';
 @list-prefix-cls: ~'@{component-prefix}-list-new';
-@cascader-prefix-cls: ~'gio-cascader--new';
-@cascader-content-prefix-cls: ~'gio-cascader--new--cascader--content';
+@cascader-prefix-cls: ~'@{component-prefix}-cascader--new';
+@cascader-content-prefix-cls: ~'@{cascader-prefix-cls}--cascader--content';
 
 .@{cascader-content-prefix-cls} {
   &[data-popper-placement^='top'] {
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,7 @@ const Trigger: React.FC<TriggerProps> = (props) => { @@
         onClear?.(e);
         e.stopPropagation();
       };
       return <Input.Button placeholder={placeholder} value={value as string} onClear={handleClear} {...rest} />;
     };
@@ Expand Down @@