form-render-v3 3.0.0-alpha.1

package/lib/render-core/FieldList/index.js

@@ -0,0 +1,53 @@
+"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/form/style");
+var _form = _interopRequireDefault(require("antd/es/form"));
+var _tslib = require("tslib");
+var _react = _interopRequireWildcard(require("react"));
+var _context = require("../../models/context");
+var _expression = require("../../models/expression");
+var _fieldShouldUpdate = _interopRequireDefault(require("../../models/fieldShouldUpdate"));
+var _main = _interopRequireDefault(require("./main"));
+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 }; }
+var _default = exports.default = function _default(props) {
+  var _a;
+  var schema = props.schema,
+    rootPath = props.rootPath;
+  var _b = schema || {},
+    items = _b.items,
+    listSchema = (0, _tslib.__rest)(_b, ["items"]);
+  var store = (0, _react.useContext)(_context.FRContext);
+  var _store$getState = store.getState(),
+    formSchema = _store$getState.schema;
+  var configCtx = (0, _react.useContext)(_context.ConfigContext);
+  var mustacheDisabled = (_a = configCtx === null || configCtx === void 0 ? void 0 : configCtx.globalConfig) === null || _a === void 0 ? void 0 : _a.mustacheDisabled;
+  var dependencies = schema === null || schema === void 0 ? void 0 : schema.dependencies;
+  // No function expressions exist
+  if (!(0, _expression.isHasExpression)(schema) && !mustacheDisabled && (!dependencies || !(dependencies === null || dependencies === void 0 ? void 0 : dependencies.length))) {
+    return /*#__PURE__*/_react.default.createElement(_main.default, Object.assign({
+      configContext: configCtx
+    }, props));
+  }
+  // Need to listen to form values for dynamic rendering
+  return /*#__PURE__*/_react.default.createElement(_form.default.Item, {
+    noStyle: true,
+    shouldUpdate: (0, _fieldShouldUpdate.default)(JSON.stringify(listSchema || {}), rootPath, dependencies, true)
+  }, function (form) {
+    var formData = form.getFieldsValue(true);
+    var newListSchema = mustacheDisabled ? schema : (0, _expression.parseAllExpression)(listSchema, formData, rootPath, formSchema);
+    return /*#__PURE__*/_react.default.createElement(_main.default, Object.assign({
+      configContext: configCtx
+    }, props, {
+      schema: Object.assign({
+        items: items
+      }, newListSchema),
+      rootPath: rootPath
+    }));
+  });
+};

package/lib/render-core/FieldList/main.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: (props: any) => React.JSX.Element;
+export default _default;

package/lib/render-core/FieldList/main.js

@@ -0,0 +1,108 @@
+"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/form/style");
+var _form = _interopRequireDefault(require("antd/es/form"));
+require("antd/es/col/style");
+var _col = _interopRequireDefault(require("antd/es/col"));
+var _tslib = require("tslib");
+var _react = _interopRequireWildcard(require("react"));
+var _zustand = require("zustand");
+var _context = require("../../models/context");
+var _expression = require("../../models/expression");
+var _modules = require("./modules");
+var _field = _interopRequireDefault(require("./field"));
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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 UpperContext = /*#__PURE__*/(0, _react.createContext)(function () {});
+var _default = exports.default = function _default(props) {
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    _ = _useState2[0],
+    setListData = _useState2[1];
+  var configContext = props.configContext;
+  var store = (0, _react.useContext)(_context.FRContext);
+  var formCtx = (0, _zustand.useStore)(store, function (state) {
+    return state.context;
+  });
+  var upperCtx = (0, _react.useContext)(UpperContext);
+  var form = configContext.form,
+    widgets = configContext.widgets,
+    methods = configContext.methods,
+    globalConfig = configContext.globalConfig;
+  var displayType = formCtx.displayType;
+  var isDisplayColumn = displayType === 'column';
+  var _schema = props.schema;
+  var formData = form.getFieldsValue(true);
+  var _store$getState = store.getState(),
+    formSchema = _store$getState.schema;
+  var items = _schema.items,
+    className = _schema.className,
+    otherSchema = (0, _tslib.__rest)(_schema, ["items", "className"]);
+  var schema = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.mustacheDisabled) ? _schema : Object.assign({
+    items: items
+  }, (0, _expression.parseAllExpression)(otherSchema, formData, props.rootPath, formSchema));
+  var widget = schema.widget;
+  var widgetName = widget || 'list1';
+  var getValueFromKey = (0, _modules.getParamValue)(formCtx, upperCtx, schema);
+  var label = (0, _modules.getLabel)(schema, displayType, widgets);
+  var tooltip = (0, _modules.getTooltip)(schema, displayType);
+  var _getFormListLayout = (0, _modules.getFormListLayout)(getValueFromKey, displayType),
+    labelCol = _getFormListLayout.labelCol,
+    fieldCol = _getFormListLayout.fieldCol;
+  var isInline = schema.display === 'inline';
+  var preRootPath = _toConsumableArray(props.rootPath || []).splice(0, props.rootPath.length - 1);
+  var listData = form.getFieldValue([].concat(_toConsumableArray(preRootPath), _toConsumableArray(props.path)));
+  if (!(listData === null || listData === void 0 ? void 0 : listData.length) && widgetName !== 'drawerList') {
+    isInline = true;
+  }
+  if (schema.hidden) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_col.default, {
+    span: 24,
+    className: className
+  }, !isInline && !isDisplayColumn && label && (/*#__PURE__*/_react.default.createElement(_form.default.Item, {
+    className: 'ant-form-item-optional-hide',
+    label: label,
+    labelAlign: 'left',
+    colon: false,
+    tooltip: tooltip,
+    style: {
+      marginBottom: 0
+    },
+    labelCol: {
+      span: 24
+    }
+  })), /*#__PURE__*/_react.default.createElement(_form.default.Item, {
+    label: label,
+    labelCol: isDisplayColumn ? {
+      span: 24
+    } : labelCol,
+    wrapperCol: fieldCol,
+    noStyle: !isInline && !isDisplayColumn,
+    tooltip: tooltip
+  }, /*#__PURE__*/_react.default.createElement(_field.default, Object.assign({}, props, {
+    form: form,
+    methods: methods,
+    formCtx: formCtx,
+    upperCtx: upperCtx,
+    widgets: widgets,
+    configContext: configContext,
+    setListData: setListData
+  }))));
+};

