form-render-v3 3.0.0-alpha.1

package/es/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/es/render-core/FieldList/main.js

@@ -0,0 +1,99 @@
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import "antd/es/col/style";
+import _Col from "antd/es/col";
+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; }
+import { __rest } from "tslib";
+import React, { createContext, useContext, useState } from 'react';
+import { useStore } from 'zustand';
+import { FRContext } from '../../models/context';
+import { parseAllExpression } from '../../models/expression';
+import { getFormListLayout, getParamValue, getLabel, getTooltip } from './modules';
+import Main from './field';
+var UpperContext = /*#__PURE__*/createContext(function () {});
+export default (function (props) {
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    _ = _useState2[0],
+    setListData = _useState2[1];
+  var configContext = props.configContext;
+  var store = useContext(FRContext);
+  var formCtx = useStore(store, function (state) {
+    return state.context;
+  });
+  var upperCtx = 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 = __rest(_schema, ["items", "className"]);
+  var schema = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.mustacheDisabled) ? _schema : Object.assign({
+    items: items
+  }, parseAllExpression(otherSchema, formData, props.rootPath, formSchema));
+  var widget = schema.widget;
+  var widgetName = widget || 'list1';
+  var getValueFromKey = getParamValue(formCtx, upperCtx, schema);
+  var label = getLabel(schema, displayType, widgets);
+  var tooltip = getTooltip(schema, displayType);
+  var _getFormListLayout = 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.createElement(_Col, {
+    span: 24,
+    className: className
+  }, !isInline && !isDisplayColumn && label && (/*#__PURE__*/React.createElement(_Form.Item, {
+    className: 'ant-form-item-optional-hide',
+    label: label,
+    labelAlign: 'left',
+    colon: false,
+    tooltip: tooltip,
+    style: {
+      marginBottom: 0
+    },
+    labelCol: {
+      span: 24
+    }
+  })), /*#__PURE__*/React.createElement(_Form.Item, {
+    label: label,
+    labelCol: isDisplayColumn ? {
+      span: 24
+    } : labelCol,
+    wrapperCol: fieldCol,
+    noStyle: !isInline && !isDisplayColumn,
+    tooltip: tooltip
+  }, /*#__PURE__*/React.createElement(Main, Object.assign({}, props, {
+    form: form,
+    methods: methods,
+    formCtx: formCtx,
+    upperCtx: upperCtx,
+    widgets: widgets,
+    configContext: configContext,
+    setListData: setListData
+  }))));
+});

package/es/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/es/render-core/FieldList/modules.js

@@ -0,0 +1,108 @@
+import React from "react";
+export var 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];
+  };
+};
+export var 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
+  };
+};
+export var 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.createElement(LabelNode, {
+      schema: schema
+    });
+  }
+  if (!description && !descWidget) {
+    return title;
+  }
+  var RenderDesc = function RenderDesc() {
+    var Widget = widgets[descWidget];
+    if (Widget) {
+      return /*#__PURE__*/React.createElement(Widget, {
+        schema: schema
+      });
+    }
+    if (description) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: 'fr-desc'
+      }, "(", description, ")");
+    }
+    return null;
+  };
+  if (displayType === 'inline') {
+    return title;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, title, /*#__PURE__*/React.createElement(RenderDesc, null));
+};
+export var 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.createElement("span", {
+          dangerouslySetInnerHTML: {
+            __html: tooltip
+          }
+        })
+      };
+    }
+    return Object.assign(Object.assign({}, tooltip), {
+      title: /*#__PURE__*/React.createElement("span", {
+        dangerouslySetInnerHTML: {
+          __html: tooltip.title
+        }
+      })
+    });
+  }
+  if (descType === 'widget' || !description) {
+    return null;
+  }
+  if (displayType === 'column' && descType === 'icon') {
+    return {
+      title: description
+    };
+  }
+  return null;
+};

package/es/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/es/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/es/render-core/index.js

@@ -0,0 +1,85 @@
+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; }
+import React from 'react';
+import FieldItem from './FieldItem';
+import FieldList from './FieldList';
+import sortProperties from '../models/sortProperties';
+import "./index.css";
+;
+;
+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.createElement(FieldList, {
+      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.createElement(FieldItem, {
+    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 sortProperties(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
+    });
+  });
+};
+export default RenderCore;