@fle-ui/next 1.0.0-alpha.8 → 1.0.0-alpha.9

package/es/form/demo/form-context.js

@@ -1,158 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
-/**
- * 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 { SmileOutlined, UserOutlined } from '@ant-design/icons';
-var layout = {
-  labelCol: {
-    span: 8
-  },
-  wrapperCol: {
-    span: 16
-  }
-};
-var tailLayout = {
-  wrapperCol: {
-    offset: 8,
-    span: 16
-  }
-}; // reset form fields when modal is form, closed
-
-var useResetFormOnCloseModal = function useResetFormOnCloseModal(_ref) {
-  var form = _ref.form,
-      visible = _ref.visible;
-  var prevVisibleRef = useRef();
-  useEffect(function () {
-    prevVisibleRef.current = visible;
-  }, [visible]);
-  var prevVisible = prevVisibleRef.current;
-  useEffect(function () {
-    if (!visible && prevVisible) {
-      form.resetFields();
-    }
-  }, [visible]);
-};
-
-var ModalForm = function ModalForm(_ref2) {
-  var visible = _ref2.visible,
-      onCancel = _ref2.onCancel;
-
-  var _Form$useForm = Form.useForm(),
-      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
-      form = _Form$useForm2[0];
-
-  useResetFormOnCloseModal({
-    form: form,
-    visible: visible
-  });
-
-  var onOk = function onOk() {
-    form.submit();
-  };
-
-  return /*#__PURE__*/React.createElement(Modal, {
-    title: "Basic Drawer",
-    visible: visible,
-    onOk: onOk,
-    onCancel: onCancel
-  }, /*#__PURE__*/React.createElement(Form, {
-    form: form,
-    layout: "vertical",
-    name: "userForm"
-  }, /*#__PURE__*/React.createElement(Form.Item, {
-    name: "name",
-    label: "User Name",
-    rules: [{
-      required: true
-    }]
-  }, /*#__PURE__*/React.createElement(Input, null)), /*#__PURE__*/React.createElement(Form.Item, {
-    name: "age",
-    label: "User Age",
-    rules: [{
-      required: true
-    }]
-  }, /*#__PURE__*/React.createElement(InputNumber, null))));
-};
-
-var Demo = function Demo() {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
-  var showUserModal = function showUserModal() {
-    setVisible(true);
-  };
-
-  var hideUserModal = function hideUserModal() {
-    setVisible(false);
-  };
-
-  var onFinish = function onFinish(values) {
-    console.log('Finish:', values);
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form.Provider, {
-    onFormFinish: function onFormFinish(name, _ref3) {
-      var values = _ref3.values,
-          forms = _ref3.forms;
-
-      if (name === 'userForm') {
-        var basicForm = forms.basicForm;
-        var users = basicForm.getFieldValue('users') || [];
-        basicForm.setFieldsValue({
-          users: [].concat(_toConsumableArray(users), [values])
-        });
-        setVisible(false);
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Form, _extends({}, layout, {
-    name: "basicForm",
-    onFinish: onFinish
-  }), /*#__PURE__*/React.createElement(Form.Item, {
-    name: "group",
-    label: "Group Name",
-    rules: [{
-      required: true
-    }]
-  }, /*#__PURE__*/React.createElement(Input, null)), /*#__PURE__*/React.createElement(Form.Item, {
-    label: "User List",
-    shouldUpdate: function shouldUpdate(prevValues, curValues) {
-      return prevValues.users !== curValues.users;
-    }
-  }, function (_ref4) {
-    var getFieldValue = _ref4.getFieldValue;
-    var users = getFieldValue('users') || [];
-    return users.length ? /*#__PURE__*/React.createElement("ul", null, users.map(function (user, index) {
-      return /*#__PURE__*/React.createElement("li", {
-        key: index,
-        className: "user"
-      }, /*#__PURE__*/React.createElement(Avatar, {
-        icon: /*#__PURE__*/React.createElement(UserOutlined, null)
-      }), user.name, " - ", user.age);
-    })) : /*#__PURE__*/React.createElement(Typography.Text, {
-      className: "ant-form-text",
-      type: "secondary"
-    }, "( ", /*#__PURE__*/React.createElement(SmileOutlined, null), " No user yet. )");
-  }), /*#__PURE__*/React.createElement(Form.Item, _extends({}, tailLayout), /*#__PURE__*/React.createElement(Button, {
-    htmlType: "submit",
-    type: "primary"
-  }, "Submit"), /*#__PURE__*/React.createElement(Button, {
-    htmlType: "button",
-    style: {
-      margin: '0 8px'
-    },
-    onClick: showUserModal
-  }, "Add User"))), /*#__PURE__*/React.createElement(ModalForm, {
-    visible: visible,
-    onCancel: hideUserModal
-  })));
-};
-
-export default Demo;

package/es/form/demo/form-in-modal/index.d.ts

@@ -1,7 +0,0 @@
-/**
- * title: 弹出层中的新建表单
- * desc: 当用户访问一个展示了某个列表的页面，想新建一项但又不想跳转页面时，可以用 Modal 弹出一个表单，用户填写必要信息后创建新的项。
- */
-import './index.less';
-declare const CollectionsPage: () => JSX.Element;
-export default CollectionsPage;

package/es/form/demo/form-in-modal/index.js

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

package/es/form/demo/global-state.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 表单数据存储于上层组件
- * desc:
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/form/demo/global-state.js

@@ -1,49 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
-/**
- * title: 表单数据存储于上层组件
- * desc:
- */
-import React, { useState } from 'react';
-import { Form, Input } from '@fle-ui/next';
-
-var CustomizedForm = function CustomizedForm(_ref) {
-  var onChange = _ref.onChange,
-      fields = _ref.fields;
-  return /*#__PURE__*/React.createElement(Form, {
-    name: "global_state",
-    layout: "inline",
-    fields: fields,
-    onFieldsChange: function onFieldsChange(_, allFields) {
-      onChange(allFields);
-    }
-  }, /*#__PURE__*/React.createElement(Form.Item, {
-    name: "username",
-    label: "Username",
-    rules: [{
-      required: true,
-      message: 'Username is required!'
-    }]
-  }, /*#__PURE__*/React.createElement(Input, null)));
-};
-
-var Demo = function Demo() {
-  var _useState = useState([{
-    name: ['username'],
-    value: 'Ant Design'
-  }]),
-      _useState2 = _slicedToArray(_useState, 2),
-      fields = _useState2[0],
-      setFields = _useState2[1];
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomizedForm, {
-    fields: fields,
-    onChange: function onChange(newFields) {
-      setFields(newFields);
-    }
-  }), /*#__PURE__*/React.createElement("pre", {
-    className: "language-bash"
-  }, JSON.stringify(fields, null, 2)));
-};
-
-export default Demo;

