perf: 👌优化组件

src/List/index.tsx

@@ -12,6 +12,7 @@ const LList: React.FC<LListProps> & {
   onScrollBottom,
 
   renderItem,
+  virtualListProps = {},
   ...restProps
 }) => {
   const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
@@ -29,13 +30,14 @@ const LList: React.FC<LListProps> & {
   return (
     <List itemLayout="vertical" {...restProps}>
       <VirtualList
-        data={restProps.dataSource ?? []}
+        data={restProps.dataSource || []}
         height={height}
         itemHeight={itemMinHeight}
         itemKey={rowKey as React.Key}
         onScroll={onScroll}
+        {...virtualListProps}
       >
-        {(item, index) => renderItem?.(item, index)}
+        {(item, index, props) => renderItem?.(item, index, props)}
       </VirtualList>
     </List>
   );

src/List/interface.ts

@@ -15,5 +15,10 @@ export type LListProps = {
    * 虚拟滚动开启时，容器滚动触底事件的处理函数
    *@see 官网 https://llq0802.github.io/lighting-design/latest LListProps
    */
+
   onScrollBottom?: () => void;
+  /**
+   * @see https://github.com/react-component/virtual-list
+   */
+  virtualListProps?: Record<string, any>;
 } & ListProps<any>;

src/Table/base/BaseTable.tsx

@@ -425,8 +425,9 @@ const BaseTable: FC<Partial<LTableProps>> = forwardRef((props, ref) => {
           },
         }}
         pagination={
-          outPagination !== false
-            ? {
+          outPagination === false || outPagination === null
+            ? false
+            : {
                 showTotal,
                 showSizeChanger: true,
                 current: hasDataSource ? void 0 : paginationAction?.current,
@@ -439,7 +440,6 @@ const BaseTable: FC<Partial<LTableProps>> = forwardRef((props, ref) => {
                 },
                 className: classnames(`${LIGHTD_TABLE}-pagination`, outPagination?.className),
               }
-            : false
         }
         {...restProps}
         ref={ref}

src/Table/base/hooks.tsx

@@ -360,6 +360,7 @@ export function useInitTable({
         queryFormRef.current?.setFieldsValue({ ...initFormValues });
       }
     }
+
     run({ ...defaultRequestParams, current, pageSize, formValues }, 'onInit');
   }, [isReady]);
 }

src/Table/demos/Demo30.tsx

@@ -0,0 +1,74 @@
+import type { FormInstance } from 'antd';
+import { Alert, Button } from 'antd';
+import type { LTableInstance } from 'lighting-design';
+import { LFormItemInput, LTable } from 'lighting-design';
+import type { FC } from 'react';
+import { useRef, useState } from 'react';
+import { apiGetUserList, columns } from './service';
+
+const formItems = [
+  <LFormItemInput key="0" name="input4" label="输入框" />,
+  <LFormItemInput key="1" name="input5" label="输入框" />,
+  <LFormItemInput key="2" name="input6" label="输入框" />,
+  <LFormItemInput key="3" name="input7" label="输入框" />,
+];
+
+const Demo3: FC = () => {
+  const formRef = useRef<FormInstance>();
+  const tableRef = useRef<LTableInstance>();
+
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
+    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
+    setSelectedRowKeys(newSelectedRowKeys);
+  };
+  const rowSelection = {
+    preserveSelectedRowKeys: true,
+    selectedRowKeys,
+    onChange: onSelectChange,
+  };
+
+  return (
+    <LTable
+      rowKey="key"
+      rowSelection={rowSelection}
+      tableRef={tableRef}
+      toolbarLeft={<Button type="primary">新增</Button>}
+      toolbarRight={<Button type="primary">审批</Button>}
+      formItems={formItems}
+      // tableExtra='也可以把 Alert 放这'
+      tableHeaderRender={() =>
+        selectedRowKeys.length ? (
+          <Alert
+            style={{ marginBottom: 10 }}
+            message={`已选择 ${selectedRowKeys.length} 项，共 ${
+              tableRef.current?.pagination.total || 0
+            } 项`}
+            type="info"
+            action={
+              <a
+                onClick={() => {
+                  onSelectChange([]);
+                }}
+              >
+                取消选择
+              </a>
+            }
+          />
+        ) : null
+      }
+      formRef={formRef}
+      columns={columns}
+      request={async (params, requestType) => {
+        const res: Record<string, any> = await apiGetUserList(params);
+        return {
+          success: true,
+          data: res.data,
+          total: res.total,
+        };
+      }}
+    />
+  );
+};
+
+export default Demo3;

