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

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

@@ -1,12 +0,0 @@
-.row-dragging {
-  background: #fafafa;
-  border: 1px solid #ccc;
-}
-
-.row-dragging td {
-  padding: 16px;
-}
-
-.row-dragging .drag-visible {
-  visibility: visible;
-}

package/components/table/demos/dynamic-settings.jsx

@@ -1,279 +0,0 @@
-/**
- * title: 动态控制表格属性
- * desc: 选择不同配置组合查看效果。
- */
-
-import React from 'react';
-import { Table, Switch, Radio } from '@fle-ui/next';
-import { Form, Space } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
-
-const columns = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-    sorter: (a, b) => a.age - b.age,
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-    filters: [
-      {
-        text: 'London',
-        value: 'London',
-      },
-      {
-        text: 'New York',
-        value: 'New York',
-      },
-    ],
-    onFilter: (value, record) => record.address.indexOf(value) === 0,
-  },
-  {
-    title: 'Action',
-    key: 'action',
-    sorter: true,
-    render: () => (
-      <Space size="middle">
-        <a>Delete</a>
-        <a className="ant-dropdown-link">
-          More actions <DownOutlined />
-        </a>
-      </Space>
-    ),
-  },
-];
-
-const data = [];
-for (let i = 1; i <= 10; i++) {
-  data.push({
-    key: i,
-    name: 'John Brown',
-    age: `${i}2`,
-    address: `New York No. ${i} Lake Park`,
-    description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
-  });
-}
-
-const expandable = {
-  expandedRowRender: (record) => <p>{record.description}</p>,
-};
-const title = () => 'Here is title';
-const showHeader = true;
-const footer = () => 'Here is footer';
-const pagination = { position: 'bottom' };
-
-class Demo extends React.Component {
-  state = {
-    bordered: false,
-    loading: false,
-    pagination,
-    size: 'default',
-    expandable,
-    title: undefined,
-    showHeader,
-    footer,
-    rowSelection: {},
-    scroll: undefined,
-    hasData: true,
-    tableLayout: undefined,
-    top: 'none',
-    bottom: 'bottomRight',
-  };
-
-  handleToggle = (prop) => (enable) => {
-    this.setState({ [prop]: enable });
-  };
-
-  handleSizeChange = (e) => {
-    this.setState({ size: e.target.value });
-  };
-
-  handleTableLayoutChange = (e) => {
-    this.setState({ tableLayout: e.target.value });
-  };
-
-  handleExpandChange = (enable) => {
-    this.setState({ expandable: enable ? expandable : undefined });
-  };
-
-  handleEllipsisChange = (enable) => {
-    this.setState({ ellipsis: enable });
-  };
-
-  handleTitleChange = (enable) => {
-    this.setState({ title: enable ? title : undefined });
-  };
-
-  handleHeaderChange = (enable) => {
-    this.setState({ showHeader: enable ? showHeader : false });
-  };
-
-  handleFooterChange = (enable) => {
-    this.setState({ footer: enable ? footer : undefined });
-  };
-
-  handleRowSelectionChange = (enable) => {
-    this.setState({ rowSelection: enable ? {} : undefined });
-  };
-
-  handleYScrollChange = (enable) => {
-    this.setState({ yScroll: enable });
-  };
-
-  handleXScrollChange = (e) => {
-    this.setState({ xScroll: e.target.value });
-  };
-
-  handleDataChange = (hasData) => {
-    this.setState({ hasData });
-  };
-
-  render() {
-    const { xScroll, yScroll, ...state } = this.state;
-
-    const scroll = {};
-    if (yScroll) {
-      scroll.y = 240;
-    }
-    if (xScroll) {
-      scroll.x = '100vw';
-    }
-
-    const tableColumns = columns.map((item) => ({
-      ...item,
-      ellipsis: state.ellipsis,
-    }));
-    if (xScroll === 'fixed') {
-      tableColumns[0].fixed = true;
-      tableColumns[tableColumns.length - 1].fixed = 'right';
-    }
-
-    return (
-      <>
-        <Form
-          layout="inline"
-          className="components-table-demo-control-bar"
-          style={{ marginBottom: 16 }}
-        >
-          <Form.Item label="Bordered">
-            <Switch
-              checked={state.bordered}
-              onChange={this.handleToggle('bordered')}
-            />
-          </Form.Item>
-          <Form.Item label="loading">
-            <Switch
-              checked={state.loading}
-              onChange={this.handleToggle('loading')}
-            />
-          </Form.Item>
-          <Form.Item label="Title">
-            <Switch checked={!!state.title} onChange={this.handleTitleChange} />
-          </Form.Item>
-          <Form.Item label="Column Header">
-            <Switch
-              checked={!!state.showHeader}
-              onChange={this.handleHeaderChange}
-            />
-          </Form.Item>
-          <Form.Item label="Footer">
-            <Switch
-              checked={!!state.footer}
-              onChange={this.handleFooterChange}
-            />
-          </Form.Item>
-          <Form.Item label="Expandable">
-            <Switch
-              checked={!!state.expandable}
-              onChange={this.handleExpandChange}
-            />
-          </Form.Item>
-          <Form.Item label="Checkbox">
-            <Switch
-              checked={!!state.rowSelection}
-              onChange={this.handleRowSelectionChange}
-            />
-          </Form.Item>
-          <Form.Item label="Fixed Header">
-            <Switch checked={!!yScroll} onChange={this.handleYScrollChange} />
-          </Form.Item>
-          <Form.Item label="Has Data">
-            <Switch
-              checked={!!state.hasData}
-              onChange={this.handleDataChange}
-            />
-          </Form.Item>
-          <Form.Item label="Ellipsis">
-            <Switch
-              checked={!!state.ellipsis}
-              onChange={this.handleEllipsisChange}
-            />
-          </Form.Item>
-          <Form.Item label="Size">
-            <Radio.Group value={state.size} onChange={this.handleSizeChange}>
-              <Radio.Button value="default">Default</Radio.Button>
-              <Radio.Button value="middle">Middle</Radio.Button>
-              <Radio.Button value="small">Small</Radio.Button>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item label="Table Scroll">
-            <Radio.Group value={xScroll} onChange={this.handleXScrollChange}>
-              <Radio.Button value={undefined}>Unset</Radio.Button>
-              <Radio.Button value="scroll">Scroll</Radio.Button>
-              <Radio.Button value="fixed">Fixed Columns</Radio.Button>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item label="Table Layout">
-            <Radio.Group
-              value={state.tableLayout}
-              onChange={this.handleTableLayoutChange}
-            >
-              <Radio.Button value={undefined}>Unset</Radio.Button>
-              <Radio.Button value="fixed">Fixed</Radio.Button>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item label="Pagination Top">
-            <Radio.Group
-              value={this.state.top}
-              onChange={(e) => {
-                this.setState({ top: e.target.value });
-              }}
-            >
-              <Radio.Button value="topLeft">TopLeft</Radio.Button>
-              <Radio.Button value="topCenter">TopCenter</Radio.Button>
-              <Radio.Button value="topRight">TopRight</Radio.Button>
-              <Radio.Button value="none">None</Radio.Button>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item label="Pagination Bottom">
-            <Radio.Group
-              value={this.state.bottom}
-              onChange={(e) => {
-                this.setState({ bottom: e.target.value });
-              }}
-            >
-              <Radio.Button value="bottomLeft">BottomLeft</Radio.Button>
-              <Radio.Button value="bottomCenter">BottomCenter</Radio.Button>
-              <Radio.Button value="bottomRight">BottomRight</Radio.Button>
-              <Radio.Button value="none">None</Radio.Button>
-            </Radio.Group>
-          </Form.Item>
-        </Form>
-        <Table
-          {...this.state}
-          pagination={{ position: [this.state.top, this.state.bottom] }}
-          columns={tableColumns}
-          dataSource={state.hasData ? data : null}
-          scroll={scroll}
-        />
-      </>
-    );
-  }
-}
-
-export default Demo;

