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

package/components/table/demos/colspan-rowspan.jsx

@@ -1,123 +0,0 @@
-/**
- * title: 表格行/列合并
- * desc: 表头只支持列合并，使用 column 里的 colSpan 进行设置。<br /> <br />表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
- */
-
-import React from 'react';
-import { Table } from '@fle-ui/next';
-
-const renderContent = (value, row, index) => {
-  const obj = {
-    children: value,
-    props: {},
-  };
-  if (index === 4) {
-    obj.props.colSpan = 0;
-  }
-  return obj;
-};
-
-const columns = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    render: (text, row, index) => {
-      if (index < 4) {
-        return <a>{text}</a>;
-      }
-      return {
-        children: <a>{text}</a>,
-        props: {
-          colSpan: 5,
-        },
-      };
-    },
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-    render: renderContent,
-  },
-  {
-    title: 'Home phone',
-    colSpan: 2,
-    dataIndex: 'tel',
-    render: (value, row, index) => {
-      const obj = {
-        children: value,
-        props: {},
-      };
-      if (index === 2) {
-        obj.props.rowSpan = 2;
-      }
-      // These two are merged into above cell
-      if (index === 3) {
-        obj.props.rowSpan = 0;
-      }
-      if (index === 4) {
-        obj.props.colSpan = 0;
-      }
-      return obj;
-    },
-  },
-  {
-    title: 'Phone',
-    colSpan: 0,
-    dataIndex: 'phone',
-    render: renderContent,
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-    render: renderContent,
-  },
-];
-
-const data = [
-  {
-    key: '1',
-    name: 'John Brown',
-    age: 32,
-    tel: '0571-22098909',
-    phone: 18889898989,
-    address: 'New York No. 1 Lake Park',
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    tel: '0571-22098333',
-    phone: 18889898888,
-    age: 42,
-    address: 'London No. 1 Lake Park',
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    tel: '0575-22098909',
-    phone: 18900010002,
-    address: 'Sidney No. 1 Lake Park',
-  },
-  {
-    key: '4',
-    name: 'Jim Red',
-    age: 18,
-    tel: '0575-22098909',
-    phone: 18900010002,
-    address: 'London No. 2 Lake Park',
-  },
-  {
-    key: '5',
-    name: 'Jake White',
-    age: 18,
-    tel: '0575-22098909',
-    phone: 18900010002,
-    address: 'Dublin No. 2 Lake Park',
-  },
-];
-
-const Demo = () => {
-  return <Table columns={columns} dataSource={data} bordered />;
-};
-
-export default Demo;

package/components/table/demos/custom-filter-panel.jsx