package/lib/render-core/FieldList/modules.d.ts

@@ -0,0 +1,7 @@
+export declare const getParamValue: (formCtx: any, upperCtx: any, schema: any) => (valueKey: string) => any;
+export declare const getFormListLayout: (getValueFromKey: any, displayType: string) => {
+    labelCol: any;
+    fieldCol: any;
+};
+export declare const getLabel: (schema: any, displayType: string, widgets: any) => any;
+export declare const getTooltip: (schema: any, displayType: string) => any;

package/lib/render-core/FieldList/modules.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTooltip = exports.getParamValue = exports.getLabel = exports.getFormListLayout = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var getParamValue = exports.getParamValue = function getParamValue(formCtx, upperCtx, schema) {
+  return function (valueKey) {
+    var _a, _b;
+    return (_b = (_a = schema[valueKey]) !== null && _a !== void 0 ? _a : upperCtx[valueKey]) !== null && _b !== void 0 ? _b : formCtx[valueKey];
+  };
+};
+var getFormListLayout = exports.getFormListLayout = function getFormListLayout(getValueFromKey, displayType) {
+  var _labelCol = getValueFromKey('labelCol');
+  var _fieldCol = getValueFromKey('fieldCol');
+  var labelWidth = getValueFromKey('labelWidth');
+  var labelCol = {
+    span: 5
+  };
+  var fieldCol = {
+    flex: 1
+  };
+  if (labelWidth && displayType !== 'column') {
+    labelCol = {
+      flex: labelWidth + 'px'
+    };
+  }
+  if (_labelCol) {
+    labelCol = _labelCol;
+  }
+  if (_fieldCol) {
+    fieldCol = _fieldCol;
+  }
+  if (typeof _labelCol === 'number') {
+    labelCol = {
+      span: _labelCol
+    };
+  }
+  if (typeof _fieldCol === 'number') {
+    fieldCol = {
+      span: _fieldCol
+    };
+  }
+  return {
+    labelCol: labelCol,
+    fieldCol: fieldCol
+  };
+};
+var getLabel = exports.getLabel = function getLabel(schema, displayType, widgets) {
+  var title = schema.title,
+    description = schema.description,
+    descWidget = schema.descWidget,
+    labelWidget = schema.labelWidget;
+  var LabelNode = widgets[labelWidget];
+  if (LabelNode) {
+    return /*#__PURE__*/_react.default.createElement(LabelNode, {
+      schema: schema
+    });
+  }
+  if (!description && !descWidget) {
+    return title;
+  }
+  var RenderDesc = function RenderDesc() {
+    var Widget = widgets[descWidget];
+    if (Widget) {
+      return /*#__PURE__*/_react.default.createElement(Widget, {
+        schema: schema
+      });
+    }
+    if (description) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: 'fr-desc'
+      }, "(", description, ")");
+    }
+    return null;
+  };
+  if (displayType === 'inline') {
+    return title;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title, /*#__PURE__*/_react.default.createElement(RenderDesc, null));
+};
+var getTooltip = exports.getTooltip = function getTooltip(schema, displayType) {
+  var descType = schema.descType,
+    description = schema.description,
+    tooltip = schema.tooltip;
+  if (tooltip) {
+    if (typeof tooltip === 'string') {
+      return {
+        title: /*#__PURE__*/_react.default.createElement("span", {
+          dangerouslySetInnerHTML: {
+            __html: tooltip
+          }
+        })
+      };
+    }
+    return Object.assign(Object.assign({}, tooltip), {
+      title: /*#__PURE__*/_react.default.createElement("span", {
+        dangerouslySetInnerHTML: {
+          __html: tooltip.title
+        }
+      })
+    });
+  }
+  if (descType === 'widget' || !description) {
+    return null;
+  }
+  if (displayType === 'column' && descType === 'icon') {
+    return {
+      title: description
+    };
+  }
+  return null;
+};

