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

package/components/transfer/demos/search.tsx

@@ -1,57 +0,0 @@
-/**
- * title: 带搜索框
- * desc: 带搜索框的穿梭框，可以自定义搜索函数。
- */
-
-import React, { useState, useEffect } from 'react';
-import { Transfer } from '@fle-ui/next';
-
-const SearchDemo = () => {
-  const [mockData, setMockData] = useState<any>([]);
-  const [targetKeys, setTargetKeys] = useState<any>([]);
-  useEffect(() => {
-    getMock();
-  }, []);
-
-  const getMock = () => {
-    const targetKeys = [];
-    const mockData = [];
-    for (let i = 0; i < 20; i++) {
-      const data = {
-        key: i.toString(),
-        title: `content${i + 1}`,
-        description: `description of content${i + 1}`,
-        chosen: Math.random() * 2 > 1,
-      };
-      if (data.chosen) {
-        targetKeys.push(data.key);
-      }
-      mockData.push(data);
-    }
-    setMockData(mockData);
-    setTargetKeys(targetKeys);
-  };
-
-  const filterOption = (inputValue: string, option: { description: string }) =>
-    option.description.indexOf(inputValue) > -1;
-  const handleChange = (targetKeys: string[]) => {
-    setTargetKeys(targetKeys);
-  };
-
-  const handleSearch = (dir: string, value: string) => {
-    console.log('search:', dir, value);
-  };
-  return (
-    <Transfer
-      dataSource={mockData}
-      showSearch
-      filterOption={filterOption}
-      targetKeys={targetKeys}
-      onChange={handleChange}
-      onSearch={handleSearch}
-      render={(item) => item.title}
-    />
-  );
-};
-
-export default SearchDemo;

package/components/transfer/demos/table.jsx

@@ -1,150 +0,0 @@
-/**
- * title: 表格穿梭框
- * desc: 使用 Table 组件作为自定义渲染列表。
- */
-
-import React, { useState, useEffect } from 'react';
-import { Transfer } from '@fle-ui/next';
-import { Switch, Table, Tag } from 'antd';
-import difference from 'lodash/difference';
-
-const TableDemo = () => {
-  // Customize Table Transfer
-  const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
-    <Transfer {...restProps}>
-      {({
-        direction,
-        filteredItems,
-        onItemSelectAll,
-        onItemSelect,
-        selectedKeys: listSelectedKeys,
-        disabled: listDisabled,
-      }) => {
-        const columns = direction === 'left' ? leftColumns : rightColumns;
-
-        const rowSelection = {
-          getCheckboxProps: (item) => ({
-            disabled: listDisabled || item.disabled,
-          }),
-          onSelectAll(selected, selectedRows) {
-            const treeSelectedKeys = selectedRows
-              .filter((item) => !item.disabled)
-              .map(({ key }) => key);
-            const diffKeys = selected
-              ? difference(treeSelectedKeys, listSelectedKeys)
-              : difference(listSelectedKeys, treeSelectedKeys);
-            onItemSelectAll(diffKeys, selected);
-          },
-          onSelect({ key }, selected) {
-            onItemSelect(key, selected);
-          },
-          selectedRowKeys: listSelectedKeys,
-        };
-
-        return (
-          <Table
-            rowSelection={rowSelection}
-            columns={columns}
-            dataSource={filteredItems}
-            size="small"
-            style={{ pointerEvents: listDisabled ? 'none' : null }}
-            onRow={({ key, disabled: itemDisabled }) => ({
-              onClick: () => {
-                if (itemDisabled || listDisabled) return;
-                onItemSelect(key, !listSelectedKeys.includes(key));
-              },
-            })}
-          />
-        );
-      }}
-    </Transfer>
-  );
-
-  const mockTags = ['cat', 'dog', 'bird'];
-
-  const mockData = [];
-  for (let i = 0; i < 20; i++) {
-    mockData.push({
-      key: i.toString(),
-      title: `content${i + 1}`,
-      description: `description of content${i + 1}`,
-      disabled: i % 4 === 0,
-      tag: mockTags[i % 3],
-    });
-  }
-
-  const originTargetKeys = mockData
-    .filter((item) => +item.key % 3 > 1)
-    .map((item) => item.key);
-
-  const leftTableColumns = [
-    {
-      dataIndex: 'title',
-      title: 'Name',
-    },
-    {
-      dataIndex: 'tag',
-      title: 'Tag',
-      render: (tag) => <Tag>{tag}</Tag>,
-    },
-    {
-      dataIndex: 'description',
-      title: 'Description',
-    },
-  ];
-  const rightTableColumns = [
-    {
-      dataIndex: 'title',
-      title: 'Name',
-    },
-  ];
-
-  const [targetKeys, setTargetKeys] = useState(originTargetKeys);
-  const [disabled, setDisabled] = useState(false);
-  const [showSearch, setShowSearch] = useState(false);
-
-  const onChange = (nextTargetKeys) => {
-    setTargetKeys(nextTargetKeys);
-  };
-
-  const triggerDisable = (disabled) => {
-    setDisabled(disabled);
-  };
-
-  const triggerShowSearch = (showSearch) => {
-    setShowSearch(showSearch);
-  };
-  return (
-    <>
-      <TableTransfer
-        dataSource={mockData}
-        targetKeys={targetKeys}
-        disabled={disabled}
-        showSearch={showSearch}
-        onChange={onChange}
-        filterOption={(inputValue, item) =>
-          item.title.indexOf(inputValue) !== -1 ||
-          item.tag.indexOf(inputValue) !== -1
-        }
-        leftColumns={leftTableColumns}
-        rightColumns={rightTableColumns}
-      />
-      <Switch
-        unCheckedChildren="disabled"
-        checkedChildren="disabled"
-        checked={disabled}
-        onChange={triggerDisable}
-        style={{ marginTop: 16 }}
-      />
-      <Switch
-        unCheckedChildren="showSearch"
-        checkedChildren="showSearch"
-        checked={showSearch}
-        onChange={triggerShowSearch}
-        style={{ marginTop: 16 }}
-      />
-    </>
-  );
-};
-
-export default TableDemo;

