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

package/components/switch/demos/disabled.tsx

@@ -1,27 +0,0 @@
-/**
- * title: 不可用
- * desc: Switch 失效状态。
- */
-
-import React, { useState } from 'react';
-import { Switch, Button } from '@fle-ui/next';
-
-const Demo = () => {
-  const [disabled, setDisabled] = useState<boolean>(true);
-
-  const toggle = () => {
-    setDisabled(!disabled);
-  };
-
-  return (
-    <>
-      <Switch disabled={disabled} defaultChecked />
-      <br />
-      <Button type="primary" onClick={toggle}>
-        Toggle disabled
-      </Button>
-    </>
-  );
-};
-
-export default Demo;

package/components/switch/demos/loading.tsx

@@ -1,19 +0,0 @@
-/**
- * title: 加载中
- * desc: 标识开关操作仍在执行中
- */
-
-import React from 'react';
-import { Switch } from '@fle-ui/next';
-
-const Demo = () => {
-  return (
-    <>
-      <Switch loading defaultChecked />
-      <br />
-      <Switch size="small" loading />
-    </>
-  );
-};
-
-export default Demo;

package/components/switch/demos/size.tsx

@@ -1,19 +0,0 @@
-/**
- * title: 两种大小
- * desc: 设置 `size="small"` 表示小号开关。
- */
-
-import React from 'react';
-import { Switch } from '@fle-ui/next';
-
-const Demo = () => {
-  return (
-    <>
-      <Switch defaultChecked />
-      <br />
-      <Switch size="small" defaultChecked />
-    </>
-  );
-};
-
-export default Demo;

package/components/switch/demos/text.tsx

@@ -1,26 +0,0 @@
-/**
- * title: 文字和图标
- * desc: 带有文字和图标。
- */
-
-import React from 'react';
-import { Switch } from '@fle-ui/next';
-import { CloseOutlined, CheckOutlined } from '@ant-design/icons';
-
-const Demo = () => {
-  return (
-    <>
-      <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
-      <br />
-      <Switch checkedChildren="1" unCheckedChildren="0" />
-      <br />
-      <Switch
-        checkedChildren={<CheckOutlined />}
-        unCheckedChildren={<CloseOutlined />}
-        defaultChecked
-      />
-    </>
-  );
-};
-
-export default Demo;

package/components/switch/index.tsx

@@ -1,10 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Switch as AntdSwitch } from 'antd';
-import type { SwitchProps as AntdSwitchProps } from 'antd/es/switch';
-
-export interface SwitchProps extends AntdSwitchProps {}
-
-const Switch = forwardRef<any, SwitchProps>((props, ref) => {
-  return <AntdSwitch {...props} ref={ref} />;
-});
-export default Switch;

package/components/switch/switch.md

@@ -1,59 +0,0 @@
----
-title: Switch 开关
-order: 0
-legacy: /switch
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Switch 开关
-
-开关选择器。
-
-## 何时使用
-
-- 需要表示开关状态/两种状态之间的切换时；
-- 和 `checkbox` 的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
-
-## 代码演示
-
-### 基本
-<code src="./demos/basic.tsx" />
-
-### 两种大小
-<code src="./demos/size.tsx" />
-
-### 文字和图标
-<code src="./demos/text.tsx" />
-
-### 加载中
-<code src="./demos/loading.tsx" />
-
-### 不可用
-<code src="./demos/disabled.tsx" />
-
-## API
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| autoFocus | 组件自动获取焦点 | boolean | false |
-| checked | 指定当前是否选中 | boolean | false |
-| checkedChildren | 选中时的内容 | ReactNode | - |
-| className | Switch 器类名 | string | - |
-| defaultChecked | 初始是否选中 | boolean | false |
-| disabled | 是否禁用 | boolean | false |
-| loading | 加载中的开关 | boolean | false |
-| size | 开关大小，可选值：`default` `small` | string | `default` |
-| unCheckedChildren | 非选中时的内容 | ReactNode | - |
-| onChange | 变化时回调函数 | function(checked: boolean, event: Event) | - |
-| onClick | 点击时回调函数 | function(checked: boolean, event: Event) | - |
-
-## 方法
-
-| 名称 | 描述 |
-| --- | --- |
-| blur() | 移除焦点 |
-| focus() | 获取焦点 |

package/components/table/components/column.tsx

@@ -1,16 +0,0 @@
-import React, { FC } from 'react';
-import { Table as AntdTable } from 'antd';
-
-import type { ColumnProps as AntdTableColumnProps } from 'antd/es/table/Column';
-
-export interface ColumnProps extends AntdTableColumnProps<any> {}
-
-const { Column: AntdTableColumn } = AntdTable;
-
-const Column: FC<ColumnProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdTableColumn {...otherProps}>{children}</AntdTableColumn>;
-};
-
-export default Column;

package/components/table/components/columnGroup.tsx

@@ -1,18 +0,0 @@
-import React, { FC } from 'react';
-import { Table as AntdTable } from 'antd';
-
-import type { ColumnGroupProps as AntdTableColumnGroupProps } from 'antd/es/table/ColumnGroup';
-
-export interface ColumnGroupProps extends AntdTableColumnGroupProps<any> {}
-
-const { ColumnGroup: AntdTableColumnGroup } = AntdTable;
-
-const ColumnGroup: FC<ColumnGroupProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return (
-    <AntdTableColumnGroup {...otherProps}>{children}</AntdTableColumnGroup>
-  );
-};
-
-export default ColumnGroup;

package/components/table/components/summary.tsx

