ronds-metadata 1.2.10 → 1.2.11

package/es/comps/MetadataEdit/index.js

@@ -0,0 +1,255 @@
+import "antd/es/drawer/style";
+import _Drawer from "antd/es/drawer";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import "antd/es/select/style";
+import _Select from "antd/es/select";
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+import "antd/es/message/style";
+import _message from "antd/es/message";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import './index.less';
+import MetaFieldsEdit from './components/MetaFieldsEdit';
+import MetaPropsEdit from './components/MetaPropsEdit';
+import { OUTERMOST_TYPES_OPTIONS } from './constant';
+
+var MetadataEdit = function MetadataEdit(props) {
+  var initialValues = props.initialValues,
+      isNameDisabled = props.isNameDisabled,
+      metadataTag = props.metadataTag,
+      onFinish = props.onFinish,
+      onNewRefClick = props.onNewRefClick,
+      getFormInstance = props.getFormInstance;
+
+  var _Form$useForm = _Form.useForm(),
+      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+      form = _Form$useForm2[0];
+
+  var _React$useState = React.useState('object'),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      outerType = _React$useState2[0],
+      setOutType = _React$useState2[1];
+
+  var _React$useState3 = React.useState({
+    id: '',
+    type: 'object'
+  }),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      metaSchema = _React$useState4[0],
+      setMetaSchema = _React$useState4[1];
+
+  var metaSchemaRef = React.useRef({
+    id: '',
+    type: 'object'
+  });
+  var firstLoadRef = React.useRef(true);
+
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      isFields = _React$useState6[0],
+      setIsFields = _React$useState6[1];
+
+  var _React$useState7 = React.useState({}),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      fields = _React$useState8[0],
+      setFields = _React$useState8[1];
+
+  var _React$useState9 = React.useState({}),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      curFields = _React$useState10[0],
+      setCurFields = _React$useState10[1];
+  /**
+   * 获取form的实例
+   */
+
+
+  React.useEffect(function () {
+    if (form) {
+      getFormInstance && getFormInstance(form);
+    }
+  }, [form]);
+  React.useEffect(function () {
+    form.setFieldsValue({
+      id: 'Test'
+    });
+    form.setFieldsValue({
+      type: 'object'
+    });
+  }, [form]);
+  React.useEffect(function () {
+    if (initialValues && firstLoadRef.current) {
+      form.setFieldsValue(_objectSpread({}, initialValues));
+      setMetaSchema(_objectSpread({}, initialValues));
+      metaSchemaRef.current = initialValues;
+      processFileds(initialValues);
+      firstLoadRef.current = false;
+    }
+  }, [form, initialValues]);
+
+  var onMyFinish = function onMyFinish(values) {
+    var _metaSchema = metaSchemaRef.current;
+    _metaSchema.id = values.id;
+    _metaSchema.type = values.type;
+
+    if (values === null || values === void 0 ? void 0 : values.properties) {
+      _metaSchema.properties = values.properties;
+
+      for (var i = 0; i < _metaSchema.properties.length; i++) {
+        if (fields[_metaSchema.properties[i].id]) {
+          _metaSchema.properties[i].fields = fields[_metaSchema.properties[i].id];
+        }
+      }
+    }
+
+    if (fields[values.id]) {
+      _metaSchema.fields = fields[values.id];
+    }
+
+    setMetaSchema(_objectSpread({}, _metaSchema));
+    metaSchemaRef.current = _metaSchema;
+    onFinish && onFinish(JSON.stringify(_metaSchema));
+  };
+
+  var onAddFields = function onAddFields(index) {
+    if (index === -1) {
+      var _id = form.getFieldValue('id');
+
+      var _type = form.getFieldValue('type');
+
+      if (_id) {
+        setIsFields(true);
+        setCurFields({
+          id: _id,
+          type: _type
+        });
+      } else {
+        _message.warn('请填写元数据名称');
+      }
+
+      return;
+    }
+
+    var _properties_from = form.getFieldValue('properties') || [];
+
+    var _properties_ref = metaSchemaRef.current.properties || [];
+
+    var _properties = _properties_from.length >= _properties_ref.length ? _properties_from : _properties_ref;
+
+    var _curFields = _properties[index];
+
+    if (_curFields && _curFields.id) {
+      setIsFields(true);
+      var idx = ((metaSchema === null || metaSchema === void 0 ? void 0 : metaSchema.fields) || []).findIndex(function (v) {
+        return v.id === _curFields.id;
+      });
+
+      if ((metaSchema === null || metaSchema === void 0 ? void 0 : metaSchema.fields) && idx >= 0) {
+        setCurFields(_objectSpread({}, metaSchema === null || metaSchema === void 0 ? void 0 : metaSchema.fields[idx]));
+      } else {
+        setCurFields(_objectSpread({}, _curFields));
+      }
+    } else {
+      _message.warn('请填写属性名称');
+    }
+  };
+
+  var onFieldsChange = function onFieldsChange(values) {
+    var _fields = fields;
+    _fields[curFields.id] = values;
+    setFields(_objectSpread({}, _fields));
+    setIsFields(false);
+  };
+
+  var onOuterTypeChange = function onOuterTypeChange(value) {
+    setOutType(value);
+  };
+
+  var processFileds = function processFileds(schema) {
+    var _properties = schema.properties;
+    var _fields = fields;
+
+    if (_properties) {
+      for (var i = 0; i < _properties.length; i++) {
+        if (_properties[i].fields) {
+          _fields[_properties[i].id] = _properties[i].fields;
+        }
+      }
+    }
+
+    if (schema.fields) {
+      _fields[schema.id] = schema.fields;
+    }
+
+    setFields(_objectSpread({}, _fields));
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Form, {
+    className: "metadata-edit",
+    initialValues: initialValues,
+    form: form,
+    name: "control-hooks",
+    onFinish: onMyFinish
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u540D\u79F0",
+    name: "id",
+    style: {
+      marginBottom: '15px'
+    },
+    rules: [{
+      required: true
+    }]
+  }, /*#__PURE__*/React.createElement(_Input, {
+    disabled: isNameDisabled
+  })), /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u7C7B\u578B",
+    name: "type",
+    style: {
+      marginBottom: '15px'
+    },
+    rules: [{
+      required: true
+    }]
+  }, /*#__PURE__*/React.createElement(_Select, {
+    options: OUTERMOST_TYPES_OPTIONS,
+    onChange: onOuterTypeChange,
+    getPopupContainer: function getPopupContainer(triggerNode) {
+      return triggerNode.parentNode;
+    }
+  })), outerType === 'object' && /*#__PURE__*/React.createElement(MetaPropsEdit, {
+    form: form,
+    metadataTag: metadataTag,
+    name: "properties",
+    onAddFields: onAddFields,
+    onNewRefClick: onNewRefClick
+  }), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    block: true,
+    htmlType: "submit"
+  }, "\u786E\u5B9A"))), /*#__PURE__*/React.createElement(_Drawer, {
+    title: (curFields === null || curFields === void 0 ? void 0 : curFields.id) || 'fields',
+    width: 450,
+    bodyStyle: {
+      padding: 0
+    },
+    placement: "right",
+    onClose: function onClose() {
+      setIsFields(false);
+    },
+    mask: false,
+    push: false,
+    visible: isFields,
+    destroyOnClose: true
+  }, /*#__PURE__*/React.createElement(MetaFieldsEdit, {
+    key: curFields === null || curFields === void 0 ? void 0 : curFields.id,
+    type: curFields === null || curFields === void 0 ? void 0 : curFields.type,
+    defaultValues: fields[curFields.id],
+    onChange: onFieldsChange
+  })));
+};
+
+export default MetadataEdit;