package/es/form/demo/inline-login.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 内联登录栏
- * desc: 内联登录栏，常用在顶部导航栏中。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/form/demo/inline-login.js

@@ -1,71 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
-/**
- * title: 内联登录栏
- * desc: 内联登录栏，常用在顶部导航栏中。
- */
-import React, { useState, useEffect } from 'react';
-import { Form, Input, Button } from '@fle-ui/next';
-import { UserOutlined, LockOutlined } from '@ant-design/icons';
-
-var Demo = function Demo() {
-  var _Form$useForm = Form.useForm(),
-      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
-      form = _Form$useForm2[0];
-
-  var _useState = useState({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      forceUpdate = _useState2[1]; // To disable submit button at the beginning.
-
-
-  useEffect(function () {
-    forceUpdate({});
-  }, []);
-
-  var onFinish = function onFinish(values) {
-    console.log('Finish:', values);
-  };
-
-  return /*#__PURE__*/React.createElement(Form, {
-    form: form,
-    name: "horizontal_login",
-    layout: "inline",
-    onFinish: onFinish
-  }, /*#__PURE__*/React.createElement(Form.Item, {
-    name: "username",
-    rules: [{
-      required: true,
-      message: 'Please input your username!'
-    }]
-  }, /*#__PURE__*/React.createElement(Input, {
-    prefix: /*#__PURE__*/React.createElement(UserOutlined, {
-      className: "site-form-item-icon"
-    }),
-    placeholder: "Username"
-  })), /*#__PURE__*/React.createElement(Form.Item, {
-    name: "password",
-    rules: [{
-      required: true,
-      message: 'Please input your password!'
-    }]
-  }, /*#__PURE__*/React.createElement(Input, {
-    prefix: /*#__PURE__*/React.createElement(LockOutlined, {
-      className: "site-form-item-icon"
-    }),
-    type: "password",
-    placeholder: "Password"
-  })), /*#__PURE__*/React.createElement(Form.Item, {
-    shouldUpdate: true
-  }, function () {
-    return /*#__PURE__*/React.createElement(Button, {
-      type: "primary",
-      htmlType: "submit",
-      disabled: !form.isFieldsTouched(true) || !!form.getFieldsError().filter(function (_ref) {
-        var errors = _ref.errors;
-        return errors.length;
-      }).length
-    }, "Log in");
-  }));
-};
-
-export default Demo;

package/es/form/demo/layout.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 表单布局
- * desc: 表单有三种布局。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/form/demo/layout.js

@@ -1,71 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
-/**
- * title: 表单布局
- * desc: 表单有三种布局。
- */
-import React, { useState } from 'react';
-import { Form, Input, Button, Radio } from '@fle-ui/next';
-
-var Demo = function Demo() {
-  var _Form$useForm = Form.useForm(),
-      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
-      form = _Form$useForm2[0];
-
-  var _useState = useState('horizontal'),
-      _useState2 = _slicedToArray(_useState, 2),
-      formLayout = _useState2[0],
-      setFormLayout = _useState2[1];
-
-  var onFormLayoutChange = function onFormLayoutChange(_ref) {
-    var layout = _ref.layout;
-    setFormLayout(layout);
-  };
-
-  var formItemLayout = formLayout === 'horizontal' ? {
-    labelCol: {
-      span: 4
-    },
-    wrapperCol: {
-      span: 14
-    }
-  } : null;
-  var buttonItemLayout = formLayout === 'horizontal' ? {
-    wrapperCol: {
-      span: 14,
-      offset: 4
-    }
-  } : null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, _extends({}, formItemLayout, {
-    layout: formLayout,
-    form: form,
-    initialValues: {
-      layout: formLayout
-    },
-    onValuesChange: onFormLayoutChange
-  }), /*#__PURE__*/React.createElement(Form.Item, {
-    label: "Form Layout",
-    name: "layout"
-  }, /*#__PURE__*/React.createElement(Radio.Group, {
-    value: formLayout
-  }, /*#__PURE__*/React.createElement(Radio.Button, {
-    value: "horizontal"
-  }, "Horizontal"), /*#__PURE__*/React.createElement(Radio.Button, {
-    value: "vertical"
-  }, "Vertical"), /*#__PURE__*/React.createElement(Radio.Button, {
-    value: "inline"
-  }, "Inline"))), /*#__PURE__*/React.createElement(Form.Item, {
-    label: "Field A"
-  }, /*#__PURE__*/React.createElement(Input, {
-    placeholder: "input placeholder"
-  })), /*#__PURE__*/React.createElement(Form.Item, {
-    label: "Field B"
-  }, /*#__PURE__*/React.createElement(Input, {
-    placeholder: "input placeholder"
-  })), /*#__PURE__*/React.createElement(Form.Item, _extends({}, buttonItemLayout), /*#__PURE__*/React.createElement(Button, {
-    type: "primary"
-  }, "Submit"))));
-};
-
-export default Demo;

