@fle-ui/next 1.0.3 → 1.0.4-alpha.0

package/docs-dist/components__affix__affix.md~components__alert__alert.md~components__anchor__anchor.md~components__au~31d645aa.js

@@ -67,11 +67,11 @@
         L =
           "import React from 'react';\nimport { Avatar } from '@fle-ui/next';\nimport { AntDesignOutlined } from '@ant-design/icons';\n\nconst ResponsiveDemo = () => {\n  return (\n    <Avatar\n      size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}\n      icon={<AntDesignOutlined />}\n    />\n  );\n};\n\nexport default ResponsiveDemo;",
         A =
-          "import React from 'react';\nimport { Avatar, Divider, Tooltip } from '@fle-ui/next';\nimport { UserOutlined, AntDesignOutlined } from '@ant-design/icons';\n\nconst GroupDemo = () => {\n  return (\n    <>\n      <Avatar.Group>\n        <Avatar src=\"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png\" />\n        <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>\n        <Tooltip title=\"Ant User\" placement=\"top\">\n          <Avatar\n            style={{ backgroundColor: '#87d068' }}\n            icon={<UserOutlined />}\n          />\n        </Tooltip>\n        <Avatar\n          style={{ backgroundColor: '#1890ff' }}\n          icon={<AntDesignOutlined />}\n        />\n      </Avatar.Group>\n      <Divider />\n      <Avatar.Group\n        maxCount={2}\n        maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}\n      >\n        <Avatar src=\"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png\" />\n        <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>\n        <Tooltip title=\"Ant User\" placement=\"top\">\n          <Avatar\n            style={{ backgroundColor: '#87d068' }}\n            icon={<UserOutlined />}\n          />\n        </Tooltip>\n        <Avatar\n          style={{ backgroundColor: '#1890ff' }}\n          icon={<AntDesignOutlined />}\n        />\n      </Avatar.Group>\n      <Divider />\n      <Avatar.Group\n        maxCount={2}\n        size=\"large\"\n        maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}\n      >\n        <Avatar src=\"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png\" />\n        <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>\n        <Tooltip title=\"Ant User\" placement=\"top\">\n          <Avatar\n            style={{ backgroundColor: '#87d068' }}\n            icon={<UserOutlined />}\n          />\n        </Tooltip>\n        <Avatar\n          style={{ backgroundColor: '#1890ff' }}\n          icon={<AntDesignOutlined />}\n        />\n      </Avatar.Group>\n    </>\n  );\n};\n\nexport default GroupDemo;",
+          "import React from 'react';\nimport { Avatar, Divider, Tooltip } from '@fle-ui/next';\nimport { UserOutlined, AntDesignOutlined } from '@ant-design/icons';\n\nconst GroupDemo = () => {\n  return (\n    <>\n      <Avatar.Group>\n        <Avatar src=\"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png\" />\n        <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>\n        <Tooltip title=\"Ant User\" placement=\"top\">\n          <Avatar\n            style={{ backgroundColor: '#87d068' }}\n            icon={<UserOutlined />}\n          />\n        </Tooltip>\n        <Avatar\n          style={{ backgroundColor: '#2c68ff' }}\n          icon={<AntDesignOutlined />}\n        />\n      </Avatar.Group>\n      <Divider />\n      <Avatar.Group\n        maxCount={2}\n        maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}\n      >\n        <Avatar src=\"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png\" />\n        <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>\n        <Tooltip title=\"Ant User\" placement=\"top\">\n          <Avatar\n            style={{ backgroundColor: '#87d068' }}\n            icon={<UserOutlined />}\n          />\n        </Tooltip>\n        <Avatar\n          style={{ backgroundColor: '#2c68ff' }}\n          icon={<AntDesignOutlined />}\n        />\n      </Avatar.Group>\n      <Divider />\n      <Avatar.Group\n        maxCount={2}\n        size=\"large\"\n        maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}\n      >\n        <Avatar src=\"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png\" />\n        <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>\n        <Tooltip title=\"Ant User\" placement=\"top\">\n          <Avatar\n            style={{ backgroundColor: '#87d068' }}\n            icon={<UserOutlined />}\n          />\n        </Tooltip>\n        <Avatar\n          style={{ backgroundColor: '#2c68ff' }}\n          icon={<AntDesignOutlined />}\n        />\n      </Avatar.Group>\n    </>\n  );\n};\n\nexport default GroupDemo;",
         F =
           "import React from 'react';\nimport { BackTop } from '@fle-ui/next';\n\nconst BasicDemo = () => {\n  return (\n    <>\n      <BackTop />\n      Scroll down to see the bottom-right\n      <strong className=\"site-back-top-basic\"> gray </strong>\n      button.\n    </>\n  );\n};\n\nexport default BasicDemo;",
         z =
-          "import React from 'react';\nimport { BackTop } from '@fle-ui/next';\n\nconst CustomDemo = () => {\n  const style: any = {\n    height: 40,\n    width: 40,\n    lineHeight: '40px',\n    borderRadius: 4,\n    backgroundColor: '#1088e9',\n    color: '#fff',\n    textAlign: 'center',\n    fontSize: 14,\n  };\n  return (\n    <div style={{ height: '600vh', padding: 8 }}>\n      <div>Scroll to bottom</div>\n      <div>Scroll to bottom</div>\n      <div>Scroll to bottom</div>\n      <div>Scroll to bottom</div>\n      <div>Scroll to bottom</div>\n      <div>Scroll to bottom</div>\n      <div>Scroll to bottom</div>\n      <BackTop>\n        <div style={style}>UP</div>\n      </BackTop>\n    </div>\n  );\n};\nexport default CustomDemo;",
+          "/*\n * @Author: your name\n * @Date: 2021-09-22 20:47:19\n * @LastEditTime: 2021-12-23 17:24:13\n * @LastEditors: your name\n * @Description: \u6253\u5f00koroFileHeader\u67e5\u770b\u914d\u7f6e \u8fdb\u884c\u8bbe\u7f6e: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE\n * @FilePath: /fle-ui-next/components/back-top/demo/custom.tsx\n */\n/**\n * title: \u81ea\u5b9a\u4e49\u6837\u5f0f\n * desc: \u53ef\u4ee5\u81ea\u5b9a\u4e49\u56de\u5230\u9876\u90e8\u6309\u94ae\u7684\u6837\u5f0f\uff0c\u9650\u5236\u5bbd\u9ad8\uff1a40px * 40px\u3002\n */\n\nimport React from 'react';\nimport { BackTop } from '@fle-ui/next';\n\nconst CustomDemo = () => {\n  const style: any = {\n    height: 40,\n    width: 40,\n    lineHeight: '40px',\n    borderRadius: 4,\n    backgroundColor: '#2c68ff',\n    color: '#fff',\n    textAlign: 'center',\n    fontSize: 14,\n  };\n  return (\n    <div style={{ height: '600vh', padding: 8 }}>\n      <div>Scroll to bottom</div>\n      <div>Scroll to bottom</div>\n      <div>Scroll to bottom</div>\n      <div>Scroll to bottom</div>\n      <div>Scroll to bottom</div>\n      <div>Scroll to bottom</div>\n      <div>Scroll to bottom</div>\n      <BackTop>\n        <div style={style}>UP</div>\n      </BackTop>\n    </div>\n  );\n};\nexport default CustomDemo;",
         _ =
           'import React from \'react\';\nimport { Badge, Avatar } from \'@fle-ui/next\';\nimport { ClockCircleOutlined } from \'@ant-design/icons\';\n\nconst Demo = () => {\n  return (\n    <>\n      <Badge count={5}>\n        <Avatar shape="square" size="large" />\n      </Badge>\n      <Badge count={0} showZero>\n        <Avatar shape="square" size="large" />\n      </Badge>\n      <Badge count={<ClockCircleOutlined style={{ color: \'#f5222d\' }} />}>\n        <Avatar shape="square" size="large" />\n      </Badge>\n    </>\n  );\n};\n\nexport default Demo;',
         E =
@@ -109,7 +109,7 @@
         te =
           'import React from \'react\';\nimport { Breadcrumb } from \'@fle-ui/next\';\n\nconst SeparatorComponentDemo = () => {\n  return (\n    <Breadcrumb separator="">\n      <Breadcrumb.Item>Location</Breadcrumb.Item>\n      <Breadcrumb.Separator>:</Breadcrumb.Separator>\n      <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>\n      <Breadcrumb.Separator />\n      <Breadcrumb.Item href="">Application List</Breadcrumb.Item>\n      <Breadcrumb.Separator />\n      <Breadcrumb.Item>An Application</Breadcrumb.Item>\n    </Breadcrumb>\n  );\n};\n\nexport default SeparatorComponentDemo;',
         re =
-          'import React from \'react\';\nimport { Button } from \'@fle-ui/next\';\n\nconst BasicDemo = () => {\n  return (\n    <>\n      <Button type="primary">Primary Button</Button>\n      <Button>Default Button</Button>\n      <Button type="dashed">Dashed Button</Button>\n      <Button type="text">Text Button</Button>\n      <Button type="link">Link Button</Button>\n    </>\n  );\n};\n\nexport default BasicDemo;',
+          'import React from \'react\';\nimport { Button, ConfigProvider } from \'@fle-ui/next\';\n\nconst BasicDemo = () => {\n  return (\n    <>\n      <Button type="primary">Primary Button</Button>\n      <Button>Default Button</Button>\n      <Button type="dashed">Dashed Button</Button>\n      <Button type="text">Text Button</Button>\n      <Button type="link">Link Button</Button>\n    </>\n  );\n};\n\nexport default BasicDemo;',
         oe =
           'import React, { useState } from \'react\';\nimport { Button, Radio } from \'@fle-ui/next\';\nimport { DownloadOutlined } from \'@ant-design/icons\';\n\nimport type { SizeType } from \'@fle-ui/next/es/config-provider/SizeContext\';\nimport type { RadioChangeEvent } from \'@fle-ui/next/es/radio\';\n\nconst SizeDemo = () => {\n  const [size, setSize] = useState<SizeType>(\'large\');\n\n  const handleSizeChange = (e: RadioChangeEvent) => {\n    setSize(e.target.value);\n  };\n\n  return (\n    <>\n      <Radio.Group value={size} onChange={handleSizeChange}>\n        <Radio.Button value="large">Large</Radio.Button>\n        <Radio.Button value="default">Default</Radio.Button>\n        <Radio.Button value="small">Small</Radio.Button>\n      </Radio.Group>\n\n      <br />\n      <br />\n\n      <Button type="primary" size={size}>\n        Primary\n      </Button>\n      <Button size={size}>Default</Button>\n      <Button type="dashed" size={size}>\n        Dashed\n      </Button>\n      <Button type="link" size={size}>\n        Link\n      </Button>\n\n      <Button type="primary" icon={<DownloadOutlined />} size={size} />\n      <Button\n        type="primary"\n        shape="circle"\n        icon={<DownloadOutlined />}\n        size={size}\n      />\n      <Button\n        type="primary"\n        shape="round"\n        icon={<DownloadOutlined />}\n        size={size}\n      />\n      <Button\n        type="primary"\n        shape="round"\n        icon={<DownloadOutlined />}\n        size={size}\n      >\n        Download\n      </Button>\n      <Button type="primary" icon={<DownloadOutlined />} size={size}>\n        Download\n      </Button>\n    </>\n  );\n};\n\nexport default SizeDemo;',
         ae =
@@ -241,11 +241,11 @@
         hn =
           "import zhCN from '../../date-picker/locale/zh_CN';\n\nexport default zhCN;",
         vn =
