ronds-metadata 1.2.10 → 1.2.11

package/es/comps/MetadataForm/index.js

@@ -0,0 +1,268 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import { renderForm } from './utils';
+import './index.less';
+import { MetadataFormContext } from './interface';
+import { JsonMetadataProvider } from '../../framework/metadata';
+import { MetadataService } from '../../framework/metadata/MetadataService';
+import useMemoSubject from '../../framework/rxjs-hooks/useMemoSubject';
+import useObservable from '../../framework/rxjs-hooks/useObservable';
+import moment from 'moment';
+import { DEFAULT_DATE_FORMAT } from './DataCell/Input';
+import { STREAM_EVENT_TYPE } from './constants';
+
+var MetadataForm = function MetadataForm(props) {
+  var _Form$useForm = _Form.useForm(),
+      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+      form = _Form$useForm2[0];
+
+  var schema = props.schema,
+      initialValues = props.initialValues,
+      refId = props.refId,
+      _props$colSpan = props.colSpan,
+      colSpan = _props$colSpan === void 0 ? 24 : _props$colSpan,
+      labelSpan = props.labelSpan,
+      _props$labelWrap = props.labelWrap,
+      labelWrap = _props$labelWrap === void 0 ? true : _props$labelWrap,
+      _props$layout = props.layout,
+      layout = _props$layout === void 0 ? 'vertical' : _props$layout,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$isRefForm = props.isRefForm,
+      isRefForm = _props$isRefForm === void 0 ? true : _props$isRefForm,
+      _props$isFoldForm = props.isFoldForm,
+      isFoldForm = _props$isFoldForm === void 0 ? false : _props$isFoldForm,
+      _props$isShowTypeInfo = props.isShowTypeInfo,
+      isShowTypeInfo = _props$isShowTypeInfo === void 0 ? false : _props$isShowTypeInfo,
+      initEnumValue = props.initEnumValue,
+      onFinish = props.onFinish,
+      getFormInstance = props.getFormInstance,
+      onValuesChange = props.onValuesChange,
+      onSelectChange = props.onSelectChange,
+      onCellButtonClick = props.onCellButtonClick;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      mySchma = _React$useState2[0],
+      setMySchema = _React$useState2[1];
+
+  var _React$useState3 = React.useState(),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      innerSchemas = _React$useState4[0],
+      setInnerSchemas = _React$useState4[1];
+
+  var _React$useState5 = React.useState(),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      fields = _React$useState6[0],
+      setFields = _React$useState6[1];
+
+  var _React$useState7 = React.useState(),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      formFieldValue = _React$useState8[0],
+      setFormFieldValue = _React$useState8[1];
+
+  var firstLoadRef = React.useRef(true);
+  var firstLoadForm = React.useRef(true);
+  var stream$ = useMemoSubject();
+  var processStreamEvent = React.useCallback(function (p) {
+    var _p$payload, _p$payload2;
+
+    switch (p === null || p === void 0 ? void 0 : p.type) {
+      case STREAM_EVENT_TYPE.ON_SELECT_CHANGE:
+        onSelectChange && onSelectChange(p.payload);
+        break;
+
+      case STREAM_EVENT_TYPE.ON_BUTTON_CELL_CLICK:
+        onCellButtonClick && onCellButtonClick(p.payload);
+        break;
+
+      case STREAM_EVENT_TYPE.ON_VALUES_CHANGE:
+        onValuesChange && onValuesChange(p === null || p === void 0 ? void 0 : (_p$payload = p.payload) === null || _p$payload === void 0 ? void 0 : _p$payload.val, p === null || p === void 0 ? void 0 : (_p$payload2 = p.payload) === null || _p$payload2 === void 0 ? void 0 : _p$payload2.allVals);
+        break;
+    }
+  }, []);
+  useObservable(function (p) {
+    processStreamEvent(p);
+  }, [stream$]);
+  var options = React.useMemo(function () {
+    return {
+      disabled: disabled,
+      isRefForm: isRefForm,
+      isShowTypeInfo: isShowTypeInfo,
+      initEnumValue: initEnumValue
+    };
+  }, [disabled, isRefForm, isShowTypeInfo, initEnumValue]);
+  /**
+   * 获取form的实例
+   */
+
+  React.useEffect(function () {
+    if (form && stream$ && firstLoadForm.current) {
+      // 改写setFiedldsValue;
+      var e = form.setFieldsValue;
+
+      var setFieldsValue = function setFieldsValue(vals) {
+        e(vals);
+        stream$.next({
+          type: 'setFieldsValue',
+          payload: vals
+        });
+      };
+
+      form.setFieldsValue = setFieldsValue;
+      getFormInstance && getFormInstance(form);
+      firstLoadForm.current = false;
+    }
+  }, [form, stream$, getFormInstance]);
+  React.useEffect(function () {
+    if (schema && schema.length > 0) {
+      setMySchema(_toConsumableArray(schema));
+      setInnerSchemas(undefined);
+    }
+  }, [schema]);
+  React.useEffect(function () {
+    if (refId && !schema) {
+      var server = new MetadataService();
+      server.GetMetadataDetailById(refId).then(function (res) {
+        var _schema = JSON.parse(res.schema) || [];
+
+        setMySchema(_toConsumableArray(_schema));
+      });
+    }
+  }, [refId]);
+  React.useEffect(function () {
+    if (mySchma && mySchma.length > 0) {
+      var _mySchma$, _mySchma$2, _mySchma$3, _mySchma$3$fields$;
+
+      var provider = new JsonMetadataProvider();
+      provider.add_types(mySchma);
+      var FormCls = provider.get_type(mySchma[0].id);
+      var formCls = new FormCls();
+      var _fields = formCls.__type__.__fields__;
+      setFields(_fields);
+      setInnerSchemas(((_mySchma$ = mySchma[0]) === null || _mySchma$ === void 0 ? void 0 : _mySchma$.types) || []);
+      setFormFieldValue(((_mySchma$2 = mySchma[0]) === null || _mySchma$2 === void 0 ? void 0 : _mySchma$2.fields) && ((_mySchma$3 = mySchma[0]) === null || _mySchma$3 === void 0 ? void 0 : (_mySchma$3$fields$ = _mySchma$3.fields[0]) === null || _mySchma$3$fields$ === void 0 ? void 0 : _mySchma$3$fields$.value));
+      return function () {
+        provider = null;
+      };
+    }
+
+    return function () {};
+  }, [mySchma]);
+  React.useEffect(function () {
+    if (initialValues && firstLoadRef.current && fields) {
+      try {
+        // 处理时间格式
+        fields.forEach(function (v, k) {
+          var _v$text;
+
+          if (((v === null || v === void 0 ? void 0 : (_v$text = v.text) === null || _v$text === void 0 ? void 0 : _v$text.type) === 'datePicker' || (v === null || v === void 0 ? void 0 : v.type) === 'datePicker') && initialValues[k]) {
+            var _v$text2;
+
+            initialValues[k] = moment(initialValues[k], (v === null || v === void 0 ? void 0 : (_v$text2 = v.text) === null || _v$text2 === void 0 ? void 0 : _v$text2.format) || DEFAULT_DATE_FORMAT);
+          }
+        });
+        form.setFieldsValue(_objectSpread({}, initialValues));
+        firstLoadRef.current = false;
+      } catch (ex) {
+        console.warn('init not sucess');
+        setTimeout(function () {
+          form.setFieldsValue(_objectSpread({}, initialValues));
+          firstLoadRef.current = false;
+        }, 500);
+      }
+    }
+  }, [initialValues, fields]);
+  var myLabelSpan = React.useMemo(function () {
+    var _labelSpan = undefined;
+
+    if (labelSpan || (formFieldValue === null || formFieldValue === void 0 ? void 0 : formFieldValue.labelSpan)) {
+      _labelSpan = (formFieldValue === null || formFieldValue === void 0 ? void 0 : formFieldValue.labelSpan) ? formFieldValue === null || formFieldValue === void 0 ? void 0 : formFieldValue.labelSpan : labelSpan;
+    }
+
+    return _labelSpan;
+  }, [labelSpan, formFieldValue === null || formFieldValue === void 0 ? void 0 : formFieldValue.labelSpan]);
+  var myLayout = React.useMemo(function () {
+    var _layout = 'vertical';
+
+    if (layout || (formFieldValue === null || formFieldValue === void 0 ? void 0 : formFieldValue.layout)) {
+      _layout = (formFieldValue === null || formFieldValue === void 0 ? void 0 : formFieldValue.layout) ? formFieldValue === null || formFieldValue === void 0 ? void 0 : formFieldValue.layout : layout;
+    }
+
+    return _layout;
+  }, [layout, formFieldValue === null || formFieldValue === void 0 ? void 0 : formFieldValue.layout]);
+
+  var onMyValuesChange = function onMyValuesChange(value, allValues) {
+    var _extra$text;
+
+    // 处理时间格式
+    var key = Object.keys(value);
+    var extra = fields.get(key[0]);
+
+    if ((extra === null || extra === void 0 ? void 0 : (_extra$text = extra.text) === null || _extra$text === void 0 ? void 0 : _extra$text.type) === 'datePicker' || (extra === null || extra === void 0 ? void 0 : extra.type) === 'datePicker') {
+      var _extra$text2, _extra$text3;
+
+      value[key[0]] = moment(value[key[0]]).format((extra === null || extra === void 0 ? void 0 : (_extra$text2 = extra.text) === null || _extra$text2 === void 0 ? void 0 : _extra$text2.format) || DEFAULT_DATE_FORMAT);
+      allValues[key[0]] = moment(value[key[0]]).format((extra === null || extra === void 0 ? void 0 : (_extra$text3 = extra.text) === null || _extra$text3 === void 0 ? void 0 : _extra$text3.format) || DEFAULT_DATE_FORMAT);
+    }
+
+    stream$.next({
+      type: STREAM_EVENT_TYPE.ON_VALUES_CHANGE,
+      payload: {
+        val: value,
+        allVals: allValues
+      }
+    });
+  };
+
+  var onMyFinish = function onMyFinish(values) {
+    // 处理时间格式
+    fields.forEach(function (v, k) {
+      var _v$text3;
+
+      if (((v === null || v === void 0 ? void 0 : (_v$text3 = v.text) === null || _v$text3 === void 0 ? void 0 : _v$text3.type) === 'datePicker' || (v === null || v === void 0 ? void 0 : v.type) === 'datePicker') && values[k]) {
+        var _v$text4;
+
+        values[k] = moment(values[k]).format((v === null || v === void 0 ? void 0 : (_v$text4 = v.text) === null || _v$text4 === void 0 ? void 0 : _v$text4.format) || DEFAULT_DATE_FORMAT);
+      }
+    });
+    onFinish && onFinish(values);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MetadataFormContext.Provider, {
+    value: {
+      fields: fields,
+      colSpan: (formFieldValue === null || formFieldValue === void 0 ? void 0 : formFieldValue.colSpan) || colSpan,
+      labelSpan: myLabelSpan,
+      layout: myLayout,
+      form: form,
+      stream$: stream$,
+      initialValues: initialValues,
+      isShowTypeInfo: isShowTypeInfo,
+      isFoldForm: isFoldForm,
+      __TYPE__: innerSchemas
+    }
+  }, /*#__PURE__*/React.createElement(_Form, {
+    className: "metadata-form",
+    wrapperCol: myLabelSpan && myLayout === 'horizontal' ? {
+      span: 24 - myLabelSpan,
+      offset: 0
+    } : undefined,
+    labelCol: myLabelSpan && myLayout === 'horizontal' ? {
+      span: myLabelSpan,
+      offset: 0
+    } : undefined,
+    labelWrap: labelWrap,
+    layout: myLayout,
+    form: form,
+    name: "control-hooks",
+    onFinish: onMyFinish,
+    onValuesChange: onMyValuesChange
+  }, renderForm(mySchma, options, (formFieldValue === null || formFieldValue === void 0 ? void 0 : formFieldValue.colSpan) || colSpan))));
+};
+
+export default MetadataForm;

