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

package/es/form/demo/customized-form-controls.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 自定义表单控件
- * desc:
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/form/demo/customized-form-controls.js

@@ -1,116 +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, Select, Button } from '@fle-ui/next';
-var Option = Select.Option;
-
-var PriceInput = function PriceInput(_ref) {
-  var _ref$value = _ref.value,
-      value = _ref$value === void 0 ? {} : _ref$value,
-      onChange = _ref.onChange;
-
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      number = _useState2[0],
-      setNumber = _useState2[1];
-
-  var _useState3 = useState('rmb'),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currency = _useState4[0],
-      setCurrency = _useState4[1];
-
-  var triggerChange = function triggerChange(changedValue) {
-    onChange === null || onChange === void 0 ? void 0 : onChange(_extends(_extends({
-      number: number,
-      currency: currency
-    }, value), changedValue));
-  };
-
-  var onNumberChange = function onNumberChange(e) {
-    var newNumber = parseInt(e.target.value || '0', 10);
-
-    if (Number.isNaN(number)) {
-      return;
-    }
-
-    if (!('number' in value)) {
-      setNumber(newNumber);
-    }
-
-    triggerChange({
-      number: newNumber
-    });
-  };
-
-  var onCurrencyChange = function onCurrencyChange(newCurrency) {
-    if (!('currency' in value)) {
-      setCurrency(newCurrency);
-    }
-
-    triggerChange({
-      currency: newCurrency
-    });
-  };
-
-  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Input, {
-    type: "text",
-    value: value.number || number,
-    onChange: onNumberChange,
-    style: {
-      width: 100
-    }
-  }), /*#__PURE__*/React.createElement(Select, {
-    value: value.currency || currency,
-    style: {
-      width: 80,
-      margin: '0 8px'
-    },
-    onChange: onCurrencyChange
-  }, /*#__PURE__*/React.createElement(Option, {
-    value: "rmb"
-  }, "RMB"), /*#__PURE__*/React.createElement(Option, {
-    value: "dollar"
-  }, "Dollar")));
-};
-
-var Demo = function Demo() {
-  var onFinish = function onFinish(values) {
-    console.log('Received values from form: ', values);
-  };
-
-  var checkPrice = function checkPrice(_, value) {
-    if (value.number > 0) {
-      return Promise.resolve();
-    }
-
-    return Promise.reject(new Error('Price must be greater than zero!'));
-  };
-
-  return /*#__PURE__*/React.createElement(Form, {
-    name: "customized_form_controls",
-    layout: "inline",
-    onFinish: onFinish,
-    initialValues: {
-      price: {
-        number: 0,
-        currency: 'rmb'
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Form.Item, {
-    name: "price",
-    label: "Price",
-    rules: [{
-      validator: checkPrice
-    }]
-  }, /*#__PURE__*/React.createElement(PriceInput, null)), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
-    htmlType: "submit"
-  }, "Submit")));
-};
-
-export default Demo;

package/es/form/demo/dynamic-form-item.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 动态增减表单项
- * desc: 动态增加、减少表单项。`add` 方法参数可用于设置初始值。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/form/demo/dynamic-form-item.js

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

package/es/form/demo/dynamic-form-items-complex.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 复杂的动态增减表单项
- * desc: 这个例子演示了一个表单中包含多个表单控件的情况。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/form/demo/dynamic-form-items-complex.js

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

package/es/form/demo/dynamic-form-items.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 动态增减嵌套字段
- * desc: 嵌套表单字段需要对 `field` 进行拓展，将 `field.name` 和 `field.fieldKey` 应用于控制字段。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/form/demo/dynamic-form-items.js