package/es/form/demo/nest-messages.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 嵌套结构与校验信息
- * desc: `name` 属性支持嵌套数据结构。通过 `validateMessages` 或 `message` 自定义校验信息模板，模板内容可参考[此处](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts)。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/form/demo/nest-messages.js

@@ -1,76 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-/**
- * title: 嵌套结构与校验信息
- * desc: `name` 属性支持嵌套数据结构。通过 `validateMessages` 或 `message` 自定义校验信息模板，模板内容可参考[此处](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts)。
- */
-import React from 'react';
-import { Form, Input, InputNumber, Button } from '@fle-ui/next';
-var layout = {
-  labelCol: {
-    span: 8
-  },
-  wrapperCol: {
-    span: 16
-  }
-};
-/* eslint-disable no-template-curly-in-string */
-
-var validateMessages = {
-  required: '${label} is required!',
-  types: {
-    email: '${label} is not a valid email!',
-    number: '${label} is not a valid number!'
-  },
-  number: {
-    range: '${label} must be between ${min} and ${max}'
-  }
-};
-/* eslint-enable no-template-curly-in-string */
-
-var Demo = function Demo() {
-  var onFinish = function onFinish(values) {
-    console.log(values);
-  };
-
-  return /*#__PURE__*/React.createElement(Form, _extends({}, layout, {
-    name: "nest-messages",
-    onFinish: onFinish,
-    validateMessages: validateMessages
-  }), /*#__PURE__*/React.createElement(Form.Item, {
-    name: ['user', 'name'],
-    label: "Name",
-    rules: [{
-      required: true
-    }]
-  }, /*#__PURE__*/React.createElement(Input, null)), /*#__PURE__*/React.createElement(Form.Item, {
-    name: ['user', 'email'],
-    label: "Email",
-    rules: [{
-      type: 'email'
-    }]
-  }, /*#__PURE__*/React.createElement(Input, null)), /*#__PURE__*/React.createElement(Form.Item, {
-    name: ['user', 'age'],
-    label: "Age",
-    rules: [{
-      type: 'number',
-      min: 0,
-      max: 99
-    }]
-  }, /*#__PURE__*/React.createElement(InputNumber, null)), /*#__PURE__*/React.createElement(Form.Item, {
-    name: ['user', 'website'],
-    label: "Website"
-  }, /*#__PURE__*/React.createElement(Input, null)), /*#__PURE__*/React.createElement(Form.Item, {
-    name: ['user', 'introduction'],
-    label: "Introduction"
-  }, /*#__PURE__*/React.createElement(Input.TextArea, null)), /*#__PURE__*/React.createElement(Form.Item, {
-    wrapperCol: _extends(_extends({}, layout.wrapperCol), {
-      offset: 8
-    })
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
-    htmlType: "submit"
-  }, "Submit")));
-};
-
-export default Demo;