-          'import React, { useState } from \'react\';\nimport { ConfigProvider } from \'@fle-ui/next\';\nimport {\n  Input,\n  Col,\n  Row,\n  Select,\n  InputNumber,\n  Cascader,\n  Radio,\n  Switch,\n  Tree,\n  // TreeSelect,\n  Modal,\n  Button,\n  Pagination,\n  Steps,\n  Rate,\n  Badge,\n  Divider,\n} from \'@fle-ui/next\';\nimport {\n  SearchOutlined as SearchIcon,\n  SmileOutlined,\n  DownloadOutlined,\n  LeftOutlined,\n  RightOutlined,\n  MinusOutlined,\n  PlusOutlined,\n} from \'@ant-design/icons\';\n\nconst InputGroup = Input.Group;\nconst ButtonGroup = Button.Group;\nconst { Option } = Select;\nconst { TreeNode } = Tree;\nconst { Search } = Input;\nconst { Step } = Steps;\n\nconst cascaderOptions = [\n  {\n    value: \'tehran\',\n    label: \'\u062a\u0647\u0631\u0627\u0646\',\n    children: [\n      {\n        value: \'tehran-c\',\n        label: \'\u062a\u0647\u0631\u0627\u0646\',\n        children: [\n          {\n            value: \'saadat-abad\',\n            label: \'\u0633\u0639\u0627\u062f\u062a \u0622\u06cc\u0627\u062f\',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    value: \'ardabil\',\n    label: \'\u0627\u0631\u062f\u0628\u06cc\u0644\',\n    children: [\n      {\n        value: \'ardabil-c\',\n        label: \'\u0627\u0631\u062f\u0628\u06cc\u0644\',\n        children: [\n          {\n            value: \'primadar\',\n            label: \'\u067e\u06cc\u0631\u0645\u0627\u062f\u0631\',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    value: \'gilan\',\n    label: \'\u06af\u06cc\u0644\u0627\u0646\',\n    children: [\n      {\n        value: \'rasht\',\n        label: \'\u0631\u0634\u062a\',\n        children: [\n          {\n            value: \'district-3\',\n            label: \'\u0645\u0646\u0637\u0642\u0647 \u06f3\',\n          },\n        ],\n      },\n    ],\n  },\n];\n\nconst Page = (props: any) => {\n  const [currentStep, setCurrentStep] = useState(0);\n  const [modalVisible, setModalVisible] = useState(false);\n  const [badgeCount, setBadgeCount] = useState(5);\n  const [showBadge, setShowBadge] = useState(true);\n\n  const selectBefore = (\n    <Select defaultValue="Http://" style={{ width: 90 }}>\n      <Option value="Http://">Http://</Option>\n      <Option value="Https://">Https://</Option>\n    </Select>\n  );\n\n  const selectAfter = (\n    <Select defaultValue=".com" style={{ width: 80 }}>\n      <Option value=".com">.com</Option>\n      <Option value=".jp">.jp</Option>\n      <Option value=".cn">.cn</Option>\n      <Option value=".org">.org</Option>\n    </Select>\n  );\n\n  // ==== Cascader ====\n  const cascaderFilter: any = (inputValue: any, path: any) => {\n    path.some(\n      (option: any) =>\n        option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,\n    );\n  };\n\n  const onCascaderChange = (value: any) => {\n    console.log(value);\n  };\n  // ==== End Cascader ====\n\n  // ==== Modal ====\n  const showModal = () => {\n    setModalVisible(true);\n  };\n\n  const handleOk = (e: any) => {\n    console.log(e);\n    setModalVisible(false);\n  };\n\n  const handleCancel = (e: any) => {\n    console.log(e);\n    setModalVisible(false);\n  };\n  // ==== End Modal ====\n\n  const onStepsChange = (currentStep: any) => {\n    console.log(\'onChange:\', currentStep);\n    setCurrentStep(currentStep);\n  };\n\n  // ==== Badge ====\n\n  const increaseBadge = () => {\n    setBadgeCount(badgeCount + 1);\n  };\n\n  const declineBadge = () => {\n    setBadgeCount(badgeCount - 1);\n    if (badgeCount < 0) {\n      setBadgeCount(0);\n    }\n  };\n\n  const onChangeBadge = (showBadge: any) => {\n    setShowBadge(showBadge);\n  };\n  // ==== End Badge ====\n\n  return (\n    <div className="direction-components">\n      <Row>\n        <Col span={24}>\n          <Divider orientation="left">Cascader example</Divider>\n          <Cascader\n            // @ts-ignore\n            suffixIcon={<SearchIcon />}\n            options={cascaderOptions}\n            onChange={onCascaderChange}\n            placeholder="\u06cc\u06a9 \u0645\u0648\u0631\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f"\n            popupPlacement={props.popupPlacement}\n          />\n          &nbsp;&nbsp;&nbsp;&nbsp; With search:\n          <Cascader\n            // @ts-ignore\n            suffixIcon={<SmileOutlined />}\n            options={cascaderOptions}\n            onChange={onCascaderChange}\n            placeholder="Select an item"\n            popupPlacement={props.popupPlacement}\n            showSearch={cascaderFilter}\n          />\n        </Col>\n      </Row>\n      <br />\n      <Row>\n        <Col span={12}>\n          <Divider orientation="left">Switch example</Divider>\n          &nbsp;&nbsp;\n          <Switch defaultChecked />\n          &nbsp;&nbsp;\n          <Switch loading defaultChecked />\n          &nbsp;&nbsp;\n          <Switch size="small" loading />\n        </Col>\n        <Col span={12}>\n          <Divider orientation="left">Radio Group example</Divider>\n\n          <Radio.Group defaultValue="c" buttonStyle="solid">\n            <Radio.Button value="a">\u062a\u0647\u0631\u0627\u0646</Radio.Button>\n            <Radio.Button value="b" disabled>\n              \u0627\u0635\u0641\u0647\u0627\u0646\n            </Radio.Button>\n            <Radio.Button value="c">\u0641\u0627\u0631\u0633</Radio.Button>\n            <Radio.Button value="d">\u062e\u0648\u0632\u0633\u062a\u0627\u0646</Radio.Button>\n          </Radio.Group>\n        </Col>\n      </Row>\n      <br />\n      <Row>\n        <Col span={12}>\n          <Divider orientation="left">Button example</Divider>\n          <div className="button-demo">\n            <Button type="primary" icon={<DownloadOutlined />} />\n            <Button type="primary" shape="circle" icon={<DownloadOutlined />} />\n            <Button type="primary" shape="round" icon={<DownloadOutlined />} />\n            <Button type="primary" shape="round" icon={<DownloadOutlined />}>\n              Download\n            </Button>\n            <Button type="primary" icon={<DownloadOutlined />}>\n              Download\n            </Button>\n            <br />\n            <Button.Group>\n              <Button type="primary">\n                <LeftOutlined />\n                Backward\n              </Button>\n              <Button type="primary">\n                Forward\n                <RightOutlined />\n              </Button>\n            </Button.Group>\n            <Button type="primary" loading>\n              Loading\n            </Button>\n            <Button type="primary" size="small" loading>\n              Loading\n            </Button>\n          </div>\n        </Col>\n        <Col span={12}>\n          <Divider orientation="left">Tree example</Divider>\n          <Tree\n            showLine\n            checkable\n            defaultExpandedKeys={[\'0-0-0\', \'0-0-1\']}\n            defaultSelectedKeys={[\'0-0-0\', \'0-0-1\']}\n            defaultCheckedKeys={[\'0-0-0\', \'0-0-1\']}\n          >\n            <TreeNode title="parent 1" key="0-0">\n              <TreeNode title="parent 1-0" key="0-0-0" disabled>\n                <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />\n                <TreeNode title="leaf" key="0-0-0-1" />\n              </TreeNode>\n              <TreeNode title="parent 1-1" key="0-0-1">\n                <TreeNode\n                  title={<span style={{ color: \'#1890ff\' }}>sss</span>}\n                  key="0-0-1-0"\n                />\n              </TreeNode>\n            </TreeNode>\n          </Tree>\n        </Col>\n      </Row>\n      <br />\n      <Row>\n        <Col span={24}>\n          <Divider orientation="left">Input (Input Group) example</Divider>\n          <InputGroup size="large">\n            <Row gutter={8}>\n              <Col span={5}>\n                <Input defaultValue="0571" />\n              </Col>\n              <Col span={8}>\n                <Input defaultValue="26888888" />\n              </Col>\n            </Row>\n          </InputGroup>\n          <br />\n          <InputGroup compact>\n            <Input style={{ width: \'20%\' }} defaultValue="0571" />\n            <Input style={{ width: \'30%\' }} defaultValue="26888888" />\n          </InputGroup>\n          <br />\n          <InputGroup compact>\n            <Select defaultValue="Option1">\n              <Option value="Option1">Option1</Option>\n              <Option value="Option2">Option2</Option>\n            </Select>\n            <Input style={{ width: \'50%\' }} defaultValue="input content" />\n            <InputNumber />\n          </InputGroup>\n          <br />\n          <Search\n            placeholder="input search text"\n            enterButton="Search"\n            size="large"\n          />\n          <br />\n          <br />\n          <div style={{ marginBottom: 16 }}>\n            <Input\n              addonBefore={selectBefore}\n              addonAfter={selectAfter}\n              defaultValue="mysite"\n            />\n          </div>\n          <br />\n          <Row>\n            <Col span={12}>\n              <Divider orientation="left">Select example</Divider>\n              <Select\n                mode="multiple"\n                defaultValue="\u0645\u0648\u0631\u0686\u0647"\n                style={{ width: 120 }}\n              >\n                <Option value="jack">Jack</Option>\n                <Option value="\u0645\u0648\u0631\u0686\u0647">\u0645\u0648\u0631\u0686\u0647</Option>\n                <Option value="disabled" disabled>\n                  Disabled\n                </Option>\n                <Option value="Yiminghe">yiminghe</Option>\n              </Select>\n              <Select defaultValue="\u0645\u0648\u0631\u0686\u0647" style={{ width: 120 }} disabled>\n                <Option value="\u0645\u0648\u0631\u0686\u0647">\u0645\u0648\u0631\u0686\u0647</Option>\n              </Select>\n              <Select defaultValue="\u0645\u0648\u0631\u0686\u0647" style={{ width: 120 }} loading>\n                <Option value="\u0645\u0648\u0631\u0686\u0647">\u0645\u0648\u0631\u0686\u0647</Option>\n              </Select>\n              <Select\n                showSearch\n                style={{ width: 200 }}\n                placeholder="Select a person"\n                optionFilterProp="children"\n                filterOption={(input: any, option: any) =>\n                  option.props.children\n                    .toLowerCase()\n                    .indexOf(input.toLowerCase()) >= 0\n                }\n              >\n                <Option value="jack">Jack</Option>\n                <Option value="\u0633\u0639\u06cc\u062f">\u0633\u0639\u06cc\u062f</Option>\n                <Option value="tom">Tom</Option>\n              </Select>\n            </Col>\n            {/* <Col span={12}>\n              <Divider orientation="left">TreeSelect example</Divider>\n              <div>\n                <TreeSelect\n                  showSearch\n                  style={{ width: \'100%\' }}\n                  dropdownStyle={{ maxHeight: 400, overflow: \'auto\' }}\n                  placeholder="Please select"\n                  allowClear\n                  treeDefaultExpandAll\n                >\n                  <TreeNode value="parent 1" title="parent 1" key="0-1">\n                    <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">\n                      <TreeNode value="leaf1" title="my leaf" key="random" />\n                      <TreeNode value="leaf2" title="your leaf" key="random1" />\n                    </TreeNode>\n                    <TreeNode\n                      value="parent 1-1"\n                      title="parent 1-1"\n                      key="random2"\n                    >\n                      <TreeNode\n                        value="sss"\n                        title={<b style={{ color: \'#08c\' }}>sss</b>}\n                        key="random3"\n                      />\n                    </TreeNode>\n                  </TreeNode>\n                </TreeSelect>\n              </div>\n            </Col> */}\n          </Row>\n          <br />\n          <Row>\n            <Col span={24}>\n              <Divider orientation="left">Modal example</Divider>\n              <div>\n                <Button type="primary" onClick={showModal}>\n                  Open Modal\n                </Button>\n                <Modal\n                  title="\u067e\u0646\u0686\u0631\u0647 \u0633\u0627\u062f\u0647"\n                  visible={modalVisible}\n                  onOk={handleOk}\n                  onCancel={handleCancel}\n                >\n                  <p>\u0646\u06af\u0627\u0634\u062a\u0647\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0631\u0627\u0631\u062f\u0647\u06cc\u062f</p>\n                  <p>\u0646\u06af\u0627\u0634\u062a\u0647\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0631\u0627\u0631\u062f\u0647\u06cc\u062f</p>\n                  <p>\u0646\u06af\u0627\u0634\u062a\u0647\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0631\u0627\u0631\u062f\u0647\u06cc\u062f</p>\n                </Modal>\n              </div>\n            </Col>\n          </Row>\n          <br />\n          <Row>\n            <Col span={24}>\n              <Divider orientation="left">Steps example</Divider>\n              <div>\n                <Steps progressDot current={currentStep}>\n                  <Step title="Finished" description="This is a description." />\n                  <Step\n                    title="In Progress"\n                    description="This is a description."\n                  />\n                  <Step title="Waiting" description="This is a description." />\n                </Steps>\n                <br />\n                <Steps current={currentStep} onChange={onStepsChange}>\n                  <Step title="Step 1" description="This is a description." />\n                  <Step title="Step 2" description="This is a description." />\n                  <Step title="Step 3" description="This is a description." />\n                </Steps>\n              </div>\n            </Col>\n          </Row>\n          <br />\n          <Row>\n            <Col span={12}>\n              <Divider orientation="left">Rate example</Divider>\n              <div>\n                <Rate defaultValue={2.5} />\n                <br />\n                <strong>* Note:</strong> Half star not implemented in RTL\n                direction, it will be supported after{\' \'}\n                <a href="https://github.com/react-component/rate">rc-rate</a>{\' \'}\n                implement rtl support.\n              </div>\n            </Col>\n            <Col span={12}>\n              <Divider orientation="left">Badge example</Divider>\n              <div>\n                <div>\n                  <Badge count={badgeCount}>\n                    <a href="#" className="head-example" />\n                  </Badge>\n                  <ButtonGroup>\n                    <Button onClick={declineBadge}>\n                      <MinusOutlined />\n                    </Button>\n                    <Button onClick={increaseBadge}>\n                      <PlusOutlined />\n                    </Button>\n                  </ButtonGroup>\n                </div>\n                <div style={{ marginTop: 10 }}>\n                  <Badge dot={showBadge}>\n                    <a href="#" className="head-example" />\n                  </Badge>\n                  <Switch onChange={onChangeBadge} checked={showBadge} />\n                </div>\n              </div>\n            </Col>\n          </Row>\n        </Col>\n      </Row>\n\n      <br />\n      <br />\n      <Row>\n        <Col span={24}>\n          <Divider orientation="left">Pagination example</Divider>\n          <Pagination showSizeChanger defaultCurrent={3} total={500} />\n        </Col>\n      </Row>\n      <br />\n      <Row>\n        <Col span={24}>\n          <Divider orientation="left">Grid System example</Divider>\n          <div className="grid-demo">\n            <div className="code-box-demo">\n              <p>\n                <strong>* Note:</strong> Every calculation in RTL grid system is\n                from right side (offset, push, etc.)\n              </p>\n              <Row>\n                <Col span={8}>col-8</Col>\n                <Col span={8} offset={8}>\n                  col-8\n                </Col>\n              </Row>\n              <Row>\n                <Col span={6} offset={6}>\n                  col-6 col-offset-6\n                </Col>\n                <Col span={6} offset={6}>\n                  col-6 col-offset-6\n                </Col>\n              </Row>\n              <Row>\n                <Col span={12} offset={6}>\n                  col-12 col-offset-6\n                </Col>\n              </Row>\n              <Row>\n                <Col span={18} push={6}>\n                  col-18 col-push-6\n                </Col>\n                <Col span={6} pull={18}>\n                  col-6 col-pull-18\n                </Col>\n              </Row>\n            </div>\n          </div>\n        </Col>\n      </Row>\n    </div>\n  );\n};\n\nconst DirectionDemo = () => {\n  const [direction, setDirection] = useState<any>(\'ltr\');\n  const [popupPlacement, setPopupPlacement] = useState<any>(\'bottomLeft\');\n\n  const changeDirection = (e: any) => {\n    const directionValue = e.target.value;\n    setDirection(directionValue);\n    if (directionValue === \'rtl\') {\n      setPopupPlacement(\'bottomRight\');\n    } else {\n      setPopupPlacement(\'bottomLeft\');\n    }\n  };\n\n  return (\n    <>\n      <div style={{ marginBottom: 16 }}>\n        <span style={{ marginRight: 16 }}>\n          Change direction of components:{\' \'}\n        </span>\n        <Radio.Group defaultValue="ltr" onChange={changeDirection}>\n          <Radio.Button key="ltr" value="ltr">\n            LTR\n          </Radio.Button>\n          <Radio.Button key="rtl" value="rtl">\n            RTL\n          </Radio.Button>\n        </Radio.Group>\n      </div>\n      <ConfigProvider direction={direction}>\n        <Page className={direction} popupPlacement={popupPlacement} />\n      </ConfigProvider>\n    </>\n  );\n};\n\nexport default DirectionDemo;',
+          'import React, { useState } from \'react\';\nimport { ConfigProvider } from \'@fle-ui/next\';\nimport {\n  Input,\n  Col,\n  Row,\n  Select,\n  InputNumber,\n  Cascader,\n  Radio,\n  Switch,\n  Tree,\n  // TreeSelect,\n  Modal,\n  Button,\n  Pagination,\n  Steps,\n  Rate,\n  Badge,\n  Divider,\n} from \'@fle-ui/next\';\nimport {\n  SearchOutlined as SearchIcon,\n  SmileOutlined,\n  DownloadOutlined,\n  LeftOutlined,\n  RightOutlined,\n  MinusOutlined,\n  PlusOutlined,\n} from \'@ant-design/icons\';\n\nconst InputGroup = Input.Group;\nconst ButtonGroup = Button.Group;\nconst { Option } = Select;\nconst { TreeNode } = Tree;\nconst { Search } = Input;\nconst { Step } = Steps;\n\nconst cascaderOptions = [\n  {\n    value: \'tehran\',\n    label: \'\u062a\u0647\u0631\u0627\u0646\',\n    children: [\n      {\n        value: \'tehran-c\',\n        label: \'\u062a\u0647\u0631\u0627\u0646\',\n        children: [\n          {\n            value: \'saadat-abad\',\n            label: \'\u0633\u0639\u0627\u062f\u062a \u0622\u06cc\u0627\u062f\',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    value: \'ardabil\',\n    label: \'\u0627\u0631\u062f\u0628\u06cc\u0644\',\n    children: [\n      {\n        value: \'ardabil-c\',\n        label: \'\u0627\u0631\u062f\u0628\u06cc\u0644\',\n        children: [\n          {\n            value: \'primadar\',\n            label: \'\u067e\u06cc\u0631\u0645\u0627\u062f\u0631\',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    value: \'gilan\',\n    label: \'\u06af\u06cc\u0644\u0627\u0646\',\n    children: [\n      {\n        value: \'rasht\',\n        label: \'\u0631\u0634\u062a\',\n        children: [\n          {\n            value: \'district-3\',\n            label: \'\u0645\u0646\u0637\u0642\u0647 \u06f3\',\n          },\n        ],\n      },\n    ],\n  },\n];\n\nconst Page = (props: any) => {\n  const [currentStep, setCurrentStep] = useState(0);\n  const [modalVisible, setModalVisible] = useState(false);\n  const [badgeCount, setBadgeCount] = useState(5);\n  const [showBadge, setShowBadge] = useState(true);\n\n  const selectBefore = (\n    <Select defaultValue="Http://" style={{ width: 90 }}>\n      <Option value="Http://">Http://</Option>\n      <Option value="Https://">Https://</Option>\n    </Select>\n  );\n\n  const selectAfter = (\n    <Select defaultValue=".com" style={{ width: 80 }}>\n      <Option value=".com">.com</Option>\n      <Option value=".jp">.jp</Option>\n      <Option value=".cn">.cn</Option>\n      <Option value=".org">.org</Option>\n    </Select>\n  );\n\n  // ==== Cascader ====\n  const cascaderFilter: any = (inputValue: any, path: any) => {\n    path.some(\n      (option: any) =>\n        option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,\n    );\n  };\n\n  const onCascaderChange = (value: any) => {\n    console.log(value);\n  };\n  // ==== End Cascader ====\n\n  // ==== Modal ====\n  const showModal = () => {\n    setModalVisible(true);\n  };\n\n  const handleOk = (e: any) => {\n    console.log(e);\n    setModalVisible(false);\n  };\n\n  const handleCancel = (e: any) => {\n    console.log(e);\n    setModalVisible(false);\n  };\n  // ==== End Modal ====\n\n  const onStepsChange = (currentStep: any) => {\n    console.log(\'onChange:\', currentStep);\n    setCurrentStep(currentStep);\n  };\n\n  // ==== Badge ====\n\n  const increaseBadge = () => {\n    setBadgeCount(badgeCount + 1);\n  };\n\n  const declineBadge = () => {\n    setBadgeCount(badgeCount - 1);\n    if (badgeCount < 0) {\n      setBadgeCount(0);\n    }\n  };\n\n  const onChangeBadge = (showBadge: any) => {\n    setShowBadge(showBadge);\n  };\n  // ==== End Badge ====\n\n  return (\n    <div className="direction-components">\n      <Row>\n        <Col span={24}>\n          <Divider orientation="left">Cascader example</Divider>\n          <Cascader\n            // @ts-ignore\n            suffixIcon={<SearchIcon />}\n            options={cascaderOptions}\n            onChange={onCascaderChange}\n            placeholder="\u06cc\u06a9 \u0645\u0648\u0631\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f"\n            popupPlacement={props.popupPlacement}\n          />\n          &nbsp;&nbsp;&nbsp;&nbsp; With search:\n          <Cascader\n            // @ts-ignore\n            suffixIcon={<SmileOutlined />}\n            options={cascaderOptions}\n            onChange={onCascaderChange}\n            placeholder="Select an item"\n            popupPlacement={props.popupPlacement}\n            showSearch={cascaderFilter}\n          />\n        </Col>\n      </Row>\n      <br />\n      <Row>\n        <Col span={12}>\n          <Divider orientation="left">Switch example</Divider>\n          &nbsp;&nbsp;\n          <Switch defaultChecked />\n          &nbsp;&nbsp;\n          <Switch loading defaultChecked />\n          &nbsp;&nbsp;\n          <Switch size="small" loading />\n        </Col>\n        <Col span={12}>\n          <Divider orientation="left">Radio Group example</Divider>\n\n          <Radio.Group defaultValue="c" buttonStyle="solid">\n            <Radio.Button value="a">\u062a\u0647\u0631\u0627\u0646</Radio.Button>\n            <Radio.Button value="b" disabled>\n              \u0627\u0635\u0641\u0647\u0627\u0646\n            </Radio.Button>\n            <Radio.Button value="c">\u0641\u0627\u0631\u0633</Radio.Button>\n            <Radio.Button value="d">\u062e\u0648\u0632\u0633\u062a\u0627\u0646</Radio.Button>\n          </Radio.Group>\n        </Col>\n      </Row>\n      <br />\n      <Row>\n        <Col span={12}>\n          <Divider orientation="left">Button example</Divider>\n          <div className="button-demo">\n            <Button type="primary" icon={<DownloadOutlined />} />\n            <Button type="primary" shape="circle" icon={<DownloadOutlined />} />\n            <Button type="primary" shape="round" icon={<DownloadOutlined />} />\n            <Button type="primary" shape="round" icon={<DownloadOutlined />}>\n              Download\n            </Button>\n            <Button type="primary" icon={<DownloadOutlined />}>\n              Download\n            </Button>\n            <br />\n            <Button.Group>\n              <Button type="primary">\n                <LeftOutlined />\n                Backward\n              </Button>\n              <Button type="primary">\n                Forward\n                <RightOutlined />\n              </Button>\n            </Button.Group>\n            <Button type="primary" loading>\n              Loading\n            </Button>\n            <Button type="primary" size="small" loading>\n              Loading\n            </Button>\n          </div>\n        </Col>\n        <Col span={12}>\n          <Divider orientation="left">Tree example</Divider>\n          <Tree\n            showLine\n            checkable\n            defaultExpandedKeys={[\'0-0-0\', \'0-0-1\']}\n            defaultSelectedKeys={[\'0-0-0\', \'0-0-1\']}\n            defaultCheckedKeys={[\'0-0-0\', \'0-0-1\']}\n          >\n            <TreeNode title="parent 1" key="0-0">\n              <TreeNode title="parent 1-0" key="0-0-0" disabled>\n                <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />\n                <TreeNode title="leaf" key="0-0-0-1" />\n              </TreeNode>\n              <TreeNode title="parent 1-1" key="0-0-1">\n                <TreeNode\n                  title={<span style={{ color: \'#2c68ff\' }}>sss</span>}\n                  key="0-0-1-0"\n                />\n              </TreeNode>\n            </TreeNode>\n          </Tree>\n        </Col>\n      </Row>\n      <br />\n      <Row>\n        <Col span={24}>\n          <Divider orientation="left">Input (Input Group) example</Divider>\n          <InputGroup size="large">\n            <Row gutter={8}>\n              <Col span={5}>\n                <Input defaultValue="0571" />\n              </Col>\n              <Col span={8}>\n                <Input defaultValue="26888888" />\n              </Col>\n            </Row>\n          </InputGroup>\n          <br />\n          <InputGroup compact>\n            <Input style={{ width: \'20%\' }} defaultValue="0571" />\n            <Input style={{ width: \'30%\' }} defaultValue="26888888" />\n          </InputGroup>\n          <br />\n          <InputGroup compact>\n            <Select defaultValue="Option1">\n              <Option value="Option1">Option1</Option>\n              <Option value="Option2">Option2</Option>\n            </Select>\n            <Input style={{ width: \'50%\' }} defaultValue="input content" />\n            <InputNumber />\n          </InputGroup>\n          <br />\n          <Search\n            placeholder="input search text"\n            enterButton="Search"\n            size="large"\n          />\n          <br />\n          <br />\n          <div style={{ marginBottom: 16 }}>\n            <Input\n              addonBefore={selectBefore}\n              addonAfter={selectAfter}\n              defaultValue="mysite"\n            />\n          </div>\n          <br />\n          <Row>\n            <Col span={12}>\n              <Divider orientation="left">Select example</Divider>\n              <Select\n                mode="multiple"\n                defaultValue="\u0645\u0648\u0631\u0686\u0647"\n                style={{ width: 120 }}\n              >\n                <Option value="jack">Jack</Option>\n                <Option value="\u0645\u0648\u0631\u0686\u0647">\u0645\u0648\u0631\u0686\u0647</Option>\n                <Option value="disabled" disabled>\n                  Disabled\n                </Option>\n                <Option value="Yiminghe">yiminghe</Option>\n              </Select>\n              <Select defaultValue="\u0645\u0648\u0631\u0686\u0647" style={{ width: 120 }} disabled>\n                <Option value="\u0645\u0648\u0631\u0686\u0647">\u0645\u0648\u0631\u0686\u0647</Option>\n              </Select>\n              <Select defaultValue="\u0645\u0648\u0631\u0686\u0647" style={{ width: 120 }} loading>\n                <Option value="\u0645\u0648\u0631\u0686\u0647">\u0645\u0648\u0631\u0686\u0647</Option>\n              </Select>\n              <Select\n                showSearch\n                style={{ width: 200 }}\n                placeholder="Select a person"\n                optionFilterProp="children"\n                filterOption={(input: any, option: any) =>\n                  option.props.children\n                    .toLowerCase()\n                    .indexOf(input.toLowerCase()) >= 0\n                }\n              >\n                <Option value="jack">Jack</Option>\n                <Option value="\u0633\u0639\u06cc\u062f">\u0633\u0639\u06cc\u062f</Option>\n                <Option value="tom">Tom</Option>\n              </Select>\n            </Col>\n            {/* <Col span={12}>\n              <Divider orientation="left">TreeSelect example</Divider>\n              <div>\n                <TreeSelect\n                  showSearch\n                  style={{ width: \'100%\' }}\n                  dropdownStyle={{ maxHeight: 400, overflow: \'auto\' }}\n                  placeholder="Please select"\n                  allowClear\n                  treeDefaultExpandAll\n                >\n                  <TreeNode value="parent 1" title="parent 1" key="0-1">\n                    <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">\n                      <TreeNode value="leaf1" title="my leaf" key="random" />\n                      <TreeNode value="leaf2" title="your leaf" key="random1" />\n                    </TreeNode>\n                    <TreeNode\n                      value="parent 1-1"\n                      title="parent 1-1"\n                      key="random2"\n                    >\n                      <TreeNode\n                        value="sss"\n                        title={<b style={{ color: \'#08c\' }}>sss</b>}\n                        key="random3"\n                      />\n                    </TreeNode>\n                  </TreeNode>\n                </TreeSelect>\n              </div>\n            </Col> */}\n          </Row>\n          <br />\n          <Row>\n            <Col span={24}>\n              <Divider orientation="left">Modal example</Divider>\n              <div>\n                <Button type="primary" onClick={showModal}>\n                  Open Modal\n                </Button>\n                <Modal\n                  title="\u067e\u0646\u0686\u0631\u0647 \u0633\u0627\u062f\u0647"\n                  visible={modalVisible}\n                  onOk={handleOk}\n                  onCancel={handleCancel}\n                >\n                  <p>\u0646\u06af\u0627\u0634\u062a\u0647\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0631\u0627\u0631\u062f\u0647\u06cc\u062f</p>\n                  <p>\u0646\u06af\u0627\u0634\u062a\u0647\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0631\u0627\u0631\u062f\u0647\u06cc\u062f</p>\n                  <p>\u0646\u06af\u0627\u0634\u062a\u0647\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0631\u0627\u0631\u062f\u0647\u06cc\u062f</p>\n                </Modal>\n              </div>\n            </Col>\n          </Row>\n          <br />\n          <Row>\n            <Col span={24}>\n              <Divider orientation="left">Steps example</Divider>\n              <div>\n                <Steps progressDot current={currentStep}>\n                  <Step title="Finished" description="This is a description." />\n                  <Step\n                    title="In Progress"\n                    description="This is a description."\n                  />\n                  <Step title="Waiting" description="This is a description." />\n                </Steps>\n                <br />\n                <Steps current={currentStep} onChange={onStepsChange}>\n                  <Step title="Step 1" description="This is a description." />\n                  <Step title="Step 2" description="This is a description." />\n                  <Step title="Step 3" description="This is a description." />\n                </Steps>\n              </div>\n            </Col>\n          </Row>\n          <br />\n          <Row>\n            <Col span={12}>\n              <Divider orientation="left">Rate example</Divider>\n              <div>\n                <Rate defaultValue={2.5} />\n                <br />\n                <strong>* Note:</strong> Half star not implemented in RTL\n                direction, it will be supported after{\' \'}\n                <a href="https://github.com/react-component/rate">rc-rate</a>{\' \'}\n                implement rtl support.\n              </div>\n            </Col>\n            <Col span={12}>\n              <Divider orientation="left">Badge example</Divider>\n              <div>\n                <div>\n                  <Badge count={badgeCount}>\n                    <a href="#" className="head-example" />\n                  </Badge>\n                  <ButtonGroup>\n                    <Button onClick={declineBadge}>\n                      <MinusOutlined />\n                    </Button>\n                    <Button onClick={increaseBadge}>\n                      <PlusOutlined />\n                    </Button>\n                  </ButtonGroup>\n                </div>\n                <div style={{ marginTop: 10 }}>\n                  <Badge dot={showBadge}>\n                    <a href="#" className="head-example" />\n                  </Badge>\n                  <Switch onChange={onChangeBadge} checked={showBadge} />\n                </div>\n              </div>\n            </Col>\n          </Row>\n        </Col>\n      </Row>\n\n      <br />\n      <br />\n      <Row>\n        <Col span={24}>\n          <Divider orientation="left">Pagination example</Divider>\n          <Pagination showSizeChanger defaultCurrent={3} total={500} />\n        </Col>\n      </Row>\n      <br />\n      <Row>\n        <Col span={24}>\n          <Divider orientation="left">Grid System example</Divider>\n          <div className="grid-demo">\n            <div className="code-box-demo">\n              <p>\n                <strong>* Note:</strong> Every calculation in RTL grid system is\n                from right side (offset, push, etc.)\n              </p>\n              <Row>\n                <Col span={8}>col-8</Col>\n                <Col span={8} offset={8}>\n                  col-8\n                </Col>\n              </Row>\n              <Row>\n                <Col span={6} offset={6}>\n                  col-6 col-offset-6\n                </Col>\n                <Col span={6} offset={6}>\n                  col-6 col-offset-6\n                </Col>\n              </Row>\n              <Row>\n                <Col span={12} offset={6}>\n                  col-12 col-offset-6\n                </Col>\n              </Row>\n              <Row>\n                <Col span={18} push={6}>\n                  col-18 col-push-6\n                </Col>\n                <Col span={6} pull={18}>\n                  col-6 col-pull-18\n                </Col>\n              </Row>\n            </div>\n          </div>\n        </Col>\n      </Row>\n    </div>\n  );\n};\n\nconst DirectionDemo = () => {\n  const [direction, setDirection] = useState<any>(\'ltr\');\n  const [popupPlacement, setPopupPlacement] = useState<any>(\'bottomLeft\');\n\n  const changeDirection = (e: any) => {\n    const directionValue = e.target.value;\n    setDirection(directionValue);\n    if (directionValue === \'rtl\') {\n      setPopupPlacement(\'bottomRight\');\n    } else {\n      setPopupPlacement(\'bottomLeft\');\n    }\n  };\n\n  return (\n    <>\n      <div style={{ marginBottom: 16 }}>\n        <span style={{ marginRight: 16 }}>\n          Change direction of components:{\' \'}\n        </span>\n        <Radio.Group defaultValue="ltr" onChange={changeDirection}>\n          <Radio.Button key="ltr" value="ltr">\n            LTR\n          </Radio.Button>\n          <Radio.Button key="rtl" value="rtl">\n            RTL\n          </Radio.Button>\n        </Radio.Group>\n      </div>\n      <ConfigProvider direction={direction}>\n        <Page className={direction} popupPlacement={popupPlacement} />\n      </ConfigProvider>\n    </>\n  );\n};\n\nexport default DirectionDemo;',
         bn =
           'import React, { useState } from \'react\';\nimport { ConfigProvider } from \'@fle-ui/next\';\nimport {\n  Radio,\n  Input,\n  Button,\n  Select,\n  DatePicker,\n  Divider,\n  Table,\n  Card,\n  Tabs,\n} from \'@fle-ui/next\';\n\nconst SizeDemo = () => {\n  const { TabPane } = Tabs;\n\n  const [componentSize, setComponentSize] = useState<any>(\'small\');\n\n  const columns = [\n    { title: \'Name\', dataIndex: \'name\' },\n    { title: \'Age\', dataIndex: \'age\' },\n  ];\n  return (\n    <div>\n      <Radio.Group\n        value={componentSize}\n        onChange={(e) => {\n          setComponentSize(e.target.value);\n        }}\n      >\n        <Radio.Button value="small">Small</Radio.Button>\n        <Radio.Button value="middle">Middle</Radio.Button>\n        <Radio.Button value="large">Large</Radio.Button>\n      </Radio.Group>\n      <Divider />\n      <ConfigProvider componentSize={componentSize}>\n        <div className="example">\n          <Input />\n        </div>\n        <div className="example">\n          <Tabs defaultActiveKey="1">\n            <TabPane tab="Tab 1" key="1">\n              Content of Tab Pane 1\n            </TabPane>\n            <TabPane tab="Tab 2" key="2">\n              Content of Tab Pane 2\n            </TabPane>\n            <TabPane tab="Tab 3" key="3">\n              Content of Tab Pane 3\n            </TabPane>\n          </Tabs>\n        </div>\n        <div className="example">\n          <Input.Search allowClear />\n        </div>\n        <div className="example">\n          <Input.TextArea allowClear />\n        </div>\n        <div className="example">\n          <Select defaultValue="demo" options={[{ value: \'demo\' }]} />\n        </div>\n        <div className="example">\n          <DatePicker />\n        </div>\n        <div className="example">\n          <DatePicker.RangePicker />\n        </div>\n        <div className="example">\n          <Button>Button</Button>\n        </div>\n        <div className="example">\n          <Card title="Card">\n            <Table\n              columns={columns}\n              dataSource={[\n                {\n                  key: \'1\',\n                  name: \'John Brown\',\n                  age: 32,\n                },\n                {\n                  key: \'2\',\n                  name: \'Jim Green\',\n                  age: 42,\n                },\n                {\n                  key: \'3\',\n                  name: \'Joe Black\',\n                  age: 32,\n                },\n              ]}\n            />\n          </Card>\n        </div>\n      </ConfigProvider>\n    </div>\n  );\n};\n\nexport default SizeDemo;',
         gn =