@@ -1,14 +0,0 @@
-import React, { FC } from 'react';
-import { Table as AntdTable } from 'antd';
-
-export interface SummaryProps {}
-
-const { Summary: AntdTableSummary } = AntdTable;
-
-const Summary: FC<SummaryProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdTableSummary {...otherProps}>{children}</AntdTableSummary>;
-};
-
-export default Summary;

package/components/table/components/table.tsx

@@ -1,23 +0,0 @@
-import React, { FC } from 'react';
-import { Table as AntdTable } from 'antd';
-
-import type { TableProps as AntdTableProps } from 'antd/es/table';
-
-export type RecordType =
-  | 'transformColumns'
-  | 'internalHooks'
-  | 'internalRefs'
-  | 'data'
-  | 'columns'
-  | 'scroll'
-  | 'emptyText';
-
-export interface TableProps extends AntdTableProps<any> {}
-
-const Table: FC<TableProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdTable {...otherProps}>{children}</AntdTable>;
-};
-
-export default Table;

package/components/table/demos/ajax.jsx

@@ -1,100 +0,0 @@
-/**
- * title: 远程加载数据
- * desc:
- */
-
-import React from 'react';
-import { Table } from '@fle-ui/next';
-import reqwest from 'reqwest';
-
-const columns = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    sorter: true,
-    render: (name) => `${name.first} ${name.last}`,
-    width: '20%',
-  },
-  {
-    title: 'Gender',
-    dataIndex: 'gender',
-    filters: [
-      { text: 'Male', value: 'male' },
-      { text: 'Female', value: 'female' },
-    ],
-    width: '20%',
-  },
-  {
-    title: 'Email',
-    dataIndex: 'email',
-  },
-];
-
-const getRandomuserParams = (params) => ({
-  results: params.pagination.pageSize,
-  page: params.pagination.current,
-  ...params,
-});
-
-class Demo extends React.Component {
-  state = {
-    data: [],
-    pagination: {
-      current: 1,
-      pageSize: 10,
-    },
-    loading: false,
-  };
-
-  componentDidMount() {
-    const { pagination } = this.state;
-    this.fetch({ pagination });
-  }
-
-  handleTableChange = (pagination, filters, sorter) => {
-    this.fetch({
-      sortField: sorter.field,
-      sortOrder: sorter.order,
-      pagination,
-      ...filters,
-    });
-  };
-
-  fetch = (params = {}) => {
-    this.setState({ loading: true });
-    reqwest({
-      url: 'https://randomuser.me/api',
-      method: 'get',
-      type: 'json',
-      data: getRandomuserParams(params),
-    }).then((data) => {
-      console.log(data);
-      this.setState({
-        loading: false,
-        data: data.results,
-        pagination: {
-          ...params.pagination,
-          total: 200,
-          // 200 is mock data, you should read it from server
-          // total: data.totalCount,
-        },
-      });
-    });
-  };
-
-  render() {
-    const { data, pagination, loading } = this.state;
-    return (
-      <Table
-        columns={columns}
-        rowKey={(record) => record.login.uuid}
-        dataSource={data}
-        pagination={pagination}
-        loading={loading}
-        onChange={this.handleTableChange}
-      />
-    );
-  }
-}
-
-export default Demo;

package/components/table/demos/basic.tsx

@@ -1,87 +0,0 @@
-/**
- * title: 基本用法
- * desc: 简单的表格，最后一列是各种操作。
- */
-
-import React from 'react';
-import { Table } from '@fle-ui/next';
-import { Tag, Space } from 'antd';
-
-const columns = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    key: 'name',
-    render: (text: string) => <a>{text}</a>,
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-    key: 'age',
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-    key: 'address',
-  },
-  {
-    title: 'Tags',
-    key: 'tags',
-    dataIndex: 'tags',
-    render: (tags: any) => (
-      <>
-        {tags.map((tag: any) => {
-          let color = tag.length > 5 ? 'geekblue' : 'green';
-          if (tag === 'loser') {
-            color = 'volcano';
-          }
-          return (
-            <Tag color={color} key={tag}>
-              {tag.toUpperCase()}
-            </Tag>
-          );
-        })}
-      </>
-    ),
-  },
-  {
-    title: 'Action',
-    key: 'action',
-    render: (text: string, record: any) => (
-      <Space size="middle">
-        <a>Invite {record.name}</a>
-        <a>Delete</a>
-      </Space>
-    ),
-  },
-];
-
-const data = [
-  {
-    key: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-    tags: ['nice', 'developer'],
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-    tags: ['loser'],
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-    tags: ['cool', 'teacher'],
-  },
-];
-
-const BasicDemo = () => {
-  return <Table columns={columns} dataSource={data} />;
-};
-
-export default BasicDemo;

package/components/table/demos/bordered.jsx

@@ -1,60 +0,0 @@
-/**
- * title: 带边框
- * desc: 添加表格边框线，页头和页脚。
- */
-
-import React from 'react';
-import { Table } from '@fle-ui/next';
-
-const columns = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    render: (text) => <a>{text}</a>,
-  },
-  {
-    title: 'Cash Assets',
-    className: 'column-money',
-    dataIndex: 'money',
-    align: 'right',
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-  },
-];
-
-const data = [
-  {
-    key: '1',
-    name: 'John Brown',
-    money: '￥300,000.00',
-    address: 'New York No. 1 Lake Park',
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    money: '￥1,256,000.00',
-    address: 'London No. 1 Lake Park',
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    money: '￥120,000.00',
-    address: 'Sidney No. 1 Lake Park',
-  },
-];
-
-const Demo = () => {
-  return (
-    <Table
-      columns={columns}
-      dataSource={data}
-      bordered
-      title={() => 'Header'}
-      footer={() => 'Footer'}
-    />
-  );
-};
-
-export default Demo;