form-render-v3 3.0.0-alpha.1

package/lib/derivative/SearchForm/index.js

@@ -0,0 +1,302 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("antd/es/col/style");
+var _col = _interopRequireDefault(require("antd/es/col"));
+require("antd/es/config-provider/style");
+var _configProvider = _interopRequireDefault(require("antd/es/config-provider"));
+var _tslib = require("tslib");
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _classnames2 = _interopRequireDefault(require("classnames"));
+var _lodashEs = require("lodash-es");
+var _formCore = _interopRequireDefault(require("../../form-core"));
+var _utils = require("../../utils");
+var _withProvider = _interopRequireDefault(require("../../withProvider"));
+var _ActionView = _interopRequireDefault(require("./ActionView"));
+var _widgets = require("../../widgets");
+require("./index.css");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var getIsColumn = function getIsColumn(isColumn, obj, column) {
+  var count = 0;
+  Object.keys(obj || {}).forEach(function (key) {
+    var item = obj[key];
+    if (item.visible === undefined) {
+      count += 1;
+    }
+  });
+  return isColumn && count % column !== 0;
+};
+var SearchForm = function SearchForm(props) {
+  if (props.hidden) {
+    return null;
+  }
+  var configCtx = (0, _react.useContext)(_configProvider.default.ConfigContext);
+  var t = (0, _utils.translation)(configCtx);
+  var className = props.className,
+    style = props.style,
+    mode = props.mode,
+    _props$layoutAuto = props.layoutAuto,
+    layoutAuto = _props$layoutAuto === void 0 ? false : _props$layoutAuto,
+    form = props.form,
+    hidden = props.hidden,
+    loading = props.loading,
+    _props$column = props.column,
+    _column = _props$column === void 0 ? 4 : _props$column,
+    collapsed = props.collapsed,
+    _props$defaultCollaps = props.defaultCollapsed,
+    defaultCollapsed = _props$defaultCollaps === void 0 ? true : _props$defaultCollaps,
+    schema = props.schema,
+    retainBtn = props.retainBtn,
+    closeReturnSearch = props.closeReturnSearch,
+    resetAfter = props.resetAfter,
+    searchBtnStyle = props.searchBtnStyle,
+    searchBtnClassName = props.searchBtnClassName,
+    _props$searchText = props.searchText,
+    searchText = _props$searchText === void 0 ? t('search') : _props$searchText,
+    _props$resetText = props.resetText,
+    resetText = _props$resetText === void 0 ? t('reset') : _props$resetText,
+    _props$searchWithErro = props.searchWithError,
+    searchWithError = _props$searchWithErro === void 0 ? true : _props$searchWithErro,
+    _props$searchOnMount = props.searchOnMount,
+    searchOnMount = _props$searchOnMount === void 0 ? true : _props$searchOnMount,
+    onMount = props.onMount,
+    onSearch = props.onSearch,
+    onReset = props.onReset,
+    searchBtnRender = props.searchBtnRender,
+    restProps = (0, _tslib.__rest)(props, ["className", "style", "mode", "layoutAuto", "form", "hidden", "loading", "column", "collapsed", "defaultCollapsed", "schema", "retainBtn", "closeReturnSearch", "resetAfter", "searchBtnStyle", "searchBtnClassName", "searchText", "resetText", "searchWithError", "searchOnMount", "onMount", "onSearch", "onReset", "searchBtnRender"]);
+  var fieldNum = Object.keys((schema === null || schema === void 0 ? void 0 : schema.properties) || {}).length;
+  var isColumn = (restProps.displayType || schema.displayType) === 'column';
+  var operateShow = mode !== 'simple' || mode === 'simple' && retainBtn;
+  var containerRef = (0, _react.useRef)(null);
+  var _useSetState = (0, _ahooks.useSetState)({
+      hasCollapse: false,
+      isExpand: !defaultCollapsed,
+      column: schema.column || _column // 一行几列
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var hasCollapse = state.hasCollapse,
+    isExpand = state.isExpand,
+    column = state.column;
+  var actionProps = {
+    style: searchBtnStyle,
+    className: searchBtnClassName,
+    searchText: searchText,
+    resetText: resetText,
+    loading: loading,
+    form: form,
+    hasCollapse: hasCollapse,
+    isExpand: isExpand,
+    onReset: onReset,
+    searchBtnRender: searchBtnRender
+  };
+  (0, _ahooks.useMount)(function () {
+    initMount();
+  });
+  (0, _ahooks.useUpdateEffect)(function () {
+    if (isExpand) {
+      initMount();
+    }
+  }, [isExpand]);
+  (0, _ahooks.useMount)(function () {
+    if (!collapsed) {
+      return;
+    }
+    if (!isColumn && fieldNum > column * 2 - 1 || isColumn && fieldNum > column - 1) {
+      setState({
+        hasCollapse: true
+      });
+    }
+    handleContainerResize();
+  });
+  (0, _ahooks.useUpdateEffect)(function () {
+    if (!collapsed) {
+      return;
+    }
+    if (!isColumn && fieldNum > column * 2 - 1 || isColumn && fieldNum > column - 1) {
+      setState({
+        hasCollapse: true
+      });
+    } else {
+      setState({
+        hasCollapse: true
+      });
+    }
+  }, [column]);
+  (0, _ahooks.useUpdateEffect)(function () {
+    if (collapsed) {
+      if (!isColumn && fieldNum > column * 2 - 1 || isColumn && fieldNum > column - 1) {
+        setState({
+          hasCollapse: true,
+          isExpand: !defaultCollapsed
+        });
+      } else {
+        setState({
+          hasCollapse: false,
+          isExpand: true
+        });
+      }
+    } else {
+      setState({
+        hasCollapse: false,
+        isExpand: true
+      });
+    }
+  }, [collapsed]);
+  var initMount = function initMount() {
+    return (0, _tslib.__awaiter)(void 0, void 0, void 0, /*#__PURE__*/_regenerator().m(function _callee() {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            if (searchOnMount) {
+              _context.n = 1;
+              break;
+            }
+            return _context.a(2);
+          case 1:
+            if (!(typeof onMount === 'function')) {
+              _context.n = 2;
+              break;
+            }
+            _context.n = 2;
+            return onMount();
+          case 2:
+            form.submit();
+          case 3:
+            return _context.a(2);
+        }
+      }, _callee);
+    }));
+  };
+  var properties = (0, _react.useMemo)(function () {
+    if (!collapsed) {
+      return schema === null || schema === void 0 ? void 0 : schema.properties;
+    }
+    var result = {};
+    Object.keys((schema === null || schema === void 0 ? void 0 : schema.properties) || {}).forEach(function (key, index) {
+      var item = Object.assign({}, schema.properties[key] || {});
+      if (!isExpand && isColumn && index >= column - 1 || !isExpand && !isColumn && index >= column * 2 - 1 // 只显示两行
+      ) {
+        item.visible = false;
+      }
+      result[key] = item;
+    });
+    return result;
+  }, [JSON.stringify(schema), column, isColumn, isExpand, collapsed]);
+  var handleContainerResize = function handleContainerResize() {
+    if (!layoutAuto) {
+      return;
+    }
+    var resizeObserver = new ResizeObserver((0, _lodashEs.debounce)(function () {
+      var _ref = (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || {},
+        clientWidth = _ref.clientWidth;
+      for (var i = _column; i > 0; i--) {
+        var item = clientWidth / i;
+        if (item >= ((layoutAuto === null || layoutAuto === void 0 ? void 0 : layoutAuto.fieldMinWidth) || 340)) {
+          setState({
+            column: i
+          });
+          break;
+        }
+        if (i === 1) {
+          setState({
+            column: 1
+          });
+        }
+      }
+    }, 300, {
+      leading: true
+    }));
+    resizeObserver.observe(containerRef.current);
+    (function () {
+      resizeObserver.disconnect();
+    });
+  };
+  var handleFinish = function handleFinish(values) {
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(values);
+  };
+  var handleFinishFailed = function handleFinishFailed(_ref2) {
+    var values = _ref2.values;
+    if (!searchWithError) {
+      return;
+    }
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(values);
+  };
+  var handleKeyDown = function handleKeyDown(ev) {
+    if (ev.keyCode !== 13) {
+      return;
+    }
+    form.submit();
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames2.default)('fr-search', _defineProperty(_defineProperty({}, className, !!className), 'fr-column-search', isColumn)),
+    style: style,
+    ref: containerRef,
+    onKeyDown: !closeReturnSearch ? handleKeyDown : undefined
+  }, /*#__PURE__*/_react.default.createElement(_formCore.default, Object.assign({
+    displayType: 'row'
+  }, restProps, {
+    schema: Object.assign(Object.assign({}, schema), {
+      properties: properties,
+      column: column
+    }),
+    onFinish: handleFinish,
+    onFinishFailed: handleFinishFailed,
+    form: form,
+    operateExtra: operateShow && (/*#__PURE__*/_react.default.createElement(_col.default, {
+      className: (0, _classnames2.default)('search-action-col', {
+        'search-action-column': getIsColumn(isColumn, properties, column)
+      }),
+      style: {
+        minWidth: 1 / column * 100 + '%'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ActionView.default, Object.assign({}, actionProps, {
+      retainBtn: retainBtn,
+      mode: mode,
+      setExpand: function setExpand(value) {
+        return setState({
+          isExpand: value
+        });
+      }
+    }))))
+  })));
+};
+var _default = exports.default = (0, _withProvider.default)(SearchForm, {
+  Input: _widgets.Input,
+  InputNumber: _widgets.InputNumber,
+  TextArea: _widgets.TextArea,
+  Select: _widgets.Select,
+  MultiSelect: _widgets.MultiSelect,
+  Switch: _widgets.Switch,
+  Radio: _widgets.Radio,
+  Checkbox: _widgets.Checkbox,
+  Checkboxes: _widgets.Checkboxes,
+  DatePicker: _widgets.DatePicker,
+  DateRange: _widgets.DateRange,
+  TimePicker: _widgets.TimePicker,
+  TimeRange: _widgets.TimeRange,
+  TreeSelect: _widgets.TreeSelect,
+  ImageInput: _widgets.ImageInput,
+  UrlInput: _widgets.UrlInput,
+  Slider: _widgets.Slider,
+  Html: _widgets.Html,
+  PercentSlider: _widgets.PercentSlider
+});