-          'import { SketchPicker } from \'react-color\';\nimport React, { useState } from \'react\';\nimport {\n  DownOutlined,\n  MailOutlined,\n  SettingOutlined,\n  ClockCircleOutlined,\n} from \'@ant-design/icons\';\nimport {\n  Tag,\n  Mentions,\n  Steps,\n  Button,\n  Radio,\n  Space,\n  Form,\n  Input,\n  Row,\n  Col,\n  Typography,\n  Dropdown,\n  Divider,\n  Pagination,\n  Select,\n  Checkbox,\n  DatePicker,\n  TimePicker,\n  InputNumber,\n  Slider,\n  Switch,\n  TreeSelect,\n  Card,\n  Table,\n  Tabs,\n  Timeline,\n  Tree,\n  Alert,\n  Progress,\n  Spin,\n  Transfer,\n  Menu,\n  ConfigProvider,\n} from \'@fle-ui/next\';\n\nconst SplitSpace = (props: any) => (\n  <Space split={<Divider type="vertical" />} size={4} {...props} />\n);\nconst GlobalDemo = () => {\n  const [color, setColor] = useState({\n    primaryColor: \'#1890ff\',\n    errorColor: \'#ff4d4f\',\n    warningColor: \'#faad14\',\n    successColor: \'#52c41a\',\n    infoColor: \'#1890ff\',\n  });\n\n  function onColorChange(nextColor: any) {\n    const mergedNextColor = {\n      ...color,\n      ...nextColor,\n    };\n    setColor(mergedNextColor);\n    const theme: any = {\n      theme: mergedNextColor,\n    };\n    ConfigProvider.config(theme);\n  }\n\n  const inputProps = {\n    style: { width: 128 },\n  };\n\n  const selectProps = {\n    ...inputProps,\n    options: [\n      { value: \'light\', label: \'Light\' },\n      { value: \'bamboo\', label: \'Bamboo\' },\n      { value: \'little\', label: \'Little\' },\n    ],\n  };\n\n  const treeData = [\n    {\n      value: \'little\',\n      key: \'little\',\n      label: \'Little\',\n      title: \'Little\',\n      children: [\n        { value: \'light\', key: \'light\', label: \'Light\', title: \'Light\' },\n        { value: \'bamboo\', key: \'bamboo\', label: \'Bamboo\', title: \'Bamboo\' },\n      ],\n    },\n  ];\n\n  const treeSelectProps: any = {\n    ...inputProps,\n    treeCheckable: true,\n    maxTagCount: \'responsive\',\n    treeData,\n  };\n\n  const carTabListNoTitle = [\n    {\n      key: \'article\',\n      tab: \'article\',\n    },\n    {\n      key: \'app\',\n      tab: \'app\',\n    },\n    {\n      key: \'project\',\n      tab: \'project\',\n    },\n  ];\n\n  const MyTransfer = () => {\n    const mockData = [];\n    for (let i = 0; i < 20; i++) {\n      mockData.push({\n        key: i.toString(),\n        title: `content${i + 1}`,\n        description: `description of content${i + 1}`,\n      });\n    }\n\n    return (\n      <Transfer\n        dataSource={mockData}\n        targetKeys={[\'18\']}\n        selectedKeys={[\'3\']}\n        render={(item) => item.title}\n      />\n    );\n  };\n\n  return (\n    <Row gutter={16} wrap={false}>\n      <Col flex="none">\n        <Space direction="vertical" align="center">\n          {/* Primary Color */}\n          <SketchPicker\n            presetColors={[\'#1890ff\', \'#25b864\', \'#ff6f00\']}\n            color={color.primaryColor}\n            onChange={({ hex }: { hex: string }) => {\n              onColorChange({\n                primaryColor: hex,\n              });\n            }}\n          />\n\n          <span style={{ color: \'var(--ant-primary-color)\' }}>\n            var(`--ant-primary-color`)\n          </span>\n\n          {/* Error Color */}\n          <SketchPicker\n            presetColors={[\'#ff4d4f\']}\n            color={color.errorColor}\n            onChange={({ hex }: { hex: string }) => {\n              onColorChange({\n                errorColor: hex,\n              });\n            }}\n          />\n\n          <span style={{ color: \'var(--ant-error-color)\' }}>\n            var(`--ant-error-color`)\n          </span>\n\n          {/* Warning Color */}\n          <SketchPicker\n            presetColors={[\'#faad14\']}\n            color={color.warningColor}\n            onChange={({ hex }: { hex: string }) => {\n              onColorChange({\n                warningColor: hex,\n              });\n            }}\n          />\n\n          <span style={{ color: \'var(--ant-warning-color)\' }}>\n            var(`--ant-warning-color`)\n          </span>\n\n          {/* Success Color */}\n          <SketchPicker\n            presetColors={[\'#52c41a\']}\n            color={color.successColor}\n            onChange={({ hex }: { hex: string }) => {\n              onColorChange({\n                successColor: hex,\n              });\n            }}\n          />\n\n          <span style={{ color: \'var(--ant-success-color)\' }}>\n            var(`--ant-success-color`)\n          </span>\n\n          {/* Info Color */}\n          <SketchPicker\n            presetColors={[\'#1890ff\']}\n            color={color.infoColor}\n            onChange={({ hex }: any) => {\n              onColorChange({\n                infoColor: hex,\n              });\n            }}\n          />\n\n          <span style={{ color: \'var(--ant-info-color)\' }}>\n            var(`--ant-info-color`)\n          </span>\n        </Space>\n      </Col>\n\n      <Col flex="auto">\n        <Space\n          direction="vertical"\n          split={<Divider />}\n          style={{ width: \'100%\' }}\n          size={0}\n        >\n          {/* Primary Button */}\n          <SplitSpace>\n            <Button type="primary">Primary</Button>\n            <Button>Default</Button>\n            <Button type="dashed">Dashed</Button>\n            <Button type="text">Text</Button>\n            <Button type="link">Link</Button>\n          </SplitSpace>\n\n          {/* Danger Button */}\n          <SplitSpace>\n            <Button danger type="primary">\n              Primary\n            </Button>\n            <Button danger>Default</Button>\n            <Button danger type="dashed">\n              Dashed\n            </Button>\n            <Button danger type="text">\n              Text\n            </Button>\n            <Button danger type="link">\n              Link\n            </Button>\n          </SplitSpace>\n\n          {/* Ghost Button */}\n          <SplitSpace style={{ background: \'rgb(190, 200, 200)\' }}>\n            <Button type="primary" ghost>\n              Primary\n            </Button>\n            <Button ghost>Default</Button>\n            <Button type="dashed" ghost>\n              Dashed\n            </Button>\n            <Button type="primary" ghost danger>\n              Primary\n            </Button>\n            <Button ghost danger>\n              Default\n            </Button>\n            <Button type="dashed" ghost danger>\n              Dashed\n            </Button>\n          </SplitSpace>\n\n          {/* Typography */}\n          <SplitSpace>\n            <Typography.Text type="success">Text (success)</Typography.Text>\n            <Typography.Text type="warning">Text(warning)</Typography.Text>\n            <Typography.Text type="danger">Text(danger)</Typography.Text>\n            <Typography.Link href="https://ant.design" target="_blank">\n              Link\n            </Typography.Link>\n            <Typography.Text copyable>Text</Typography.Text>\n\n            {/* Dropdown */}\n            <Dropdown\n              overlay={\n                <Menu>\n                  <Menu.Item>1st menu item</Menu.Item>\n                  <Menu.Item danger>a danger item</Menu.Item>\n                </Menu>\n              }\n            >\n              <a\n                className="ant-dropdown-link"\n                onClick={(e) => e.preventDefault()}\n              >\n                Hover me <DownOutlined />\n              </a>\n            </Dropdown>\n\n            {/* Spin */}\n            <Spin />\n          </SplitSpace>\n\n          {/* Menu - horizontal */}\n          <Row gutter={16}>\n            <Col span={12}>\n              <Menu mode="horizontal" defaultSelectedKeys={[\'mail\']}>\n                <Menu.Item key="mail" icon={<MailOutlined />}>\n                  Mail\n                </Menu.Item>\n                <Menu.SubMenu\n                  key="SubMenu"\n                  icon={<SettingOutlined />}\n                  title="Submenu"\n                >\n                  <Menu.ItemGroup title="Item 1">\n                    <Menu.Item key="setting:1">Option 1</Menu.Item>\n                    <Menu.Item key="setting:2">Option 2</Menu.Item>\n                  </Menu.ItemGroup>\n                </Menu.SubMenu>\n              </Menu>\n            </Col>\n            <Col span={12}>\n              <Menu\n                mode="horizontal"\n                theme="dark"\n                defaultSelectedKeys={[\'mail\']}\n              >\n                <Menu.Item key="mail" icon={<MailOutlined />}>\n                  Mail\n                </Menu.Item>\n                <Menu.SubMenu\n                  key="SubMenu"\n                  icon={<SettingOutlined />}\n                  title="Submenu"\n                >\n                  <Menu.ItemGroup title="Item 1">\n                    <Menu.Item key="setting:1">Option 1</Menu.Item>\n                    <Menu.Item key="setting:2">Option 2</Menu.Item>\n                  </Menu.ItemGroup>\n                </Menu.SubMenu>\n              </Menu>\n            </Col>\n          </Row>\n\n          {/* Menu - vertical */}\n          <Row gutter={16}>\n            <Col span={12}>\n              <Menu mode="inline" defaultSelectedKeys={[\'mail\']}>\n                <Menu.Item key="mail" icon={<MailOutlined />}>\n                  Mail\n                </Menu.Item>\n                <Menu.SubMenu\n                  key="SubMenu"\n                  icon={<SettingOutlined />}\n                  title="Submenu"\n                >\n                  <Menu.ItemGroup title="Item 1">\n                    <Menu.Item key="setting:1">Option 1</Menu.Item>\n                    <Menu.Item key="setting:2">Option 2</Menu.Item>\n                  </Menu.ItemGroup>\n                </Menu.SubMenu>\n              </Menu>\n            </Col>\n            <Col span={12}>\n              <Menu mode="vertical" theme="dark" defaultSelectedKeys={[\'mail\']}>\n                <Menu.Item key="mail" icon={<MailOutlined />}>\n                  Mail\n                </Menu.Item>\n                <Menu.SubMenu\n                  key="SubMenu"\n                  icon={<SettingOutlined />}\n                  title="Submenu"\n                >\n                  <Menu.ItemGroup title="Item 1">\n                    <Menu.Item key="setting:1">Option 1</Menu.Item>\n                    <Menu.Item key="setting:2">Option 2</Menu.Item>\n                  </Menu.ItemGroup>\n                </Menu.SubMenu>\n              </Menu>\n            </Col>\n          </Row>\n\n          {/* Pagination */}\n          <Pagination showQuickJumper defaultCurrent={2} total={500} />\n\n          {/* Steps */}\n          <Steps current={1} percent={60}>\n            <Steps.Step title="Finished" description="This is a description." />\n            <Steps.Step\n              title="In Progress"\n              subTitle="Left 00:00:08"\n              description="This is a description."\n            />\n            <Steps.Step title="Waiting" description="This is a description." />\n          </Steps>\n\n          {/* Steps - dot */}\n          <Steps current={2} status="error" progressDot>\n            <Steps.Step\n              title="Finished"\n              description="You can hover on the dot."\n            />\n            <Steps.Step\n              title="In Progress"\n              description="You can hover on the dot."\n            />\n            <Steps.Step title="Error" description="You can hover on the dot." />\n            <Steps.Step\n              title="Waiting"\n              description="You can hover on the dot."\n            />\n          </Steps>\n\n          {/* Form - Input */}\n          <Form>\n            <SplitSpace>\n              <Form.Item>\n                <Input {...inputProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="success">\n                <Input {...inputProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="warning">\n                <Input {...inputProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="error">\n                <Input {...inputProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="validating">\n                <Input {...inputProps} />\n              </Form.Item>\n            </SplitSpace>\n          </Form>\n\n          {/* Form - Select */}\n          <Form>\n            <SplitSpace>\n              <Form.Item>\n                <Select {...selectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="success">\n                <Select {...selectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="warning">\n                <Select {...selectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="error">\n                <Select {...selectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="validating">\n                <Select {...selectProps} />\n              </Form.Item>\n            </SplitSpace>\n          </Form>\n\n          {/* Form - TreeSelect */}\n          <Form>\n            <SplitSpace>\n              <Form.Item>\n                <TreeSelect {...treeSelectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="success">\n                <TreeSelect {...treeSelectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="warning">\n                <TreeSelect {...treeSelectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="error">\n                <TreeSelect {...treeSelectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="validating">\n                <TreeSelect {...treeSelectProps} />\n              </Form.Item>\n            </SplitSpace>\n          </Form>\n\n          {/* Form - InputNumber */}\n          <Form>\n            <SplitSpace>\n              <Form.Item>\n                <InputNumber />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="success">\n                <InputNumber />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="warning">\n                <InputNumber />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="error">\n                <InputNumber />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="validating">\n                <InputNumber />\n              </Form.Item>\n            </SplitSpace>\n          </Form>\n\n          {/* Form - DatePicker */}\n          <Form>\n            <SplitSpace>\n              <Form.Item>\n                <DatePicker />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="success">\n                <DatePicker />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="warning">\n                <DatePicker />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="error">\n                <DatePicker />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="validating">\n                <DatePicker />\n              </Form.Item>\n            </SplitSpace>\n          </Form>\n\n          <SplitSpace>\n            <Checkbox>Checkbox</Checkbox>\n\n            <Radio.Group defaultValue="bamboo">\n              <Radio value="bamboo">Bamboo</Radio>\n              <Radio value="light">Light</Radio>\n              <Radio value="little">Little</Radio>\n            </Radio.Group>\n\n            <Mentions placeholder="Mention by @">\n              <Mentions.Option value="afc163">afc163</Mentions.Option>\n              <Mentions.Option value="zombieJ">zombieJ</Mentions.Option>\n              <Mentions.Option value="yesmeck">yesmeck</Mentions.Option>\n            </Mentions>\n\n            <Slider defaultValue={30} style={{ width: 100 }} />\n\n            <Switch defaultChecked />\n          </SplitSpace>\n\n          <SplitSpace>\n            <DatePicker.RangePicker />\n            <TimePicker.RangePicker />\n          </SplitSpace>\n\n          <Row gutter={16}>\n            <Col span={8}>\n              {/* Card */}\n              <Card\n                style={{ width: \'100%\' }}\n                tabList={carTabListNoTitle}\n                tabBarExtraContent={<a href="#">More</a>}\n              />\n            </Col>\n            <Col span={8}>\n              {/* Table */}\n              <Table\n                size="small"\n                bordered\n                rowSelection={{}}\n                columns={[\n                  {\n                    title: \'Key\',\n                    dataIndex: \'key\',\n                    filters: [\n                      {\n                        text: \'Little\',\n                        value: \'little\',\n                      },\n                    ],\n                    sorter: (a, b) => a.key.length - b.key.length,\n                  },\n                ]}\n                dataSource={[\n                  {\n                    key: \'Bamboo\',\n                  },\n                  {\n                    key: \'Light\',\n                  },\n                  {\n                    key: \'Little\',\n                  },\n                ]}\n              />\n            </Col>\n            <Col span={8}>\n              {/* Table */}\n              <Tabs defaultActiveKey="1">\n                <Tabs.TabPane tab="Tab 1" key="1">\n                  Content of Tab Pane 1\n                </Tabs.TabPane>\n                <Tabs.TabPane tab="Tab 2" key="2">\n                  Content of Tab Pane 2\n                </Tabs.TabPane>\n                <Tabs.TabPane tab="Tab 3" key="3">\n                  Content of Tab Pane 3\n                </Tabs.TabPane>\n              </Tabs>\n            </Col>\n          </Row>\n\n          <SplitSpace>\n            <Tag color="success">success</Tag>\n            <Tag color="processing">processing</Tag>\n            <Tag color="error">error</Tag>\n            <Tag color="warning">warning</Tag>\n            <Tag color="default">default</Tag>\n            <Tag.CheckableTag checked>CheckableTag</Tag.CheckableTag>\n          </SplitSpace>\n\n          <Row gutter={16}>\n            <Col span={16}>\n              <Timeline mode="alternate">\n                <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>\n                <Timeline.Item color="gray">\n                  Solve initial network problems 2015-09-01\n                </Timeline.Item>\n                <Timeline.Item\n                  dot={<ClockCircleOutlined style={{ fontSize: \'16px\' }} />}\n                >\n                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n                  accusantium doloremque laudantium, totam rem aperiam, eaque\n                  ipsa quae ab illo inventore veritatis et quasi architecto\n                  beatae vitae dicta sunt explicabo.\n                </Timeline.Item>\n              </Timeline>\n            </Col>\n\n            <Col span={8}>\n              <Tree\n                treeData={treeData}\n                height={200}\n                defaultExpandAll\n                checkable\n              />\n            </Col>\n          </Row>\n\n          {/* Alert */}\n          <Row gutter={16}>\n            <Col span={6}>\n              <Alert showIcon message="Success Text" type="success" />\n            </Col>\n            <Col span={6}>\n              <Alert showIcon message="Info Text" type="info" />\n            </Col>\n            <Col span={6}>\n              <Alert showIcon message="Warning Text" type="warning" />\n            </Col>\n            <Col span={6}>\n              <Alert showIcon message="Error Text" type="error" />\n            </Col>\n          </Row>\n\n          {/* Progress */}\n          <Row gutter={16}>\n            <Col flex="auto">\n              <Progress percent={30} />\n              <Progress percent={70} status="exception" />\n              <Progress percent={100} />\n            </Col>\n            <Col flex="none">\n              <Progress type="circle" percent={75} />\n              <Progress type="circle" percent={70} status="exception" />\n              <Progress type="circle" percent={100} />\n            </Col>\n          </Row>\n\n          <MyTransfer />\n        </Space>\n      </Col>\n    </Row>\n  );\n};\n\nexport default GlobalDemo;',
+          'import { SketchPicker } from \'react-color\';\nimport React, { useState } from \'react\';\nimport {\n  DownOutlined,\n  MailOutlined,\n  SettingOutlined,\n  ClockCircleOutlined,\n} from \'@ant-design/icons\';\nimport {\n  Tag,\n  Mentions,\n  Steps,\n  Button,\n  Radio,\n  Space,\n  Form,\n  Input,\n  Row,\n  Col,\n  Typography,\n  Dropdown,\n  Divider,\n  Pagination,\n  Select,\n  Checkbox,\n  DatePicker,\n  TimePicker,\n  InputNumber,\n  Slider,\n  Switch,\n  TreeSelect,\n  Card,\n  Table,\n  Tabs,\n  Timeline,\n  Tree,\n  Alert,\n  Progress,\n  Spin,\n  Transfer,\n  Menu,\n  ConfigProvider,\n} from \'@fle-ui/next\';\n\nconst SplitSpace = (props: any) => (\n  <Space split={<Divider type="vertical" />} size={4} {...props} />\n);\nconst GlobalDemo = () => {\n  const [color, setColor] = useState({\n    primaryColor: \'#2c68ff\',\n    errorColor: \'#ff4d4f\',\n    warningColor: \'#faad14\',\n    successColor: \'#52c41a\',\n    infoColor: \'#2c68ff\',\n  });\n\n  function onColorChange(nextColor: any) {\n    const mergedNextColor = {\n      ...color,\n      ...nextColor,\n    };\n    setColor(mergedNextColor);\n    const theme: any = {\n      theme: mergedNextColor,\n    };\n    ConfigProvider.config(theme);\n  }\n\n  const inputProps = {\n    style: { width: 128 },\n  };\n\n  const selectProps = {\n    ...inputProps,\n    options: [\n      { value: \'light\', label: \'Light\' },\n      { value: \'bamboo\', label: \'Bamboo\' },\n      { value: \'little\', label: \'Little\' },\n    ],\n  };\n\n  const treeData = [\n    {\n      value: \'little\',\n      key: \'little\',\n      label: \'Little\',\n      title: \'Little\',\n      children: [\n        { value: \'light\', key: \'light\', label: \'Light\', title: \'Light\' },\n        { value: \'bamboo\', key: \'bamboo\', label: \'Bamboo\', title: \'Bamboo\' },\n      ],\n    },\n  ];\n\n  const treeSelectProps: any = {\n    ...inputProps,\n    treeCheckable: true,\n    maxTagCount: \'responsive\',\n    treeData,\n  };\n\n  const carTabListNoTitle = [\n    {\n      key: \'article\',\n      tab: \'article\',\n    },\n    {\n      key: \'app\',\n      tab: \'app\',\n    },\n    {\n      key: \'project\',\n      tab: \'project\',\n    },\n  ];\n\n  const MyTransfer = () => {\n    const mockData = [];\n    for (let i = 0; i < 20; i++) {\n      mockData.push({\n        key: i.toString(),\n        title: `content${i + 1}`,\n        description: `description of content${i + 1}`,\n      });\n    }\n\n    return (\n      <Transfer\n        dataSource={mockData}\n        targetKeys={[\'18\']}\n        selectedKeys={[\'3\']}\n        render={(item) => item.title}\n      />\n    );\n  };\n\n  return (\n    <Row gutter={16} wrap={false}>\n      <Col flex="none">\n        <Space direction="vertical" align="center">\n          {/* Primary Color */}\n          <SketchPicker\n            presetColors={[\'#2c68ff\', \'#25b864\', \'#ff6f00\']}\n            color={color.primaryColor}\n            onChange={({ hex }: { hex: string }) => {\n              onColorChange({\n                primaryColor: hex,\n              });\n            }}\n          />\n\n          <span style={{ color: \'var(--ant-primary-color)\' }}>\n            var(`--ant-primary-color`)\n          </span>\n\n          {/* Error Color */}\n          <SketchPicker\n            presetColors={[\'#ff4d4f\']}\n            color={color.errorColor}\n            onChange={({ hex }: { hex: string }) => {\n              onColorChange({\n                errorColor: hex,\n              });\n            }}\n          />\n\n          <span style={{ color: \'var(--ant-error-color)\' }}>\n            var(`--ant-error-color`)\n          </span>\n\n          {/* Warning Color */}\n          <SketchPicker\n            presetColors={[\'#faad14\']}\n            color={color.warningColor}\n            onChange={({ hex }: { hex: string }) => {\n              onColorChange({\n                warningColor: hex,\n              });\n            }}\n          />\n\n          <span style={{ color: \'var(--ant-warning-color)\' }}>\n            var(`--ant-warning-color`)\n          </span>\n\n          {/* Success Color */}\n          <SketchPicker\n            presetColors={[\'#52c41a\']}\n            color={color.successColor}\n            onChange={({ hex }: { hex: string }) => {\n              onColorChange({\n                successColor: hex,\n              });\n            }}\n          />\n\n          <span style={{ color: \'var(--ant-success-color)\' }}>\n            var(`--ant-success-color`)\n          </span>\n\n          {/* Info Color */}\n          <SketchPicker\n            presetColors={[\'#2c68ff\']}\n            color={color.infoColor}\n            onChange={({ hex }: any) => {\n              onColorChange({\n                infoColor: hex,\n              });\n            }}\n          />\n\n          <span style={{ color: \'var(--ant-info-color)\' }}>\n            var(`--ant-info-color`)\n          </span>\n        </Space>\n      </Col>\n\n      <Col flex="auto">\n        <Space\n          direction="vertical"\n          split={<Divider />}\n          style={{ width: \'100%\' }}\n          size={0}\n        >\n          {/* Primary Button */}\n          <SplitSpace>\n            <Button type="primary">Primary</Button>\n            <Button>Default</Button>\n            <Button type="dashed">Dashed</Button>\n            <Button type="text">Text</Button>\n            <Button type="link">Link</Button>\n          </SplitSpace>\n\n          {/* Danger Button */}\n          <SplitSpace>\n            <Button danger type="primary">\n              Primary\n            </Button>\n            <Button danger>Default</Button>\n            <Button danger type="dashed">\n              Dashed\n            </Button>\n            <Button danger type="text">\n              Text\n            </Button>\n            <Button danger type="link">\n              Link\n            </Button>\n          </SplitSpace>\n\n          {/* Ghost Button */}\n          <SplitSpace style={{ background: \'rgb(190, 200, 200)\' }}>\n            <Button type="primary" ghost>\n              Primary\n            </Button>\n            <Button ghost>Default</Button>\n            <Button type="dashed" ghost>\n              Dashed\n            </Button>\n            <Button type="primary" ghost danger>\n              Primary\n            </Button>\n            <Button ghost danger>\n              Default\n            </Button>\n            <Button type="dashed" ghost danger>\n              Dashed\n            </Button>\n          </SplitSpace>\n\n          {/* Typography */}\n          <SplitSpace>\n            <Typography.Text type="success">Text (success)</Typography.Text>\n            <Typography.Text type="warning">Text(warning)</Typography.Text>\n            <Typography.Text type="danger">Text(danger)</Typography.Text>\n            <Typography.Link href="https://ant.design" target="_blank">\n              Link\n            </Typography.Link>\n            <Typography.Text copyable>Text</Typography.Text>\n\n            {/* Dropdown */}\n            <Dropdown\n              overlay={\n                <Menu>\n                  <Menu.Item>1st menu item</Menu.Item>\n                  <Menu.Item danger>a danger item</Menu.Item>\n                </Menu>\n              }\n            >\n              <a\n                className="ant-dropdown-link"\n                onClick={(e) => e.preventDefault()}\n              >\n                Hover me <DownOutlined />\n              </a>\n            </Dropdown>\n\n            {/* Spin */}\n            <Spin />\n          </SplitSpace>\n\n          {/* Menu - horizontal */}\n          <Row gutter={16}>\n            <Col span={12}>\n              <Menu mode="horizontal" defaultSelectedKeys={[\'mail\']}>\n                <Menu.Item key="mail" icon={<MailOutlined />}>\n                  Mail\n                </Menu.Item>\n                <Menu.SubMenu\n                  key="SubMenu"\n                  icon={<SettingOutlined />}\n                  title="Submenu"\n                >\n                  <Menu.ItemGroup title="Item 1">\n                    <Menu.Item key="setting:1">Option 1</Menu.Item>\n                    <Menu.Item key="setting:2">Option 2</Menu.Item>\n                  </Menu.ItemGroup>\n                </Menu.SubMenu>\n              </Menu>\n            </Col>\n            <Col span={12}>\n              <Menu\n                mode="horizontal"\n                theme="dark"\n                defaultSelectedKeys={[\'mail\']}\n              >\n                <Menu.Item key="mail" icon={<MailOutlined />}>\n                  Mail\n                </Menu.Item>\n                <Menu.SubMenu\n                  key="SubMenu"\n                  icon={<SettingOutlined />}\n                  title="Submenu"\n                >\n                  <Menu.ItemGroup title="Item 1">\n                    <Menu.Item key="setting:1">Option 1</Menu.Item>\n                    <Menu.Item key="setting:2">Option 2</Menu.Item>\n                  </Menu.ItemGroup>\n                </Menu.SubMenu>\n              </Menu>\n            </Col>\n          </Row>\n\n          {/* Menu - vertical */}\n          <Row gutter={16}>\n            <Col span={12}>\n              <Menu mode="inline" defaultSelectedKeys={[\'mail\']}>\n                <Menu.Item key="mail" icon={<MailOutlined />}>\n                  Mail\n                </Menu.Item>\n                <Menu.SubMenu\n                  key="SubMenu"\n                  icon={<SettingOutlined />}\n                  title="Submenu"\n                >\n                  <Menu.ItemGroup title="Item 1">\n                    <Menu.Item key="setting:1">Option 1</Menu.Item>\n                    <Menu.Item key="setting:2">Option 2</Menu.Item>\n                  </Menu.ItemGroup>\n                </Menu.SubMenu>\n              </Menu>\n            </Col>\n            <Col span={12}>\n              <Menu mode="vertical" theme="dark" defaultSelectedKeys={[\'mail\']}>\n                <Menu.Item key="mail" icon={<MailOutlined />}>\n                  Mail\n                </Menu.Item>\n                <Menu.SubMenu\n                  key="SubMenu"\n                  icon={<SettingOutlined />}\n                  title="Submenu"\n                >\n                  <Menu.ItemGroup title="Item 1">\n                    <Menu.Item key="setting:1">Option 1</Menu.Item>\n                    <Menu.Item key="setting:2">Option 2</Menu.Item>\n                  </Menu.ItemGroup>\n                </Menu.SubMenu>\n              </Menu>\n            </Col>\n          </Row>\n\n          {/* Pagination */}\n          <Pagination showQuickJumper defaultCurrent={2} total={500} />\n\n          {/* Steps */}\n          <Steps current={1} percent={60}>\n            <Steps.Step title="Finished" description="This is a description." />\n            <Steps.Step\n              title="In Progress"\n              subTitle="Left 00:00:08"\n              description="This is a description."\n            />\n            <Steps.Step title="Waiting" description="This is a description." />\n          </Steps>\n\n          {/* Steps - dot */}\n          <Steps current={2} status="error" progressDot>\n            <Steps.Step\n              title="Finished"\n              description="You can hover on the dot."\n            />\n            <Steps.Step\n              title="In Progress"\n              description="You can hover on the dot."\n            />\n            <Steps.Step title="Error" description="You can hover on the dot." />\n            <Steps.Step\n              title="Waiting"\n              description="You can hover on the dot."\n            />\n          </Steps>\n\n          {/* Form - Input */}\n          <Form>\n            <SplitSpace>\n              <Form.Item>\n                <Input {...inputProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="success">\n                <Input {...inputProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="warning">\n                <Input {...inputProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="error">\n                <Input {...inputProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="validating">\n                <Input {...inputProps} />\n              </Form.Item>\n            </SplitSpace>\n          </Form>\n\n          {/* Form - Select */}\n          <Form>\n            <SplitSpace>\n              <Form.Item>\n                <Select {...selectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="success">\n                <Select {...selectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="warning">\n                <Select {...selectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="error">\n                <Select {...selectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="validating">\n                <Select {...selectProps} />\n              </Form.Item>\n            </SplitSpace>\n          </Form>\n\n          {/* Form - TreeSelect */}\n          <Form>\n            <SplitSpace>\n              <Form.Item>\n                <TreeSelect {...treeSelectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="success">\n                <TreeSelect {...treeSelectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="warning">\n                <TreeSelect {...treeSelectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="error">\n                <TreeSelect {...treeSelectProps} />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="validating">\n                <TreeSelect {...treeSelectProps} />\n              </Form.Item>\n            </SplitSpace>\n          </Form>\n\n          {/* Form - InputNumber */}\n          <Form>\n            <SplitSpace>\n              <Form.Item>\n                <InputNumber />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="success">\n                <InputNumber />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="warning">\n                <InputNumber />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="error">\n                <InputNumber />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="validating">\n                <InputNumber />\n              </Form.Item>\n            </SplitSpace>\n          </Form>\n\n          {/* Form - DatePicker */}\n          <Form>\n            <SplitSpace>\n              <Form.Item>\n                <DatePicker />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="success">\n                <DatePicker />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="warning">\n                <DatePicker />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="error">\n                <DatePicker />\n              </Form.Item>\n              <Form.Item hasFeedback validateStatus="validating">\n                <DatePicker />\n              </Form.Item>\n            </SplitSpace>\n          </Form>\n\n          <SplitSpace>\n            <Checkbox>Checkbox</Checkbox>\n\n            <Radio.Group defaultValue="bamboo">\n              <Radio value="bamboo">Bamboo</Radio>\n              <Radio value="light">Light</Radio>\n              <Radio value="little">Little</Radio>\n            </Radio.Group>\n\n            <Mentions placeholder="Mention by @">\n              <Mentions.Option value="afc163">afc163</Mentions.Option>\n              <Mentions.Option value="zombieJ">zombieJ</Mentions.Option>\n              <Mentions.Option value="yesmeck">yesmeck</Mentions.Option>\n            </Mentions>\n\n            <Slider defaultValue={30} style={{ width: 100 }} />\n\n            <Switch defaultChecked />\n          </SplitSpace>\n\n          <SplitSpace>\n            <DatePicker.RangePicker />\n            <TimePicker.RangePicker />\n          </SplitSpace>\n\n          <Row gutter={16}>\n            <Col span={8}>\n              {/* Card */}\n              <Card\n                style={{ width: \'100%\' }}\n                tabList={carTabListNoTitle}\n                tabBarExtraContent={<a href="#">More</a>}\n              />\n            </Col>\n            <Col span={8}>\n              {/* Table */}\n              <Table\n                size="small"\n                bordered\n                rowSelection={{}}\n                columns={[\n                  {\n                    title: \'Key\',\n                    dataIndex: \'key\',\n                    filters: [\n                      {\n                        text: \'Little\',\n                        value: \'little\',\n                      },\n                    ],\n                    sorter: (a, b) => a.key.length - b.key.length,\n                  },\n                ]}\n                dataSource={[\n                  {\n                    key: \'Bamboo\',\n                  },\n                  {\n                    key: \'Light\',\n                  },\n                  {\n                    key: \'Little\',\n                  },\n                ]}\n              />\n            </Col>\n            <Col span={8}>\n              {/* Table */}\n              <Tabs defaultActiveKey="1">\n                <Tabs.TabPane tab="Tab 1" key="1">\n                  Content of Tab Pane 1\n                </Tabs.TabPane>\n                <Tabs.TabPane tab="Tab 2" key="2">\n                  Content of Tab Pane 2\n                </Tabs.TabPane>\n                <Tabs.TabPane tab="Tab 3" key="3">\n                  Content of Tab Pane 3\n                </Tabs.TabPane>\n              </Tabs>\n            </Col>\n          </Row>\n\n          <SplitSpace>\n            <Tag color="success">success</Tag>\n            <Tag color="processing">processing</Tag>\n            <Tag color="error">error</Tag>\n            <Tag color="warning">warning</Tag>\n            <Tag color="default">default</Tag>\n            <Tag.CheckableTag checked>CheckableTag</Tag.CheckableTag>\n          </SplitSpace>\n\n          <Row gutter={16}>\n            <Col span={16}>\n              <Timeline mode="alternate">\n                <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>\n                <Timeline.Item color="gray">\n                  Solve initial network problems 2015-09-01\n                </Timeline.Item>\n                <Timeline.Item\n                  dot={<ClockCircleOutlined style={{ fontSize: \'16px\' }} />}\n                >\n                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n                  accusantium doloremque laudantium, totam rem aperiam, eaque\n                  ipsa quae ab illo inventore veritatis et quasi architecto\n                  beatae vitae dicta sunt explicabo.\n                </Timeline.Item>\n              </Timeline>\n            </Col>\n\n            <Col span={8}>\n              <Tree\n                treeData={treeData}\n                height={200}\n                defaultExpandAll\n                checkable\n              />\n            </Col>\n          </Row>\n\n          {/* Alert */}\n          <Row gutter={16}>\n            <Col span={6}>\n              <Alert showIcon message="Success Text" type="success" />\n            </Col>\n            <Col span={6}>\n              <Alert showIcon message="Info Text" type="info" />\n            </Col>\n            <Col span={6}>\n              <Alert showIcon message="Warning Text" type="warning" />\n            </Col>\n            <Col span={6}>\n              <Alert showIcon message="Error Text" type="error" />\n            </Col>\n          </Row>\n\n          {/* Progress */}\n          <Row gutter={16}>\n            <Col flex="auto">\n              <Progress percent={30} />\n              <Progress percent={70} status="exception" />\n              <Progress percent={100} />\n            </Col>\n            <Col flex="none">\n              <Progress type="circle" percent={75} />\n              <Progress type="circle" percent={70} status="exception" />\n              <Progress type="circle" percent={100} />\n            </Col>\n          </Row>\n\n          <MyTransfer />\n        </Space>\n      </Col>\n    </Row>\n  );\n};\n\nexport default GlobalDemo;',
         yn =
           'import React from \'react\';\nimport { DatePicker, Space } from \'@fle-ui/next\';\n\nfunction onChange(date: any, dateString: any) {\n  console.log(date, dateString);\n}\n\nconst Demo = () => {\n  return (\n    <Space direction="vertical">\n      <DatePicker onChange={onChange} />\n      <DatePicker onChange={onChange} picker="week" />\n      <DatePicker onChange={onChange} picker="month" />\n      <DatePicker onChange={onChange} picker="quarter" />\n      <DatePicker onChange={onChange} picker="year" />\n    </Space>\n  );\n};\n\nexport default Demo;',
         wn =
