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

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

@@ -1,67 +0,0 @@
-/**
- * title: 动态增减嵌套字段
- * desc: 嵌套表单字段需要对 `field` 进行拓展，将 `field.name` 和 `field.fieldKey` 应用于控制字段。
- */
-
-import React from 'react';
-import { Form, Input, Button, Space } from '@fle-ui/next';
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-
-const Demo = () => {
-  const onFinish = (values: any) => {
-    console.log('Received values of form:', values);
-  };
-
-  return (
-    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
-      <Form.List name="users">
-        {(fields, { add, remove }) => (
-          <>
-            {fields.map(({ key, name, fieldKey, ...restField }) => (
-              <Space
-                key={key}
-                style={{ display: 'flex', marginBottom: 8 }}
-                align="baseline"
-              >
-                <Form.Item
-                  {...restField}
-                  name={[name, 'first']}
-                  fieldKey={[fieldKey, 'first']}
-                  rules={[{ required: true, message: 'Missing first name' }]}
-                >
-                  <Input placeholder="First Name" />
-                </Form.Item>
-                <Form.Item
-                  {...restField}
-                  name={[name, 'last']}
-                  fieldKey={[fieldKey, 'last']}
-                  rules={[{ required: true, message: 'Missing last name' }]}
-                >
-                  <Input placeholder="Last Name" />
-                </Form.Item>
-                <MinusCircleOutlined onClick={() => remove(name)} />
-              </Space>
-            ))}
-            <Form.Item>
-              <Button
-                type="dashed"
-                onClick={() => add()}
-                block
-                icon={<PlusOutlined />}
-              >
-                Add field
-              </Button>
-            </Form.Item>
-          </>
-        )}
-      </Form.List>
-      <Form.Item>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default Demo;

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

@@ -1,81 +0,0 @@
-/**
- * title: 动态校验规则
- * desc: 根据不同情况执行不同的校验规则。
- */
-
-import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Checkbox } from '@fle-ui/next';
-
-const formItemLayout = {
-  labelCol: { span: 4 },
-  wrapperCol: { span: 8 },
-};
-const formTailLayout = {
-  labelCol: { span: 4 },
-  wrapperCol: { span: 8, offset: 4 },
-};
-
-const DynamicRule = () => {
-  const [form] = Form.useForm();
-  const [checkNick, setCheckNick] = useState(false);
-
-  useEffect(() => {
-    form.validateFields(['nickname']);
-  }, [checkNick]);
-
-  const onCheckboxChange = (e: { target: { checked: boolean } }) => {
-    setCheckNick(e.target.checked);
-  };
-
-  const onCheck = async () => {
-    try {
-      const values = await form.validateFields();
-      console.log('Success:', values);
-    } catch (errorInfo) {
-      console.log('Failed:', errorInfo);
-    }
-  };
-
-  return (
-    <Form form={form} name="dynamic_rule">
-      <Form.Item
-        {...formItemLayout}
-        name="username"
-        label="Name"
-        rules={[
-          {
-            required: true,
-            message: 'Please input your name',
-          },
-        ]}
-      >
-        <Input placeholder="Please input your name" />
-      </Form.Item>
-      <Form.Item
-        {...formItemLayout}
-        name="nickname"
-        label="Nickname"
-        rules={[
-          {
-            required: checkNick,
-            message: 'Please input your nickname',
-          },
-        ]}
-      >
-        <Input placeholder="Please input your nickname" />
-      </Form.Item>
-      <Form.Item {...formTailLayout}>
-        <Checkbox checked={checkNick} onChange={onCheckboxChange}>
-          Nickname is required
-        </Checkbox>
-      </Form.Item>
-      <Form.Item {...formTailLayout}>
-        <Button type="primary" onClick={onCheck}>
-          Check
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default DynamicRule;

package/components/form/demos/form-context.tsx

@@ -1,168 +0,0 @@
-/**
- * title: 多表单联动
- * desc: 通过 `Form.Provider` 在表单间处理数据。本例子中，Modal 的确认按钮在 Form 之外，通过 `form.submit` 方法调用表单提交功能。反之，则推荐使用 `<Button htmlType="submit" />` 调用 web 原生提交逻辑。
- */
-
-import React, { useState, useEffect, useRef } from 'react';
-import {
-  Form,
-  Input,
-  InputNumber,
-  Modal,
-  Button,
-  Avatar,
-  Typography,
-} from '@fle-ui/next';
-import type { FormInstance } from '@fle-ui/next';
-import { SmileOutlined, UserOutlined } from '@ant-design/icons';
-
-const layout = {
-  labelCol: { span: 8 },
-  wrapperCol: { span: 16 },
-};
-const tailLayout = {
-  wrapperCol: { offset: 8, span: 16 },
-};
-
-interface UserType {
-  name: string;
-  age: string;
-}
-
-interface ModalFormProps {
-  visible: boolean;
-  onCancel: () => void;
-}
-
-// reset form fields when modal is form, closed
-const useResetFormOnCloseModal = ({
-  form,
-  visible,
-}: {
-  form: FormInstance;
-  visible: boolean;
-}) => {
-  const prevVisibleRef = useRef<boolean>();
-  useEffect(() => {
-    prevVisibleRef.current = visible;
-  }, [visible]);
-  const prevVisible = prevVisibleRef.current;
-
-  useEffect(() => {
-    if (!visible && prevVisible) {
-      form.resetFields();
-    }
-  }, [visible]);
-};
-
-const ModalForm: React.FC<ModalFormProps> = ({ visible, onCancel }) => {
-  const [form] = Form.useForm();
-
-  useResetFormOnCloseModal({
-    form,
-    visible,
-  });
-
-  const onOk = () => {
-    form.submit();
-  };
-
-  return (
-    <Modal
-      title="Basic Drawer"
-      visible={visible}
-      onOk={onOk}
-      onCancel={onCancel}
-    >
-      <Form form={form} layout="vertical" name="userForm">
-        <Form.Item name="name" label="User Name" rules={[{ required: true }]}>
-          <Input />
-        </Form.Item>
-        <Form.Item name="age" label="User Age" rules={[{ required: true }]}>
-          <InputNumber />
-        </Form.Item>
-      </Form>
-    </Modal>
-  );
-};
-
-const Demo = () => {
-  const [visible, setVisible] = useState(false);
-
-  const showUserModal = () => {
-    setVisible(true);
-  };
-
-  const hideUserModal = () => {
-    setVisible(false);
-  };
-
-  const onFinish = (values: any) => {
-    console.log('Finish:', values);
-  };
-
-  return (
-    <>
-      <Form.Provider
-        onFormFinish={(name, { values, forms }) => {
-          if (name === 'userForm') {
-            const { basicForm } = forms;
-            const users = basicForm.getFieldValue('users') || [];
-            basicForm.setFieldsValue({ users: [...users, values] });
-            setVisible(false);
-          }
-        }}
-      >
-        <Form {...layout} name="basicForm" onFinish={onFinish}>
-          <Form.Item
-            name="group"
-            label="Group Name"
-            rules={[{ required: true }]}
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label="User List"
-            shouldUpdate={(prevValues, curValues) =>
-              prevValues.users !== curValues.users
-            }
-          >
-            {({ getFieldValue }) => {
-              const users: UserType[] = getFieldValue('users') || [];
-              return users.length ? (
-                <ul>
-                  {users.map((user, index) => (
-                    <li key={index} className="user">
-                      <Avatar icon={<UserOutlined />} />
-                      {user.name} - {user.age}
-                    </li>
-                  ))}
-                </ul>
-              ) : (
-                <Typography.Text className="ant-form-text" type="secondary">
-                  ( <SmileOutlined /> No user yet. )
-                </Typography.Text>
-              );
-            }}
-          </Form.Item>
-          <Form.Item {...tailLayout}>
-            <Button htmlType="submit" type="primary">
-              Submit
-            </Button>
-            <Button
-              htmlType="button"
-              style={{ margin: '0 8px' }}
-              onClick={showUserModal}
-            >
-              Add User
-            </Button>
-          </Form.Item>
-        </Form>
-
-        <ModalForm visible={visible} onCancel={hideUserModal} />
-      </Form.Provider>
-    </>
-  );
-};
-
-export default Demo;

package/components/form/demos/form-in-modal/index.less

@@ -1,3 +0,0 @@
-.collection-create-form_last-form-item {
-  margin-bottom: 0;
-}

package/components/form/demos/form-in-modal/index.tsx

@@ -1,112 +0,0 @@
-/**
- * title: 弹出层中的新建表单
- * desc: 当用户访问一个展示了某个列表的页面，想新建一项但又不想跳转页面时，可以用 Modal 弹出一个表单，用户填写必要信息后创建新的项。
- */
-
-import React, { useState } from 'react';
-import { Button, Modal, Form, Input, Radio } from '@fle-ui/next';
-
-import './index.less';
-
-interface Values {
-  title: string;
-  description: string;
-  modifier: string;
-}
-
-interface CollectionCreateFormProps {
-  visible: boolean;
-  onCreate: (values: Values) => void;
-  onCancel: () => void;
-}
-
-const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
-  visible,
-  onCreate,
-  onCancel,
-}) => {
-  const [form] = Form.useForm();
-  return (
-    <Modal
-      visible={visible}
-      title="Create a new collection"
-      okText="Create"
-      cancelText="Cancel"
-      onCancel={onCancel}
-      onOk={() => {
-        form
-          .validateFields()
-          .then((values) => {
-            form.resetFields();
-            onCreate(values);
-          })
-          .catch((info) => {
-            console.log('Validate Failed:', info);
-          });
-      }}
-    >
-      <Form
-        form={form}
-        layout="vertical"
-        name="form_in_modal"
-        initialValues={{ modifier: 'public' }}
-      >
-        <Form.Item
-          name="title"
-          label="Title"
-          rules={[
-            {
-              required: true,
-              message: 'Please input the title of collection!',
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item name="description" label="Description">
-          <Input type="textarea" />
-        </Form.Item>
-        <Form.Item
-          name="modifier"
-          className="collection-create-form_last-form-item"
-        >
-          <Radio.Group>
-            <Radio value="public">Public</Radio>
-            <Radio value="private">Private</Radio>
-          </Radio.Group>
-        </Form.Item>
-      </Form>
-    </Modal>
-  );
-};
-
-const CollectionsPage = () => {
-  const [visible, setVisible] = useState(false);
-
-  const onCreate = (values: any) => {
-    console.log('Received values of form: ', values);
-    setVisible(false);
-  };
-
-  return (
-    <div>
-      <Button
-        type="primary"
-        onClick={() => {
-          setVisible(true);
-        }}
-      >
-        New Collection
-      </Button>
-      <CollectionCreateForm
-        visible={visible}
-        onCreate={onCreate}
-        onCancel={() => {
-          setVisible(false);
-        }}
-      />
-    </div>
-  );
-};
-
-export default CollectionsPage;

package/components/form/demos/global-state.tsx

@@ -1,62 +0,0 @@
-/**
- * title: 表单数据存储于上层组件
- * desc:
- */
-
-import React, { useState } from 'react';
-import { Form, Input } from '@fle-ui/next';
-
-interface FieldData {
-  name: string | number | (string | number)[];
-  value?: any;
-  touched?: boolean;
-  validating?: boolean;
-  errors?: string[];
-}
-
-interface CustomizedFormProps {
-  onChange: (fields: FieldData[]) => void;
-  fields: FieldData[];
-}
-
-const CustomizedForm: React.FC<CustomizedFormProps> = ({
-  onChange,
-  fields,
-}) => (
-  <Form
-    name="global_state"
-    layout="inline"
-    fields={fields}
-    onFieldsChange={(_, allFields) => {
-      onChange(allFields);
-    }}
-  >
-    <Form.Item
-      name="username"
-      label="Username"
-      rules={[{ required: true, message: 'Username is required!' }]}
-    >
-      <Input />
-    </Form.Item>
-  </Form>
-);
-
-const Demo = () => {
-  const [fields, setFields] = useState<FieldData[]>([
-    { name: ['username'], value: 'Ant Design' },
-  ]);
-
-  return (
-    <>
-      <CustomizedForm
-        fields={fields}
-        onChange={(newFields) => {
-          setFields(newFields);
-        }}
-      />
-      <pre className="language-bash">{JSON.stringify(fields, null, 2)}</pre>
-    </>
-  );
-};
-
-export default Demo;