@fle-ui/next 1.0.0-alpha.1 → 1.0.0-alpha.2

package/components/table/demos/summary.tsx

@@ -1,139 +0,0 @@
-/**
- * title: 总结栏
- * desc: 通过 `summary` 设置总结栏。使用 `Table.Summary.Cell` 同步 Column 的固定状态。你可以通过配置 `Table.Summary` 的 `fixed` 属性使其固定(`4.16.0` 支持)。
- */
-
-import React from 'react';
-import { Table } from '@fle-ui/next';
-import { Typography } from 'antd';
-
-const { Text } = Typography;
-
-const columns = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-  },
-  {
-    title: 'Borrow',
-    dataIndex: 'borrow',
-  },
-  {
-    title: 'Repayment',
-    dataIndex: 'repayment',
-  },
-];
-
-const data = [
-  {
-    key: '1',
-    name: 'John Brown',
-    borrow: 10,
-    repayment: 33,
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    borrow: 100,
-    repayment: 0,
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    borrow: 10,
-    repayment: 10,
-  },
-  {
-    key: '4',
-    name: 'Jim Red',
-    borrow: 75,
-    repayment: 45,
-  },
-];
-
-const fixedColumns = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    fixed: true,
-    width: 100,
-  },
-  {
-    title: 'Description',
-    dataIndex: 'description',
-  },
-];
-
-const fixedData: any = [];
-
-for (let i = 0; i < 20; i += 1) {
-  fixedData.push({
-    key: i,
-    name: ['Light', 'Bamboo', 'Little'][i % 3],
-    description: 'Everything that has a beginning, has an end.',
-  });
-}
-
-const Demo = () => {
-  return (
-    <>
-      <Table
-        columns={columns}
-        dataSource={data}
-        pagination={false}
-        bordered
-        summary={(pageData) => {
-          let totalBorrow = 0;
-          let totalRepayment = 0;
-
-          pageData.forEach(({ borrow, repayment }) => {
-            totalBorrow += borrow;
-            totalRepayment += repayment;
-          });
-
-          return (
-            <>
-              <Table.Summary.Row>
-                <Table.Summary.Cell index={1}>Total</Table.Summary.Cell>
-                <Table.Summary.Cell index={2}>
-                  <Text type="danger">{totalBorrow}</Text>
-                </Table.Summary.Cell>
-                <Table.Summary.Cell index={3}>
-                  <Text>{totalRepayment}</Text>
-                </Table.Summary.Cell>
-              </Table.Summary.Row>
-              <Table.Summary.Row>
-                <Table.Summary.Cell index={4}>Balance</Table.Summary.Cell>
-                <Table.Summary.Cell colSpan={2} index={5}>
-                  <Text type="danger">{totalBorrow - totalRepayment}</Text>
-                </Table.Summary.Cell>
-              </Table.Summary.Row>
-            </>
-          );
-        }}
-      />
-
-      <br />
-
-      <Table
-        columns={fixedColumns}
-        dataSource={fixedData}
-        pagination={false}
-        scroll={{ x: 2000, y: 500 }}
-        bordered
-        summary={() => (
-          <Table.Summary fixed>
-            <Table.Summary.Row>
-              <Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
-              <Table.Summary.Cell index={1}>
-                This is a summary content
-              </Table.Summary.Cell>
-            </Table.Summary.Row>
-          </Table.Summary>
-        )}
-      />
-    </>
-  );
-};
-
-export default Demo;

package/components/table/demos/tree-data.jsx