@@ -269,7 +269,7 @@
         In =
           "import React from 'react';\nimport { DatePicker, Space } from '@fle-ui/next';\n\nconst { RangePicker } = DatePicker;\n\nclass Demo extends React.Component {\n  state = {\n    size: 'default',\n  };\n\n  render() {\n    return (\n      <Space direction=\"vertical\" size={12}>\n        <DatePicker renderExtraFooter={() => 'extra footer'} />\n        <DatePicker renderExtraFooter={() => 'extra footer'} showTime />\n        <RangePicker renderExtraFooter={() => 'extra footer'} />\n        <RangePicker renderExtraFooter={() => 'extra footer'} showTime />\n        <DatePicker renderExtraFooter={() => 'extra footer'} picker=\"month\" />\n      </Space>\n    );\n  }\n}\n\nexport default Demo;",
         Bn =
-          "import React from 'react';\nimport { DatePicker, Space } from '@fle-ui/next';\n\nconst { RangePicker } = DatePicker;\n\nfunction Demo() {\n  return (\n    <Space direction=\"vertical\" size={12}>\n      <DatePicker\n        dateRender={(current) => {\n          const style: any = {};\n          if (current.date() === 1) {\n            style.border = '1px solid #1890ff';\n            style.borderRadius = '50%';\n          }\n          return (\n            <div className=\"ant-picker-cell-inner\" style={style}>\n              {current.date()}\n            </div>\n          );\n        }}\n      />\n      <RangePicker\n        dateRender={(current) => {\n          const style: any = {};\n          if (current.date() === 1) {\n            style.border = '1px solid #1890ff';\n            style.borderRadius = '50%';\n          }\n          return (\n            <div className=\"ant-picker-cell-inner\" style={style}>\n              {current.date()}\n            </div>\n          );\n        }}\n      />\n    </Space>\n  );\n}\nexport default Demo;",
+          "import React from 'react';\nimport { DatePicker, Space } from '@fle-ui/next';\n\nconst { RangePicker } = DatePicker;\n\nfunction Demo() {\n  return (\n    <Space direction=\"vertical\" size={12}>\n      <DatePicker\n        dateRender={(current) => {\n          const style: any = {};\n          if (current.date() === 1) {\n            style.border = '1px solid #2c68ff';\n            style.borderRadius = '50%';\n          }\n          return (\n            <div className=\"ant-picker-cell-inner\" style={style}>\n              {current.date()}\n            </div>\n          );\n        }}\n      />\n      <RangePicker\n        dateRender={(current) => {\n          const style: any = {};\n          if (current.date() === 1) {\n            style.border = '1px solid #2c68ff';\n            style.borderRadius = '50%';\n          }\n          return (\n            <div className=\"ant-picker-cell-inner\" style={style}>\n              {current.date()}\n            </div>\n          );\n        }}\n      />\n    </Space>\n  );\n}\nexport default Demo;",
         Rn =
           'import React from \'react\';\nimport { DatePicker, Space } from \'@fle-ui/next\';\n\nconst { RangePicker } = DatePicker;\n\nfunction Demo() {\n  return (\n    <Space direction="vertical" size={12}>\n      <DatePicker bordered={false} />\n      <DatePicker picker="week" bordered={false} />\n      <DatePicker picker="month" bordered={false} />\n      <DatePicker picker="year" bordered={false} />\n      <RangePicker bordered={false} />\n      <RangePicker picker="week" bordered={false} />\n      <RangePicker picker="month" bordered={false} />\n      <RangePicker picker="year" bordered={false} />\n    </Space>\n  );\n}\nexport default Demo;',
         jn =
