fix(list-picker): list-picker mutiple controlled error (#1517)

Co-authored-by: berber1016 <c1094282069@gmail.com>

src/list-picker/Trigger.tsx

@@ -8,8 +8,7 @@ const Trigger: React.FC<TriggerProps> = (props) => {
     onClear?.(e);
     e.stopPropagation();
   };
-
-  return <Input.Button placeholder={placeholder} value={value as string} onClear={handleClear} {...rest} />;
+  return <Input.Button placeholder={placeholder} value={(value as string) ?? ''} onClear={handleClear} {...rest} />;
 };
 
 export default Trigger;

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

@@ -11,6 +11,7 @@ import ListPicker from '../listPicker';
 import SearchBar from '../../search-bar';
 import Tabs, { Tab } from '../../tabs';
 import List from '../../list';
+import Button from '../../button/Button';
 
 export default {
   title: 'Upgraded/ListPicker',
@@ -45,6 +46,11 @@ const Template: Story<ListPickerProps> = () => {
     <div>
       <h3>单选</h3>
       <div className="demo-box">
+        <div style={{ padding: '10px' }}>
+          <Button size="small" onClick={() => setValue(undefined)}>
+            清空
+          </Button>
+        </div>
         <ListPicker
           value={value}
           onChange={onChange}
@@ -178,6 +184,11 @@ const Template: Story<ListPickerProps> = () => {
           </ListPicker>
         </div>
         <div className="demo-box">
+          <div style={{ padding: '10px' }}>
+            <Button size="small" onClick={() => setMultipleValue(['ziyi', 'zier'])}>
+              全选
+            </Button>
+          </div>
           <ListPicker
             value={multipleValue}
             onChange={(val) => {

src/list-picker/listPicker.tsx

@@ -37,7 +37,7 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
     separator = '',
     className,
     style,
-    model = 'simple',
+    model = 'single',
     needConfim = model === 'multiple',
   } = props;
   const defaultPrefix = usePrefixCls(prefixCls);
@@ -53,9 +53,7 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
   }, [controlledValue, getLabelByValue, separator, options]);
 
   useEffect(() => {
-    if (!needConfim) {
-      setValue(controlledValue);
-    }
+    setValue(controlledValue);
   }, [controlledValue, needConfim, setValue]);
   useEffect(() => {
     if (needConfim && !visible && !isEqual(controlledValue, value)) {

src/list/List.tsx

@@ -31,7 +31,7 @@ const List: React.ForwardRefRenderFunction<HTMLDivElement, ListProps> & {
     children,
     disabled = false,
     value: controlledValue,
-    model = 'simple',
+    model = 'single',
     collapse: initCollapse = 10,
     prefix,
     suffix,

src/list/context.tsx

@@ -5,7 +5,7 @@ import { OptionProps, ListProps } from './interfance';
 
 interface ListContextProps {
   value?: string | string[];
-  model?: 'simple' | 'cascader' | 'multiple';
+  model?: 'single' | 'cascader' | 'multiple';
   onChange?: (value?: string | string[], options?: OptionProps | OptionProps[]) => void;
   options?: Map<string, OptionProps>;
   setOptions?: (options?: OptionProps[]) => void;

src/list/interfance.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export type ModelType = 'cascader' | 'multiple' | 'simple';
+export type ModelType = 'cascader' | 'multiple' | 'single';
 
 export interface SelectionProps extends ListProps {
   className?: string;