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

package/lib/form/demo/control-hooks.js

@@ -1,133 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _next = require("@fle-ui/next");
-
-/**
- * title: 表单方法调用
- * desc: 通过 `Form.useForm` 对表单数据域进行交互。
- */
-var Option = _next.Select.Option;
-var layout = {
-  labelCol: {
-    span: 8
-  },
-  wrapperCol: {
-    span: 16
-  }
-};
-var tailLayout = {
-  wrapperCol: {
-    offset: 8,
-    span: 16
-  }
-};
-
-var Demo = function Demo() {
-  var _Form$useForm = _next.Form.useForm(),
-      _Form$useForm2 = (0, _slicedToArray2["default"])(_Form$useForm, 1),
-      form = _Form$useForm2[0];
-
-  var onGenderChange = function onGenderChange(value) {
-    switch (value) {
-      case 'male':
-        form.setFieldsValue({
-          note: 'Hi, man!'
-        });
-        return;
-
-      case 'female':
-        form.setFieldsValue({
-          note: 'Hi, lady!'
-        });
-        return;
-
-      case 'other':
-        form.setFieldsValue({
-          note: 'Hi there!'
-        });
-    }
-  };
-
-  var onFinish = function onFinish(values) {
-    console.log(values);
-  };
-
-  var onReset = function onReset() {
-    form.resetFields();
-  };
-
-  var onFill = function onFill() {
-    form.setFieldsValue({
-      note: 'Hello world!',
-      gender: 'male'
-    });
-  };
-
-  return /*#__PURE__*/_react["default"].createElement(_next.Form, (0, _extends2["default"])({}, layout, {
-    form: form,
-    name: "control-hooks",
-    onFinish: onFinish
-  }), /*#__PURE__*/_react["default"].createElement(_next.Form.Item, {
-    name: "note",
-    label: "Note",
-    rules: [{
-      required: true
-    }]
-  }, /*#__PURE__*/_react["default"].createElement(_next.Input, null)), /*#__PURE__*/_react["default"].createElement(_next.Form.Item, {
-    name: "gender",
-    label: "Gender",
-    rules: [{
-      required: true
-    }]
-  }, /*#__PURE__*/_react["default"].createElement(_next.Select, {
-    placeholder: "Select a option and change input text above",
-    onChange: onGenderChange,
-    allowClear: true
-  }, /*#__PURE__*/_react["default"].createElement(Option, {
-    value: "male"
-  }, "male"), /*#__PURE__*/_react["default"].createElement(Option, {
-    value: "female"
-  }, "female"), /*#__PURE__*/_react["default"].createElement(Option, {
-    value: "other"
-  }, "other"))), /*#__PURE__*/_react["default"].createElement(_next.Form.Item, {
-    noStyle: true,
-    shouldUpdate: function shouldUpdate(prevValues, currentValues) {
-      return prevValues.gender !== currentValues.gender;
-    }
-  }, function (_ref) {
-    var getFieldValue = _ref.getFieldValue;
-    return getFieldValue('gender') === 'other' ? /*#__PURE__*/_react["default"].createElement(_next.Form.Item, {
-      name: "customizeGender",
-      label: "Customize Gender",
-      rules: [{
-        required: true
-      }]
-    }, /*#__PURE__*/_react["default"].createElement(_next.Input, null)) : null;
-  }), /*#__PURE__*/_react["default"].createElement(_next.Form.Item, (0, _extends2["default"])({}, tailLayout), /*#__PURE__*/_react["default"].createElement(_next.Button, {
-    type: "primary",
-    htmlType: "submit"
-  }, "Submit"), /*#__PURE__*/_react["default"].createElement(_next.Button, {
-    htmlType: "button",
-    onClick: onReset
-  }, "Reset"), /*#__PURE__*/_react["default"].createElement(_next.Button, {
-    type: "link",
-    htmlType: "button",
-    onClick: onFill
-  }, "Fill form")));
-};
-
-var _default = Demo;
-exports["default"] = _default;

package/lib/form/demo/control-ref.d.ts

@@ -1,15 +0,0 @@
-/**
- * title: 表单方法调用（Class component）
- * desc: 我们推荐使用 `Form.useForm` 创建表单数据域进行控制。如果是在 class component 下，你也可以通过 `ref` 获取数据域。
- */
-import React from 'react';
-import { FormInstance } from '@fle-ui/next';
-declare class Demo extends React.Component {
-    formRef: React.RefObject<FormInstance<any>>;
-    onGenderChange: (value: string) => void;
-    onFinish: (values: any) => void;
-    onReset: () => void;
-    onFill: () => void;
-    render(): JSX.Element;
-}
-export default Demo;