package/es/comps/MetadataForm/interface.js

@@ -0,0 +1,8 @@
+/*
+ * @Author:wangxian
+ * @Date: 2021-09-18 14:15:04
+ * @LastEditTime: 2023-02-22 15:51:59
+ */
+import React from 'react';
+export var MetadataFormContext = /*#__PURE__*/React.createContext(null);
+export var MetadataRefContext = /*#__PURE__*/React.createContext(null);

package/es/comps/MetadataForm/utils.js

@@ -0,0 +1,112 @@
+import "antd/es/row/style";
+import _Row from "antd/es/row";
+import "antd/es/spin/style";
+import _Spin from "antd/es/spin";
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+/*
+ * @Author: wangxian
+ * @Date: 2021-09-18 14:15:04
+ * @LastEditTime: 2023-02-24 15:32:47
+ */
+import React from 'react';
+import Input from './DataCell/Input';
+import Number from './DataCell/Number';
+import Select from './DataCell/Select';
+import Switch from './DataCell/Switch';
+import Array from './DataCell/Array';
+import Ref from './DataCell/Ref';
+import { withAddOnAfter } from './HOC';
+var DataCellMap = {
+  text: withAddOnAfter(Input),
+  number: withAddOnAfter(Number),
+  enum: withAddOnAfter(Select),
+  bool: withAddOnAfter(Switch),
+  array: withAddOnAfter(Array),
+  ref: withAddOnAfter(Ref)
+};
+export function getDataCell(item, options, colSpan) {
+  if (item.type && DataCellMap[item.type]) {
+    var Comm = DataCellMap[item.type];
+
+    if (colSpan === 23) {}
+
+    if (item.type === 'ref') {}
+
+    var isDisabled = function isDisabled(b) {
+      if (typeof b === 'boolean') {
+        return b;
+      } else if (b.findIndex(function (it) {
+        return it === item.id;
+      }) > -1) {
+        return true;
+      }
+
+      return false;
+    };
+
+    return /*#__PURE__*/React.createElement(Comm, _extends({
+      key: item.id
+    }, item, {
+      disabled: isDisabled(options.disabled),
+      isRefForm: options.isRefForm,
+      isShowTypeInfo: options.isShowTypeInfo,
+      field: options.field,
+      name: options.pName,
+      initEnumValue: options.initEnumValue,
+      isObj: options.isObj,
+      colSpan: colSpan
+    }));
+  }
+
+  return null;
+}
+/**
+ *  渲染表单
+ * @param schemaRef 元数据的schema
+ * @param disabled 是否可用
+ * @param isRefForm 引用类型是否显示成表单
+ * @param isShowTypeInfo 是否展示类型的提示信息
+ * @param pName 上级表单的名称
+ * @param field
+ * @param isObj 是否是个对象
+ * @returns
+ */
+
+export function renderForm(schemaRef, options) {
+  var colSpan = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 24;
+  if (schemaRef.length === 0) return /*#__PURE__*/React.createElement(_Spin, null);
+  var _schema = schemaRef[0];
+  var _properties = _schema.properties;
+  var _form = [];
+
+  for (var i = 0; i < _properties.length; i++) {
+    // const depend = useWatchDepend({});
+    _form.push( /*#__PURE__*/React.createElement(React.Fragment, null, getDataCell(_properties[i], options, colSpan)));
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Row, {
+    gutter: 16
+  }, _form));
+}
+export function getLabelByProps(data) {
+  if (data.fields && data.fields.length > 0) {
+    var _data$fields$0$value, _data$fields$0$value$, _data$fields$, _data$fields$$value;
+
+    return ((_data$fields$0$value = data.fields[0].value) === null || _data$fields$0$value === void 0 ? void 0 : (_data$fields$0$value$ = _data$fields$0$value.common) === null || _data$fields$0$value$ === void 0 ? void 0 : _data$fields$0$value$.label) || ((_data$fields$ = data.fields[0]) === null || _data$fields$ === void 0 ? void 0 : (_data$fields$$value = _data$fields$.value) === null || _data$fields$$value === void 0 ? void 0 : _data$fields$$value.label) || data.id;
+  }
+
+  return data.id;
+}
+export function assign(pathArr, val, obj) {
+  var len = pathArr.length - 1;
+  pathArr.reduce(function (cur, key, index) {
+    if (index === len) {
+      cur[key] = val;
+    } else {
+      cur[key] = {};
+    }
+
+    return cur[key];
+  }, obj);
+}