@@ -347,7 +347,7 @@
         ft =
           'import React, { useState } from \'react\';\nimport {\n  Form,\n  Input,\n  Button,\n  Radio,\n  Select,\n  Cascader,\n  DatePicker,\n  InputNumber,\n  Switch,\n  TreeSelect,\n} from \'@fle-ui/next\';\n\ntype SizeType = Parameters<typeof Form>[0][\'size\'];\n\nconst Demo = () => {\n  const [componentSize, setComponentSize] = useState<SizeType | \'default\'>(\n    \'default\',\n  );\n  const onFormLayoutChange = ({ size }: { size: SizeType }) => {\n    setComponentSize(size);\n  };\n  return (\n    <>\n      <Form\n        labelCol={{ span: 4 }}\n        wrapperCol={{ span: 14 }}\n        layout="horizontal"\n        initialValues={{ size: componentSize }}\n        onValuesChange={onFormLayoutChange}\n        size={componentSize as SizeType}\n      >\n        <Form.Item label="Form Size" name="size">\n          <Radio.Group>\n            <Radio.Button value="small">Small</Radio.Button>\n            <Radio.Button value="default">Default</Radio.Button>\n            <Radio.Button value="large">Large</Radio.Button>\n          </Radio.Group>\n        </Form.Item>\n        <Form.Item label="Input">\n          <Input />\n        </Form.Item>\n        <Form.Item label="Select">\n          <Select>\n            <Select.Option value="demo">Demo</Select.Option>\n          </Select>\n        </Form.Item>\n        <Form.Item label="TreeSelect">\n          <TreeSelect\n            treeData={[\n              {\n                title: \'Light\',\n                value: \'light\',\n                children: [{ title: \'Bamboo\', value: \'bamboo\' }],\n              },\n            ]}\n          />\n        </Form.Item>\n        <Form.Item label="Cascader">\n          <Cascader\n            options={[\n              {\n                value: \'zhejiang\',\n                label: \'Zhejiang\',\n                children: [\n                  {\n                    value: \'hangzhou\',\n                    label: \'Hangzhou\',\n                  },\n                ],\n              },\n            ]}\n          />\n        </Form.Item>\n        <Form.Item label="DatePicker">\n          <DatePicker />\n        </Form.Item>\n        <Form.Item label="InputNumber">\n          <InputNumber />\n        </Form.Item>\n        <Form.Item label="Switch">\n          <Switch />\n        </Form.Item>\n        <Form.Item label="Button">\n          <Button>Button</Button>\n        </Form.Item>\n      </Form>\n    </>\n  );\n};\n\nexport default Demo;',
         ht =