@@ -1,130 +0,0 @@
-/**
- * title: 树形数据展示
- * desc: 表格支持树形数据的展示，当数据中有 `children` 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 `childrenColumnName` 进行配置。<br /><br /> 可以通过设置 `indentSize` 以控制每一层的缩进宽度。
- */
-
-import React, { useState } from 'react';
-import { Table, Switch } from '@fle-ui/next';
-import { Space } from 'antd';
-
-const columns = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    key: 'name',
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-    key: 'age',
-    width: '12%',
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-    width: '30%',
-    key: 'address',
-  },
-];
-
-const data = [
-  {
-    key: 1,
-    name: 'John Brown sr.',
-    age: 60,
-    address: 'New York No. 1 Lake Park',
-    children: [
-      {
-        key: 11,
-        name: 'John Brown',
-        age: 42,
-        address: 'New York No. 2 Lake Park',
-      },
-      {
-        key: 12,
-        name: 'John Brown jr.',
-        age: 30,
-        address: 'New York No. 3 Lake Park',
-        children: [
-          {
-            key: 121,
-            name: 'Jimmy Brown',
-            age: 16,
-            address: 'New York No. 3 Lake Park',
-          },
-        ],
-      },
-      {
-        key: 13,
-        name: 'Jim Green sr.',
-        age: 72,
-        address: 'London No. 1 Lake Park',
-        children: [
-          {
-            key: 131,
-            name: 'Jim Green',
-            age: 42,
-            address: 'London No. 2 Lake Park',
-            children: [
-              {
-                key: 1311,
-                name: 'Jim Green jr.',
-                age: 25,
-                address: 'London No. 3 Lake Park',
-              },
-              {
-                key: 1312,
-                name: 'Jimmy Green sr.',
-                age: 18,
-                address: 'London No. 4 Lake Park',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    key: 2,
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-  },
-];
-
-// rowSelection objects indicates the need for row selection
-const rowSelection = {
-  onChange: (selectedRowKeys, selectedRows) => {
-    console.log(
-      `selectedRowKeys: ${selectedRowKeys}`,
-      'selectedRows: ',
-      selectedRows,
-    );
-  },
-  onSelect: (record, selected, selectedRows) => {
-    console.log(record, selected, selectedRows);
-  },
-  onSelectAll: (selected, selectedRows, changeRows) => {
-    console.log(selected, selectedRows, changeRows);
-  },
-};
-
-const Demo = () => {
-  const [checkStrictly, setCheckStrictly] = useState(false);
-
-  return (
-    <>
-      <Space align="center" style={{ marginBottom: 16 }}>
-        CheckStrictly:{' '}
-        <Switch checked={checkStrictly} onChange={setCheckStrictly} />
-      </Space>
-      <Table
-        columns={columns}
-        rowSelection={{ ...rowSelection, checkStrictly }}
-        dataSource={data}
-      />
-    </>
-  );
-};
-
-export default Demo;

package/components/table/demos/virtual-list.tsx

@@ -1,147 +0,0 @@
-/**
- * title: 虚拟列表
- * desc: 通过 `react-window` 引入虚拟滚动方案，实现 100000 条数据的高性能表格。
- */
-
-import React, { useState, useEffect, useRef } from 'react';
-import { VariableSizeGrid as Grid } from 'react-window';
-import ResizeObserver from 'rc-resize-observer';
-import classNames from 'classnames';
-import { Table } from '@fle-ui/next';
-
-function VirtualTable(props: Parameters<typeof Table>[0]) {
-  const { columns, scroll } = props;
-  const [tableWidth, setTableWidth] = useState(0);
-
-  const widthColumnCount = columns!.filter(({ width }) => !width).length;
-  const mergedColumns = columns!.map((column) => {
-    if (column.width) {
-      return column;
-    }
-
-    return {
-      ...column,
-      width: Math.floor(tableWidth / widthColumnCount),
-    };
-  });
-
-  const gridRef = useRef<any>();
-  const [connectObject] = useState<any>(() => {
-    const obj = {};
-    Object.defineProperty(obj, 'scrollLeft', {
-      get: () => null,
-      set: (scrollLeft: number) => {
-        if (gridRef.current) {
-          gridRef.current.scrollTo({ scrollLeft });
-        }
-      },
-    });
-
-    return obj;
-  });
-
-  const resetVirtualGrid = () => {
-    gridRef.current.resetAfterIndices({
-      columnIndex: 0,
-      shouldForceUpdate: true,
-    });
-  };
-
-  useEffect(() => resetVirtualGrid, [tableWidth]);
-
-  const renderVirtualList = (
-    rawData: object[],
-    { scrollbarSize, ref, onScroll }: any,
-  ) => {
-    ref.current = connectObject;
-    const totalHeight = rawData.length * 54;
-
-    return (
-      <Grid
-        ref={gridRef}
-        className="virtual-grid"
-        columnCount={mergedColumns.length}
-        columnWidth={(index: number) => {
-          const { width } = mergedColumns[index];
-          return totalHeight > scroll!.y! && index === mergedColumns.length - 1
-            ? (width as number) - scrollbarSize - 1
-            : (width as number);
-        }}
-        height={scroll!.y as number}
-        rowCount={rawData.length}
-        rowHeight={() => 54}
-        width={tableWidth}
-        onScroll={({ scrollLeft }: { scrollLeft: number }) => {
-          onScroll({ scrollLeft });
-        }}
-      >
-        {({
-          columnIndex,
-          rowIndex,
-          style,
-        }: {
-          columnIndex: number;
-          rowIndex: number;
-          style: React.CSSProperties;
-        }) => (
-          <div
-            className={classNames('virtual-table-cell', {
-              'virtual-table-cell-last':
-                columnIndex === mergedColumns.length - 1,
-            })}
-            style={style}
-          >
-            {
-              (rawData[rowIndex] as any)[
-                (mergedColumns as any)[columnIndex].dataIndex
-              ]
-            }
-          </div>
-        )}
-      </Grid>
-    );
-  };
-
-  return (
-    <ResizeObserver
-      onResize={({ width }) => {
-        setTableWidth(width);
-      }}
-    >
-      <Table
-        {...props}
-        className="virtual-table"
-        columns={mergedColumns}
-        pagination={false}
-        components={{
-          // @ts-ignore
-          body: renderVirtualList,
-        }}
-      />
-    </ResizeObserver>
-  );
-}
-
-// Usage
-const columns = [
-  { title: 'A', dataIndex: 'key', width: 150 },
-  { title: 'B', dataIndex: 'key' },
-  { title: 'C', dataIndex: 'key' },
-  { title: 'D', dataIndex: 'key' },
-  { title: 'E', dataIndex: 'key', width: 200 },
-  { title: 'F', dataIndex: 'key', width: 100 },
-];
-
-const data = Array.from({ length: 100000 }, (_, key) => ({ key }));
-
-const Demo = () => {
-  return (
-    <VirtualTable
-      columns={columns}
-      dataSource={data}
-      scroll={{ y: 300, x: '100vw' }}
-    />
-  );
-};
-
-export default Demo;

package/components/table/index.tsx

@@ -1,34 +0,0 @@
-import { FC } from 'react';
-// import { Table as AntdTable } from 'antd';
-import InternalTable, { TableProps } from './components/table';
-import Column, { ColumnProps } from './components/column';
-import ColumnGroup, { ColumnGroupProps } from './components/columnGroup';
-
-import Summary, { SummaryProps } from './components/summary';
-
-// const { Summary } = AntdTable;
-
-export const SELECTION_ALL = 'SELECT_ALL' as const;
-export const SELECTION_INVERT = 'SELECT_INVERT' as const;
-export const SELECTION_NONE = 'SELECT_NONE' as const;
-interface CompoundedComponent extends FC<TableProps> {
-  Column: typeof Column;
-  ColumnGroup: typeof ColumnGroup;
-  Summary: typeof Summary;
-  SELECTION_ALL: typeof SELECTION_ALL;
-  SELECTION_INVERT: typeof SELECTION_INVERT;
-  SELECTION_NONE: typeof SELECTION_NONE;
-}
-
-const Table = InternalTable as CompoundedComponent;
-
-Table.Column = Column;
-Table.ColumnGroup = ColumnGroup;
-Table.Summary = Summary;
-Table.SELECTION_ALL = SELECTION_ALL;
-Table.SELECTION_INVERT = SELECTION_INVERT;
-Table.SELECTION_NONE = SELECTION_NONE;
-
-export type { TableProps, ColumnProps, ColumnGroupProps, SummaryProps };
-
-export default Table;