@@ -1,169 +0,0 @@
-/**
- * title: 自定义筛选菜单
- * desc: 通过 `filterDropdown` 自定义的列筛选功能，并实现一个搜索列的示例。<br /> <br /> 给函数 `confirm` 添加 `boolean` 类型参数 `closeDropdown`，是否关闭筛选菜单，默认为 `true`。
- */
-
-import React from 'react';
-import { Table, Input, Button } from '@fle-ui/next';
-import { Space } from 'antd';
-import Highlighter from 'react-highlight-words';
-import { SearchOutlined } from '@ant-design/icons';
-
-const data = [
-  {
-    key: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-  },
-  {
-    key: '2',
-    name: 'Joe Black',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-  },
-  {
-    key: '3',
-    name: 'Jim Green',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-  },
-  {
-    key: '4',
-    name: 'Jim Red',
-    age: 32,
-    address: 'London No. 2 Lake Park',
-  },
-];
-class Demo extends React.Component {
-  state = {
-    searchText: '',
-    searchedColumn: '',
-  };
-
-  getColumnSearchProps = (dataIndex) => ({
-    filterDropdown: ({
-      setSelectedKeys,
-      selectedKeys,
-      confirm,
-      clearFilters,
-    }) => (
-      <div style={{ padding: 8 }}>
-        <Input
-          ref={(node) => {
-            this.searchInput = node;
-          }}
-          placeholder={`Search ${dataIndex}`}
-          value={selectedKeys[0]}
-          onChange={(e) =>
-            setSelectedKeys(e.target.value ? [e.target.value] : [])
-          }
-          onPressEnter={() =>
-            this.handleSearch(selectedKeys, confirm, dataIndex)
-          }
-          style={{ marginBottom: 8, display: 'block' }}
-        />
-        <Space>
-          <Button
-            type="primary"
-            onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
-            icon={<SearchOutlined />}
-            size="small"
-            style={{ width: 90 }}
-          >
-            Search
-          </Button>
-          <Button
-            onClick={() => this.handleReset(clearFilters)}
-            size="small"
-            style={{ width: 90 }}
-          >
-            Reset
-          </Button>
-          <Button
-            type="link"
-            size="small"
-            onClick={() => {
-              confirm({ closeDropdown: false });
-              this.setState({
-                searchText: selectedKeys[0],
-                searchedColumn: dataIndex,
-              });
-            }}
-          >
-            Filter
-          </Button>
-        </Space>
-      </div>
-    ),
-    filterIcon: (filtered) => (
-      <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
-    ),
-    onFilter: (value, record) =>
-      record[dataIndex]
-        ? record[dataIndex]
-            .toString()
-            .toLowerCase()
-            .includes(value.toLowerCase())
-        : '',
-    onFilterDropdownVisibleChange: (visible) => {
-      if (visible) {
-        setTimeout(() => this.searchInput.select(), 100);
-      }
-    },
-    render: (text) =>
-      this.state.searchedColumn === dataIndex ? (
-        <Highlighter
-          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
-          searchWords={[this.state.searchText]}
-          autoEscape
-          textToHighlight={text ? text.toString() : ''}
-        />
-      ) : (
-        text
-      ),
-  });
-
-  handleSearch = (selectedKeys, confirm, dataIndex) => {
-    confirm();
-    this.setState({
-      searchText: selectedKeys[0],
-      searchedColumn: dataIndex,
-    });
-  };
-
-  handleReset = (clearFilters) => {
-    clearFilters();
-    this.setState({ searchText: '' });
-  };
-
-  render() {
-    const columns = [
-      {
-        title: 'Name',
-        dataIndex: 'name',
-        key: 'name',
-        width: '30%',
-        ...this.getColumnSearchProps('name'),
-      },
-      {
-        title: 'Age',
-        dataIndex: 'age',
-        key: 'age',
-        width: '20%',
-        ...this.getColumnSearchProps('age'),
-      },
-      {
-        title: 'Address',
-        dataIndex: 'address',
-        key: 'address',
-        ...this.getColumnSearchProps('address'),
-        sorter: (a, b) => a.address.length - b.address.length,
-        sortDirections: ['descend', 'ascend'],
-      },
-    ];
-    return <Table columns={columns} dataSource={data} />;
-  }
-}
-
-export default Demo;

package/components/table/demos/drag-sorting/index.jsx

@@ -1,137 +0,0 @@
-/**
- * title: 拖拽排序
- * desc: 使用自定义元素，我们可以集成 [react-dnd](https://github.com/react-dnd/react-dnd) 来实现拖拽排序。
- */
-
-import React, { useState, useCallback, useRef } from 'react';
-import { Table } from '@fle-ui/next';
-import { DndProvider, useDrag, useDrop } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import update from 'immutability-helper';
-
-import './index.less';
-
-const type = 'DraggableBodyRow';
-
-const DraggableBodyRow = ({
-  index,
-  moveRow,
-  className,
-  style,
-  ...restProps
-}) => {
-  const ref = useRef();
-  const [{ isOver, dropClassName }, drop] = useDrop({
-    accept: type,
-    collect: (monitor) => {
-      const { index: dragIndex } = monitor.getItem() || {};
-      if (dragIndex === index) {
-        return {};
-      }
-      return {
-        isOver: monitor.isOver(),
-        dropClassName:
-          dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
-      };
-    },
-    drop: (item) => {
-      moveRow(item.index, index);
-    },
-  });
-  const [, drag] = useDrag({
-    type,
-    item: { index },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
-  drop(drag(ref));
-
-  return (
-    <tr
-      ref={ref}
-      className={`${className}${isOver ? dropClassName : ''}`}
-      style={{ cursor: 'move', ...style }}
-      {...restProps}
-    />
-  );
-};
-
-const columns = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    key: 'name',
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-    key: 'age',
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-    key: 'address',
-  },
-];
-
-const DragSortingTable = () => {
-  const [data, setData] = useState([
-    {
-      key: '1',
-      name: 'John Brown',
-      age: 32,
-      address: 'New York No. 1 Lake Park',
-    },
-    {
-      key: '2',
-      name: 'Jim Green',
-      age: 42,
-      address: 'London No. 1 Lake Park',
-    },
-    {
-      key: '3',
-      name: 'Joe Black',
-      age: 32,
-      address: 'Sidney No. 1 Lake Park',
-    },
-  ]);
-
-  const components = {
-    body: {
-      row: DraggableBodyRow,
-    },
-  };
-
-  const moveRow = useCallback(
-    (dragIndex, hoverIndex) => {
-      const dragRow = data[dragIndex];
-      setData(
-        update(data, {
-          $splice: [
-            [dragIndex, 1],
-            [hoverIndex, 0, dragRow],
-          ],
-        }),
-      );
-    },
-    [data],
-  );
-
-  return (
-    <DndProvider backend={HTML5Backend}>
-      <Table
-        className="components-table-demo-drag-sorting"
-        columns={columns}
-        dataSource={data}
-        components={components}
-        onRow={(record, index) => ({
-          index,
-          moveRow,
-        })}
-      />
-    </DndProvider>
-  );
-};
-
-export default DragSortingTable;