package/components/transfer/demos/tree.jsx

@@ -1,91 +0,0 @@
-/**
- * title: 树穿梭框
- * desc: 使用 Tree 组件作为自定义渲染列表。
- */
-
-import React, { useState } from 'react';
-import { Tree } from 'antd';
-import { Transfer } from '@fle-ui/next';
-
-const TreeDemo = () => {
-  const isChecked = (selectedKeys, eventKey) =>
-    selectedKeys.indexOf(eventKey) !== -1;
-
-  const generateTree = (treeNodes = [], checkedKeys = []) =>
-    treeNodes.map(({ children, ...props }) => ({
-      ...props,
-      disabled: checkedKeys.includes(props.key),
-      children: generateTree(children, checkedKeys),
-    }));
-
-  const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {
-    const transferDataSource = [];
-    function flatten(list = []) {
-      list.forEach((item) => {
-        transferDataSource.push(item);
-        flatten(item.children);
-      });
-    }
-    flatten(dataSource);
-
-    return (
-      <Transfer
-        {...restProps}
-        targetKeys={targetKeys}
-        dataSource={transferDataSource}
-        className="tree-transfer"
-        render={(item) => item.title}
-        showSelectAll={false}
-      >
-        {({ direction, onItemSelect, selectedKeys }) => {
-          if (direction === 'left') {
-            const checkedKeys = [...selectedKeys, ...targetKeys];
-            return (
-              <Tree
-                blockNode
-                checkable
-                checkStrictly
-                defaultExpandAll
-                checkedKeys={checkedKeys}
-                treeData={generateTree(dataSource, targetKeys)}
-                onCheck={(_, { node: { key } }) => {
-                  onItemSelect(key, !isChecked(checkedKeys, key));
-                }}
-                onSelect={(_, { node: { key } }) => {
-                  onItemSelect(key, !isChecked(checkedKeys, key));
-                }}
-              />
-            );
-          }
-        }}
-      </Transfer>
-    );
-  };
-
-  const treeData = [
-    { key: '0-0', title: '0-0' },
-    {
-      key: '0-1',
-      title: '0-1',
-      children: [
-        { key: '0-1-0', title: '0-1-0' },
-        { key: '0-1-1', title: '0-1-1' },
-      ],
-    },
-    { key: '0-2', title: '0-3' },
-  ];
-
-  const [targetKeys, setTargetKeys] = useState([]);
-  const onChange = (keys) => {
-    setTargetKeys(keys);
-  };
-
-  return (
-    <TreeTransfer
-      dataSource={treeData}
-      targetKeys={targetKeys}
-      onChange={onChange}
-    />
-  );
-};
-export default TreeDemo;