package/es/comps/MetadataEditV2/components/MetaFieldsEdit.js

@@ -0,0 +1,237 @@
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import "antd/es/switch/style";
+import _Switch from "antd/es/switch";
+import "antd/es/input-number/style";
+import _InputNumber from "antd/es/input-number";
+import "antd/es/select/style";
+import _Select from "antd/es/select";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import React from 'react';
+import { RULE_TYPES_OPTIONS } from '../constant';
+import { useMetaType } from '../hooks';
+import MetadataForm from '../../MetadataForm';
+
+var MetaFieldsEdit = function MetaFieldsEdit(props) {
+  var defaultValues = props.defaultValues,
+      onChange = props.onChange;
+
+  var _Form$useForm = _Form.useForm(),
+      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+      form = _Form$useForm2[0];
+
+  var _React$useState = React.useState({}),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      ruleTypes = _React$useState2[0],
+      setRuleTypes = _React$useState2[1];
+
+  var _React$useState3 = React.useState({}),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      refIds = _React$useState4[0],
+      setRefIds = _React$useState4[1];
+
+  var _React$useState5 = React.useState({}),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      refValues = _React$useState6[0],
+      setRefValues = _React$useState6[1];
+
+  var metaType = useMetaType('扩展规则');
+  React.useEffect(function () {
+    if (defaultValues) {
+      //   console.log('defaultValues', defaultValues);
+      form.setFieldsValue({
+        fields: defaultValues
+      });
+      var _ruleTypes = ruleTypes;
+      var _refIds = refIds;
+
+      for (var i = 0; i < defaultValues.length; i++) {
+        _ruleTypes[i] = defaultValues[i].type;
+
+        if (defaultValues[i].type === 'ref') {
+          _refIds[i] = defaultValues[i].refId;
+        }
+      }
+
+      setRefIds(_objectSpread({}, _refIds));
+      setRuleTypes(_objectSpread({}, _ruleTypes));
+    }
+  }, [defaultValues, form]);
+
+  var onFinish = function onFinish(values) {
+    var _fields = values.fields;
+
+    for (var i = 0; i < _fields.length; i++) {
+      if (_fields[i].type === 'ref') {
+        _fields[i].value = refValues[i] || _fields[i].value;
+      }
+    } // console.log('_fields', _fields);
+
+
+    onChange && onChange(_fields);
+  };
+
+  var onRefRulesValuesChange = function onRefRulesValuesChange(values, idx) {
+    // console.log('onRefRulesValuesChange', values, refValues);
+    var _refValues = refValues;
+    _refValues[idx] = _refValues[idx] ? _objectSpread(_objectSpread({}, _refValues[idx]), values) : _objectSpread({}, values);
+    setRefValues(_objectSpread({}, _refValues));
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Form, {
+    className: "metadata-edit",
+    style: {
+      position: 'relative'
+    },
+    form: form,
+    name: "control-hooks",
+    onFinish: onFinish
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '10px'
+    }
+  }, /*#__PURE__*/React.createElement(_Form.List, {
+    name: "fields"
+  }, function (fields, _ref) {
+    var add = _ref.add,
+        remove = _ref.remove;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, fields.map(function (field, index) {
+      var _defaultValues$index;
+
+      //   console.log('fields=========', fields);
+      return /*#__PURE__*/React.createElement("div", {
+        key: field.key
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'flex-start'
+        }
+      }, /*#__PURE__*/React.createElement(_Form.Item, _extends({
+        className: "pr-10"
+      }, field, {
+        label: "\u89C4\u5219\u540D\u79F0",
+        name: [field.name, 'id'],
+        fieldKey: [field.fieldKey, 'id'],
+        rules: [{
+          required: true
+        }]
+      }), /*#__PURE__*/React.createElement(_Input, {
+        style: {
+          width: '120px'
+        }
+      })), /*#__PURE__*/React.createElement(_Form.Item, _extends({
+        className: "pr-10"
+      }, field, {
+        label: "\u89C4\u5219\u7C7B\u578B",
+        name: [field.name, 'type'],
+        fieldKey: [field.fieldKey, 'type'],
+        rules: [{
+          required: true
+        }]
+      }), /*#__PURE__*/React.createElement(_Select, {
+        style: {
+          width: '120px'
+        },
+        onChange: function onChange(value) {
+          var _ruleTypes = ruleTypes;
+          _ruleTypes[index] = value;
+          setRuleTypes(_objectSpread({}, _ruleTypes));
+        },
+        options: RULE_TYPES_OPTIONS
+      })), ruleTypes[index] === 'text' && /*#__PURE__*/React.createElement(_Form.Item, _extends({}, field, {
+        label: "\u89C4\u5219\u503C",
+        name: [field.name, 'value'],
+        fieldKey: [field.fieldKey, 'value'],
+        rules: [{
+          required: true
+        }]
+      }), /*#__PURE__*/React.createElement(_Input, {
+        style: {
+          width: '120px'
+        }
+      })), ruleTypes[index] === 'number' && /*#__PURE__*/React.createElement(_Form.Item, _extends({}, field, {
+        label: "\u89C4\u5219\u503C",
+        name: [field.name, 'value'],
+        fieldKey: [field.fieldKey, 'value'],
+        rules: [{
+          required: true
+        }]
+      }), /*#__PURE__*/React.createElement(_InputNumber, {
+        style: {
+          width: '120px'
+        }
+      })), ruleTypes[index] === 'bool' && /*#__PURE__*/React.createElement(_Form.Item, _extends({}, field, {
+        label: "\u89C4\u5219\u503C",
+        name: [field.name, 'value'],
+        fieldKey: [field.fieldKey, 'value'],
+        rules: [{
+          required: true
+        }]
+      }), /*#__PURE__*/React.createElement(_Switch, null)), ruleTypes[index] === 'ref' && /*#__PURE__*/React.createElement(_Form.Item, _extends({}, field, {
+        label: "Ref",
+        name: [field.name, 'refId'],
+        fieldKey: [field.fieldKey, 'refId'],
+        rules: [{
+          required: true
+        }]
+      }), /*#__PURE__*/React.createElement(_Select, {
+        style: {
+          width: '120px'
+        },
+        onChange: function onChange(value) {
+          var _refIds = refIds;
+          _refIds[index] = value;
+          setRefIds(_objectSpread({}, _refIds));
+          var newData = form.getFieldValue('fields'); // console.log('newData', newData);
+
+          newData[index].id = value;
+          form.setFieldsValue({
+            fields: newData
+          });
+        },
+        options: metaType || []
+      })), /*#__PURE__*/React.createElement("div", {
+        style: {
+          lineHeight: '88px',
+          paddingLeft: '15px'
+        }
+      }, /*#__PURE__*/React.createElement(MinusCircleOutlined, {
+        onClick: function onClick() {
+          return remove(field.name);
+        }
+      }))), refIds[index] && /*#__PURE__*/React.createElement("div", {
+        style: {
+          border: '1px solid var(--ronds-metadata-color-border-1)',
+          padding: '10px',
+          marginBottom: '10px'
+        }
+      }, /*#__PURE__*/React.createElement(MetadataForm, {
+        initialValues: defaultValues && defaultValues.length > 0 && ((_defaultValues$index = defaultValues[index]) === null || _defaultValues$index === void 0 ? void 0 : _defaultValues$index.value),
+        refId: refIds[index],
+        onValuesChange: function onValuesChange(values, allValues) {
+          onRefRulesValuesChange(allValues, index);
+        }
+      })));
+    }), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Button, {
+      type: "dashed",
+      onClick: function onClick() {
+        return add();
+      },
+      block: true,
+      icon: /*#__PURE__*/React.createElement(PlusOutlined, null)
+    }, "\u6DFB\u52A0\u6269\u5C55\u89C4\u5219")));
+  }), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    block: true,
+    htmlType: "submit"
+  }, "\u786E\u5B9A")))));
+};
+
+export default MetaFieldsEdit;