package/components/table/demos/edit-cell/index.less

@@ -1,18 +0,0 @@
-.editable-cell {
-  position: relative;
-}
-
-.editable-cell-value-wrap {
-  padding: 5px 12px;
-  cursor: pointer;
-}
-
-.editable-row:hover .editable-cell-value-wrap {
-  padding: 4px 11px;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-}
-
-[data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
-  border: 1px solid #434343;
-}

package/components/table/demos/edit-cell/index.tsx

@@ -1,264 +0,0 @@
-/**
- * title: 可编辑单元格
- * desc: 带单元格编辑功能的表格。当配合 `shouldCellUpdate` 使用时请注意[闭包问题](https://github.com/ant-design/ant-design/issues/29243)。
- */
-
-import React, { useContext, useState, useEffect, useRef } from 'react';
-import { Table, Input, Button } from '@fle-ui/next';
-import { Popconfirm, Form } from 'antd';
-
-import { FormInstance } from 'antd/lib/form';
-
-import './index.less';
-
-const EditableContext = React.createContext<FormInstance<any> | null>(null);
-
-interface Item {
-  key: string;
-  name: string;
-  age: string;
-  address: string;
-}
-
-interface EditableRowProps {
-  index: number;
-}
-
-const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
-  const [form] = Form.useForm();
-  return (
-    <Form form={form} component={false}>
-      <EditableContext.Provider value={form}>
-        <tr {...props} />
-      </EditableContext.Provider>
-    </Form>
-  );
-};
-
-interface EditableCellProps {
-  title: React.ReactNode;
-  editable: boolean;
-  children: React.ReactNode;
-  dataIndex: keyof Item;
-  record: Item;
-  handleSave: (record: Item) => void;
-}
-
-const EditableCell: React.FC<EditableCellProps> = ({
-  title,
-  editable,
-  children,
-  dataIndex,
-  record,
-  handleSave,
-  ...restProps
-}) => {
-  const [editing, setEditing] = useState(false);
-
-  // @ts-ignore
-  const inputRef = useRef<Input>(null);
-  const form = useContext(EditableContext)!;
-
-  useEffect(() => {
-    if (editing) {
-      inputRef.current!.focus();
-    }
-  }, [editing]);
-
-  const toggleEdit = () => {
-    setEditing(!editing);
-    form.setFieldsValue({ [dataIndex]: record[dataIndex] });
-  };
-
-  const save = async () => {
-    try {
-      const values = await form.validateFields();
-
-      toggleEdit();
-      handleSave({ ...record, ...values });
-    } catch (errInfo) {
-      console.log('Save failed:', errInfo);
-    }
-  };
-
-  let childNode = children;
-
-  if (editable) {
-    childNode = editing ? (
-      <Form.Item
-        style={{ margin: 0 }}
-        name={dataIndex}
-        rules={[
-          {
-            required: true,
-            message: `${title} is required.`,
-          },
-        ]}
-      >
-        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
-      </Form.Item>
-    ) : (
-      <div
-        className="editable-cell-value-wrap"
-        style={{ paddingRight: 24 }}
-        onClick={toggleEdit}
-      >
-        {children}
-      </div>
-    );
-  }
-
-  return <td {...restProps}>{childNode}</td>;
-};
-
-type EditableTableProps = Parameters<typeof Table>[0];
-
-interface DataType {
-  key: React.Key;
-  name: string;
-  age: string;
-  address: string;
-}
-
-interface EditableTableState {
-  dataSource: DataType[];
-  count: number;
-}
-
-type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
-
-class EditableTable extends React.Component<
-  EditableTableProps,
-  EditableTableState
-> {
-  columns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[];
-
-  constructor(props: EditableTableProps) {
-    super(props);
-
-    this.columns = [
-      {
-        title: 'name',
-        dataIndex: 'name',
-        width: '30%',
-        editable: true,
-      },
-      {
-        title: 'age',
-        dataIndex: 'age',
-      },
-      {
-        title: 'address',
-        dataIndex: 'address',
-      },
-      {
-        title: 'operation',
-        dataIndex: 'operation',
-        render: (_, record: { key: React.Key }) =>
-          this.state.dataSource.length >= 1 ? (
-            <Popconfirm
-              title="Sure to delete?"
-              onConfirm={() => this.handleDelete(record.key)}
-            >
-              <a>Delete</a>
-            </Popconfirm>
-          ) : null,
-      },
-    ];
-
-    this.state = {
-      dataSource: [
-        {
-          key: '0',
-          name: 'Edward King 0',
-          age: '32',
-          address: 'London, Park Lane no. 0',
-        },
-        {
-          key: '1',
-          name: 'Edward King 1',
-          age: '32',
-          address: 'London, Park Lane no. 1',
-        },
-      ],
-      count: 2,
-    };
-  }
-
-  handleDelete = (key: React.Key) => {
-    const dataSource = [...this.state.dataSource];
-    this.setState({
-      dataSource: dataSource.filter((item) => item.key !== key),
-    });
-  };
-
-  handleAdd = () => {
-    const { count, dataSource } = this.state;
-    const newData: DataType = {
-      key: count,
-      name: `Edward King ${count}`,
-      age: '32',
-      address: `London, Park Lane no. ${count}`,
-    };
-    this.setState({
-      dataSource: [...dataSource, newData],
-      count: count + 1,
-    });
-  };
-
-  handleSave = (row: DataType) => {
-    const newData = [...this.state.dataSource];
-    const index = newData.findIndex((item) => row.key === item.key);
-    const item = newData[index];
-    newData.splice(index, 1, {
-      ...item,
-      ...row,
-    });
-    this.setState({ dataSource: newData });
-  };
-
-  render() {
-    const { dataSource } = this.state;
-    const components = {
-      body: {
-        row: EditableRow,
-        cell: EditableCell,
-      },
-    };
-    const columns = this.columns.map((col) => {
-      if (!col.editable) {
-        return col;
-      }
-      return {
-        ...col,
-        onCell: (record: DataType) => ({
-          record,
-          editable: col.editable,
-          dataIndex: col.dataIndex,
-          title: col.title,
-          handleSave: this.handleSave,
-        }),
-      };
-    });
-    return (
-      <div>
-        <Button
-          onClick={this.handleAdd}
-          type="primary"
-          style={{ marginBottom: 16 }}
-        >
-          Add a row
-        </Button>
-        <Table
-          components={components}
-          rowClassName={() => 'editable-row'}
-          bordered
-          dataSource={dataSource}
-          columns={columns as ColumnTypes}
-        />
-      </div>
-    );
-  }
-}
-
-export default EditableTable;