package/components/transfer/index.tsx

@@ -1,17 +0,0 @@
-import React, { forwardRef, ReactElement } from 'react';
-import { Transfer as AntdTransfer } from 'antd';
-import type { TransferProps as AntdTransferProps } from 'antd';
-
-export interface TransferProps extends AntdTransferProps<any> {}
-
-const Progress = forwardRef<any, TransferProps>((props, ref): ReactElement => {
-  const { children, ...otherProps } = props;
-
-  return (
-    <AntdTransfer ref={ref} {...otherProps}>
-      {children}
-    </AntdTransfer>
-  );
-});
-
-export default Progress;

package/components/transfer/transfer.md

@@ -1,118 +0,0 @@
----
-title: Transfer 穿梭框
-order: 0
-legacy: /transfer
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Transfer 穿梭框
-
-双栏穿梭选择框。
-
-## 何时使用
-
-- 需要在多个可选项中进行多选时。
-- 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。
-
-穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。
-
-选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。其中，左边一栏为 `source`，右边一栏为 `target`，API 的设计也反映了这两个概念。
-
-## 代码演示
-
-### 基本用法
-
-<code src="./demos/basic.tsx"/>
-
-### 单向样式
-
-<code src="./demos/oneway.tsx"/>
-
-### 带搜索框
-
-<code src="./demos/search.tsx"/>
-
-### 自定义渲染行数据
-
-<code src="./demos/render.tsx"/>
-
-### 分页
-
-<code src="./demos/pages.tsx"/>
-
-### 表格穿梭框
-
-<code src="./demos/table.jsx"/>
-
-### 树穿梭框
-
-<code src="./demos/tree.jsx"/>
-
-## API
-
-### Transfer
-
-| 参数            | 说明                                                                                                                                                      | 类型                                                                                                           | 默认值                                                                   | 版本              |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ----------------- |
-| dataSource      | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外                                                                                       | [RecordType extends TransferItem = TransferItem](https://git.io/vMM64)\[]                                      | \[]                                                                      |                   |
-| disabled        | 是否禁用                                                                                                                                                  | boolean                                                                                                        | false                                                                    |                   |
-| filterOption    | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false                                                            | (inputValue, option): boolean                                                                                  | -                                                                        |                   |
-| footer          | 底部渲染函数                                                                                                                                              | (props, { direction }) => ReactNode                                                                            | -                                                                        | direction: 4.17.0 |
-| listStyle       | 两个穿梭框的自定义样式                                                                                                                                    | object\|({direction: `left` \| `right`}) => object                                                             | -                                                                        |                   |
-| locale          | 各种语言                                                                                                                                                  | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode \| ReactNode[]; } | { itemUnit: `项`, itemsUnit: `项`, searchPlaceholder: `请输入搜索内容` } |                   |
-| oneWay          | 展示为单向样式                                                                                                                                            | boolean                                                                                                        | false                                                                    | 4.3.0             |
-| operations      | 操作文案集合，顺序从上至下                                                                                                                                | string\[]                                                                                                      | \[`>`, `<`]                                                              |                   |
-| pagination      | 使用分页样式，自定义渲染列表下无效                                                                                                                        | boolean \| { pageSize: number }                                                                                | false                                                                    | 4.3.0             |
-| render          | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 `label` 字段为 ReactElement，`value` 字段为 title | (record) => ReactNode                                                                                          | -                                                                        |                   |
-| selectAllLabels | 自定义顶部多选框标题的集合                                                                                                                                | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)\[]                           | -                                                                        |                   |
-| selectedKeys    | 设置哪些项应该被选中                                                                                                                                      | string\[]                                                                                                      | \[]                                                                      |                   |
-| showSearch      | 是否显示搜索框                                                                                                                                            | boolean                                                                                                        | false                                                                    |                   |
-| showSelectAll   | 是否展示全选勾选框                                                                                                                                        | boolean                                                                                                        | true                                                                     |                   |
-| targetKeys      | 显示在右侧框数据的 key 集合                                                                                                                               | string\[]                                                                                                      | \[]                                                                      |                   |
-| titles          | 标题集合，顺序从左至右                                                                                                                                    | ReactNode\[]                                                                                                   | -                                                                        |                   |
-| onChange        | 选项在两栏之间转移时的回调函数                                                                                                                            | (targetKeys, direction, moveKeys): void                                                                        | -                                                                        |                   |
-| onScroll        | 选项列表滚动时的回调函数                                                                                                                                  | (direction, event): void                                                                                       | -                                                                        |                   |
-| onSearch        | 搜索框内容时改变时的回调函数                                                                                                                              | (direction: `left` \| `right`, value: string): void                                                            | -                                                                        |                   |
-| onSelectChange  | 选中项发生改变时的回调函数                                                                                                                                | (sourceSelectedKeys, targetSelectedKeys): void                                                                 | -                                                                        |                   |
-
-### Render Props
-
-Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数：
-
-| 参数            | 说明           | 类型                                 | 版本 |
-| --------------- | -------------- | ------------------------------------ | ---- |
-| direction       | 渲染列表的方向 | `left` \| `right`                    |      |
-| disabled        | 是否禁用列表   | boolean                              |      |
-| filteredItems   | 过滤后的数据   | RecordType\[]                        |      |
-| selectedKeys    | 选中的条目     | string\[]                            |      |
-| onItemSelect    | 勾选条目       | (key: string, selected: boolean)     |      |
-| onItemSelectAll | 勾选一组条目   | (keys: string\[], selected: boolean) |      |
-
-#### 参考示例
-
-```bash
-<Transfer {...props}>
-  {(listProps) => <YourComponent {...listProps} />}
-</Transfer>
-```
-
-## 注意
-
-按照 React 的[规范](http://facebook.github.io/react/docs/lists-and-keys.html#keys)，所有的组件数组必须绑定 key。在 Transfer 中，`dataSource` 里的数据值需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。
-
-如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。
-
-```bash
-// 比如你的数据主键是 uid
-return <Transfer rowKey={(record) => record.uid} />;
-```
-
-## FAQ
-
-### 怎样让 Transfer 穿梭框列表支持异步数据加载
-
-为了保持页码同步，在勾选时可以不移除选项而以禁用代替：<https://codesandbox.io/s/objective-wing-6iqbx>

package/components/tree-select/components/tree-node.tsx

@@ -1,15 +0,0 @@
-// import React, { FC, ReactElement } from 'react';
-// import { TreeSelect as AntdTreeSelect } from 'antd';
-// import type { TreeNodeProps as AntdTreeNodeProps } from 'rc-tree/lib/TreeNode'
-
-// export interface TreeSelectNodeProps extends AntdTreeNodeProps { }
-// const { TreeNode: AntdTreeNode } = AntdTreeSelect;
-
-// const TreeNode: FC<TreeSelectNodeProps> = (props): ReactElement => {
-//   const { children, ...otherProps } = props;
-//   return (
-//     <AntdTreeNode {...otherProps} >{ children}</AntdTreeNode>
-//   )
-// }
-
-// export default TreeNode