src/Table/index.md

@@ -76,6 +76,10 @@ nav:
 
 <code src='./demos/Demo19.tsx' background="#f5f5f5"></code>
 
+### 表格选中功能
+
+<code src='./demos/Demo30.tsx' background="#f5f5f5"></code>
+
 ### 表格额外信息
 
 <code src='./demos/Demo3.tsx' background="#f5f5f5"></code>

src/Trigger/demos/Demo4.tsx

@@ -17,7 +17,12 @@ const Demo4 = () => {
         <MyTable1 />
       </LTrigger>
       <h4> LTable 多选Tag</h4>
-      <LTrigger mode="checkboxTag" width="50%">
+      <LTrigger
+        mode="checkboxTag"
+        width="50%"
+        // 最多显示多少个 tag，响应式模式会对性能产生损耗
+        // maxTagCount="responsive"
+      >
         <MyTable1 />
       </LTrigger>
     </div>

src/Trigger/demos/Demo8.tsx

@@ -0,0 +1,13 @@
+import ScrollTableSelect from './components/ScrollTableSelect';
+
+export default function Demo8() {
+  return (
+    <div>
+      <h5>无线滚动</h5>
+      {/* <LTrigger width="50%" overlayArrow>
+          <MyTable2></MyTable2>
+        </LTrigger> */}
+      <ScrollTableSelect></ScrollTableSelect>
+    </div>
+  );
+}

src/Trigger/demos/components/MyTable2.tsx

@@ -0,0 +1,83 @@
+import { useMount } from 'ahooks';
+import { Avatar, Checkbox, message } from 'antd';
+import { LList } from 'lighting-design';
+import React, { useState } from 'react';
+
+interface UserItem {
+  email: string;
+  gender: string;
+  name: {
+    first: string;
+    last: string;
+    title: string;
+  };
+  nat: string;
+  picture: {
+    large: string;
+    medium: string;
+    thumbnail: string;
+  };
+}
+
+const fakeDataUrl =
+  'https://randomuser.me/api/?results=10&inc=id,name,gender,email,nat,picture&noinfo';
+const ContainerHeight = 500;
+
+const Demo1: React.FC = () => {
+  const [data, setData] = useState<UserItem[]>([]);
+
+  const appendData = () => {
+    fetch(fakeDataUrl)
+      .then((res) => res.json())
+      .then((body) => {
+        setData(data.concat(body.results));
+        message.destroy('updatable');
+      });
+  };
+
+  useMount(() => {
+    appendData();
+  });
+
+  const onScrollBottom = () => {
+    console.log('onScrollBottom');
+    message.loading({
+      key: 'updatable',
+      duration: 0,
+      content: '加载中...',
+    });
+    setTimeout(() => {
+      appendData();
+    }, 1000);
+  };
+
+  return (
+    <Checkbox.Group
+      style={{ width: '100%', display: 'block' }}
+      onChange={(vals) => {
+        console.log('==vals====>', vals);
+      }}
+    >
+      <LList
+        dataSource={data}
+        height={ContainerHeight}
+        itemMinHeight={10}
+        rowKey="email"
+        onScrollBottom={onScrollBottom}
+        renderItem={(item: UserItem, i) => {
+          return (
+            <Checkbox value={i}>
+              <div style={{ border: '1px solid', marginBottom: 8 }}>
+                <Avatar src={item.picture.large} size="small" />
+                <div>{item.name.last}</div>
+                <div>{item.email}</div>
+              </div>
+            </Checkbox>
+          );
+        }}
+      />
+    </Checkbox.Group>
+  );
+};
+
+export default Demo1;