@@ -1,76 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-/**
- * title: 动态增减嵌套字段
- * desc: 嵌套表单字段需要对 `field` 进行拓展，将 `field.name` 和 `field.fieldKey` 应用于控制字段。
- */
-import { __rest } from "tslib";
-import React from 'react';
-import { Form, Input, Button, Space } from '@fle-ui/next';
-import { MinusCircleOutlined, PlusOutlined } 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: "dynamic_form_nest_item",
-    onFinish: onFinish,
-    autoComplete: "off"
-  }, /*#__PURE__*/React.createElement(Form.List, {
-    name: "users"
-  }, function (fields, _ref) {
-    var add = _ref.add,
-        remove = _ref.remove;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, fields.map(function (_a) {
-      var key = _a.key,
-          name = _a.name,
-          fieldKey = _a.fieldKey,
-          restField = __rest(_a, ["key", "name", "fieldKey"]);
-
-      return /*#__PURE__*/React.createElement(Space, {
-        key: key,
-        style: {
-          display: 'flex',
-          marginBottom: 8
-        },
-        align: "baseline"
-      }, /*#__PURE__*/React.createElement(Form.Item, _extends({}, restField, {
-        name: [name, 'first'],
-        fieldKey: [fieldKey, 'first'],
-        rules: [{
-          required: true,
-          message: 'Missing first name'
-        }]
-      }), /*#__PURE__*/React.createElement(Input, {
-        placeholder: "First Name"
-      })), /*#__PURE__*/React.createElement(Form.Item, _extends({}, restField, {
-        name: [name, 'last'],
-        fieldKey: [fieldKey, 'last'],
-        rules: [{
-          required: true,
-          message: 'Missing last name'
-        }]
-      }), /*#__PURE__*/React.createElement(Input, {
-        placeholder: "Last Name"
-      })), /*#__PURE__*/React.createElement(MinusCircleOutlined, {
-        onClick: function onClick() {
-          return remove(name);
-        }
-      }));
-    }), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
-      type: "dashed",
-      onClick: function onClick() {
-        return add();
-      },
-      block: true,
-      icon: /*#__PURE__*/React.createElement(PlusOutlined, null)
-    }, "Add field")));
-  }), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
-    htmlType: "submit"
-  }, "Submit")));
-};
-
-export default Demo;

package/es/form/demo/dynamic-rule.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 动态校验规则
- * desc: 根据不同情况执行不同的校验规则。
- */
-declare const DynamicRule: () => JSX.Element;
-export default DynamicRule;

package/es/form/demo/dynamic-rule.js

@@ -1,109 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-
-/**
- * title: 动态校验规则
- * desc: 根据不同情况执行不同的校验规则。
- */
-import { __awaiter } from "tslib";
-import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Checkbox } from '@fle-ui/next';
-var formItemLayout = {
-  labelCol: {
-    span: 4
-  },
-  wrapperCol: {
-    span: 8
-  }
-};
-var formTailLayout = {
-  labelCol: {
-    span: 4
-  },
-  wrapperCol: {
-    span: 8,
-    offset: 4
-  }
-};
-
-var DynamicRule = function DynamicRule() {
-  var _Form$useForm = Form.useForm(),
-      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
-      form = _Form$useForm2[0];
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      checkNick = _useState2[0],
-      setCheckNick = _useState2[1];
-
-  useEffect(function () {
-    form.validateFields(['nickname']);
-  }, [checkNick]);
-
-  var onCheckboxChange = function onCheckboxChange(e) {
-    setCheckNick(e.target.checked);
-  };
-
-  var onCheck = function onCheck() {
-    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var values;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              _context.next = 3;
-              return form.validateFields();
-
-            case 3:
-              values = _context.sent;
-              console.log('Success:', values);
-              _context.next = 10;
-              break;
-
-            case 7:
-              _context.prev = 7;
-              _context.t0 = _context["catch"](0);
-              console.log('Failed:', _context.t0);
-
-            case 10:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[0, 7]]);
-    }));
-  };
-
-  return /*#__PURE__*/React.createElement(Form, {
-    form: form,
-    name: "dynamic_rule"
-  }, /*#__PURE__*/React.createElement(Form.Item, _extends({}, formItemLayout, {
-    name: "username",
-    label: "Name",
-    rules: [{
-      required: true,
-      message: 'Please input your name'
-    }]
-  }), /*#__PURE__*/React.createElement(Input, {
-    placeholder: "Please input your name"
-  })), /*#__PURE__*/React.createElement(Form.Item, _extends({}, formItemLayout, {
-    name: "nickname",
-    label: "Nickname",
-    rules: [{
-      required: checkNick,
-      message: 'Please input your nickname'
-    }]
-  }), /*#__PURE__*/React.createElement(Input, {
-    placeholder: "Please input your nickname"
-  })), /*#__PURE__*/React.createElement(Form.Item, _extends({}, formTailLayout), /*#__PURE__*/React.createElement(Checkbox, {
-    checked: checkNick,
-    onChange: onCheckboxChange
-  }, "Nickname is required")), /*#__PURE__*/React.createElement(Form.Item, _extends({}, formTailLayout), /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
-    onClick: onCheck
-  }, "Check")));
-};
-
-export default DynamicRule;

package/es/form/demo/form-context.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 多表单联动
- * desc: 通过 `Form.Provider` 在表单间处理数据。本例子中，Modal 的确认按钮在 Form 之外，通过 `form.submit` 方法调用表单提交功能。反之，则推荐使用 `<Button htmlType="submit" />` 调用 web 原生提交逻辑。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;