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

package/components/config-provider/configProvider.md

@@ -1,176 +0,0 @@
----
-title: ConfigProvider全局化配置
-order: 0
-legacy: /config-provider
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-为组件提供统一的全局化配置。
-
-## 使用
-
-ConfigProvider 使用 React 的 [context](https://facebook.github.io/react/docs/context.html) 特性，只需在应用外围包裹一次即可全局生效。
-
-```bash
-import { ConfigProvider } from 'antd';
-
-// ...
-
-export default () => (
-  <ConfigProvider direction="rtl">
-    <App />
-  </ConfigProvider>
-);
-```
-
-### Content Security Policy
-
-部分组件为了支持波纹效果，使用了动态样式。如果开启了 Content Security Policy (CSP)，你可以通过 `csp` 属性来进行配置：
-
-```bash
-<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
-  <Button>My Button</Button>
-</ConfigProvider>
-```
-
-## 代码演示
-
-### 国际化
-
-<code src="./demos/international.tsx"/>
-
-### 方向
-
-<code src="./demos/direction.tsx"/>
-
-### 组件尺寸
-
-<code src="./demos/size.tsx"/>
-
-### 全局样式
-
-<code src="./demos/global.tsx"/>
-
-## API
-
-| 参数                     | 说明                                                                                                                                                                                                           | 类型                                                                                                                | 默认值              | 版本                |
-| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------- | ------------------- |
-| autoInsertSpaceInButton  | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格                                                                                                                                                               | boolean                                                                                                             | true                |                     |
-| componentSize            | 设置 antd 组件大小                                                                                                                                                                                             | `small` \| `middle` \| `large`                                                                                      | -                   |                     |
-| csp                      | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置                                                                                                                     | { nonce: string }                                                                                                   | -                   |                     |
-| direction                | 设置文本展示方向。 [示例](#components-config-provider-demo-direction)                                                                                                                                          | `ltr` \| `rtl`                                                                                                      | `ltr`               |                     |
-| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动                                                                                                           | boolean \| number                                                                                                   | -                   | 4.3.0               |
-| form                     | 设置 Form 组件的通用属性                                                                                                                                                                                       | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional` } | -                   | requiredMark: 4.8.0 |
-| getPopupContainer        | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。                                                                                                                                           | function(triggerNode)                                                                                               | () => document.body |                     |
-| getTargetContainer       | 配置 Affix、Anchor 滚动监听容器。                                                                                                                                                                              | () => HTMLElement                                                                                                   | () => window        | 4.2.0               |
-| iconPrefixCls            | 设置图标统一样式前缀。注意：需要配合 `less` 变量 [@iconfont-css-prefix](https://github.com/ant-design/ant-design/blob/d943b85a523bdf181dabc12c928226f3b4b893de/components/style/themes/default.less#L106) 使用 | string                                                                                                              | `anticon`           | 4.11.0              |
-| input                    | 设置 Input 组件的通用属性                                                                                                                                                                                      | { autoComplete?: string }                                                                                           | -                   | 4.2.0               |
-| locale                   | 语言包配置，语言包可到 [antd/lib/locale](http://unpkg.com/antd/lib/locale/) 目录下寻找                                                                                                                         | object                                                                                                              | -                   |                     |
-| pageHeader               | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header)                                                                                                                                       | { ghost: boolean }                                                                                                  | true                |                     |
-| prefixCls                | 设置统一样式前缀。注意：需要配合 `less` 变量 [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7) 使用                | string                                                                                                              | `ant`               |                     |
-| renderEmpty              | 自定义组件空状态。参考 [空状态](/components/empty/)                                                                                                                                                            | function(componentName: string): ReactNode                                                                          | -                   |                     |
-| space                    | 设置 Space 的 `size`，参考 [Space](/components/space)                                                                                                                                                          | { size: `small` \| `middle` \| `large` \| `number` }                                                                | -                   | 4.1.0               |
-| virtual                  | 设置 `false` 时关闭虚拟滚动                                                                                                                                                                                    | boolean                                                                                                             | -                   | 4.3.0               |
-
-### ConfigProvider.config() `4.13.0+`
-
-设置 `Modal`、`Message`、`Notification` rootPrefixCls。
-
-```bash
-ConfigProvider.config({
-  prefixCls: 'ant', // 4.13.0+
-  iconPrefixCls: 'anticon', // 4.17.0+
-});
-```
-
-## FAQ
-
-#### 如何增加一个新的语言包？
-
-参考[《增加语言包》](/docs/react/i18n#%E5%A2%9E%E5%8A%A0%E8%AF%AD%E8%A8%80%E5%8C%85)。
-
-#### 为什么我使用了 ConfigProvider `locale`，时间类组件的国际化还有问题？
-
-请检查是否正确设置了 moment 语言包，或者是否有两个版本的 moment 共存。
-
-```bash
-import 'moment/locale/zh-cn';
-moment.locale('zh-cn');
-```
-
-#### 配置 `getPopupContainer` 导致 Modal 报错？
-
-相关 issue：<https://github.com/ant-design/ant-design/issues/19974>
-
-当如下全局设置 `getPopupContainer` 为触发节点的 parentNode 时，由于 Modal 的用法不存在 `triggerNode`，这样会导致 `triggerNode is undefined` 的报错，需要增加一个[判断条件](https://github.com/afc163/feedback-antd/commit/3e4d1ad1bc1a38460dc3bf3c56517f737fe7d44a)。
-
-```diff
- <ConfigProvider
--  getPopupContainer={triggerNode => triggerNode.parentNode}
-+  getPopupContainer={node => {
-+    if (node) {
-+      return node.parentNode;
-+    }
-+    return document.body;
-+  }}
- >
-   <App />
- </ConfigProvider>
-```
-
-<style>
-.site-config-provider-calendar-wrapper {
-  width: 319px;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-}
-
-.locale-components {
-  padding-top: 16px;
-  border-top: 1px solid #d9d9d9;
-}
-
-.__dumi-default-previewer-demo .example {
-  margin: 16px 0;
-}
-
-.__dumi-default-previewer-demo .example > * {
-  margin-right: 8px;
-}
-
-.change-locale {
-  margin-bottom: 16px;
-}
-
-.button-demo .ant-btn,
-.button-demo .ant-btn-group {
-  margin-right: 8px;
-  margin-bottom: 12px;
-}
-.button-demo .ant-btn-group > .ant-btn,
-.button-demo .ant-btn-group > span > .ant-btn {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.head-example {
-  display: inline-block;
-  width: 42px;
-  height: 42px;
-  vertical-align: middle;
-  background: #eee;
-  border-radius: 4px;
-}
-
-.ant-badge:not(.ant-badge-not-a-wrapper) {
-  margin-right: 20px;
-}
-.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
-  margin-right: 0;
-  margin-left: 20px;
-}
-</style>

package/components/config-provider/demos/direction.tsx

@@ -1,558 +0,0 @@
-/**
- * title: 方向
- * desc: 这里列出了支持 rtl 方向的组件，您可以在演示中切换方向。
- */
-import React, { useState } from 'react';
-import { ConfigProvider } from '@fle-ui/next';
-import {
-  Input,
-  Col,
-  Row,
-  Select,
-  InputNumber,
-  Cascader,
-  Radio,
-  Switch,
-  Tree,
-  // TreeSelect,
-  Modal,
-  Button,
-  Pagination,
-  Steps,
-  Rate,
-  Badge,
-  Divider,
-} from 'antd';
-import {
-  SearchOutlined as SearchIcon,
-  SmileOutlined,
-  DownloadOutlined,
-  LeftOutlined,
-  RightOutlined,
-  MinusOutlined,
-  PlusOutlined,
-} from '@ant-design/icons';
-
-const InputGroup = Input.Group;
-const ButtonGroup = Button.Group;
-const { Option } = Select;
-const { TreeNode } = Tree;
-const { Search } = Input;
-const { Step } = Steps;
-
-const cascaderOptions = [
-  {
-    value: 'tehran',
-    label: 'تهران',
-    children: [
-      {
-        value: 'tehran-c',
-        label: 'تهران',
-        children: [
-          {
-            value: 'saadat-abad',
-            label: 'سعادت آیاد',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: 'ardabil',
-    label: 'اردبیل',
-    children: [
-      {
-        value: 'ardabil-c',
-        label: 'اردبیل',
-        children: [
-          {
-            value: 'primadar',
-            label: 'پیرمادر',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: 'gilan',
-    label: 'گیلان',
-    children: [
-      {
-        value: 'rasht',
-        label: 'رشت',
-        children: [
-          {
-            value: 'district-3',
-            label: 'منطقه ۳',
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const Page = (props: any) => {
-  const [currentStep, setCurrentStep] = useState(0);
-  const [modalVisible, setModalVisible] = useState(false);
-  const [badgeCount, setBadgeCount] = useState(5);
-  const [showBadge, setShowBadge] = useState(true);
-
-  const selectBefore = (
-    <Select defaultValue="Http://" style={{ width: 90 }}>
-      <Option value="Http://">Http://</Option>
-      <Option value="Https://">Https://</Option>
-    </Select>
-  );
-
-  const selectAfter = (
-    <Select defaultValue=".com" style={{ width: 80 }}>
-      <Option value=".com">.com</Option>
-      <Option value=".jp">.jp</Option>
-      <Option value=".cn">.cn</Option>
-      <Option value=".org">.org</Option>
-    </Select>
-  );
-
-  // ==== Cascader ====
-  const cascaderFilter: any = (inputValue: any, path: any) => {
-    path.some(
-      (option: any) =>
-        option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
-    );
-  };
-
-  const onCascaderChange = (value: any) => {
-    console.log(value);
-  };
-  // ==== End Cascader ====
-
-  // ==== Modal ====
-  const showModal = () => {
-    setModalVisible(true);
-  };
-
-  const handleOk = (e: any) => {
-    console.log(e);
-    setModalVisible(false);
-  };
-
-  const handleCancel = (e: any) => {
-    console.log(e);
-    setModalVisible(false);
-  };
-  // ==== End Modal ====
-
-  const onStepsChange = (currentStep: any) => {
-    console.log('onChange:', currentStep);
-    setCurrentStep(currentStep);
-  };
-
-  // ==== Badge ====
-
-  const increaseBadge = () => {
-    setBadgeCount(badgeCount + 1);
-  };
-
-  const declineBadge = () => {
-    setBadgeCount(badgeCount - 1);
-    if (badgeCount < 0) {
-      setBadgeCount(0);
-    }
-  };
-
-  const onChangeBadge = (showBadge: any) => {
-    setShowBadge(showBadge);
-  };
-  // ==== End Badge ====
-
-  return (
-    <div className="direction-components">
-      <Row>
-        <Col span={24}>
-          <Divider orientation="left">Cascader example</Divider>
-          <Cascader
-            suffixIcon={<SearchIcon />}
-            options={cascaderOptions}
-            onChange={onCascaderChange}
-            placeholder="یک مورد انتخاب کنید"
-            popupPlacement={props.popupPlacement}
-          />
-          &nbsp;&nbsp;&nbsp;&nbsp; With search:
-          <Cascader
-            suffixIcon={<SmileOutlined />}
-            options={cascaderOptions}
-            onChange={onCascaderChange}
-            placeholder="Select an item"
-            popupPlacement={props.popupPlacement}
-            showSearch={cascaderFilter}
-          />
-        </Col>
-      </Row>
-      <br />
-      <Row>
-        <Col span={12}>
-          <Divider orientation="left">Switch example</Divider>
-          &nbsp;&nbsp;
-          <Switch defaultChecked />
-          &nbsp;&nbsp;
-          <Switch loading defaultChecked />
-          &nbsp;&nbsp;
-          <Switch size="small" loading />
-        </Col>
-        <Col span={12}>
-          <Divider orientation="left">Radio Group example</Divider>
-
-          <Radio.Group defaultValue="c" buttonStyle="solid">
-            <Radio.Button value="a">تهران</Radio.Button>
-            <Radio.Button value="b" disabled>
-              اصفهان
-            </Radio.Button>
-            <Radio.Button value="c">فارس</Radio.Button>
-            <Radio.Button value="d">خوزستان</Radio.Button>
-          </Radio.Group>
-        </Col>
-      </Row>
-      <br />
-      <Row>
-        <Col span={12}>
-          <Divider orientation="left">Button example</Divider>
-          <div className="button-demo">
-            <Button type="primary" icon={<DownloadOutlined />} />
-            <Button type="primary" shape="circle" icon={<DownloadOutlined />} />
-            <Button type="primary" shape="round" icon={<DownloadOutlined />} />
-            <Button type="primary" shape="round" icon={<DownloadOutlined />}>
-              Download
-            </Button>
-            <Button type="primary" icon={<DownloadOutlined />}>
-              Download
-            </Button>
-            <br />
-            <Button.Group>
-              <Button type="primary">
-                <LeftOutlined />
-                Backward
-              </Button>
-              <Button type="primary">
-                Forward
-                <RightOutlined />
-              </Button>
-            </Button.Group>
-            <Button type="primary" loading>
-              Loading
-            </Button>
-            <Button type="primary" size="small" loading>
-              Loading
-            </Button>
-          </div>
-        </Col>
-        <Col span={12}>
-          <Divider orientation="left">Tree example</Divider>
-          <Tree
-            showLine
-            checkable
-            defaultExpandedKeys={['0-0-0', '0-0-1']}
-            defaultSelectedKeys={['0-0-0', '0-0-1']}
-            defaultCheckedKeys={['0-0-0', '0-0-1']}
-          >
-            <TreeNode title="parent 1" key="0-0">
-              <TreeNode title="parent 1-0" key="0-0-0" disabled>
-                <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
-                <TreeNode title="leaf" key="0-0-0-1" />
-              </TreeNode>
-              <TreeNode title="parent 1-1" key="0-0-1">
-                <TreeNode
-                  title={<span style={{ color: '#1890ff' }}>sss</span>}
-                  key="0-0-1-0"
-                />
-              </TreeNode>
-            </TreeNode>
-          </Tree>
-        </Col>
-      </Row>
-      <br />
-      <Row>
-        <Col span={24}>
-          <Divider orientation="left">Input (Input Group) example</Divider>
-          <InputGroup size="large">
-            <Row gutter={8}>
-              <Col span={5}>
-                <Input defaultValue="0571" />
-              </Col>
-              <Col span={8}>
-                <Input defaultValue="26888888" />
-              </Col>
-            </Row>
-          </InputGroup>
-          <br />
-          <InputGroup compact>
-            <Input style={{ width: '20%' }} defaultValue="0571" />
-            <Input style={{ width: '30%' }} defaultValue="26888888" />
-          </InputGroup>
-          <br />
-          <InputGroup compact>
-            <Select defaultValue="Option1">
-              <Option value="Option1">Option1</Option>
-              <Option value="Option2">Option2</Option>
-            </Select>
-            <Input style={{ width: '50%' }} defaultValue="input content" />
-            <InputNumber />
-          </InputGroup>
-          <br />
-          <Search
-            placeholder="input search text"
-            enterButton="Search"
-            size="large"
-          />
-          <br />
-          <br />
-          <div style={{ marginBottom: 16 }}>
-            <Input
-              addonBefore={selectBefore}
-              addonAfter={selectAfter}
-              defaultValue="mysite"
-            />
-          </div>
-          <br />
-          <Row>
-            <Col span={12}>
-              <Divider orientation="left">Select example</Divider>
-              <Select
-                mode="multiple"
-                defaultValue="مورچه"
-                style={{ width: 120 }}
-              >
-                <Option value="jack">Jack</Option>
-                <Option value="مورچه">مورچه</Option>
-                <Option value="disabled" disabled>
-                  Disabled
-                </Option>
-                <Option value="Yiminghe">yiminghe</Option>
-              </Select>
-              <Select defaultValue="مورچه" style={{ width: 120 }} disabled>
-                <Option value="مورچه">مورچه</Option>
-              </Select>
-              <Select defaultValue="مورچه" style={{ width: 120 }} loading>
-                <Option value="مورچه">مورچه</Option>
-              </Select>
-              <Select
-                showSearch
-                style={{ width: 200 }}
-                placeholder="Select a person"
-                optionFilterProp="children"
-                filterOption={(input: any, option: any) =>
-                  option.props.children
-                    .toLowerCase()
-                    .indexOf(input.toLowerCase()) >= 0
-                }
-              >
-                <Option value="jack">Jack</Option>
-                <Option value="سعید">سعید</Option>
-                <Option value="tom">Tom</Option>
-              </Select>
-            </Col>
-            {/* <Col span={12}>
-              <Divider orientation="left">TreeSelect example</Divider>
-              <div>
-                <TreeSelect
-                  showSearch
-                  style={{ width: '100%' }}
-                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-                  placeholder="Please select"
-                  allowClear
-                  treeDefaultExpandAll
-                >
-                  <TreeNode value="parent 1" title="parent 1" key="0-1">
-                    <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
-                      <TreeNode value="leaf1" title="my leaf" key="random" />
-                      <TreeNode value="leaf2" title="your leaf" key="random1" />
-                    </TreeNode>
-                    <TreeNode
-                      value="parent 1-1"
-                      title="parent 1-1"
-                      key="random2"
-                    >
-                      <TreeNode
-                        value="sss"
-                        title={<b style={{ color: '#08c' }}>sss</b>}
-                        key="random3"
-                      />
-                    </TreeNode>
-                  </TreeNode>
-                </TreeSelect>
-              </div>
-            </Col> */}
-          </Row>
-          <br />
-          <Row>
-            <Col span={24}>
-              <Divider orientation="left">Modal example</Divider>
-              <div>
-                <Button type="primary" onClick={showModal}>
-                  Open Modal
-                </Button>
-                <Modal
-                  title="پنچره ساده"
-                  visible={modalVisible}
-                  onOk={handleOk}
-                  onCancel={handleCancel}
-                >
-                  <p>نگاشته‌های خود را اینجا قراردهید</p>
-                  <p>نگاشته‌های خود را اینجا قراردهید</p>
-                  <p>نگاشته‌های خود را اینجا قراردهید</p>
-                </Modal>
-              </div>
-            </Col>
-          </Row>
-          <br />
-          <Row>
-            <Col span={24}>
-              <Divider orientation="left">Steps example</Divider>
-              <div>
-                <Steps progressDot current={currentStep}>
-                  <Step title="Finished" description="This is a description." />
-                  <Step
-                    title="In Progress"
-                    description="This is a description."
-                  />
-                  <Step title="Waiting" description="This is a description." />
-                </Steps>
-                <br />
-                <Steps current={currentStep} onChange={onStepsChange}>
-                  <Step title="Step 1" description="This is a description." />
-                  <Step title="Step 2" description="This is a description." />
-                  <Step title="Step 3" description="This is a description." />
-                </Steps>
-              </div>
-            </Col>
-          </Row>
-          <br />
-          <Row>
-            <Col span={12}>
-              <Divider orientation="left">Rate example</Divider>
-              <div>
-                <Rate defaultValue={2.5} />
-                <br />
-                <strong>* Note:</strong> Half star not implemented in RTL
-                direction, it will be supported after{' '}
-                <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
-                implement rtl support.
-              </div>
-            </Col>
-            <Col span={12}>
-              <Divider orientation="left">Badge example</Divider>
-              <div>
-                <div>
-                  <Badge count={badgeCount}>
-                    <a href="#" className="head-example" />
-                  </Badge>
-                  <ButtonGroup>
-                    <Button onClick={declineBadge}>
-                      <MinusOutlined />
-                    </Button>
-                    <Button onClick={increaseBadge}>
-                      <PlusOutlined />
-                    </Button>
-                  </ButtonGroup>
-                </div>
-                <div style={{ marginTop: 10 }}>
-                  <Badge dot={showBadge}>
-                    <a href="#" className="head-example" />
-                  </Badge>
-                  <Switch onChange={onChangeBadge} checked={showBadge} />
-                </div>
-              </div>
-            </Col>
-          </Row>
-        </Col>
-      </Row>
-
-      <br />
-      <br />
-      <Row>
-        <Col span={24}>
-          <Divider orientation="left">Pagination example</Divider>
-          <Pagination showSizeChanger defaultCurrent={3} total={500} />
-        </Col>
-      </Row>
-      <br />
-      <Row>
-        <Col span={24}>
-          <Divider orientation="left">Grid System example</Divider>
-          <div className="grid-demo">
-            <div className="code-box-demo">
-              <p>
-                <strong>* Note:</strong> Every calculation in RTL grid system is
-                from right side (offset, push, etc.)
-              </p>
-              <Row>
-                <Col span={8}>col-8</Col>
-                <Col span={8} offset={8}>
-                  col-8
-                </Col>
-              </Row>
-              <Row>
-                <Col span={6} offset={6}>
-                  col-6 col-offset-6
-                </Col>
-                <Col span={6} offset={6}>
-                  col-6 col-offset-6
-                </Col>
-              </Row>
-              <Row>
-                <Col span={12} offset={6}>
-                  col-12 col-offset-6
-                </Col>
-              </Row>
-              <Row>
-                <Col span={18} push={6}>
-                  col-18 col-push-6
-                </Col>
-                <Col span={6} pull={18}>
-                  col-6 col-pull-18
-                </Col>
-              </Row>
-            </div>
-          </div>
-        </Col>
-      </Row>
-    </div>
-  );
-};
-
-const DirectionDemo = () => {
-  const [direction, setDirection] = useState<any>('ltr');
-  const [popupPlacement, setPopupPlacement] = useState<any>('bottomLeft');
-
-  const changeDirection = (e: any) => {
-    const directionValue = e.target.value;
-    setDirection(directionValue);
-    if (directionValue === 'rtl') {
-      setPopupPlacement('bottomRight');
-    } else {
-      setPopupPlacement('bottomLeft');
-    }
-  };
-
-  return (
-    <>
-      <div style={{ marginBottom: 16 }}>
-        <span style={{ marginRight: 16 }}>
-          Change direction of components:{' '}
-        </span>
-        <Radio.Group defaultValue="ltr" onChange={changeDirection}>
-          <Radio.Button key="ltr" value="ltr">
-            LTR
-          </Radio.Button>
-          <Radio.Button key="rtl" value="rtl">
-            RTL
-          </Radio.Button>
-        </Radio.Group>
-      </div>
-      <ConfigProvider direction={direction}>
-        <Page className={direction} popupPlacement={popupPlacement} />
-      </ConfigProvider>
-    </>
-  );
-};
-
-export default DirectionDemo;