ronds-metadata 1.2.24 → 1.2.26

package/es/comps/MetadataForm/DataCell/layout/TableArray.js

@@ -1,5 +1,7 @@
 import "antd/es/form/style";
 import _Form from "antd/es/form";
+import "antd/es/tag/style";
+import _Tag from "antd/es/tag";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
@@ -13,7 +15,7 @@ import Editable from '../../../../comps/Editable';
 import useObservable from '../../../../framework/rxjs-hooks/useObservable';
 import { MetadataFormContext } from '../../interface';
 import { assign, getLabelByProps } from '../../utils';
-import { deepClone } from '../../../../utils';
+import { deepClone, getConstantValue } from '../../../../utils';
 import { STREAM_EVENT_TYPE } from '../../constants';
 
 var TableArray = function TableArray(props) {
@@ -56,6 +58,13 @@ var TableArray = function TableArray(props) {
       setList = _React$useState10[1];
 
   var listRef = React.useRef([]);
+
+  var _React$useState11 = React.useState({}),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      enumOptions = _React$useState12[0],
+      setEnumOptions = _React$useState12[1];
+
+  var enumOptionsRef = React.useRef({});
   useObservable(function (p) {
     if ((p === null || p === void 0 ? void 0 : p.type) === 'setFieldsValue') {
       if (typeof name === 'string' && p.payload[name]) {
@@ -285,6 +294,8 @@ var TableArray = function TableArray(props) {
       _options.push(obj);
     });
 
+    enumOptionsRef.current[data.id] = _options;
+    setEnumOptions(_objectSpread({}, enumOptionsRef.current));
     return _options;
   }, []);
   var processColumnType = React.useCallback(function (data, _extraInfo) {
@@ -301,7 +312,7 @@ var TableArray = function TableArray(props) {
   var processSchemaToColumns = React.useCallback(function (_properties) {
     var _columns = [];
 
-    for (var i = 0; i < _properties.length; i++) {
+    var _loop = function _loop(i) {
       var _extraInfo$common, _extraInfo$enum5;
 
       var it = _properties[i];
@@ -314,14 +325,33 @@ var TableArray = function TableArray(props) {
         editable: !(extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$common = extraInfo.common) === null || _extraInfo$common === void 0 ? void 0 : _extraInfo$common.disabled),
         type: processColumnType(it, extraInfo),
         enum: it.type === 'enum' ? processEnumData(it, extraInfo) : undefined,
-        mode: (extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$enum5 = extraInfo.enum) === null || _extraInfo$enum5 === void 0 ? void 0 : _extraInfo$enum5.isMutiple) ? 'multiple' : undefined
+        mode: (extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$enum5 = extraInfo.enum) === null || _extraInfo$enum5 === void 0 ? void 0 : _extraInfo$enum5.isMutiple) ? 'multiple' : undefined,
+        render: function render(val) {
+          if (it.type = 'enum') {
+            if (Array.isArray(val)) {
+              return val.map(function (v) {
+                return /*#__PURE__*/React.createElement(_Tag, {
+                  color: "geekblue"
+                }, getConstantValue(enumOptionsRef.current[it.id], v, 'value', 'label'));
+              });
+            }
+
+            return getConstantValue(enumOptionsRef.current[it.id], val, 'value', 'label');
+          }
+
+          return val;
+        }
       };
 
       _columns.push(obj);
+    };
+
+    for (var i = 0; i < _properties.length; i++) {
+      _loop(i);
     }
 
     return _columns;
-  }, []);
+  }, [enumOptions]);
   var columns = React.useMemo(function () {
     var _columns = [];
 

package/es/framework/fg/index.d.ts

@@ -0,0 +1,120 @@
+import { FG } from '../../comps/FormGenerator/index.d';
+interface ICreate {
+    create(data: any): ILayoutSetting & IReturnMethod;
+}
+interface ILayoutSetting {
+    grid<T>(this: T, _value: 1 | 2 | 3 | 4): Omit<T, 'grid'> & IReturnMethod;
+    labelSpan<T>(this: T, _value: number): Omit<T, 'labelSpan'> & IReturnMethod;
+}
+interface IComps {
+    object(data: FG.Node[] | any, _id: string): ICommonSetting & IReturnMethod;
+    input(_id: string): ICommonSetting;
+    textarea(_id: string): ICommonSetting;
+    date(_id: string): ICommonSetting;
+    number(_id: string): ICommonSetting;
+    switch(_id: string): ICommonSetting;
+    select(_id: string): ICommonSetting;
+    mutiSelect(_id: string): ICommonSetting;
+}
+interface ICommonSetting {
+    label<T>(this: T, _label: string): Omit<T, 'label'> & IReturnMethod;
+    require<T>(this: T): Omit<T, 'require'> & IReturnMethod;
+    disabled<T>(this: T): Omit<T, 'disabled'> & IReturnMethod;
+    hidden<T>(this: T): Omit<T, 'hidden'> & IReturnMethod;
+    br<T>(this: T): Omit<T, 'br'> & IReturnMethod;
+    color<T>(this: T, _color: string): Omit<T, 'color'> & IReturnMethod;
+    colSpan<T>(this: T, _colSpan: number): Omit<T, 'colSpan'> & IReturnMethod;
+    defaultValue<T>(this: T, _defaultValue: any): Omit<T, 'defaultValue'> & IReturnMethod;
+    help<T>(this: T, _help: string): Omit<T, 'help'> & IReturnMethod;
+    tooltip<T>(this: T, _tooltip: string): Omit<T, 'tooltip'> & IReturnMethod;
+    placeholder<T>(this: T, _placeholder: string): Omit<T, 'placeholder'> & IReturnMethod;
+}
+interface IReturnMethod {
+    valueOf(): void;
+    toString(): void;
+}
+export declare type IFormRobot = ICreate & IComps;
+/**
+ * 链式调用 组件元数据表单的机器人
+ */
+export declare class FormRobot implements IFormRobot {
+    /**
+     * 构建每个字段的值
+     */
+    _data: FG.Node | FG.Node[];
+    /**
+     * 用来判断是否已经初始化过数据
+     */
+    _hasInitData: boolean;
+    constructor(data?: FG.Node | FG.Node[]);
+    /**
+     * 创建表单的入口
+     * @param arr
+     * @returns
+     */
+    create(arr: FG.Node[]): ILayoutSetting & IReturnMethod;
+    /**
+     * 对象类型 创建表单的入口
+     * @param _id 属性名
+     * @returns
+     */
+    object(arr: FG.Node[], _id: string): ICommonSetting & IReturnMethod;
+    /**
+     * 输入框
+     * @param _id 属性名
+     * @returns
+     */
+    input(_id: string): ICommonSetting;
+    /**
+     * 文本框
+     * @param _id
+     * @returns
+     */
+    textarea(_id: string): ICommonSetting;
+    /**
+     * 日期选择
+     * @param _id
+     * @returns
+     */
+    date(_id: string): ICommonSetting;
+    /**
+     * 数字框
+     * @param _id
+     * @returns
+     */
+    number(_id: string): ICommonSetting;
+    /**
+     * 开关
+     * @param _id
+     * @returns
+     */
+    switch(_id: string): ICommonSetting;
+    /**
+     * 下拉单选
+     * @param _id
+     * @returns
+     */
+    select(_id: string): ICommonSetting;
+    /**
+     * 下拉多选
+     * @param _id
+     * @returns
+     */
+    mutiSelect(_id: string): ICommonSetting;
+    label<T>(this: T, _vaule: string): Omit<T, 'label'> & IReturnMethod;
+    require<T>(this: T): Omit<T, 'require'> & IReturnMethod;
+    color<T>(this: T, _vaule: string): Omit<T, 'color'> & IReturnMethod;
+    colSpan<T>(this: T, _vaule: number): Omit<T, 'colSpan'> & IReturnMethod;
+    defaultValue<T>(this: T, _vaule: number | string): Omit<T, 'defaultValue'> & IReturnMethod;
+    help<T>(this: T, _vaule: string): Omit<T, 'help'> & IReturnMethod;
+    tooltip<T>(this: T, _vaule: string): Omit<T, 'tooltip'> & IReturnMethod;
+    placeholder<T>(this: T, _vaule: string): Omit<T, 'placeholder'> & IReturnMethod;
+    disabled<T>(this: T): Omit<T, 'disabled'> & IReturnMethod;
+    br<T>(this: T): Omit<T, 'br'> & IReturnMethod;
+    hidden<T>(this: T): Omit<T, 'hidden'> & IReturnMethod;
+    grid<T>(this: T, _vaule: 1 | 2 | 3 | 4): Omit<T, 'grid'> & IReturnMethod;
+    valueOf(): any;
+    toString(): string;
+}
+declare const _default: FormRobot;
+export default _default;

package/es/framework/fg/index.js

@@ -0,0 +1,301 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+
+/* eslint-disable */
+import { transFG2Schema } from '@/comps/FormGenerator/transformer';
+import { renderBasicFormProps, renderLayoutFormProps, renderSetting } from './utils';
+/**
+ * 链式调用 组件元数据表单的机器人
+ */
+
+export var FormRobot = /*#__PURE__*/function () {
+  /**
+   * 构建每个字段的值
+   */
+
+  /**
+   * 用来判断是否已经初始化过数据
+   */
+  function FormRobot(data) {
+    _classCallCheck(this, FormRobot);
+
+    this._data = void 0;
+    this._hasInitData = void 0;
+
+    /**
+     * 构造函数 正式判断是够已经初始化数据
+     * data -> 如果存在,则作为初始化数据
+     */
+    this._hasInitData = true;
+
+    if (data === undefined) {
+      this._data = null;
+      this._hasInitData = false;
+    } else {
+      this._data = data;
+    }
+  }
+  /**
+   * 创建表单的入口
+   * @param arr
+   * @returns
+   */
+
+
+  _createClass(FormRobot, [{
+    key: "create",
+    value: function create(arr) {
+      var _init = this._hasInitData ? this._data : [];
+
+      var _data = [].concat(_toConsumableArray(_init), _toConsumableArray(arr));
+
+      return new FormRobot(_data);
+    } //*********************************表单基本类型__START************************************//
+
+    /**
+     * 对象类型 创建表单的入口
+     * @param _id 属性名
+     * @returns
+     */
+
+  }, {
+    key: "object",
+    value: function object(arr, _id) {
+      var _data = renderLayoutFormProps(arr, _id, 'obj');
+
+      return new FormRobot(_data);
+    }
+    /**
+     * 输入框
+     * @param _id 属性名
+     * @returns
+     */
+
+  }, {
+    key: "input",
+    value: function input(_id) {
+      var _data = renderBasicFormProps(_id, 'input');
+
+      return new FormRobot(_data);
+    }
+    /**
+     * 文本框
+     * @param _id
+     * @returns
+     */
+
+  }, {
+    key: "textarea",
+    value: function textarea(_id) {
+      var _data = renderBasicFormProps(_id, 'textarea');
+
+      return new FormRobot(_data);
+    }
+    /**
+     * 日期选择
+     * @param _id
+     * @returns
+     */
+
+  }, {
+    key: "date",
+    value: function date(_id) {
+      var _data = renderBasicFormProps(_id, 'date');
+
+      return new FormRobot(_data);
+    }
+    /**
+     * 数字框
+     * @param _id
+     * @returns
+     */
+
+  }, {
+    key: "number",
+    value: function number(_id) {
+      var _data = renderBasicFormProps(_id, 'number');
+
+      return new FormRobot(_data);
+    }
+    /**
+     * 开关
+     * @param _id
+     * @returns
+     */
+
+  }, {
+    key: "switch",
+    value: function _switch(_id) {
+      var _data = renderBasicFormProps(_id, 'switch');
+
+      return new FormRobot(_data);
+    }
+    /**
+     * 下拉单选
+     * @param _id
+     * @returns
+     */
+
+  }, {
+    key: "select",
+    value: function select(_id) {
+      var _data = renderBasicFormProps(_id, 'select');
+
+      return new FormRobot(_data);
+    }
+    /**
+     * 下拉多选
+     * @param _id
+     * @returns
+     */
+
+  }, {
+    key: "mutiSelect",
+    value: function mutiSelect(_id) {
+      var _data = renderBasicFormProps(_id, 'mutiSelect');
+
+      return new FormRobot(_data);
+    } //*********************************表单基本类型__END************************************//
+    //*********************************提供的扩展规则完善表单__START************************************//
+    // 标签显示文本
+
+  }, {
+    key: "label",
+    value: function label(_vaule) {
+      var _init = this._hasInitData ? this._data : {};
+
+      var _data = renderSetting(_init, 'label', _vaule);
+
+      return new FormRobot(_data);
+    }
+  }, {
+    key: "require",
+    value: function require() {
+      var _init = this._hasInitData ? this._data : {};
+
+      var _data = renderSetting(_init, 'require', true);
+
+      return new FormRobot(_data);
+    }
+  }, {
+    key: "color",
+    value: function color(_vaule) {
+      var _init = this._hasInitData ? this._data : {};
+
+      var _data = renderSetting(_init, 'color', _vaule);
+
+      return new FormRobot(_data);
+    }
+  }, {
+    key: "colSpan",
+    value: function colSpan(_vaule) {
+      var _init = this._hasInitData ? this._data : {};
+
+      var _data = renderSetting(_init, 'colSpan', _vaule);
+
+      return new FormRobot(_data);
+    }
+  }, {
+    key: "defaultValue",
+    value: function defaultValue(_vaule) {
+      var _init = this._hasInitData ? this._data : {};
+
+      var _data = renderSetting(_init, 'defaultValue', _vaule);
+
+      return new FormRobot(_data);
+    }
+  }, {
+    key: "help",
+    value: function help(_vaule) {
+      var _init = this._hasInitData ? this._data : {};
+
+      var _data = renderSetting(_init, 'help', _vaule);
+
+      return new FormRobot(_data);
+    }
+  }, {
+    key: "tooltip",
+    value: function tooltip(_vaule) {
+      var _init = this._hasInitData ? this._data : {};
+
+      var _data = renderSetting(_init, 'tooltip', _vaule);
+
+      return new FormRobot(_data);
+    }
+  }, {
+    key: "placeholder",
+    value: function placeholder(_vaule) {
+      var _init = this._hasInitData ? this._data : {};
+
+      var _data = renderSetting(_init, 'placeholder', _vaule);
+
+      return new FormRobot(_data);
+    }
+  }, {
+    key: "disabled",
+    value: function disabled() {
+      var _init = this._hasInitData ? this._data : {};
+
+      var _data = renderSetting(_init, 'disabled', true);
+
+      return new FormRobot(_data);
+    }
+  }, {
+    key: "br",
+    value: function br() {
+      var _init = this._hasInitData ? this._data : {};
+
+      var _data = renderSetting(_init, 'br', true);
+
+      return new FormRobot(_data);
+    }
+  }, {
+    key: "hidden",
+    value: function hidden() {
+      var _init = this._hasInitData ? this._data : {};
+
+      var _data = renderSetting(_init, 'hidden', true);
+
+      return new FormRobot(_data);
+    } //*********************************提供的扩展规则完善表单__END************************************//
+    //*********************************表单布局的扩展规则__START************************************//
+
+  }, {
+    key: "grid",
+    value: function grid(_vaule) {
+      var _init = this._hasInitData ? this._data : {};
+
+      var _data = renderSetting(_init, 'colSpan', _vaule);
+
+      return new FormRobot(_data);
+    } //*********************************表单布局的扩展规则__END************************************//
+    //*********************************拿到最终的数据方法__START************************************//
+
+  }, {
+    key: "valueOf",
+    value: function valueOf() {
+      if (Array.isArray(this._data)) {
+        //是数组,说明是create方法,需要转换成元数据
+        return transFG2Schema(this._data);
+      } else {
+        return this._data;
+      }
+    }
+  }, {
+    key: "toString",
+    value: function toString() {
+      return JSON.stringify(this.valueOf());
+    }
+  }]);
+
+  return FormRobot;
+}();
+export default new FormRobot();
+var fr = new FormRobot();
+/* fr.object([
+ *  fr.input('name').label('名称').valueOf(),
+ *  fr.object([
+ *     fr.input('id').label('主键').valueOf()
+ * ], 'detail')]);
+ */

package/es/framework/fg/utils.d.ts

@@ -0,0 +1,14 @@
+import { FG } from '../../comps/FormGenerator/index.d';
+export declare const renderBasicFormProps: (_id: string, _type: string) => {
+    id: string;
+    name: string;
+    type: string;
+    param: FG.NodeParam;
+};
+export declare const renderLayoutFormProps: (_arr: FG.Node[], _id: string, _type: string) => {
+    id: string;
+    name: string;
+    type: string;
+    param: FG.NodeParam;
+};
+export declare const renderSetting: (_init: FG.Node, _type: string, _value: string | number | boolean) => FG.Node;

package/es/framework/fg/utils.js

@@ -0,0 +1,44 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+/*
+ * @Author: wangxian
+ * @Date: 2023-03-21 15:44:45
+ * @LastEditTime: 2023-03-22 09:20:34
+ */
+import { deepClone } from '../../utils';
+import { basicComps, layoutComps } from './../../comps/FormGenerator/settings/index';
+export var renderBasicFormProps = function renderBasicFormProps(_id, _type) {
+  var _basicComps = deepClone(basicComps);
+
+  var _ = _basicComps.find(function (it) {
+    return it.type === _type;
+  }) || {};
+
+  delete _.param.schema;
+  return _objectSpread(_objectSpread({}, _), {}, {
+    id: _id
+  });
+};
+export var renderLayoutFormProps = function renderLayoutFormProps(_arr, _id, _type) {
+  var _layoutComps = deepClone(layoutComps);
+
+  var _ = _layoutComps.find(function (it) {
+    return it.type === _type;
+  }) || {};
+
+  delete _.param.schema;
+  _.param.types = _arr;
+  return _objectSpread(_objectSpread({}, _), {}, {
+    id: _id
+  });
+};
+export var renderSetting = function renderSetting(_init, _type, _value) {
+  var _ = _objectSpread(_objectSpread({}, _init), {}, {
+    param: _objectSpread(_objectSpread({}, _init === null || _init === void 0 ? void 0 : _init.param), {}, {
+      setting: _objectSpread(_objectSpread({}, _init.param.setting), {}, _defineProperty({}, _type, _value))
+    })
+  });
+
+  return _;
+};

package/es/theme.less

@@ -2,7 +2,7 @@
   --ronds-metadata-color-border-1: #314162;
   --ronds-metadata-color-border-2: #0d9af3;
   --ronds-metadata-color-bg-2: #0d1f40;
-  --ronds-metadata-color-bg-3: #0d1f40;
+  --ronds-metadata-color-bg-3: #021125;
   --ronds-metadata-color-bg-4: #1c3771;
   --ronds-metadata-color-text-1: #ffffff;
   --ronds-metadata-color-text-2: #ffffff;

package/es/utils.d.ts

@@ -17,3 +17,10 @@ export declare const md5: (data: string, digest?: string) => any;
 export declare function arrayMoveMutable(array: any[], fromIndex: number, toIndex: number): void;
 export declare function arrayMoveImmutable(array: any[], fromIndex: number, toIndex: number): any[];
 export declare function arrayInsert(array: any[], index: number, item: any): any[];
+/**
+ * 调用时不用把参数补全; getValue(array, key) 一样可以调用
+ * @param array 数组
+ * @param key 指定的数值
+ * @returns {string|string|string}
+ */
+export declare function getConstantValue(array: any[], key: string | number, strKey?: string, strValue?: string): string;

package/es/utils.js

@@ -1,10 +1,11 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
 /*
  * @Author: wangxian
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2023-02-13 17:02:22
+ * @LastEditTime: 2023-03-24 09:49:51
  */
 import { useCallback, useEffect, useRef } from 'react';
 /** 防抖 */
@@ -135,4 +136,45 @@ export function arrayMoveImmutable(array, fromIndex, toIndex) {
 export function arrayInsert(array, index, item) {
   array.splice(index, 0, item);
   return array;
+}
+/**
+ * 调用时不用把参数补全; getValue(array, key) 一样可以调用
+ * @param array 数组
+ * @param key 指定的数值
+ * @returns {string|string|string}
+ */
+
+export function getConstantValue(array, key, strKey, strValue) {
+  var result = '';
+  var _strKey = 'id';
+  var _strValue = 'value';
+
+  if (strKey) {
+    _strKey = strKey;
+  }
+
+  if (strValue) {
+    _strValue = strValue;
+  }
+
+  if (array) {
+    var _iterator = _createForOfIteratorHelper(array),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+
+        if (key === item[_strKey]) {
+          result = item[_strValue];
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+
+  return result;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.2.24",
+  "version": "1.2.26",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -45,6 +45,7 @@
     "bl": "^5.0.0",
     "codemirror": "^5.63.0",
     "codepage": "^1.15.0",
+    "css-element-queries": "^1.2.3",
     "github-markdown-css": "^5.1.0",
     "immer": "^9.0.14",
     "lodash": "^4.17.21",
@@ -91,4 +92,4 @@
     "webpack-cli": "^3.3.12",
     "yorkie": "^2.0.0"
   }
-}
+}