package/es/form/demo/normal-login.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 登录框
- * desc: 普通的登录框，可以容纳更多的元素。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/form/demo/normal-login.js

@@ -1,60 +0,0 @@
-/**
- * title: 登录框
- * desc: 普通的登录框，可以容纳更多的元素。
- */
-import React from 'react';
-import { Form, Input, Button, Checkbox } from '@fle-ui/next';
-import { UserOutlined, LockOutlined } from '@ant-design/icons';
-
-var Demo = function Demo() {
-  var onFinish = function onFinish(values) {
-    console.log('Received values of form: ', values);
-  };
-
-  return /*#__PURE__*/React.createElement(Form, {
-    name: "normal_login",
-    className: "login-form",
-    initialValues: {
-      remember: true
-    },
-    onFinish: onFinish
-  }, /*#__PURE__*/React.createElement(Form.Item, {
-    name: "username",
-    rules: [{
-      required: true,
-      message: 'Please input your Username!'
-    }]
-  }, /*#__PURE__*/React.createElement(Input, {
-    prefix: /*#__PURE__*/React.createElement(UserOutlined, {
-      className: "site-form-item-icon"
-    }),
-    placeholder: "Username"
-  })), /*#__PURE__*/React.createElement(Form.Item, {
-    name: "password",
-    rules: [{
-      required: true,
-      message: 'Please input your Password!'
-    }]
-  }, /*#__PURE__*/React.createElement(Input, {
-    prefix: /*#__PURE__*/React.createElement(LockOutlined, {
-      className: "site-form-item-icon"
-    }),
-    type: "password",
-    placeholder: "Password"
-  })), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Form.Item, {
-    name: "remember",
-    valuePropName: "checked",
-    noStyle: true
-  }, /*#__PURE__*/React.createElement(Checkbox, null, "Remember me")), /*#__PURE__*/React.createElement("a", {
-    className: "login-form-forgot",
-    href: ""
-  }, "Forgot password")), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
-    htmlType: "submit",
-    className: "login-form-button"
-  }, "Log in"), "Or ", /*#__PURE__*/React.createElement("a", {
-    href: ""
-  }, "register now!")));
-};
-
-export default Demo;

package/es/form/demo/register.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 注册新用户
- * desc: 用户填写必须的信息以注册新用户。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;