-          "import React from 'react';\nimport { Form, Input, Button } from '@fle-ui/next';\nimport { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';\n\nconst formItemLayout = {\n  labelCol: {\n    xs: { span: 24 },\n    sm: { span: 4 },\n  },\n  wrapperCol: {\n    xs: { span: 24 },\n    sm: { span: 20 },\n  },\n};\nconst formItemLayoutWithOutLabel = {\n  wrapperCol: {\n    xs: { span: 24, offset: 0 },\n    sm: { span: 20, offset: 4 },\n  },\n};\n\nconst Demo = () => {\n  const onFinish = (values: any) => {\n    console.log('Received values of form:', values);\n  };\n\n  return (\n    <Form\n      name=\"dynamic_form_item\"\n      {...formItemLayoutWithOutLabel}\n      onFinish={onFinish}\n    >\n      <Form.List\n        name=\"names\"\n        rules={[\n          {\n            validator: async (_, names) => {\n              if (!names || names.length < 2) {\n                return Promise.reject(new Error('At least 2 passengers'));\n              }\n            },\n          },\n        ]}\n      >\n        {(fields, { add, remove }, { errors }) => (\n          <>\n            {fields.map((field, index) => (\n              <Form.Item\n                {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}\n                label={index === 0 ? 'Passengers' : ''}\n                required={false}\n                key={field.key}\n              >\n                <Form.Item\n                  {...field}\n                  validateTrigger={['onChange', 'onBlur']}\n                  rules={[\n                    {\n                      required: true,\n                      whitespace: true,\n                      message:\n                        \"Please input passenger's name or delete this field.\",\n                    },\n                  ]}\n                  noStyle\n                >\n                  <Input\n                    placeholder=\"passenger name\"\n                    style={{ width: '60%' }}\n                  />\n                </Form.Item>\n                {fields.length > 1 ? (\n                  <MinusCircleOutlined\n                    className=\"dynamic-delete-button\"\n                    onClick={() => remove(field.name)}\n                  />\n                ) : null}\n              </Form.Item>\n            ))}\n            <Form.Item>\n              <Button\n                type=\"dashed\"\n                onClick={() => add()}\n                style={{ width: '60%' }}\n                icon={<PlusOutlined />}\n              >\n                Add field\n              </Button>\n              <Button\n                type=\"dashed\"\n                onClick={() => {\n                  add('The head item', 0);\n                }}\n                style={{ width: '60%', marginTop: '20px' }}\n                icon={<PlusOutlined />}\n              >\n                Add field at head\n              </Button>\n              <Form.ErrorList errors={errors} />\n            </Form.Item>\n          </>\n        )}\n      </Form.List>\n      <Form.Item>\n        <Button type=\"primary\" htmlType=\"submit\">\n          Submit\n        </Button>\n      </Form.Item>\n    </Form>\n  );\n};\n\nexport default Demo;",
+          "import React from 'react';\nimport { Form, Input, Button } from '@fle-ui/next';\nimport { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';\n\nconst formItemLayout = {\n  labelCol: {\n    xs: { span: 24 },\n    sm: { span: 4 },\n  },\n  wrapperCol: {\n    xs: { span: 24 },\n    sm: { span: 20 },\n  },\n};\nconst formItemLayoutWithOutLabel = {\n  wrapperCol: {\n    xs: { span: 24, offset: 0 },\n    sm: { span: 20, offset: 4 },\n  },\n};\n\nconst Demo = () => {\n  const onFinish = (values: any) => {\n    console.log('Received values of form:', values);\n  };\n\n  return (\n    <Form\n      name=\"dynamic_form_item\"\n      {...formItemLayoutWithOutLabel}\n      onFinish={onFinish}\n    >\n      <Form.List\n        name=\"names\"\n        rules={[\n          {\n            validator: async (_, names) => {\n              if (!names || names.length < 2) {\n                return Promise.reject(new Error('At least 2 passengers'));\n              }\n            },\n          },\n        ]}\n      >\n        {(fields, { add, remove }, { errors }) => (\n          <>\n            {fields.map((field, index) => (\n              <Form.Item\n                {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}\n                label={index === 0 ? 'Passengers' : ''}\n                required={false}\n                key={field.key}\n              >\n                <Form.Item\n                  {...field}\n                  validateTrigger={['onChange', 'onBlur']}\n                  rules={[\n                    {\n                      required: true,\n                      whitespace: true,\n                      message:\n                        \"Please input passenger's name or delete this field.\",\n                    },\n                  ]}\n                  noStyle\n                >\n                  <Input\n                    placeholder=\"passenger name\"\n                    style={{ width: '60%' }}\n                  />\n                </Form.Item>\n                {fields.length > 1 ? (\n                  <MinusCircleOutlined\n                    // className=\"dynamic-delete-button\"\n                    onClick={() => remove(field.name)}\n                  />\n                ) : null}\n              </Form.Item>\n            ))}\n            <Form.Item>\n              <Button\n                type=\"dashed\"\n                onClick={() => add()}\n                style={{ width: '60%' }}\n                icon={<PlusOutlined />}\n              >\n                Add field\n              </Button>\n              <Button\n                type=\"dashed\"\n                onClick={() => {\n                  add('The head item', 0);\n                }}\n                style={{ width: '60%', marginTop: '20px' }}\n                icon={<PlusOutlined />}\n              >\n                Add field at head\n              </Button>\n              <Form.ErrorList errors={errors} />\n            </Form.Item>\n          </>\n        )}\n      </Form.List>\n      <Form.Item>\n        <Button type=\"primary\" htmlType=\"submit\">\n          Submit\n        </Button>\n      </Form.Item>\n    </Form>\n  );\n};\n\nexport default Demo;",
         vt =
           "import React from 'react';\nimport { Form, Input, Button, Space } from '@fle-ui/next';\nimport { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';\n\nconst Demo = () => {\n  const onFinish = (values: any) => {\n    console.log('Received values of form:', values);\n  };\n\n  return (\n    <Form name=\"dynamic_form_nest_item\" onFinish={onFinish} autoComplete=\"off\">\n      <Form.List name=\"users\">\n        {(fields, { add, remove }) => (\n          <>\n            {fields.map(({ key, name, fieldKey, ...restField }) => (\n              <Space\n                key={key}\n                style={{ display: 'flex', marginBottom: 8 }}\n                align=\"baseline\"\n              >\n                <Form.Item\n                  {...restField}\n                  name={[name, 'first']}\n                  fieldKey={[fieldKey, 'first']}\n                  rules={[{ required: true, message: 'Missing first name' }]}\n                >\n                  <Input placeholder=\"First Name\" />\n                </Form.Item>\n                <Form.Item\n                  {...restField}\n                  name={[name, 'last']}\n                  fieldKey={[fieldKey, 'last']}\n                  rules={[{ required: true, message: 'Missing last name' }]}\n                >\n                  <Input placeholder=\"Last Name\" />\n                </Form.Item>\n                <MinusCircleOutlined onClick={() => remove(name)} />\n              </Space>\n            ))}\n            <Form.Item>\n              <Button\n                type=\"dashed\"\n                onClick={() => add()}\n                block\n                icon={<PlusOutlined />}\n              >\n                Add field\n              </Button>\n            </Form.Item>\n          </>\n        )}\n      </Form.List>\n      <Form.Item>\n        <Button type=\"primary\" htmlType=\"submit\">\n          Submit\n        </Button>\n      </Form.Item>\n    </Form>\n  );\n};\n\nexport default Demo;",
         bt =
@@ -410,7 +410,7 @@
         Yt =
           'import React from \'react\';\nimport { Input, Select, Space, Cascader } from \'@fle-ui/next\';\nimport { SettingOutlined } from \'@ant-design/icons\';\n\nconst { Option } = Select;\n\nconst Demo = () => {\n  const selectBefore = (\n    <Select defaultValue="http://" className="select-before">\n      <Option value="http://">http://</Option>\n      <Option value="https://">https://</Option>\n    </Select>\n  );\n  const selectAfter = (\n    <Select defaultValue=".com" className="select-after">\n      <Option value=".com">.com</Option>\n      <Option value=".jp">.jp</Option>\n      <Option value=".cn">.cn</Option>\n      <Option value=".org">.org</Option>\n    </Select>\n  );\n\n  return (\n    <>\n      <Space direction="vertical">\n        <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />\n        <Input\n          addonBefore={selectBefore}\n          addonAfter={selectAfter}\n          defaultValue="mysite"\n        />\n        <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />\n        <Input addonBefore="http://" suffix=".com" defaultValue="mysite" />\n        <Input\n          addonBefore={\n            <Cascader placeholder="cascader" style={{ width: 150 }} />\n          }\n          defaultValue="mysite"\n        />\n      </Space>\n    </>\n  );\n};\n\nexport default Demo;',
         qt =
-          'import React from \'react\';\nimport { Input, Space } from \'@fle-ui/next\';\nimport { AudioOutlined } from \'@ant-design/icons\';\n\nconst { Search } = Input;\n\nconst Demo = () => {\n  const onSearch = (value: string) => console.log(value);\n\n  const suffix = (\n    <AudioOutlined\n      style={{\n        fontSize: 16,\n        color: \'#1890ff\',\n      }}\n    />\n  );\n\n  return (\n    <Space direction="vertical">\n      <Search\n        placeholder="input search text"\n        onSearch={onSearch}\n        style={{ width: 200 }}\n      />\n      <Search\n        placeholder="input search text"\n        allowClear\n        onSearch={onSearch}\n        style={{ width: 200 }}\n      />\n      <Search placeholder="input search text" onSearch={onSearch} enterButton />\n      <Search\n        placeholder="input search text"\n        allowClear\n        enterButton="Search"\n        size="large"\n        onSearch={onSearch}\n      />\n      <Search\n        placeholder="input search text"\n        enterButton="Search"\n        size="large"\n        suffix={suffix}\n        onSearch={onSearch}\n      />\n    </Space>\n  );\n};\n\nexport default Demo;',
+          'import React from \'react\';\nimport { Input, Space } from \'@fle-ui/next\';\nimport { AudioOutlined } from \'@ant-design/icons\';\n\nconst { Search } = Input;\n\nconst Demo = () => {\n  const onSearch = (value: string) => console.log(value);\n\n  const suffix = (\n    <AudioOutlined\n      style={{\n        fontSize: 16,\n        color: \'#2c68ff\',\n      }}\n    />\n  );\n\n  return (\n    <Space direction="vertical">\n      <Search\n        placeholder="input search text"\n        onSearch={onSearch}\n        style={{ width: 200 }}\n      />\n      <Search\n        placeholder="input search text"\n        allowClear\n        onSearch={onSearch}\n        style={{ width: 200 }}\n      />\n      <Search placeholder="input search text" onSearch={onSearch} enterButton />\n      <Search\n        placeholder="input search text"\n        allowClear\n        enterButton="Search"\n        size="large"\n        onSearch={onSearch}\n      />\n      <Search\n        placeholder="input search text"\n        enterButton="Search"\n        size="large"\n        suffix={suffix}\n        onSearch={onSearch}\n      />\n    </Space>\n  );\n};\n\nexport default Demo;',
         Jt =
           'import React from \'react\';\nimport { Input } from \'@fle-ui/next\';\n\nconst { Search } = Input;\n\nconst Demo = () => {\n  return (\n    <>\n      <Search placeholder="input search loading default" loading />\n      <br />\n      <br />\n      <Search\n        placeholder="input search loading with enterButton"\n        loading\n        enterButton\n      />\n      <br />\n      <br />\n      <Search\n        placeholder="input search text"\n        enterButton="Search"\n        size="large"\n        loading\n      />\n    </>\n  );\n};\n\nexport default Demo;',
         Wt =
@@ -564,7 +564,7 @@
         vo =
           "import React from 'react';\nimport { Button, notification } from '@fle-ui/next';\n\nconst Demo = () => {\n  const openNotification = () => {\n    notification.open({\n      message: 'Notification Title',\n      description:\n        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n      className: 'custom-class',\n      style: {\n        width: 600,\n      },\n    });\n  };\n\n  return (\n    <Button type=\"primary\" onClick={openNotification}>\n      Open the notification box\n    </Button>\n  );\n};\n\nexport default Demo;",
         bo =
-          "import React from 'react';\nimport { Button, notification } from '@fle-ui/next';\nimport { SmileOutlined } from '@ant-design/icons';\n\nconst Demo = () => {\n  const openNotification = () => {\n    notification.open({\n      message: 'Notification Title',\n      description:\n        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n      icon: <SmileOutlined style={{ color: '#108ee9' }} />,\n    });\n  };\n\n  return (\n    <Button type=\"primary\" onClick={openNotification}>\n      Open the notification box\n    </Button>\n  );\n};\n\nexport default Demo;",
+          "import React from 'react';\nimport { Button, notification } from '@fle-ui/next';\nimport { SmileOutlined } from '@ant-design/icons';\n\nconst Demo = () => {\n  const openNotification = () => {\n    notification.open({\n      message: 'Notification Title',\n      description:\n        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n      icon: <SmileOutlined style={{ color: '#2c68ff' }} />,\n    });\n  };\n\n  return (\n    <Button type=\"primary\" onClick={openNotification}>\n      Open the notification box\n    </Button>\n  );\n};\n\nexport default Demo;",
         go =
           "import React from 'react';\nimport { Button, notification, Divider, Space } from '@fle-ui/next';\n\nimport {\n  RadiusUpleftOutlined,\n  RadiusUprightOutlined,\n  RadiusBottomleftOutlined,\n  RadiusBottomrightOutlined,\n} from '@ant-design/icons';\n\nconst Demo = () => {\n  const openNotification = (\n    placement: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight',\n  ) => {\n    notification.info({\n      message: `Notification ${placement}`,\n      description:\n        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n      placement,\n    });\n  };\n\n  return (\n    <>\n      <Space>\n        <Button type=\"primary\" onClick={() => openNotification('topLeft')}>\n          <RadiusUpleftOutlined />\n          topLeft\n        </Button>\n        <Button type=\"primary\" onClick={() => openNotification('topRight')}>\n          <RadiusUprightOutlined />\n          topRight\n        </Button>\n      </Space>\n      <Divider />\n      <Space>\n        <Button type=\"primary\" onClick={() => openNotification('bottomLeft')}>\n          <RadiusBottomleftOutlined />\n          bottomLeft\n        </Button>\n        <Button type=\"primary\" onClick={() => openNotification('bottomRight')}>\n          <RadiusBottomrightOutlined />\n          bottomRight\n        </Button>\n      </Space>\n    </>\n  );\n};\n\nexport default Demo;",
         yo =
