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

package/components/form/demos/required-mark.tsx

@@ -1,59 +0,0 @@
-/**
- * title: 必选样式
- * desc: 通过 `requiredMark` 切换必选与可选样式。
- */
-
-import React, { useState } from 'react';
-import { Form, Input, Button, Radio } from '@fle-ui/next';
-import { InfoCircleOutlined } from '@ant-design/icons';
-
-type RequiredMark = boolean | 'optional';
-
-const Demo = () => {
-  const [form] = Form.useForm();
-  const [requiredMark, setRequiredMarkType] =
-    useState<RequiredMark>('optional');
-
-  const onRequiredTypeChange = ({
-    requiredMarkValue,
-  }: {
-    requiredMarkValue: RequiredMark;
-  }) => {
-    setRequiredMarkType(requiredMarkValue);
-  };
-
-  return (
-    <Form
-      form={form}
-      layout="vertical"
-      initialValues={{ requiredMarkValue: requiredMark }}
-      onValuesChange={onRequiredTypeChange}
-      requiredMark={requiredMark}
-    >
-      <Form.Item label="Required Mark" name="requiredMarkValue">
-        <Radio.Group>
-          <Radio.Button value="optional">Optional</Radio.Button>
-          <Radio.Button value>Required</Radio.Button>
-          <Radio.Button value={false}>Hidden</Radio.Button>
-        </Radio.Group>
-      </Form.Item>
-      <Form.Item label="Field A" required tooltip="This is a required field">
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item
-        label="Field B"
-        tooltip={{
-          title: 'Tooltip with customize icon',
-          icon: <InfoCircleOutlined />,
-        }}
-      >
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item>
-        <Button type="primary">Submit</Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default Demo;

package/components/form/demos/size.tsx

@@ -1,98 +0,0 @@
-/**
- * title: 表单尺寸
- * desc: 设置表单组件尺寸，仅对 antd 组件有效。
- */
-
-import React, { useState } from 'react';
-import {
-  Form,
-  Input,
-  Button,
-  Radio,
-  Select,
-  Cascader,
-  DatePicker,
-  InputNumber,
-  Switch,
-} from '@fle-ui/next';
-import { TreeSelect } from 'antd';
-
-type SizeType = Parameters<typeof Form>[0]['size'];
-
-const Demo = () => {
-  const [componentSize, setComponentSize] = useState<SizeType | 'default'>(
-    'default',
-  );
-  const onFormLayoutChange = ({ size }: { size: SizeType }) => {
-    setComponentSize(size);
-  };
-  return (
-    <>
-      <Form
-        labelCol={{ span: 4 }}
-        wrapperCol={{ span: 14 }}
-        layout="horizontal"
-        initialValues={{ size: componentSize }}
-        onValuesChange={onFormLayoutChange}
-        size={componentSize as SizeType}
-      >
-        <Form.Item label="Form Size" name="size">
-          <Radio.Group>
-            <Radio.Button value="small">Small</Radio.Button>
-            <Radio.Button value="default">Default</Radio.Button>
-            <Radio.Button value="large">Large</Radio.Button>
-          </Radio.Group>
-        </Form.Item>
-        <Form.Item label="Input">
-          <Input />
-        </Form.Item>
-        <Form.Item label="Select">
-          <Select>
-            <Select.Option value="demo">Demo</Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item label="TreeSelect">
-          <TreeSelect
-            treeData={[
-              {
-                title: 'Light',
-                value: 'light',
-                children: [{ title: 'Bamboo', value: 'bamboo' }],
-              },
-            ]}
-          />
-        </Form.Item>
-        <Form.Item label="Cascader">
-          <Cascader
-            options={[
-              {
-                value: 'zhejiang',
-                label: 'Zhejiang',
-                children: [
-                  {
-                    value: 'hangzhou',
-                    label: 'Hangzhou',
-                  },
-                ],
-              },
-            ]}
-          />
-        </Form.Item>
-        <Form.Item label="DatePicker">
-          <DatePicker />
-        </Form.Item>
-        <Form.Item label="InputNumber">
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label="Switch">
-          <Switch />
-        </Form.Item>
-        <Form.Item label="Button">
-          <Button>Button</Button>
-        </Form.Item>
-      </Form>
-    </>
-  );
-};
-
-export default Demo;

package/components/form/demos/time-related-controls.tsx

@@ -1,100 +0,0 @@
-/**
- * title: 时间类控件
- * desc: 时间类组件的 `value` 类型为 `moment` 对象，所以在提交服务器前需要预处理。
- */
-
-import React from 'react';
-import { Form, DatePicker, Button } from '@fle-ui/next';
-import { TimePicker } from 'antd';
-
-const { RangePicker } = DatePicker;
-
-const formItemLayout = {
-  labelCol: {
-    xs: { span: 24 },
-    sm: { span: 8 },
-  },
-  wrapperCol: {
-    xs: { span: 24 },
-    sm: { span: 16 },
-  },
-};
-const config = {
-  rules: [
-    { type: 'object' as const, required: true, message: 'Please select time!' },
-  ],
-};
-const rangeConfig = {
-  rules: [
-    { type: 'array' as const, required: true, message: 'Please select time!' },
-  ],
-};
-
-const TimeRelatedForm = () => {
-  const onFinish = (fieldsValue: any) => {
-    // Should format date value before submit.
-    const rangeValue = fieldsValue['range-picker'];
-    const rangeTimeValue = fieldsValue['range-time-picker'];
-    const values = {
-      ...fieldsValue,
-      'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
-      'date-time-picker': fieldsValue['date-time-picker'].format(
-        'YYYY-MM-DD HH:mm:ss',
-      ),
-      'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
-      'range-picker': [
-        rangeValue[0].format('YYYY-MM-DD'),
-        rangeValue[1].format('YYYY-MM-DD'),
-      ],
-      'range-time-picker': [
-        rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
-        rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
-      ],
-      'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
-    };
-    console.log('Received values of form: ', values);
-  };
-
-  return (
-    <Form name="time_related_controls" {...formItemLayout} onFinish={onFinish}>
-      <Form.Item name="date-picker" label="DatePicker" {...config}>
-        <DatePicker />
-      </Form.Item>
-      <Form.Item
-        name="date-time-picker"
-        label="DatePicker[showTime]"
-        {...config}
-      >
-        <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
-      </Form.Item>
-      <Form.Item name="month-picker" label="MonthPicker" {...config}>
-        <DatePicker picker="month" />
-      </Form.Item>
-      <Form.Item name="range-picker" label="RangePicker" {...rangeConfig}>
-        <RangePicker />
-      </Form.Item>
-      <Form.Item
-        name="range-time-picker"
-        label="RangePicker[showTime]"
-        {...rangeConfig}
-      >
-        <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
-      </Form.Item>
-      <Form.Item name="time-picker" label="TimePicker" {...config}>
-        <TimePicker />
-      </Form.Item>
-      <Form.Item
-        wrapperCol={{
-          xs: { span: 24, offset: 0 },
-          sm: { span: 16, offset: 8 },
-        }}
-      >
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default TimeRelatedForm;

package/components/form/demos/validate-static.tsx

@@ -1,147 +0,0 @@
-/**
- * title: 自定义校验
- * desc:
- */
-
-import React from 'react';
-import {
-  Form,
-  Input,
-  DatePicker,
-  Select,
-  Cascader,
-  InputNumber,
-} from '@fle-ui/next';
-import { TimePicker } from 'antd';
-import { SmileOutlined } from '@ant-design/icons';
-
-const { Option } = Select;
-
-const formItemLayout = {
-  labelCol: {
-    xs: { span: 24 },
-    sm: { span: 5 },
-  },
-  wrapperCol: {
-    xs: { span: 24 },
-    sm: { span: 12 },
-  },
-};
-
-const Demo = () => {
-  return (
-    <Form {...formItemLayout}>
-      <Form.Item
-        label="Fail"
-        validateStatus="error"
-        help="Should be combination of numbers & alphabets"
-      >
-        <Input placeholder="unavailable choice" id="error" />
-      </Form.Item>
-
-      <Form.Item label="Warning" validateStatus="warning">
-        <Input placeholder="Warning" id="warning" prefix={<SmileOutlined />} />
-      </Form.Item>
-
-      <Form.Item
-        label="Validating"
-        hasFeedback
-        validateStatus="validating"
-        help="The information is being validated..."
-      >
-        <Input
-          placeholder="I'm the content is being validated"
-          id="validating"
-        />
-      </Form.Item>
-
-      <Form.Item label="Success" hasFeedback validateStatus="success">
-        <Input placeholder="I'm the content" id="success" />
-      </Form.Item>
-
-      <Form.Item label="Warning" hasFeedback validateStatus="warning">
-        <Input placeholder="Warning" id="warning2" />
-      </Form.Item>
-
-      <Form.Item
-        label="Fail"
-        hasFeedback
-        validateStatus="error"
-        help="Should be combination of numbers & alphabets"
-      >
-        <Input placeholder="unavailable choice" id="error2" />
-      </Form.Item>
-
-      <Form.Item label="Success" hasFeedback validateStatus="success">
-        <DatePicker style={{ width: '100%' }} />
-      </Form.Item>
-
-      <Form.Item label="Warning" hasFeedback validateStatus="warning">
-        <TimePicker style={{ width: '100%' }} />
-      </Form.Item>
-
-      <Form.Item label="Error" hasFeedback validateStatus="error">
-        <Select allowClear>
-          <Option value="1">Option 1</Option>
-          <Option value="2">Option 2</Option>
-          <Option value="3">Option 3</Option>
-        </Select>
-      </Form.Item>
-
-      <Form.Item
-        label="Validating"
-        hasFeedback
-        validateStatus="validating"
-        help="The information is being validated..."
-      >
-        <Cascader options={[{ value: 'xx', label: 'xx' }]} allowClear />
-      </Form.Item>
-
-      <Form.Item label="inline" style={{ marginBottom: 0 }}>
-        <Form.Item
-          validateStatus="error"
-          help="Please select the correct date"
-          style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
-        >
-          <DatePicker />
-        </Form.Item>
-        <span
-          style={{
-            display: 'inline-block',
-            width: '24px',
-            lineHeight: '32px',
-            textAlign: 'center',
-          }}
-        >
-          -
-        </span>
-        <Form.Item
-          style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
-        >
-          <DatePicker />
-        </Form.Item>
-      </Form.Item>
-
-      <Form.Item label="Success" hasFeedback validateStatus="success">
-        <InputNumber style={{ width: '100%' }} />
-      </Form.Item>
-
-      <Form.Item label="Success" hasFeedback validateStatus="success">
-        <Input allowClear placeholder="with allowClear" />
-      </Form.Item>
-
-      <Form.Item label="Warning" hasFeedback validateStatus="warning">
-        <Input.Password placeholder="with input password" />
-      </Form.Item>
-
-      <Form.Item label="Error" hasFeedback validateStatus="error">
-        <Input.Password
-          allowClear
-          placeholder="with input password and allowClear"
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default Demo;

package/components/form/demos/without-form-create.tsx

@@ -1,71 +0,0 @@
-/**
- * title: 自行处理表单数据
- * desc: ps: `Form` 具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择自行处理数据。
- */
-
-import React, { useState } from 'react';
-import { Form, InputNumber } from '@fle-ui/next';
-
-type ValidateStatus = Parameters<typeof Form.Item>[0]['validateStatus'];
-type ValueType = string | number;
-
-function validatePrimeNumber(number: ValueType): {
-  validateStatus: ValidateStatus;
-  errorMsg: string | null;
-} {
-  if (number === 11) {
-    return {
-      validateStatus: 'success',
-      errorMsg: null,
-    };
-  }
-  return {
-    validateStatus: 'error',
-    errorMsg: 'The prime between 8 and 12 is 11!',
-  };
-}
-
-const formItemLayout = {
-  labelCol: { span: 7 },
-  wrapperCol: { span: 12 },
-};
-
-const RawForm = () => {
-  const [number, setNumber] = useState<{
-    value: ValueType;
-    validateStatus?: ValidateStatus;
-    errorMsg?: string | null;
-  }>({
-    value: 11,
-  });
-
-  const tips =
-    'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
-
-  const onNumberChange = (value: ValueType) => {
-    setNumber({
-      ...validatePrimeNumber(value),
-      value,
-    });
-  };
-
-  return (
-    <Form>
-      <Form.Item
-        {...formItemLayout}
-        label="Prime between 8 & 12"
-        validateStatus={number.validateStatus}
-        help={number.errorMsg || tips}
-      >
-        <InputNumber
-          min={8}
-          max={12}
-          value={number.value}
-          onChange={onNumberChange}
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default RawForm;