package/lib/derivative/SlimRender/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: import("react").ComponentType<import("../..").FRProps>;
+export default _default;

package/lib/derivative/SlimRender/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _formCore = _interopRequireDefault(require("../../form-core"));
+var _withProvider = _interopRequireDefault(require("../../withProvider"));
+var _html = _interopRequireDefault(require("../../widgets/fields/html"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = (0, _withProvider.default)(_formCore.default, {
+  Html: _html.default
+});

package/lib/form-core/connectForm.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: (Component: React.FC<any>) => React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+export default _default;

package/lib/form-core/connectForm.js

@@ -0,0 +1,21 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _useForm = _interopRequireDefault(require("../models/useForm"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var _default = exports.default = function _default(Component) {
+  return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var form = (0, _useForm.default)();
+    return /*#__PURE__*/_react.default.createElement(Component, Object.assign({
+      ref: ref
+    }, props, {
+      form: form
+    }));
+  });
+};

package/lib/form-core/index.css

@@ -0,0 +1,19 @@
+.fr-hide-label > .ant-form-item-row > .ant-form-item-label {
+  visibility: hidden;
+}
+.fr-field .ant-form-item-row {
+  flex-wrap: nowrap;
+}
+.fr-field .ant-form-item-control-input-content {
+  display: flex;
+}
+.fr-field-visibility {
+  width: 0;
+  height: 0;
+  visibility: hidden;
+  position: absolute;
+  opacity: 0;
+}
+.fr-form .fr-inline-field .ant-form-item-control {
+  width: auto;
+}

package/lib/form-core/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { FRProps } from '../type';
+import './index.less';
+declare const FormCore: FC<FRProps>;
+export default FormCore;