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

package/components/form/demos/control-ref.tsx

@@ -1,106 +0,0 @@
-/**
- * title: 表单方法调用（Class component）
- * desc: 我们推荐使用 `Form.useForm` 创建表单数据域进行控制。如果是在 class component 下，你也可以通过 `ref` 获取数据域。
- */
-
-import React from 'react';
-import { Form, Input, Button, Select, FormInstance } from '@fle-ui/next';
-
-const { Option } = Select;
-
-const layout = {
-  labelCol: { span: 8 },
-  wrapperCol: { span: 16 },
-};
-const tailLayout = {
-  wrapperCol: { offset: 8, span: 16 },
-};
-
-class Demo extends React.Component {
-  formRef = React.createRef<FormInstance>();
-
-  onGenderChange = (value: string) => {
-    switch (value) {
-      case 'male':
-        this.formRef.current!.setFieldsValue({ note: 'Hi, man!' });
-        return;
-      case 'female':
-        this.formRef.current!.setFieldsValue({ note: 'Hi, lady!' });
-        return;
-      case 'other':
-        this.formRef.current!.setFieldsValue({ note: 'Hi there!' });
-    }
-  };
-
-  onFinish = (values: any) => {
-    console.log(values);
-  };
-
-  onReset = () => {
-    this.formRef.current!.resetFields();
-  };
-
-  onFill = () => {
-    this.formRef.current!.setFieldsValue({
-      note: 'Hello world!',
-      gender: 'male',
-    });
-  };
-
-  render() {
-    return (
-      <Form
-        {...layout}
-        ref={this.formRef}
-        name="control-ref"
-        onFinish={this.onFinish}
-      >
-        <Form.Item name="note" label="Note" rules={[{ required: true }]}>
-          <Input />
-        </Form.Item>
-        <Form.Item name="gender" label="Gender" rules={[{ required: true }]}>
-          <Select
-            placeholder="Select a option and change input text above"
-            onChange={this.onGenderChange}
-            allowClear
-          >
-            <Option value="male">male</Option>
-            <Option value="female">female</Option>
-            <Option value="other">other</Option>
-          </Select>
-        </Form.Item>
-        <Form.Item
-          noStyle
-          shouldUpdate={(prevValues, currentValues) =>
-            prevValues.gender !== currentValues.gender
-          }
-        >
-          {({ getFieldValue }) =>
-            getFieldValue('gender') === 'other' ? (
-              <Form.Item
-                name="customizeGender"
-                label="Customize Gender"
-                rules={[{ required: true }]}
-              >
-                <Input />
-              </Form.Item>
-            ) : null
-          }
-        </Form.Item>
-        <Form.Item {...tailLayout}>
-          <Button type="primary" htmlType="submit">
-            Submit
-          </Button>
-          <Button htmlType="button" onClick={this.onReset}>
-            Reset
-          </Button>
-          <Button type="link" htmlType="button" onClick={this.onFill}>
-            Fill form
-          </Button>
-        </Form.Item>
-      </Form>
-    );
-  }
-}
-
-export default Demo;

package/components/form/demos/customized-form-controls.tsx