package/lib/form/demo/control-ref.js

@@ -1,158 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _next = require("@fle-ui/next");
-
-/**
- * title: 表单方法调用（Class component）
- * desc: 我们推荐使用 `Form.useForm` 创建表单数据域进行控制。如果是在 class component 下，你也可以通过 `ref` 获取数据域。
- */
-var Option = _next.Select.Option;
-var layout = {
-  labelCol: {
-    span: 8
-  },
-  wrapperCol: {
-    span: 16
-  }
-};
-var tailLayout = {
-  wrapperCol: {
-    offset: 8,
-    span: 16
-  }
-};
-
-var Demo = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Demo, _React$Component);
-
-  var _super = (0, _createSuper2["default"])(Demo);
-
-  function Demo() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Demo);
-    _this = _super.apply(this, arguments);
-    _this.formRef = /*#__PURE__*/_react["default"].createRef();
-
-    _this.onGenderChange = function (value) {
-      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!'
-          });
-
-      }
-    };
-
-    _this.onFinish = function (values) {
-      console.log(values);
-    };
-
-    _this.onReset = function () {
-      _this.formRef.current.resetFields();
-    };
-
-    _this.onFill = function () {
-      _this.formRef.current.setFieldsValue({
-        note: 'Hello world!',
-        gender: 'male'
-      });
-    };
-
-    return _this;
-  }
-
-  (0, _createClass2["default"])(Demo, [{
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react["default"].createElement(_next.Form, (0, _extends2["default"])({}, layout, {
-        ref: this.formRef,
-        name: "control-ref",
-        onFinish: this.onFinish
-      }), /*#__PURE__*/_react["default"].createElement(_next.Form.Item, {
-        name: "note",
-        label: "Note",
-        rules: [{
-          required: true
-        }]
-      }, /*#__PURE__*/_react["default"].createElement(_next.Input, null)), /*#__PURE__*/_react["default"].createElement(_next.Form.Item, {
-        name: "gender",
-        label: "Gender",
-        rules: [{
-          required: true
-        }]
-      }, /*#__PURE__*/_react["default"].createElement(_next.Select, {
-        placeholder: "Select a option and change input text above",
-        onChange: this.onGenderChange,
-        allowClear: true
-      }, /*#__PURE__*/_react["default"].createElement(Option, {
-        value: "male"
-      }, "male"), /*#__PURE__*/_react["default"].createElement(Option, {
-        value: "female"
-      }, "female"), /*#__PURE__*/_react["default"].createElement(Option, {
-        value: "other"
-      }, "other"))), /*#__PURE__*/_react["default"].createElement(_next.Form.Item, {
-        noStyle: true,
-        shouldUpdate: function shouldUpdate(prevValues, currentValues) {
-          return prevValues.gender !== currentValues.gender;
-        }
-      }, function (_ref) {
-        var getFieldValue = _ref.getFieldValue;
-        return getFieldValue('gender') === 'other' ? /*#__PURE__*/_react["default"].createElement(_next.Form.Item, {
-          name: "customizeGender",
-          label: "Customize Gender",
-          rules: [{
-            required: true
-          }]
-        }, /*#__PURE__*/_react["default"].createElement(_next.Input, null)) : null;
-      }), /*#__PURE__*/_react["default"].createElement(_next.Form.Item, (0, _extends2["default"])({}, tailLayout), /*#__PURE__*/_react["default"].createElement(_next.Button, {
-        type: "primary",
-        htmlType: "submit"
-      }, "Submit"), /*#__PURE__*/_react["default"].createElement(_next.Button, {
-        htmlType: "button",
-        onClick: this.onReset
-      }, "Reset"), /*#__PURE__*/_react["default"].createElement(_next.Button, {
-        type: "link",
-        htmlType: "button",
-        onClick: this.onFill
-      }, "Fill form")));
-    }
-  }]);
-  return Demo;
-}(_react["default"].Component);
-
-var _default = Demo;
-exports["default"] = _default;

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

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

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