package/es/comps/locales/en-US.js

@@ -0,0 +1,24 @@
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-09 11:53:44
+ * @LastEditTime: 2022-05-28 10:21:09
+ */
+export default {
+  操作: 'Operation',
+  添加一行: 'Add New Line',
+  添加: 'Add',
+  编辑: 'Edit',
+  删除: 'Delete',
+  确定: 'Confirm',
+  取消: 'Cancel',
+  确认删除该条数据: 'Confirm to delete this piece of data?',
+  请先保存正在编辑的行: 'Please save the line being edited first',
+  请输入key: 'Please enter key',
+  请输入title: 'Please enter title',
+  确认会删除该列: 'Confirm will delete the column?',
+  当前值无修改: 'No change to current value',
+  放大: 'Enlarge',
+  缩小: 'zoom out',
+  实际尺寸: 'Actual size',
+  适应画布: 'Fit to canvas'
+};

package/es/comps/locales/index.js

@@ -0,0 +1,8 @@
+import zhCN from './zh-CN';
+import enUS from './en-US';
+import { initLocale } from '../../framework/locale';
+initLocale({
+  'zh-CN': zhCN,
+  'en-US': enUS
+});
+export { setLocale, getLocale } from '../../framework/locale';

package/es/comps/locales/zh-CN.js

