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

package/components/config-provider/cssVariables.tsx

@@ -0,0 +1,105 @@
+/*
+ * @Author: your name
+ * @Date: 2021-09-17 13:39:55
+ * @LastEditTime: 2021-09-17 13:39:57
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /fle-ui-next/components/config-provider/cssVariables.tsx
+ */
+/* eslint-disable import/prefer-default-export, prefer-destructuring */
+
+import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
+import { TinyColor } from '@ctrl/tinycolor';
+import { generate } from '@ant-design/colors';
+import { Theme } from './context';
+
+const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`;
+
+export function registerTheme(globalPrefixCls: string, theme: Theme) {
+  const variables: Record<string, string> = {};
+
+  const formatColor = (
+    color: TinyColor,
+    updater?: (cloneColor: TinyColor) => TinyColor | undefined,
+  ) => {
+    let clone = color.clone();
+    clone = updater?.(clone) || clone;
+    return clone.toRgbString();
+  };
+
+  const fillColor = (colorVal: string, type: string) => {
+    const baseColor = new TinyColor(colorVal);
+    const colorPalettes = generate(baseColor.toRgbString());
+
+    variables[`${type}-color`] = formatColor(baseColor);
+    variables[`${type}-color-disabled`] = colorPalettes[1];
+    variables[`${type}-color-hover`] = colorPalettes[4];
+    variables[`${type}-color-active`] = colorPalettes[7];
+    variables[`${type}-color-outline`] = baseColor.clone().setAlpha(0.2).toRgbString();
+    variables[`${type}-color-deprecated-bg`] = colorPalettes[1];
+    variables[`${type}-color-deprecated-border`] = colorPalettes[3];
+  };
+
+  // ================ Primary Color ================
+  if (theme.primaryColor) {
+    fillColor(theme.primaryColor, 'primary');
+
+    const primaryColor = new TinyColor(theme.primaryColor);
+    const primaryColors = generate(primaryColor.toRgbString());
+
+    // Legacy - We should use semantic naming standard
+    primaryColors.forEach((color, index) => {
+      variables[`primary-${index + 1}`] = color;
+    });
+    // Deprecated
+    variables['primary-color-deprecated-l-35'] = formatColor(primaryColor, c => c.lighten(35));
+    variables['primary-color-deprecated-l-20'] = formatColor(primaryColor, c => c.lighten(20));
+    variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, c => c.tint(20));
+    variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, c => c.tint(50));
+    variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, c =>
+      c.setAlpha(c.getAlpha() * 0.12),
+    );
+
+    const primaryActiveColor = new TinyColor(primaryColors[0]);
+    variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, c =>
+      c.setAlpha(c.getAlpha() * 0.3),
+    );
+    variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, c =>
+      c.darken(2),
+    );
+  }
+
+  // ================ Success Color ================
+  if (theme.successColor) {
+    fillColor(theme.successColor, 'success');
+  }
+
+  // ================ Warning Color ================
+  if (theme.warningColor) {
+    fillColor(theme.warningColor, 'warning');
+  }
+
+  // ================= Error Color =================
+  if (theme.errorColor) {
+    fillColor(theme.errorColor, 'error');
+  }
+
+  // ================= Info Color ==================
+  if (theme.infoColor) {
+    fillColor(theme.infoColor, 'info');
+  }
+
+  // Convert to css variables
+  const cssList = Object.keys(variables).map(
+    key => `--${globalPrefixCls}-${key}: ${variables[key]};`,
+  );
+
+  updateCSS(
+    `
+  :root {
+    ${cssList.join('\n')}
+  }
+  `,
+    `${dynamicStyleMark}-dynamic-theme`,
+  );
+}

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

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