fix(list-picker): add recent component (#1522)

growingio · Nov 25, 2021 · 853048d · 853048d · vercel · Nov 25, 2021
1 parent a83a563
commit 853048d
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 68 deletions.
diff --git a/src/input/interface.ts b/src/input/interface.ts
@@ -138,12 +138,12 @@ export interface InputButtonProps
   /**
    * 当Input Button的值修改后的方法
    */
-  onChange?: (value: string) => void;
+  onChange?: (value?: string) => void;
 
   /**
    * 当Input Button的值修改后的方法
    */
-  onInputChange?: (value: string) => void;
+  onInputChange?: (value?: string) => void;
 
   /**
    * 点击onClear回调

diff --git a/src/list-picker/Recent.tsx b/src/list-picker/Recent.tsx
@@ -0,0 +1,29 @@
+import { slice } from 'lodash';
+import React, { useContext } from 'react';
+import { List, OptionProps } from '../list';
+import { ListContext } from '../list/context';
+
+export const ITEM_KEY = '__GIO_SELECTION_KEY';
+
+interface RecentProps {
+  title?: string;
+  max?: number;
+}
+
+const Recent: React.FC<RecentProps> & { isRecent: boolean } = (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')
+  const mayBeArray = Array.from((context?.options ?? new Map())?.values());
+  const options = slice(
+    mayBeArray?.filter((value?: OptionProps) => matchValue?.includes(value?.value)),
+    0,
+    max
+  );
+  const handleOnChange = (value?: string | string[], opts?: OptionProps | OptionProps[]) =>
+    context?.onChange?.(value, opts);
+  return <List title={title} id={ITEM_KEY} options={options} value="" onChange={handleOnChange} />;
+};
+Recent.isRecent = true;
+export default Recent;
diff --git a/src/list-picker/demos/List-picker.stories.tsx b/src/list-picker/demos/List-picker.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import '../style';
-import { uniqueId } from 'lodash';
+import { isEqual, uniqueId } from 'lodash';
 import CheckboxItem from '../../list/inner/ChckboxItem';
 import { OptionProps } from '../../list/interfance';
 // import { uniqueId } from 'lodash';
@@ -13,6 +13,7 @@ import SearchBar from '../../search-bar';
 import Tabs, { Tab } from '../../tabs';
 import List from '../../list';
 import Button from '../../button/Button';
+import Recent from '../Recent';
 
 export default {
   title: 'Upgraded/ListPicker',
@@ -48,7 +49,7 @@ const Template: Story<ListPickerProps> = () => {
     console.log('onChange执行', val, opt, search);
   };
   return (
-    <div>
+    <div style={{ height: '3000px' }}>
       <h3>单选</h3>
       <div className="demo-box">
         <div style={{ padding: '10px' }}>
@@ -75,6 +76,7 @@ const Template: Story<ListPickerProps> = () => {
           <Tabs value={activeTab} defaultValue="tab1" onChange={(key: string) => setActiveTab(key)}>
             <Tab label="tab1" value="tab1">
               <List.Selection>
+                <Recent title="最近使用" />
                 <List
                   id="group1"
                   title="分组1"
@@ -95,6 +97,7 @@ const Template: Story<ListPickerProps> = () => {
             </Tab>
             <Tab label="tab2" value="tab2">
               <List.Selection>
+                <Recent title="最近使用" />
                 <List
                   id="group2"
                   title="分组2"
@@ -118,7 +121,7 @@ const Template: Story<ListPickerProps> = () => {
       </div>
       <div>
         <h3>scroll list</h3>
-        <ListPicker placeholder="请选择">
+        <ListPicker placeholder="请选择" getContainer={(node) => node?.parentElement || document.body}>
           <Tabs value={activeTab} defaultValue="tab1" onChange={(key: string) => setActiveTab(key)}>
             <Tab label="tab1" value="tab1">
               <List style={{ width: '240px' }} options={simpleLargeOptions} />
@@ -208,7 +211,7 @@ const Template: Story<ListPickerProps> = () => {
             overlayStyle={{ width: '240px' }}
             model="multiple"
             onClear={() => {
-              setValue('');
+              setMultipleValue([]);
             }}
             placeholder="请选择"
           >
@@ -219,25 +222,72 @@ const Template: Story<ListPickerProps> = () => {
               onSearch={(val: string) => setSearch(val)}
             />
 
-            <List.Selection>
-              {(context) => (
-                <>
-                  <CheckboxItem
-                    selected={context.value?.length === 2}
-                    onClick={() => {
-                      if (context.value?.length === 2) {
-                        context.onChange([]);
-                      } else {
-                        context.onChange(['ziyi', 'zier']);
-                      }
-                    }}
-                    label="全部"
-                    value="all"
-                  />
-                  <List options={multipleOptions} id="id" title="有item" />
-                </>
-              )}
-            </List.Selection>
+            <Tabs value={activeTab} defaultValue="tab1" onChange={(key: string) => setActiveTab(key)}>
+              <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);
+                    return (
+                      <>
+                        <CheckboxItem
+                          selected={isEqualValue}
+                          onClick={() => {
+                            if (isEqualValue) {
+                              context.onChange([]);
+                            } else {
+                              context.onChange(Array.from(context.options.keys()));
+                            }
+                          }}
+                          label="全部"
+                          value="all"
+                        />
+
+                        <List options={multipleOptions} id="id" title="有item" />
+                      </>
+                    );
+                  }}
+                </List.Selection>
+              </Tab>
+              <Tab label="tab2" value="tab2">
+                <List.Selection>
+                  {(context) => {
+                    const isEqualValue = isEqual(
+                      Array.from(context.options.values()).reduce((p, v) => [...p, v.value], []),
+                      context.value
+                    );
+                    return (
+                      <>
+                        <CheckboxItem
+                          selected={isEqualValue}
+                          onClick={() => {
+                            if (isEqualValue) {
+                              context.onChange([]);
+                            } else {
+                              context.onChange(Array.from(context.options.keys()));
+                            }
+                          }}
+                          label="全部"
+                          value="all"
+                        />
+
+                        <List
+                          options={[
+                            { label: '1', value: '1' },
+                            { label: '2', value: '2' },
+                          ]}
+                          id="id"
+                          title="有item"
+                        />
+                      </>
+                    );
+                  }}
+                </List.Selection>
+              </Tab>
+            </Tabs>
           </ListPicker>
         </div>
         <h3>selection下list 无 item</h3>

diff --git a/src/list-picker/index.tsx b/src/list-picker/index.tsx
@@ -1,7 +1,8 @@
 import { ListPickerProps } from './interfance';
 
 import ListPicker from './listPicker';
+import Recent from './Recent';
 
 export type { ListPickerProps };
-
+export { ListPicker, Recent };
 export default ListPicker;
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 classNames from 'classnames';
-import { isEqual } from 'lodash';
+import { isEqual, isNil } from 'lodash';
 import { ListPickerProps } from './interfance';
 import Popover from '../popover';
 import Trigger from './Trigger';
@@ -10,6 +10,7 @@ import { OptionProps } from '../list/interfance';
 import Button from '../button';
 import { ListContext } from '../list/context';
 import useCacheOptions from '../list/hooks/useCacheOptions';
+import { ITEM_KEY } from './Recent';
 // import CheckboxItem from '../list/inner/ChckboxItem';
 
 // const defaultEmpty = () => <Page type="noData" size="small" style={{ margin: '0 auto', padding: '40px 0px' }} />;
@@ -77,6 +78,11 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
 
   const handleChange = (val?: string | string[], opts?: OptionProps | OptionProps[]) => {
     if (model !== 'multiple') {
+      const localStorageValue = localStorage?.getItem(ITEM_KEY);
+      const recentKey: string[] = (JSON.parse(isNil(localStorageValue) ? '' : localStorageValue) || []).filter(
+        (v: string) => v !== val
+      );
+      localStorage?.setItem(ITEM_KEY, JSON.stringify([val, ...recentKey].slice(0, 20)));
       onChange?.(val, opts);
       handVisibleChange(false);
     } else {

diff --git a/src/list/List.tsx b/src/list/List.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { difference, indexOf, isArray, isEmpty, isNil, toArray } from 'lodash';
+import { difference, indexOf, isArray, isEmpty, isNil } from 'lodash';
 import { OptionProps, ItemProps, ListProps } from './interfance';
 import usePrefixCls from '../utils/hooks/use-prefix-cls';
 import { PREFIX } from './constants';
@@ -74,7 +74,7 @@ const List: React.ForwardRefRenderFunction<HTMLDivElement, ListProps> & {
     setOptions(mergedOptions);
   }, [mergedOptions, setOptions]);
 
-  const renderOptions = initOptions?.length ? initOptions : toArray(children);
+  const renderOptions = initOptions?.length ? initOptions : React.Children.toArray(children);
   const childrens = renderOptions.slice(0, collapse);
   const isNeedCollapse = useMemo(() => renderOptions?.length > collapse, [renderOptions, collapse]);
   const handleClick = (val: string) => {
@@ -122,7 +122,7 @@ const List: React.ForwardRefRenderFunction<HTMLDivElement, ListProps> & {
     return (child as React.ReactNode[])?.map(
       (node: React.ReactElement<ItemProps & { isMultiple: boolean; isCascader: boolean }>) => {
         const {
-          props: { disabled: itemDisabled, prefix: itemPrefix, suffix: itemSuffix, onClick, ...rest },
+          props: { disabled: itemDisabled = undefined, prefix: itemPrefix, suffix: itemSuffix, onClick, ...rest },
         } = node;
 
         const item = { label: node?.props?.label, value: node?.props?.value } as OptionProps;