@@ -0,0 +1,24 @@
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-09 11:53:44
+ * @LastEditTime: 2022-05-28 10:19:25
+ */
+export default {
+  操作: '操作',
+  添加一行: '添加一行',
+  添加: '添加',
+  编辑: '编辑',
+  删除: '删除',
+  确定: '确定',
+  取消: '取消',
+  确定删除该条数据: '确定删除该条数据?',
+  请先保存正在编辑的行: '请先保存正在编辑的行',
+  请输入key: '请输入key',
+  请输入title: '请输入title',
+  确认会删除该列: '确认会删除该列?',
+  当前值无修改: '当前值无修改',
+  放大: '放大',
+  缩小: '缩小',
+  实际尺寸: '实际尺寸',
+  适应画布: '适应画布'
+};

package/es/config.js

@@ -0,0 +1,50 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+/*
+ * @Author: wangxian
+ * @Date: 2021-09-18 14:15:04
+ * @LastEditTime: 2023-02-06 18:45:24
+ */
+import { BehaviorSubject, map, distinctUntilChanged } from 'rxjs';
+import { setLocale } from './comps/locales/index';
+import * as jq from './framework/libs/jquery.min.js';
+import { localeKey } from './framework/locale';
+window.jQuery = window.jQuery || jq;
+var defaultConfig = {
+  locale: window.localStorage.getItem(localeKey) || 'zh-CN',
+  theme: 'normal',
+  msgpack: false,
+  openLoading: true,
+  baseUrl: '/phm'
+};
+export var cssPrefix = 'ronds-metadata';
+export var globalSettingStream = new BehaviorSubject(defaultConfig);
+globalSettingStream.pipe(map(function (p) {
+  return p.locale;
+}), distinctUntilChanged()).subscribe(function (p) {
+  setLocale(p);
+});
+globalSettingStream.pipe(map(function (p) {
+  return p.theme;
+}), distinctUntilChanged()).subscribe(function (p) {
+  window.jQuery('body').removeClass("".concat(cssPrefix, "-dark"));
+  window.jQuery('body').removeClass("".concat(cssPrefix, "-normal"));
+  window.jQuery('body').addClass("".concat(cssPrefix, "-").concat(p));
+  window.jQuery('html').removeAttr('data-prefers-color');
+});
+var config = defaultConfig;
+/** 设置配置 */
+
+export var setConfig = function setConfig(opts) {
+  config = _objectSpread(_objectSpread({}, config), opts);
+};
+/**  获取单个配置 */
+
+export function getConfigByKey(key) {
+  return config[key];
+}
+/**  获取全部配置 */
+
+export var getConfig = function getConfig() {
+  return config;
+};