@@ -1,135 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _next = require("@fle-ui/next");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-/**
- * title: 自定义表单控件
- * desc:
- */
-var Option = _next.Select.Option;
-
-var PriceInput = function PriceInput(_ref) {
-  var _ref$value = _ref.value,
-      value = _ref$value === void 0 ? {} : _ref$value,
-      onChange = _ref.onChange;
-
-  var _useState = (0, _react.useState)(0),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      number = _useState2[0],
-      setNumber = _useState2[1];
-
-  var _useState3 = (0, _react.useState)('rmb'),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      currency = _useState4[0],
-      setCurrency = _useState4[1];
-
-  var triggerChange = function triggerChange(changedValue) {
-    onChange === null || onChange === void 0 ? void 0 : onChange((0, _extends2["default"])((0, _extends2["default"])({
-      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["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_next.Input, {
-    type: "text",
-    value: value.number || number,
-    onChange: onNumberChange,
-    style: {
-      width: 100
-    }
-  }), /*#__PURE__*/_react["default"].createElement(_next.Select, {
-    value: value.currency || currency,
-    style: {
-      width: 80,
-      margin: '0 8px'
-    },
-    onChange: onCurrencyChange
-  }, /*#__PURE__*/_react["default"].createElement(Option, {
-    value: "rmb"
-  }, "RMB"), /*#__PURE__*/_react["default"].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["default"].createElement(_next.Form, {
-    name: "customized_form_controls",
-    layout: "inline",
-    onFinish: onFinish,
-    initialValues: {
-      price: {
-        number: 0,
-        currency: 'rmb'
-      }
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_next.Form.Item, {
-    name: "price",
-    label: "Price",
-    rules: [{
-      validator: checkPrice
-    }]
-  }, /*#__PURE__*/_react["default"].createElement(PriceInput, null)), /*#__PURE__*/_react["default"].createElement(_next.Form.Item, null, /*#__PURE__*/_react["default"].createElement(_next.Button, {
-    type: "primary",
-    htmlType: "submit"
-  }, "Submit")));
-};
-
-var _default = Demo;
-exports["default"] = _default;

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

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

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

@@ -1,148 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _tslib = require("tslib");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _next = require("@fle-ui/next");
-
-var _icons = require("@ant-design/icons");
-
-/**
- * title: 动态增减表单项
- * desc: 动态增加、减少表单项。`add` 方法参数可用于设置初始值。
- */
-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["default"].createElement(_next.Form, (0, _extends2["default"])({
-    name: "dynamic_form_item"
-  }, formItemLayoutWithOutLabel, {
-    onFinish: onFinish
-  }), /*#__PURE__*/_react["default"].createElement(_next.Form.List, {
-    name: "names",
-    rules: [{
-      validator: function validator(_, names) {
-        return (0, _tslib.__awaiter)(void 0, void 0, void 0, /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-          return _regenerator["default"].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["default"].createElement(_react["default"].Fragment, null, fields.map(function (field, index) {
-      return /*#__PURE__*/_react["default"].createElement(_next.Form.Item, (0, _extends2["default"])({}, index === 0 ? formItemLayout : formItemLayoutWithOutLabel, {
-        label: index === 0 ? 'Passengers' : '',
-        required: false,
-        key: field.key
-      }), /*#__PURE__*/_react["default"].createElement(_next.Form.Item, (0, _extends2["default"])({}, field, {
-        validateTrigger: ['onChange', 'onBlur'],
-        rules: [{
-          required: true,
-          whitespace: true,
-          message: "Please input passenger's name or delete this field."
-        }],
-        noStyle: true
-      }), /*#__PURE__*/_react["default"].createElement(_next.Input, {
-        placeholder: "passenger name",
-        style: {
-          width: '60%'
-        }
-      })), fields.length > 1 ? /*#__PURE__*/_react["default"].createElement(_icons.MinusCircleOutlined, {
-        className: "dynamic-delete-button",
-        onClick: function onClick() {
-          return remove(field.name);
-        }
-      }) : null);
-    }), /*#__PURE__*/_react["default"].createElement(_next.Form.Item, null, /*#__PURE__*/_react["default"].createElement(_next.Button, {
-      type: "dashed",
-      onClick: function onClick() {
-        return add();
-      },
-      style: {
-        width: '60%'
-      },
-      icon: /*#__PURE__*/_react["default"].createElement(_icons.PlusOutlined, null)
-    }, "Add field"), /*#__PURE__*/_react["default"].createElement(_next.Button, {
-      type: "dashed",
-      onClick: function onClick() {
-        add('The head item', 0);
-      },
-      style: {
-        width: '60%',
-        marginTop: '20px'
-      },
-      icon: /*#__PURE__*/_react["default"].createElement(_icons.PlusOutlined, null)
-    }, "Add field at head"), /*#__PURE__*/_react["default"].createElement(_next.Form.ErrorList, {
-      errors: errors
-    })));
-  }), /*#__PURE__*/_react["default"].createElement(_next.Form.Item, null, /*#__PURE__*/_react["default"].createElement(_next.Button, {
-    type: "primary",
-    htmlType: "submit"
-  }, "Submit")));
-};
-
-var _default = Demo;
-exports["default"] = _default;

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

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