package/components/table/demos/drag-sorting/index.less

@@ -1,7 +0,0 @@
-.components-table-demo-drag-sorting tr.drop-over-downward td {
-  border-bottom: 2px dashed #1890ff;
-}
-
-.components-table-demo-drag-sorting tr.drop-over-upward td {
-  border-top: 2px dashed #1890ff;
-}

package/components/table/demos/drag-sorting-handler/index.jsx

@@ -1,124 +0,0 @@
-/**
- * title: 拖拽手柄列
- * desc: 也可以使用 [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) 来实现一个拖拽操作列。
- */
-
-import React from 'react';
-import { Table } from '@fle-ui/next';
-import {
-  sortableContainer,
-  sortableElement,
-  sortableHandle,
-} from 'react-sortable-hoc';
-import { MenuOutlined } from '@ant-design/icons';
-
-import './index.less';
-
-const DragHandle = sortableHandle(() => (
-  <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />
-));
-
-const columns = [
-  {
-    title: 'Sort',
-    dataIndex: 'sort',
-    width: 30,
-    className: 'drag-visible',
-    render: () => <DragHandle />,
-  },
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    className: 'drag-visible',
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-  },
-];
-
-const data = [
-  {
-    key: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-    index: 0,
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-    index: 1,
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-    index: 2,
-  },
-];
-
-const SortableItem = sortableElement((props) => <tr {...props} />);
-const SortableContainer = sortableContainer((props) => <tbody {...props} />);
-
-class SortableTable extends React.Component {
-  state = {
-    dataSource: data,
-  };
-
-  onSortEnd = ({ oldIndex, newIndex }) => {
-    const { dataSource } = this.state;
-    if (oldIndex !== newIndex) {
-      // const newData = ([].concat(dataSource), oldIndex, newIndex).filter(el => !!el)
-      console.log('Sorted items: ', newData);
-      // this.setState({ dataSource: newData });
-    }
-  };
-
-  DraggableContainer = (props) => (
-    <SortableContainer
-      useDragHandle
-      disableAutoscroll
-      helperClass="row-dragging"
-      onSortEnd={this.onSortEnd}
-      {...props}
-    />
-  );
-
-  DraggableBodyRow = ({ className, style, ...restProps }) => {
-    const { dataSource } = this.state;
-    // function findIndex base on Table rowKey props and should always be a right array index
-    const index = dataSource.findIndex(
-      (x) => x.index === restProps['data-row-key'],
-    );
-    return <SortableItem index={index} {...restProps} />;
-  };
-
-  render() {
-    const { dataSource } = this.state;
-
-    return (
-      <Table
-        pagination={false}
-        dataSource={dataSource}
-        columns={columns}
-        rowKey="index"
-        components={{
-          body: {
-            wrapper: this.DraggableContainer,
-            row: this.DraggableBodyRow,
-          },
-        }}
-      />
-    );
-  }
-}
-
-export default SortableTable;