@@ -608,7 +608,7 @@
         zo =
           'import React from \'react\';\nimport { Popconfirm } from \'@fle-ui/next\';\n\nconst LocaleDemo = () => {\n  return (\n    <Popconfirm title="Are you sure\uff1f" okText="Yes" cancelText="No">\n      <a href="#">Delete</a>\n    </Popconfirm>\n  );\n};\n\nexport default LocaleDemo;',
         _o =
-          'import React from \'react\';\nimport { Popconfirm, message, Button } from \'@fle-ui/next\';\n\nconst PlacementDemo = () => {\n  const text = \'Are you sure to delete this task?\';\n\n  const confirm = () => {\n    message.info(\'Clicked on Yes.\');\n  };\n  return (\n    <div className="demo">\n      <div style={{ marginLeft: 70, whiteSpace: \'nowrap\' }}>\n        <Popconfirm\n          placement="topLeft"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>TL</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="top"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>Top</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="topRight"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>TR</Button>\n        </Popconfirm>\n      </div>\n      <div style={{ width: 70, float: \'left\' }}>\n        <Popconfirm\n          placement="leftTop"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>LT</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="left"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>Left</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="leftBottom"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>LB</Button>\n        </Popconfirm>\n      </div>\n      <div style={{ width: 70, marginLeft: 304 }}>\n        <Popconfirm\n          placement="rightTop"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>RT</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="right"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>Right</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="rightBottom"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>RB</Button>\n        </Popconfirm>\n      </div>\n      <div style={{ marginLeft: 70, clear: \'both\', whiteSpace: \'nowrap\' }}>\n        <Popconfirm\n          placement="bottomLeft"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>BL</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="bottom"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>Bottom</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="bottomRight"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>BR</Button>\n        </Popconfirm>\n      </div>\n    </div>\n  );\n};\n\nexport default PlacementDemo;',
+          'import React from \'react\';\nimport { Popconfirm, message, Button } from \'@fle-ui/next\';\n\nconst PlacementDemo = () => {\n  const text = \'Are you sure to delete this task?\';\n\n  const confirm = () => {\n    message.info(\'Clicked on Yes.\');\n  };\n  return (\n    <div className="demo popconfirm-placement-demo">\n      <div style={{ marginLeft: 70, whiteSpace: \'nowrap\' }}>\n        <Popconfirm\n          placement="topLeft"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>TL</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="top"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>Top</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="topRight"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>TR</Button>\n        </Popconfirm>\n      </div>\n      <div style={{ width: 70, float: \'left\' }}>\n        <Popconfirm\n          placement="leftTop"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>LT</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="left"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>Left</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="leftBottom"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>LB</Button>\n        </Popconfirm>\n      </div>\n      <div style={{ width: 70, marginLeft: 304 }}>\n        <Popconfirm\n          placement="rightTop"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>RT</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="right"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>Right</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="rightBottom"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>RB</Button>\n        </Popconfirm>\n      </div>\n      <div style={{ marginLeft: 70, clear: \'both\', whiteSpace: \'nowrap\' }}>\n        <Popconfirm\n          placement="bottomLeft"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>BL</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="bottom"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>Bottom</Button>\n        </Popconfirm>\n        <Popconfirm\n          placement="bottomRight"\n          title={text}\n          onConfirm={confirm}\n          okText="Yes"\n          cancelText="No"\n        >\n          <Button>BR</Button>\n        </Popconfirm>\n      </div>\n    </div>\n  );\n};\n\nexport default PlacementDemo;',
         Eo =
           'import React, { useState } from \'react\';\nimport { Popconfirm, Switch, message } from \'@fle-ui/next\';\n\nconst DynamicTriggerDemo = () => {\n  const [visible, setVisible] = useState(false);\n  const [condition, setCondition] = useState(true);\n\n  const changeCondition = (value: boolean) => {\n    setCondition(value);\n  };\n\n  const confirm = () => {\n    setVisible(false);\n    message.success(\'Next step.\');\n  };\n\n  const cancel = () => {\n    setVisible(false);\n    message.error(\'Click on cancel.\');\n  };\n\n  const handleVisibleChange = (visible: boolean) => {\n    if (!visible) {\n      setVisible(visible);\n      return;\n    }\n    // Determining condition before show the popconfirm.\n    console.log(condition);\n    if (condition) {\n      confirm(); // next step\n    } else {\n      setVisible(visible); // show the popconfirm\n    }\n  };\n  return (\n    <div>\n      <Popconfirm\n        title="Are you sure delete this task?"\n        visible={visible}\n        onVisibleChange={handleVisibleChange}\n        onConfirm={confirm}\n        onCancel={cancel}\n        okText="Yes"\n        cancelText="No"\n      >\n        <a href="#">Delete a task</a>\n      </Popconfirm>\n      <br />\n      <br />\n      Whether directly execute\uff1a\n      <Switch defaultChecked onChange={changeCondition} />\n    </div>\n  );\n};\n\nexport default DynamicTriggerDemo;',
         Vo =
@@ -860,7 +860,7 @@
         ts =
           "import React from 'react';\nimport { Table, Button, Space } from '@fle-ui/next';\n\nconst data = [\n  {\n    key: '1',\n    name: 'John Brown',\n    age: 32,\n    address: 'New York No. 1 Lake Park',\n  },\n  {\n    key: '2',\n    name: 'Jim Green',\n    age: 42,\n    address: 'London No. 1 Lake Park',\n  },\n  {\n    key: '3',\n    name: 'Joe Black',\n    age: 32,\n    address: 'Sidney No. 1 Lake Park',\n  },\n  {\n    key: '4',\n    name: 'Jim Red',\n    age: 32,\n    address: 'London No. 2 Lake Park',\n  },\n];\n\nclass Demo extends React.Component {\n  state: any = {\n    filteredInfo: null,\n    sortedInfo: null,\n  };\n\n  handleChange = (pagination: any, filters: any, sorter: any) => {\n    console.log('Various parameters', pagination, filters, sorter);\n    this.setState({\n      filteredInfo: filters,\n      sortedInfo: sorter,\n    });\n  };\n\n  clearFilters = () => {\n    this.setState({ filteredInfo: null });\n  };\n\n  clearAll = () => {\n    this.setState({\n      filteredInfo: null,\n      sortedInfo: null,\n    });\n  };\n\n  setAgeSort = () => {\n    this.setState({\n      sortedInfo: {\n        order: 'descend',\n        columnKey: 'age',\n      },\n    });\n  };\n\n  render() {\n    let { sortedInfo, filteredInfo } = this.state;\n    sortedInfo = sortedInfo || {};\n    filteredInfo = filteredInfo || {};\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n        key: 'name',\n        filters: [\n          { text: 'Joe', value: 'Joe' },\n          { text: 'Jim', value: 'Jim' },\n        ],\n        filteredValue: filteredInfo.name || null,\n        onFilter: (value: any, record: any) => record.name.includes(value),\n        sorter: (a: any, b: any) => a.name.length - b.name.length,\n        sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,\n        ellipsis: true,\n      },\n      {\n        title: 'Age',\n        dataIndex: 'age',\n        key: 'age',\n        sorter: (a: any, b: any) => a.age - b.age,\n        sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,\n        ellipsis: true,\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n        key: 'address',\n        filters: [\n          { text: 'London', value: 'London' },\n          { text: 'New York', value: 'New York' },\n        ],\n        filteredValue: filteredInfo.address || null,\n        onFilter: (value: any, record: any) => record.address.includes(value),\n        sorter: (a: any, b: any) => a.address.length - b.address.length,\n        sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,\n        ellipsis: true,\n      },\n    ];\n    return (\n      <>\n        <Space style={{ marginBottom: 16 }}>\n          <Button onClick={this.setAgeSort}>Sort age</Button>\n          <Button onClick={this.clearFilters}>Clear filters</Button>\n          <Button onClick={this.clearAll}>Clear filters and sorters</Button>\n        </Space>\n        <Table\n          columns={columns}\n          dataSource={data}\n          onChange={this.handleChange}\n        />\n      </>\n    );\n  }\n}\n\nexport default Demo;",
         rs =
-          "import React from 'react';\nimport { Table, Input, Button, Space } from '@fle-ui/next';\nimport Highlighter from 'react-highlight-words';\nimport { SearchOutlined } from '@ant-design/icons';\n\nconst data = [\n  {\n    key: '1',\n    name: 'John Brown',\n    age: 32,\n    address: 'New York No. 1 Lake Park',\n  },\n  {\n    key: '2',\n    name: 'Joe Black',\n    age: 42,\n    address: 'London No. 1 Lake Park',\n  },\n  {\n    key: '3',\n    name: 'Jim Green',\n    age: 32,\n    address: 'Sidney No. 1 Lake Park',\n  },\n  {\n    key: '4',\n    name: 'Jim Red',\n    age: 32,\n    address: 'London No. 2 Lake Park',\n  },\n];\nclass Demo extends React.Component {\n  state = {\n    searchText: '',\n    searchedColumn: '',\n  };\n\n  getColumnSearchProps = (dataIndex) => ({\n    filterDropdown: ({\n      setSelectedKeys,\n      selectedKeys,\n      confirm,\n      clearFilters,\n    }) => (\n      <div style={{ padding: 8 }}>\n        <Input\n          ref={(node) => {\n            this.searchInput = node;\n          }}\n          placeholder={`Search ${dataIndex}`}\n          value={selectedKeys[0]}\n          onChange={(e) =>\n            setSelectedKeys(e.target.value ? [e.target.value] : [])\n          }\n          onPressEnter={() =>\n            this.handleSearch(selectedKeys, confirm, dataIndex)\n          }\n          style={{ marginBottom: 8, display: 'block' }}\n        />\n        <Space>\n          <Button\n            type=\"primary\"\n            onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}\n            icon={<SearchOutlined />}\n            size=\"small\"\n            style={{ width: 90 }}\n          >\n            Search\n          </Button>\n          <Button\n            onClick={() => this.handleReset(clearFilters)}\n            size=\"small\"\n            style={{ width: 90 }}\n          >\n            Reset\n          </Button>\n          <Button\n            type=\"link\"\n            size=\"small\"\n            onClick={() => {\n              confirm({ closeDropdown: false });\n              this.setState({\n                searchText: selectedKeys[0],\n                searchedColumn: dataIndex,\n              });\n            }}\n          >\n            Filter\n          </Button>\n        </Space>\n      </div>\n    ),\n    filterIcon: (filtered) => (\n      <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />\n    ),\n    onFilter: (value, record) =>\n      record[dataIndex]\n        ? record[dataIndex]\n            .toString()\n            .toLowerCase()\n            .includes(value.toLowerCase())\n        : '',\n    onFilterDropdownVisibleChange: (visible) => {\n      if (visible) {\n        setTimeout(() => this.searchInput.select(), 100);\n      }\n    },\n    render: (text) =>\n      this.state.searchedColumn === dataIndex ? (\n        <Highlighter\n          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}\n          searchWords={[this.state.searchText]}\n          autoEscape\n          textToHighlight={text ? text.toString() : ''}\n        />\n      ) : (\n        text\n      ),\n  });\n\n  handleSearch = (selectedKeys, confirm, dataIndex) => {\n    confirm();\n    this.setState({\n      searchText: selectedKeys[0],\n      searchedColumn: dataIndex,\n    });\n  };\n\n  handleReset = (clearFilters) => {\n    clearFilters();\n    this.setState({ searchText: '' });\n  };\n\n  render() {\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n        key: 'name',\n        width: '30%',\n        ...this.getColumnSearchProps('name'),\n      },\n      {\n        title: 'Age',\n        dataIndex: 'age',\n        key: 'age',\n        width: '20%',\n        ...this.getColumnSearchProps('age'),\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n        key: 'address',\n        ...this.getColumnSearchProps('address'),\n        sorter: (a, b) => a.address.length - b.address.length,\n        sortDirections: ['descend', 'ascend'],\n      },\n    ];\n    return <Table columns={columns} dataSource={data} />;\n  }\n}\n\nexport default Demo;",
+          "import React from 'react';\nimport { Table, Input, Button, Space } from '@fle-ui/next';\nimport Highlighter from 'react-highlight-words';\nimport { SearchOutlined } from '@ant-design/icons';\n\nconst data = [\n  {\n    key: '1',\n    name: 'John Brown',\n    age: 32,\n    address: 'New York No. 1 Lake Park',\n  },\n  {\n    key: '2',\n    name: 'Joe Black',\n    age: 42,\n    address: 'London No. 1 Lake Park',\n  },\n  {\n    key: '3',\n    name: 'Jim Green',\n    age: 32,\n    address: 'Sidney No. 1 Lake Park',\n  },\n  {\n    key: '4',\n    name: 'Jim Red',\n    age: 32,\n    address: 'London No. 2 Lake Park',\n  },\n];\nclass Demo extends React.Component {\n  state = {\n    searchText: '',\n    searchedColumn: '',\n  };\n\n  getColumnSearchProps = (dataIndex) => ({\n    filterDropdown: ({\n      setSelectedKeys,\n      selectedKeys,\n      confirm,\n      clearFilters,\n    }) => (\n      <div style={{ padding: 8 }}>\n        <Input\n          ref={(node) => {\n            this.searchInput = node;\n          }}\n          placeholder={`Search ${dataIndex}`}\n          value={selectedKeys[0]}\n          onChange={(e) =>\n            setSelectedKeys(e.target.value ? [e.target.value] : [])\n          }\n          onPressEnter={() =>\n            this.handleSearch(selectedKeys, confirm, dataIndex)\n          }\n          style={{ marginBottom: 8, display: 'block' }}\n        />\n        <Space>\n          <Button\n            type=\"primary\"\n            onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}\n            icon={<SearchOutlined />}\n            size=\"small\"\n            style={{ width: 90 }}\n          >\n            Search\n          </Button>\n          <Button\n            onClick={() => this.handleReset(clearFilters)}\n            size=\"small\"\n            style={{ width: 90 }}\n          >\n            Reset\n          </Button>\n          <Button\n            type=\"link\"\n            size=\"small\"\n            onClick={() => {\n              confirm({ closeDropdown: false });\n              this.setState({\n                searchText: selectedKeys[0],\n                searchedColumn: dataIndex,\n              });\n            }}\n          >\n            Filter\n          </Button>\n        </Space>\n      </div>\n    ),\n    filterIcon: (filtered) => (\n      <SearchOutlined style={{ color: filtered ? '#2c68ff' : undefined }} />\n    ),\n    onFilter: (value, record) =>\n      record[dataIndex]\n        ? record[dataIndex]\n            .toString()\n            .toLowerCase()\n            .includes(value.toLowerCase())\n        : '',\n    onFilterDropdownVisibleChange: (visible) => {\n      if (visible) {\n        setTimeout(() => this.searchInput.select(), 100);\n      }\n    },\n    render: (text) =>\n      this.state.searchedColumn === dataIndex ? (\n        <Highlighter\n          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}\n          searchWords={[this.state.searchText]}\n          autoEscape\n          textToHighlight={text ? text.toString() : ''}\n        />\n      ) : (\n        text\n      ),\n  });\n\n  handleSearch = (selectedKeys, confirm, dataIndex) => {\n    confirm();\n    this.setState({\n      searchText: selectedKeys[0],\n      searchedColumn: dataIndex,\n    });\n  };\n\n  handleReset = (clearFilters) => {\n    clearFilters();\n    this.setState({ searchText: '' });\n  };\n\n  render() {\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n        key: 'name',\n        width: '30%',\n        ...this.getColumnSearchProps('name'),\n      },\n      {\n        title: 'Age',\n        dataIndex: 'age',\n        key: 'age',\n        width: '20%',\n        ...this.getColumnSearchProps('age'),\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n        key: 'address',\n        ...this.getColumnSearchProps('address'),\n        sorter: (a, b) => a.address.length - b.address.length,\n        sortDirections: ['descend', 'ascend'],\n      },\n    ];\n    return <Table columns={columns} dataSource={data} />;\n  }\n}\n\nexport default Demo;",
         os =
           "import React from 'react';\nimport { Table } from '@fle-ui/next';\nimport reqwest from 'reqwest';\n\nconst columns = [\n  {\n    title: 'Name',\n    dataIndex: 'name',\n    sorter: true,\n    render: (name) => `${name.first} ${name.last}`,\n    width: '20%',\n  },\n  {\n    title: 'Gender',\n    dataIndex: 'gender',\n    filters: [\n      { text: 'Male', value: 'male' },\n      { text: 'Female', value: 'female' },\n    ],\n    width: '20%',\n  },\n  {\n    title: 'Email',\n    dataIndex: 'email',\n  },\n];\n\nconst getRandomuserParams = (params) => ({\n  results: params.pagination.pageSize,\n  page: params.pagination.current,\n  ...params,\n});\n\nclass Demo extends React.Component {\n  state = {\n    data: [],\n    pagination: {\n      current: 1,\n      pageSize: 10,\n    },\n    loading: false,\n  };\n\n  componentDidMount() {\n    const { pagination } = this.state;\n    this.fetch({ pagination });\n  }\n\n  handleTableChange = (pagination, filters, sorter) => {\n    this.fetch({\n      sortField: sorter.field,\n      sortOrder: sorter.order,\n      pagination,\n      ...filters,\n    });\n  };\n\n  fetch = (params = {}) => {\n    this.setState({ loading: true });\n    reqwest({\n      url: 'https://randomuser.me/api',\n      method: 'get',\n      type: 'json',\n      data: getRandomuserParams(params),\n    }).then((data) => {\n      console.log(data);\n      this.setState({\n        loading: false,\n        data: data.results,\n        pagination: {\n          ...params.pagination,\n          total: 200,\n          // 200 is mock data, you should read it from server\n          // total: data.totalCount,\n        },\n      });\n    });\n  };\n\n  render() {\n    const { data, pagination, loading } = this.state;\n    return (\n      <Table\n        columns={columns}\n        rowKey={(record) => record.login.uuid}\n        dataSource={data}\n        pagination={pagination}\n        loading={loading}\n        onChange={this.handleTableChange}\n      />\n    );\n  }\n}\n\nexport default Demo;",
         as =