@@ -1,108 +0,0 @@
-/**
- * title: 自定义表单控件
- * desc:
- */
-
-import React, { useState } from 'react';
-import { Form, Input, Select, Button } from '@fle-ui/next';
-
-const { Option } = Select;
-
-type Currency = 'rmb' | 'dollar';
-
-interface PriceValue {
-  number?: number;
-  currency?: Currency;
-}
-
-interface PriceInputProps {
-  value?: PriceValue;
-  onChange?: (value: PriceValue) => void;
-}
-
-const PriceInput: React.FC<PriceInputProps> = ({ value = {}, onChange }) => {
-  const [number, setNumber] = useState(0);
-  const [currency, setCurrency] = useState<Currency>('rmb');
-
-  const triggerChange = (changedValue: {
-    number?: number;
-    currency?: Currency;
-  }) => {
-    onChange?.({ number, currency, ...value, ...changedValue });
-  };
-
-  const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newNumber = parseInt(e.target.value || '0', 10);
-    if (Number.isNaN(number)) {
-      return;
-    }
-    if (!('number' in value)) {
-      setNumber(newNumber);
-    }
-    triggerChange({ number: newNumber });
-  };
-
-  const onCurrencyChange = (newCurrency: Currency) => {
-    if (!('currency' in value)) {
-      setCurrency(newCurrency);
-    }
-    triggerChange({ currency: newCurrency });
-  };
-
-  return (
-    <span>
-      <Input
-        type="text"
-        value={value.number || number}
-        onChange={onNumberChange}
-        style={{ width: 100 }}
-      />
-      <Select
-        value={value.currency || currency}
-        style={{ width: 80, margin: '0 8px' }}
-        onChange={onCurrencyChange}
-      >
-        <Option value="rmb">RMB</Option>
-        <Option value="dollar">Dollar</Option>
-      </Select>
-    </span>
-  );
-};
-
-const Demo = () => {
-  const onFinish = (values: any) => {
-    console.log('Received values from form: ', values);
-  };
-
-  const checkPrice = (_: any, value: { number: number }) => {
-    if (value.number > 0) {
-      return Promise.resolve();
-    }
-    return Promise.reject(new Error('Price must be greater than zero!'));
-  };
-
-  return (
-    <Form
-      name="customized_form_controls"
-      layout="inline"
-      onFinish={onFinish}
-      initialValues={{
-        price: {
-          number: 0,
-          currency: 'rmb',
-        },
-      }}
-    >
-      <Form.Item name="price" label="Price" rules={[{ validator: checkPrice }]}>
-        <PriceInput />
-      </Form.Item>
-      <Form.Item>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default Demo;

package/components/form/demos/dynamic-form-item.tsx

@@ -1,118 +0,0 @@
-/**
- * title: 动态增减表单项
- * desc: 动态增加、减少表单项。`add` 方法参数可用于设置初始值。
- */
-
-import React from 'react';
-import { Form, Input, Button } from '@fle-ui/next';
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-
-const formItemLayout = {
-  labelCol: {
-    xs: { span: 24 },
-    sm: { span: 4 },
-  },
-  wrapperCol: {
-    xs: { span: 24 },
-    sm: { span: 20 },
-  },
-};
-const formItemLayoutWithOutLabel = {
-  wrapperCol: {
-    xs: { span: 24, offset: 0 },
-    sm: { span: 20, offset: 4 },
-  },
-};
-
-const Demo = () => {
-  const onFinish = (values: any) => {
-    console.log('Received values of form:', values);
-  };
-
-  return (
-    <Form
-      name="dynamic_form_item"
-      {...formItemLayoutWithOutLabel}
-      onFinish={onFinish}
-    >
-      <Form.List
-        name="names"
-        rules={[
-          {
-            validator: async (_, names) => {
-              if (!names || names.length < 2) {
-                return Promise.reject(new Error('At least 2 passengers'));
-              }
-            },
-          },
-        ]}
-      >
-        {(fields, { add, remove }, { errors }) => (
-          <>
-            {fields.map((field, index) => (
-              <Form.Item
-                {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
-                label={index === 0 ? 'Passengers' : ''}
-                required={false}
-                key={field.key}
-              >
-                <Form.Item
-                  {...field}
-                  validateTrigger={['onChange', 'onBlur']}
-                  rules={[
-                    {
-                      required: true,
-                      whitespace: true,
-                      message:
-                        "Please input passenger's name or delete this field.",
-                    },
-                  ]}
-                  noStyle
-                >
-                  <Input
-                    placeholder="passenger name"
-                    style={{ width: '60%' }}
-                  />
-                </Form.Item>
-                {fields.length > 1 ? (
-                  <MinusCircleOutlined
-                    className="dynamic-delete-button"
-                    onClick={() => remove(field.name)}
-                  />
-                ) : null}
-              </Form.Item>
-            ))}
-            <Form.Item>
-              <Button
-                type="dashed"
-                onClick={() => add()}
-                style={{ width: '60%' }}
-                icon={<PlusOutlined />}
-              >
-                Add field
-              </Button>
-              <Button
-                type="dashed"
-                onClick={() => {
-                  add('The head item', 0);
-                }}
-                style={{ width: '60%', marginTop: '20px' }}
-                icon={<PlusOutlined />}
-              >
-                Add field at head
-              </Button>
-              <Form.ErrorList errors={errors} />
-            </Form.Item>
-          </>
-        )}
-      </Form.List>
-      <Form.Item>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default Demo;

package/components/form/demos/dynamic-form-items-complex.tsx

@@ -1,118 +0,0 @@
-/**
- * title: 复杂的动态增减表单项
- * desc: 这个例子演示了一个表单中包含多个表单控件的情况。
- */
-
-import React from 'react';
-import { Form, Input, Button, Space, Select } from '@fle-ui/next';
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-
-const { Option } = Select;
-
-const areas = [
-  { label: 'Beijing', value: 'Beijing' },
-  { label: 'Shanghai', value: 'Shanghai' },
-];
-
-const sights: any = {
-  Beijing: ['Tiananmen', 'Great Wall'],
-  Shanghai: ['Oriental Pearl', 'The Bund'],
-};
-
-const Demo = () => {
-  const [form] = Form.useForm();
-
-  const onFinish = (values: any) => {
-    console.log('Received values of form:', values);
-  };
-
-  const handleChange = () => {
-    form.setFieldsValue({ sights: [] });
-  };
-
-  return (
-    <Form
-      form={form}
-      name="dynamic_form_nest_item"
-      onFinish={onFinish}
-      autoComplete="off"
-    >
-      <Form.Item
-        name="area"
-        label="Area"
-        rules={[{ required: true, message: 'Missing area' }]}
-      >
-        <Select options={areas} onChange={handleChange} />
-      </Form.Item>
-      <Form.List name="sights">
-        {(fields, { add, remove }) => (
-          <>
-            {fields.map((field) => (
-              <Space key={field.key} align="baseline">
-                <Form.Item
-                  noStyle
-                  shouldUpdate={(prevValues, curValues) =>
-                    prevValues.area !== curValues.area ||
-                    prevValues.sights !== curValues.sights
-                  }
-                >
-                  {() => (
-                    <Form.Item
-                      {...field}
-                      label="Sight"
-                      name={[field.name, 'sight']}
-                      fieldKey={[field.fieldKey, 'sight']}
-                      rules={[{ required: true, message: 'Missing sight' }]}
-                    >
-                      <Select
-                        disabled={!form.getFieldValue('area')}
-                        style={{ width: 130 }}
-                      >
-                        {(sights[form.getFieldValue('area')] || []).map(
-                          (item: any) => (
-                            <Option key={item} value={item}>
-                              {item}
-                            </Option>
-                          ),
-                        )}
-                      </Select>
-                    </Form.Item>
-                  )}
-                </Form.Item>
-                <Form.Item
-                  {...field}
-                  label="Price"
-                  name={[field.name, 'price']}
-                  fieldKey={[field.fieldKey, 'price']}
-                  rules={[{ required: true, message: 'Missing price' }]}
-                >
-                  <Input />
-                </Form.Item>
-
-                <MinusCircleOutlined onClick={() => remove(field.name)} />
-              </Space>
-            ))}
-
-            <Form.Item>
-              <Button
-                type="dashed"
-                onClick={() => add()}
-                block
-                icon={<PlusOutlined />}
-              >
-                Add sights
-              </Button>
-            </Form.Item>
-          </>
-        )}
-      </Form.List>
-      <Form.Item>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default Demo;