package/lib/render-core/index.css

@@ -0,0 +1,29 @@
+.fr-inline-field {
+  display: inline-block;
+  margin-right: 16px;
+}
+.fr-inline-container {
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+.ant-form-item-optional-hide {
+  padding: 0 8px;
+}
+.ant-form-item-optional-hide .ant-form-item-label > label {
+  font-size: 16px;
+  font-weight: #000000d9;
+  font-weight: 600;
+}
+.fr-desc {
+  word-break: break-all;
+  color: rgba(0, 0, 0, 0.45);
+  line-height: 22px;
+  margin-left: 5px;
+  font-weight: normal;
+  font-size: 14px;
+}
+.fr-item-actions {
+  margin-left: 12px;
+  display: inline-flex;
+  align-items: center;
+}

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

@@ -0,0 +1,9 @@
+import './index.less';
+interface RenderCoreProps {
+    schema: any;
+    rootPath?: any[] | undefined;
+    parentPath?: any[] | undefined;
+    [key: string]: any;
+}
+declare const RenderCore: (props: RenderCoreProps) => any;
+export default RenderCore;

package/lib/render-core/index.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FieldItem = _interopRequireDefault(require("./FieldItem"));
+var _FieldList = _interopRequireDefault(require("./FieldList"));
+var _sortProperties = _interopRequireDefault(require("../models/sortProperties"));
+require("./index.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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 renderItem = function renderItem(props) {
+  var _a;
+  var schema = props.schema,
+    key = props.key,
+    path = props.path,
+    rootPath = props.rootPath;
+  // render List
+  if (schema.type === 'array' && ((_a = schema.items) === null || _a === void 0 ? void 0 : _a.type) === 'object') {
+    return /*#__PURE__*/_react.default.createElement(_FieldList.default, {
+      key: key,
+      schema: schema,
+      path: path,
+      rootPath: rootPath,
+      renderCore: RenderCore
+    });
+  }
+  // render Objiect | field
+  var child = null;
+  // has child schema
+  if ((schema === null || schema === void 0 ? void 0 : schema.properties) && (schema === null || schema === void 0 ? void 0 : schema.widgetType) !== 'field') {
+    child = RenderCore({
+      schema: schema,
+      parentPath: path,
+      rootPath: rootPath
+    });
+    // path = undefined;
+  }
+  return /*#__PURE__*/_react.default.createElement(_FieldItem.default, {
+    key: key,
+    schema: schema,
+    path: path,
+    rootPath: rootPath,
+    children: child,
+    renderCore: RenderCore
+  });
+};
+var RenderCore = function RenderCore(props) {
+  var schema = props.schema,
+    _props$parentPath = props.parentPath,
+    parentPath = _props$parentPath === void 0 ? [] : _props$parentPath,
+    _props$rootPath = props.rootPath,
+    rootPath = _props$rootPath === void 0 ? [] : _props$rootPath;
+  if (!schema || Object.keys(schema).length === 0) {
+    return null;
+  }
+  // render List.item
+  if (schema === null || schema === void 0 ? void 0 : schema.items) {
+    return renderItem({
+      schema: schema.items,
+      path: parentPath,
+      rootPath: rootPath
+    });
+  }
+  // render Objiect | field
+  return (0, _sortProperties.default)(Object.entries(schema.properties || {})).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      item = _ref2[1];
+    var path = [].concat(_toConsumableArray(parentPath), [key]);
+    return renderItem({
+      schema: item,
+      path: path,
+      key: key,
+      rootPath: rootPath
+    });
+  });
+};
+var _default = exports.default = RenderCore;