@@ -894,7 +894,7 @@
         ys =
           "import React, { useState, useCallback, useRef } from 'react';\nimport { Table } from '@fle-ui/next';\nimport { DndProvider, useDrag, useDrop } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport update from 'immutability-helper';\n\nimport './index.less';\n\nconst type = 'DraggableBodyRow';\n\nconst DraggableBodyRow = ({\n  index,\n  moveRow,\n  className,\n  style,\n  ...restProps\n}) => {\n  const ref = useRef();\n  const [{ isOver, dropClassName }, drop] = useDrop({\n    accept: type,\n    collect: (monitor) => {\n      const { index: dragIndex } = monitor.getItem() || {};\n      if (dragIndex === index) {\n        return {};\n      }\n      return {\n        isOver: monitor.isOver(),\n        dropClassName:\n          dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',\n      };\n    },\n    drop: (item) => {\n      moveRow(item.index, index);\n    },\n  });\n  const [, drag] = useDrag({\n    type,\n    item: { index },\n    collect: (monitor) => ({\n      isDragging: monitor.isDragging(),\n    }),\n  });\n  drop(drag(ref));\n\n  return (\n    <tr\n      ref={ref}\n      className={`${className}${isOver ? dropClassName : ''}`}\n      style={{ cursor: 'move', ...style }}\n      {...restProps}\n    />\n  );\n};\n\nconst columns = [\n  {\n    title: 'Name',\n    dataIndex: 'name',\n    key: 'name',\n  },\n  {\n    title: 'Age',\n    dataIndex: 'age',\n    key: 'age',\n  },\n  {\n    title: 'Address',\n    dataIndex: 'address',\n    key: 'address',\n  },\n];\n\nconst DragSortingTable = () => {\n  const [data, setData] = useState([\n    {\n      key: '1',\n      name: 'John Brown',\n      age: 32,\n      address: 'New York No. 1 Lake Park',\n    },\n    {\n      key: '2',\n      name: 'Jim Green',\n      age: 42,\n      address: 'London No. 1 Lake Park',\n    },\n    {\n      key: '3',\n      name: 'Joe Black',\n      age: 32,\n      address: 'Sidney No. 1 Lake Park',\n    },\n  ]);\n\n  const components = {\n    body: {\n      row: DraggableBodyRow,\n    },\n  };\n\n  const moveRow = useCallback(\n    (dragIndex, hoverIndex) => {\n      const dragRow = data[dragIndex];\n      setData(\n        update(data, {\n          $splice: [\n            [dragIndex, 1],\n            [hoverIndex, 0, dragRow],\n          ],\n        }),\n      );\n    },\n    [data],\n  );\n\n  return (\n    <DndProvider backend={HTML5Backend}>\n      <Table\n        className=\"components-table-demo-drag-sorting\"\n        columns={columns}\n        dataSource={data}\n        components={components}\n        onRow={(record, index) => ({\n          index,\n          moveRow,\n        })}\n      />\n    </DndProvider>\n  );\n};\n\nexport default DragSortingTable;",
         ws =
-          '.components-table-demo-drag-sorting tr.drop-over-downward td {\n  border-bottom: 2px dashed #1890ff;\n}\n\n.components-table-demo-drag-sorting tr.drop-over-upward td {\n  border-top: 2px dashed #1890ff;\n}',
+          '.components-table-demo-drag-sorting tr.drop-over-downward td {\n  border-bottom: 2px dashed #2c68ff;\n}\n\n.components-table-demo-drag-sorting tr.drop-over-upward td {\n  border-top: 2px dashed #2c68ff;\n}',
         xs =
           "import React from 'react';\nimport { Table } from '@fle-ui/next';\nimport {\n  sortableContainer,\n  sortableElement,\n  sortableHandle,\n} from 'react-sortable-hoc';\nimport { MenuOutlined } from '@ant-design/icons';\n\nimport './index.less';\n\nconst DragHandle = sortableHandle(() => (\n  <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />\n));\n\nconst columns = [\n  {\n    title: 'Sort',\n    dataIndex: 'sort',\n    width: 30,\n    className: 'drag-visible',\n    render: () => <DragHandle />,\n  },\n  {\n    title: 'Name',\n    dataIndex: 'name',\n    className: 'drag-visible',\n  },\n  {\n    title: 'Age',\n    dataIndex: 'age',\n  },\n  {\n    title: 'Address',\n    dataIndex: 'address',\n  },\n];\n\nconst data = [\n  {\n    key: '1',\n    name: 'John Brown',\n    age: 32,\n    address: 'New York No. 1 Lake Park',\n    index: 0,\n  },\n  {\n    key: '2',\n    name: 'Jim Green',\n    age: 42,\n    address: 'London No. 1 Lake Park',\n    index: 1,\n  },\n  {\n    key: '3',\n    name: 'Joe Black',\n    age: 32,\n    address: 'Sidney No. 1 Lake Park',\n    index: 2,\n  },\n];\n\nconst SortableItem = sortableElement((props) => <tr {...props} />);\nconst SortableContainer = sortableContainer((props) => <tbody {...props} />);\n\nclass SortableTable extends React.Component {\n  state = {\n    dataSource: data,\n  };\n\n  onSortEnd = ({ oldIndex, newIndex }) => {\n    const { dataSource } = this.state;\n    if (oldIndex !== newIndex) {\n      // const newData = ([].concat(dataSource), oldIndex, newIndex).filter(el => !!el)\n      console.log('Sorted items: ', newData);\n      // this.setState({ dataSource: newData });\n    }\n  };\n\n  DraggableContainer = (props) => (\n    <SortableContainer\n      useDragHandle\n      disableAutoscroll\n      helperClass=\"row-dragging\"\n      onSortEnd={this.onSortEnd}\n      {...props}\n    />\n  );\n\n  DraggableBodyRow = ({ className, style, ...restProps }) => {\n    const { dataSource } = this.state;\n    // function findIndex base on Table rowKey props and should always be a right array index\n    const index = dataSource.findIndex(\n      (x) => x.index === restProps['data-row-key'],\n    );\n    return <SortableItem index={index} {...restProps} />;\n  };\n\n  render() {\n    const { dataSource } = this.state;\n\n    return (\n      <Table\n        pagination={false}\n        dataSource={dataSource}\n        columns={columns}\n        rowKey=\"index\"\n        components={{\n          body: {\n            wrapper: this.DraggableContainer,\n            row: this.DraggableBodyRow,\n          },\n        }}\n      />\n    );\n  }\n}\n\nexport default SortableTable;",
         ks =
@@ -1015,7 +1015,7 @@
         Dc =
           "import React, { useState } from 'react';\nimport { Tree, Transfer } from '@fle-ui/next';\n\nconst TreeDemo = () => {\n  const isChecked = (selectedKeys, eventKey) =>\n    selectedKeys.indexOf(eventKey) !== -1;\n\n  const generateTree = (treeNodes = [], checkedKeys = []) =>\n    treeNodes.map(({ children, ...props }) => ({\n      ...props,\n      disabled: checkedKeys.includes(props.key),\n      children: generateTree(children, checkedKeys),\n    }));\n\n  const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {\n    const transferDataSource = [];\n    function flatten(list = []) {\n      list.forEach((item) => {\n        transferDataSource.push(item);\n        flatten(item.children);\n      });\n    }\n    flatten(dataSource);\n\n    return (\n      <Transfer\n        {...restProps}\n        targetKeys={targetKeys}\n        dataSource={transferDataSource}\n        className=\"tree-transfer\"\n        render={(item) => item.title}\n        showSelectAll={false}\n      >\n        {({ direction, onItemSelect, selectedKeys }) => {\n          if (direction === 'left') {\n            const checkedKeys = [...selectedKeys, ...targetKeys];\n            return (\n              <Tree\n                blockNode\n                checkable\n                checkStrictly\n                defaultExpandAll\n                checkedKeys={checkedKeys}\n                treeData={generateTree(dataSource, targetKeys)}\n                onCheck={(_, { node: { key } }) => {\n                  onItemSelect(key, !isChecked(checkedKeys, key));\n                }}\n                onSelect={(_, { node: { key } }) => {\n                  onItemSelect(key, !isChecked(checkedKeys, key));\n                }}\n              />\n            );\n          }\n        }}\n      </Transfer>\n    );\n  };\n\n  const treeData = [\n    { key: '0-0', title: '0-0' },\n    {\n      key: '0-1',\n      title: '0-1',\n      children: [\n        { key: '0-1-0', title: '0-1-0' },\n        { key: '0-1-1', title: '0-1-1' },\n      ],\n    },\n    { key: '0-2', title: '0-3' },\n  ];\n\n  const [targetKeys, setTargetKeys] = useState([]);\n  const onChange = (keys) => {\n    setTargetKeys(keys);\n  };\n\n  return (\n    <TreeTransfer\n      dataSource={treeData}\n      targetKeys={targetKeys}\n      onChange={onChange}\n    />\n  );\n};\nexport default TreeDemo;",
         Oc =
-          "import { Tree } from '@fle-ui/next';\nimport React from 'react';\n\nconst treeData = [\n  {\n    title: 'parent 1',\n    key: '0-0',\n    children: [\n      {\n        title: 'parent 1-0',\n        key: '0-0-0',\n        disabled: true,\n        children: [\n          {\n            title: 'leaf',\n            key: '0-0-0-0',\n            disableCheckbox: true,\n          },\n          {\n            title: 'leaf',\n            key: '0-0-0-1',\n          },\n        ],\n      },\n      {\n        title: 'parent 1-1',\n        key: '0-0-1',\n        children: [\n          {\n            title: <span style={{ color: '#1890ff' }}>sss</span>,\n            key: '0-0-1-0',\n          },\n        ],\n      },\n    ],\n  },\n];\n\nconst Demo = () => {\n  const onSelect = (selectedKeys: React.Key[], info: any) => {\n    console.log('selected', selectedKeys, info);\n  };\n\n  const onCheck = (checkedKeys: any, info: any) => {\n    console.log('onCheck', checkedKeys, info);\n  };\n\n  return (\n    <Tree\n      checkable\n      defaultExpandedKeys={['0-0-0', '0-0-1']}\n      defaultSelectedKeys={['0-0-0', '0-0-1']}\n      defaultCheckedKeys={['0-0-0', '0-0-1']}\n      onSelect={onSelect}\n      onCheck={onCheck}\n      treeData={treeData}\n    />\n  );\n};\n\nexport default Demo;",
+          "import { Tree } from '@fle-ui/next';\nimport React from 'react';\n\nconst treeData = [\n  {\n    title: 'parent 1',\n    key: '0-0',\n    children: [\n      {\n        title: 'parent 1-0',\n        key: '0-0-0',\n        disabled: true,\n        children: [\n          {\n            title: 'leaf',\n            key: '0-0-0-0',\n            disableCheckbox: true,\n          },\n          {\n            title: 'leaf',\n            key: '0-0-0-1',\n          },\n        ],\n      },\n      {\n        title: 'parent 1-1',\n        key: '0-0-1',\n        children: [\n          {\n            title: <span style={{ color: '#2c68ff' }}>sss</span>,\n            key: '0-0-1-0',\n          },\n        ],\n      },\n    ],\n  },\n];\n\nconst Demo = () => {\n  const onSelect = (selectedKeys: React.Key[], info: any) => {\n    console.log('selected', selectedKeys, info);\n  };\n\n  const onCheck = (checkedKeys: any, info: any) => {\n    console.log('onCheck', checkedKeys, info);\n  };\n\n  return (\n    <Tree\n      checkable\n      defaultExpandedKeys={['0-0-0', '0-0-1']}\n      defaultSelectedKeys={['0-0-0', '0-0-1']}\n      defaultCheckedKeys={['0-0-0', '0-0-1']}\n      onSelect={onSelect}\n      onCheck={onCheck}\n      treeData={treeData}\n    />\n  );\n};\n\nexport default Demo;",
         Tc =
           "import { Tree } from '@fle-ui/next';\nimport React from 'react';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n  const preKey = _preKey || '0';\n  const tns = _tns || gData;\n\n  const children = [];\n  for (let i = 0; i < x; i++) {\n    const key = `${preKey}-${i}`;\n    tns.push({ title: key, key });\n    if (i < y) {\n      children.push(key);\n    }\n  }\n  if (_level < 0) {\n    return tns;\n  }\n  const level = _level - 1;\n  children.forEach((key, index) => {\n    tns[index].children = [];\n    return generateData(level, key, tns[index].children);\n  });\n};\ngenerateData(z);\n\nclass Demo extends React.Component {\n  state = {\n    gData,\n    expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],\n  };\n\n  onDragEnter = (info) => {\n    console.log(info);\n    // expandedKeys \u9700\u8981\u53d7\u63a7\u65f6\u8bbe\u7f6e\n    // this.setState({\n    //   expandedKeys: info.expandedKeys,\n    // });\n  };\n\n  onDrop = (info) => {\n    console.log(info);\n    const dropKey = info.node.key;\n    const dragKey = info.dragNode.key;\n    const dropPos = info.node.pos.split('-');\n    const dropPosition =\n      info.dropPosition - Number(dropPos[dropPos.length - 1]);\n\n    const loop = (data, key, callback) => {\n      for (let i = 0; i < data.length; i++) {\n        if (data[i].key === key) {\n          return callback(data[i], i, data);\n        }\n        if (data[i].children) {\n          loop(data[i].children, key, callback);\n        }\n      }\n    };\n    const data = [...this.state.gData];\n\n    // Find dragObject\n    let dragObj;\n    loop(data, dragKey, (item, index, arr) => {\n      arr.splice(index, 1);\n      dragObj = item;\n    });\n\n    if (!info.dropToGap) {\n      // Drop on the content\n      loop(data, dropKey, (item) => {\n        item.children = item.children || [];\n        // where to insert \u793a\u4f8b\u6dfb\u52a0\u5230\u5934\u90e8\uff0c\u53ef\u4ee5\u662f\u968f\u610f\u4f4d\u7f6e\n        item.children.unshift(dragObj);\n      });\n    } else if (\n      (info.node.props.children || []).length > 0 && // Has children\n      info.node.props.expanded && // Is expanded\n      dropPosition === 1 // On the bottom gap\n    ) {\n      loop(data, dropKey, (item) => {\n        item.children = item.children || [];\n        // where to insert \u793a\u4f8b\u6dfb\u52a0\u5230\u5934\u90e8\uff0c\u53ef\u4ee5\u662f\u968f\u610f\u4f4d\u7f6e\n        item.children.unshift(dragObj);\n        // in previous version, we use item.children.push(dragObj) to insert the\n        // item to the tail of the children\n      });\n    } else {\n      let ar;\n      let i;\n      loop(data, dropKey, (item, index, arr) => {\n        ar = arr;\n        i = index;\n      });\n      if (dropPosition === -1) {\n        ar.splice(i, 0, dragObj);\n      } else {\n        ar.splice(i + 1, 0, dragObj);\n      }\n    }\n\n    this.setState({\n      gData: data,\n    });\n  };\n\n  render() {\n    return (\n      <Tree\n        className=\"draggable-tree\"\n        defaultExpandedKeys={this.state.expandedKeys}\n        draggable\n        blockNode\n        onDragEnter={this.onDragEnter}\n        onDrop={this.onDrop}\n        treeData={this.state.gData}\n      />\n    );\n  }\n}\n\nexport default Demo;",
         Ic =
@@ -2473,9 +2473,6 @@
             sources: { _: { tsx: z } },
             dependencies: { react: { version: '16.14.0' } },
             componentName: 'back-top',
-            title: '\u81ea\u5b9a\u4e49\u6837\u5f0f',
-            description:
-              '<div class="markdown"><p>\u53ef\u4ee5\u81ea\u5b9a\u4e49\u56de\u5230\u9876\u90e8\u6309\u94ae\u7684\u6837\u5f0f\uff0c\u9650\u5236\u5bbd\u9ad8\uff1a40px * 40px\u3002</p></div>',
             identifier: 'back-top-custom',
           },
         },