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

package/components/config-provider/demo/global.tsx

@@ -0,0 +1,680 @@
+/**
+ * title: 全局样式
+ * desc: 通过 css variable 修改全局主题色（你可以切换到组件页面查看更详细的样式展示），不支持 IE。自动生成的变量可能会根据设计调整，请勿直接依赖。详细配置请点击查看。
+ */
+
+import { SketchPicker } from 'react-color';
+import React, { useState } from 'react';
+import {
+  DownOutlined,
+  MailOutlined,
+  SettingOutlined,
+  ClockCircleOutlined,
+} from '@ant-design/icons';
+import {
+  Tag,
+  Mentions,
+  Steps,
+  Button,
+  Radio,
+  Space,
+  Form,
+  Input,
+  Row,
+  Col,
+  Typography,
+  Dropdown,
+  Divider,
+  Pagination,
+  Select,
+  Checkbox,
+  DatePicker,
+  TimePicker,
+  InputNumber,
+  Slider,
+  Switch,
+  TreeSelect,
+  Card,
+  Table,
+  Tabs,
+  Timeline,
+  Tree,
+  Alert,
+  Progress,
+  Spin,
+  Transfer,
+  Menu,
+} from 'antd';
+
+import { ConfigProvider } from '@fle-ui/next';
+
+const SplitSpace = (props: any) => (
+  <Space split={<Divider type="vertical" />} size={4} {...props} />
+);
+const GlobalDemo = () => {
+  const [color, setColor] = useState({
+    primaryColor: '#1890ff',
+    errorColor: '#ff4d4f',
+    warningColor: '#faad14',
+    successColor: '#52c41a',
+    infoColor: '#1890ff',
+  });
+
+  function onColorChange(nextColor: any) {
+    const mergedNextColor = {
+      ...color,
+      ...nextColor,
+    };
+    setColor(mergedNextColor);
+    const theme: any = {
+      theme: mergedNextColor,
+    };
+    ConfigProvider.config(theme);
+  }
+
+  const inputProps = {
+    style: { width: 128 },
+  };
+
+  const selectProps = {
+    ...inputProps,
+    options: [
+      { value: 'light', label: 'Light' },
+      { value: 'bamboo', label: 'Bamboo' },
+      { value: 'little', label: 'Little' },
+    ],
+  };
+
+  const treeData = [
+    {
+      value: 'little',
+      key: 'little',
+      label: 'Little',
+      title: 'Little',
+      children: [
+        { value: 'light', key: 'light', label: 'Light', title: 'Light' },
+        { value: 'bamboo', key: 'bamboo', label: 'Bamboo', title: 'Bamboo' },
+      ],
+    },
+  ];
+
+  const treeSelectProps: any = {
+    ...inputProps,
+    treeCheckable: true,
+    maxTagCount: 'responsive',
+    treeData,
+  };
+
+  const carTabListNoTitle = [
+    {
+      key: 'article',
+      tab: 'article',
+    },
+    {
+      key: 'app',
+      tab: 'app',
+    },
+    {
+      key: 'project',
+      tab: 'project',
+    },
+  ];
+
+  const MyTransfer = () => {
+    const mockData = [];
+    for (let i = 0; i < 20; i++) {
+      mockData.push({
+        key: i.toString(),
+        title: `content${i + 1}`,
+        description: `description of content${i + 1}`,
+      });
+    }
+
+    return (
+      <Transfer
+        dataSource={mockData}
+        targetKeys={['18']}
+        selectedKeys={['3']}
+        render={(item) => item.title}
+      />
+    );
+  };
+
+  return (
+    <Row gutter={16} wrap={false}>
+      <Col flex="none">
+        <Space direction="vertical" align="center">
+          {/* Primary Color */}
+          <SketchPicker
+            presetColors={['#1890ff', '#25b864', '#ff6f00']}
+            color={color.primaryColor}
+            onChange={({ hex }: { hex: string }) => {
+              onColorChange({
+                primaryColor: hex,
+              });
+            }}
+          />
+
+          <span style={{ color: 'var(--ant-primary-color)' }}>
+            var(`--ant-primary-color`)
+          </span>
+
+          {/* Error Color */}
+          <SketchPicker
+            presetColors={['#ff4d4f']}
+            color={color.errorColor}
+            onChange={({ hex }: { hex: string }) => {
+              onColorChange({
+                errorColor: hex,
+              });
+            }}
+          />
+
+          <span style={{ color: 'var(--ant-error-color)' }}>
+            var(`--ant-error-color`)
+          </span>
+
+          {/* Warning Color */}
+          <SketchPicker
+            presetColors={['#faad14']}
+            color={color.warningColor}
+            onChange={({ hex }: { hex: string }) => {
+              onColorChange({
+                warningColor: hex,
+              });
+            }}
+          />
+
+          <span style={{ color: 'var(--ant-warning-color)' }}>
+            var(`--ant-warning-color`)
+          </span>
+
+          {/* Success Color */}
+          <SketchPicker
+            presetColors={['#52c41a']}
+            color={color.successColor}
+            onChange={({ hex }: { hex: string }) => {
+              onColorChange({
+                successColor: hex,
+              });
+            }}
+          />
+
+          <span style={{ color: 'var(--ant-success-color)' }}>
+            var(`--ant-success-color`)
+          </span>
+
+          {/* Info Color */}
+          <SketchPicker
+            presetColors={['#1890ff']}
+            color={color.infoColor}
+            onChange={({ hex }: any) => {
+              onColorChange({
+                infoColor: hex,
+              });
+            }}
+          />
+
+          <span style={{ color: 'var(--ant-info-color)' }}>
+            var(`--ant-info-color`)
+          </span>
+        </Space>
+      </Col>
+
+      <Col flex="auto">
+        <Space
+          direction="vertical"
+          split={<Divider />}
+          style={{ width: '100%' }}
+          size={0}
+        >
+          {/* Primary Button */}
+          <SplitSpace>
+            <Button type="primary">Primary</Button>
+            <Button>Default</Button>
+            <Button type="dashed">Dashed</Button>
+            <Button type="text">Text</Button>
+            <Button type="link">Link</Button>
+          </SplitSpace>
+
+          {/* Danger Button */}
+          <SplitSpace>
+            <Button danger type="primary">
+              Primary
+            </Button>
+            <Button danger>Default</Button>
+            <Button danger type="dashed">
+              Dashed
+            </Button>
+            <Button danger type="text">
+              Text
+            </Button>
+            <Button danger type="link">
+              Link
+            </Button>
+          </SplitSpace>
+
+          {/* Ghost Button */}
+          <SplitSpace style={{ background: 'rgb(190, 200, 200)' }}>
+            <Button type="primary" ghost>
+              Primary
+            </Button>
+            <Button ghost>Default</Button>
+            <Button type="dashed" ghost>
+              Dashed
+            </Button>
+            <Button type="primary" ghost danger>
+              Primary
+            </Button>
+            <Button ghost danger>
+              Default
+            </Button>
+            <Button type="dashed" ghost danger>
+              Dashed
+            </Button>
+          </SplitSpace>
+
+          {/* Typography */}
+          <SplitSpace>
+            <Typography.Text type="success">Text (success)</Typography.Text>
+            <Typography.Text type="warning">Text(warning)</Typography.Text>
+            <Typography.Text type="danger">Text(danger)</Typography.Text>
+            <Typography.Link href="https://ant.design" target="_blank">
+              Link
+            </Typography.Link>
+            <Typography.Text copyable>Text</Typography.Text>
+
+            {/* Dropdown */}
+            <Dropdown
+              overlay={
+                <Menu>
+                  <Menu.Item>1st menu item</Menu.Item>
+                  <Menu.Item danger>a danger item</Menu.Item>
+                </Menu>
+              }
+            >
+              <a
+                className="ant-dropdown-link"
+                onClick={(e) => e.preventDefault()}
+              >
+                Hover me <DownOutlined />
+              </a>
+            </Dropdown>
+
+            {/* Spin */}
+            <Spin />
+          </SplitSpace>
+
+          {/* Menu - horizontal */}
+          <Row gutter={16}>
+            <Col span={12}>
+              <Menu mode="horizontal" defaultSelectedKeys={['mail']}>
+                <Menu.Item key="mail" icon={<MailOutlined />}>
+                  Mail
+                </Menu.Item>
+                <Menu.SubMenu
+                  key="SubMenu"
+                  icon={<SettingOutlined />}
+                  title="Submenu"
+                >
+                  <Menu.ItemGroup title="Item 1">
+                    <Menu.Item key="setting:1">Option 1</Menu.Item>
+                    <Menu.Item key="setting:2">Option 2</Menu.Item>
+                  </Menu.ItemGroup>
+                </Menu.SubMenu>
+              </Menu>
+            </Col>
+            <Col span={12}>
+              <Menu
+                mode="horizontal"
+                theme="dark"
+                defaultSelectedKeys={['mail']}
+              >
+                <Menu.Item key="mail" icon={<MailOutlined />}>
+                  Mail
+                </Menu.Item>
+                <Menu.SubMenu
+                  key="SubMenu"
+                  icon={<SettingOutlined />}
+                  title="Submenu"
+                >
+                  <Menu.ItemGroup title="Item 1">
+                    <Menu.Item key="setting:1">Option 1</Menu.Item>
+                    <Menu.Item key="setting:2">Option 2</Menu.Item>
+                  </Menu.ItemGroup>
+                </Menu.SubMenu>
+              </Menu>
+            </Col>
+          </Row>
+
+          {/* Menu - vertical */}
+          <Row gutter={16}>
+            <Col span={12}>
+              <Menu mode="inline" defaultSelectedKeys={['mail']}>
+                <Menu.Item key="mail" icon={<MailOutlined />}>
+                  Mail
+                </Menu.Item>
+                <Menu.SubMenu
+                  key="SubMenu"
+                  icon={<SettingOutlined />}
+                  title="Submenu"
+                >
+                  <Menu.ItemGroup title="Item 1">
+                    <Menu.Item key="setting:1">Option 1</Menu.Item>
+                    <Menu.Item key="setting:2">Option 2</Menu.Item>
+                  </Menu.ItemGroup>
+                </Menu.SubMenu>
+              </Menu>
+            </Col>
+            <Col span={12}>
+              <Menu mode="vertical" theme="dark" defaultSelectedKeys={['mail']}>
+                <Menu.Item key="mail" icon={<MailOutlined />}>
+                  Mail
+                </Menu.Item>
+                <Menu.SubMenu
+                  key="SubMenu"
+                  icon={<SettingOutlined />}
+                  title="Submenu"
+                >
+                  <Menu.ItemGroup title="Item 1">
+                    <Menu.Item key="setting:1">Option 1</Menu.Item>
+                    <Menu.Item key="setting:2">Option 2</Menu.Item>
+                  </Menu.ItemGroup>
+                </Menu.SubMenu>
+              </Menu>
+            </Col>
+          </Row>
+
+          {/* Pagination */}
+          <Pagination showQuickJumper defaultCurrent={2} total={500} />
+
+          {/* Steps */}
+          <Steps current={1} percent={60}>
+            <Steps.Step title="Finished" description="This is a description." />
+            <Steps.Step
+              title="In Progress"
+              subTitle="Left 00:00:08"
+              description="This is a description."
+            />
+            <Steps.Step title="Waiting" description="This is a description." />
+          </Steps>
+
+          {/* Steps - dot */}
+          <Steps current={2} status="error" progressDot>
+            <Steps.Step
+              title="Finished"
+              description="You can hover on the dot."
+            />
+            <Steps.Step
+              title="In Progress"
+              description="You can hover on the dot."
+            />
+            <Steps.Step title="Error" description="You can hover on the dot." />
+            <Steps.Step
+              title="Waiting"
+              description="You can hover on the dot."
+            />
+          </Steps>
+
+          {/* Form - Input */}
+          <Form>
+            <SplitSpace>
+              <Form.Item>
+                <Input {...inputProps} />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="success">
+                <Input {...inputProps} />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="warning">
+                <Input {...inputProps} />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="error">
+                <Input {...inputProps} />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="validating">
+                <Input {...inputProps} />
+              </Form.Item>
+            </SplitSpace>
+          </Form>
+
+          {/* Form - Select */}
+          <Form>
+            <SplitSpace>
+              <Form.Item>
+                <Select {...selectProps} />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="success">
+                <Select {...selectProps} />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="warning">
+                <Select {...selectProps} />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="error">
+                <Select {...selectProps} />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="validating">
+                <Select {...selectProps} />
+              </Form.Item>
+            </SplitSpace>
+          </Form>
+
+          {/* Form - TreeSelect */}
+          <Form>
+            <SplitSpace>
+              <Form.Item>
+                <TreeSelect {...treeSelectProps} />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="success">
+                <TreeSelect {...treeSelectProps} />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="warning">
+                <TreeSelect {...treeSelectProps} />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="error">
+                <TreeSelect {...treeSelectProps} />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="validating">
+                <TreeSelect {...treeSelectProps} />
+              </Form.Item>
+            </SplitSpace>
+          </Form>
+
+          {/* Form - InputNumber */}
+          <Form>
+            <SplitSpace>
+              <Form.Item>
+                <InputNumber />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="success">
+                <InputNumber />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="warning">
+                <InputNumber />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="error">
+                <InputNumber />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="validating">
+                <InputNumber />
+              </Form.Item>
+            </SplitSpace>
+          </Form>
+
+          {/* Form - DatePicker */}
+          <Form>
+            <SplitSpace>
+              <Form.Item>
+                <DatePicker />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="success">
+                <DatePicker />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="warning">
+                <DatePicker />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="error">
+                <DatePicker />
+              </Form.Item>
+              <Form.Item hasFeedback validateStatus="validating">
+                <DatePicker />
+              </Form.Item>
+            </SplitSpace>
+          </Form>
+
+          <SplitSpace>
+            <Checkbox>Checkbox</Checkbox>
+
+            <Radio.Group defaultValue="bamboo">
+              <Radio value="bamboo">Bamboo</Radio>
+              <Radio value="light">Light</Radio>
+              <Radio value="little">Little</Radio>
+            </Radio.Group>
+
+            <Mentions placeholder="Mention by @">
+              <Mentions.Option value="afc163">afc163</Mentions.Option>
+              <Mentions.Option value="zombieJ">zombieJ</Mentions.Option>
+              <Mentions.Option value="yesmeck">yesmeck</Mentions.Option>
+            </Mentions>
+
+            <Slider defaultValue={30} style={{ width: 100 }} />
+
+            <Switch defaultChecked />
+          </SplitSpace>
+
+          <SplitSpace>
+            <DatePicker.RangePicker />
+            <TimePicker.RangePicker />
+          </SplitSpace>
+
+          <Row gutter={16}>
+            <Col span={8}>
+              {/* Card */}
+              <Card
+                style={{ width: '100%' }}
+                tabList={carTabListNoTitle}
+                tabBarExtraContent={<a href="#">More</a>}
+              />
+            </Col>
+            <Col span={8}>
+              {/* Table */}
+              <Table
+                size="small"
+                bordered
+                rowSelection={{}}
+                columns={[
+                  {
+                    title: 'Key',
+                    dataIndex: 'key',
+                    filters: [
+                      {
+                        text: 'Little',
+                        value: 'little',
+                      },
+                    ],
+                    sorter: (a, b) => a.key.length - b.key.length,
+                  },
+                ]}
+                dataSource={[
+                  {
+                    key: 'Bamboo',
+                  },
+                  {
+                    key: 'Light',
+                  },
+                  {
+                    key: 'Little',
+                  },
+                ]}
+              />
+            </Col>
+            <Col span={8}>
+              {/* Table */}
+              <Tabs defaultActiveKey="1">
+                <Tabs.TabPane tab="Tab 1" key="1">
+                  Content of Tab Pane 1
+                </Tabs.TabPane>
+                <Tabs.TabPane tab="Tab 2" key="2">
+                  Content of Tab Pane 2
+                </Tabs.TabPane>
+                <Tabs.TabPane tab="Tab 3" key="3">
+                  Content of Tab Pane 3
+                </Tabs.TabPane>
+              </Tabs>
+            </Col>
+          </Row>
+
+          <SplitSpace>
+            <Tag color="success">success</Tag>
+            <Tag color="processing">processing</Tag>
+            <Tag color="error">error</Tag>
+            <Tag color="warning">warning</Tag>
+            <Tag color="default">default</Tag>
+            <Tag.CheckableTag checked>CheckableTag</Tag.CheckableTag>
+          </SplitSpace>
+
+          <Row gutter={16}>
+            <Col span={16}>
+              <Timeline mode="alternate">
+                <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
+                <Timeline.Item color="gray">
+                  Solve initial network problems 2015-09-01
+                </Timeline.Item>
+                <Timeline.Item
+                  dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}
+                >
+                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+                  accusantium doloremque laudantium, totam rem aperiam, eaque
+                  ipsa quae ab illo inventore veritatis et quasi architecto
+                  beatae vitae dicta sunt explicabo.
+                </Timeline.Item>
+              </Timeline>
+            </Col>
+
+            <Col span={8}>
+              <Tree
+                treeData={treeData}
+                height={200}
+                defaultExpandAll
+                checkable
+              />
+            </Col>
+          </Row>
+
+          {/* Alert */}
+          <Row gutter={16}>
+            <Col span={6}>
+              <Alert showIcon message="Success Text" type="success" />
+            </Col>
+            <Col span={6}>
+              <Alert showIcon message="Info Text" type="info" />
+            </Col>
+            <Col span={6}>
+              <Alert showIcon message="Warning Text" type="warning" />
+            </Col>
+            <Col span={6}>
+              <Alert showIcon message="Error Text" type="error" />
+            </Col>
+          </Row>
+
+          {/* Progress */}
+          <Row gutter={16}>
+            <Col flex="auto">
+              <Progress percent={30} />
+              <Progress percent={70} status="exception" />
+              <Progress percent={100} />
+            </Col>
+            <Col flex="none">
+              <Progress type="circle" percent={75} />
+              <Progress type="circle" percent={70} status="exception" />
+              <Progress type="circle" percent={100} />
+            </Col>
+          </Row>
+
+          <MyTransfer />
+        </Space>
+      </Col>
+    </Row>
+  );
+};
+
+export default GlobalDemo;