react-json-schema-editor-antd/dist/JsonSchemaEditor/SchemaItem/components/DataModel/index.js

Json Schema Editor

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
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(arr) { if (Array.isArray(arr)) return arr; }
import { useSortable } from '@dnd-kit/sortable';
import { Flex, Row, Tooltip } from 'antd';
import { includes, isEmpty, isPlainObject, isString } from 'lodash';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import IconFont from "../../../../components/IconFont";
import DataObject from "../DataObject";
import "./index.less";
var DataModel = function DataModel(props) {
  var _refData$schema7;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var removeRef = props.removeRef,
    unreferenceRef = props.unreferenceRef,
    refData = props.refData,
    refName = props.refName,
    uniqueKey = props.uniqueKey,
    schema = props.schema,
    isDataModelItems = props.isDataModelItems,
    _props$namePath = props.namePath,
    namePath = _props$namePath === void 0 ? [] : _props$namePath,
    _props$nodeDepth = props.nodeDepth,
    nodeDepth = _props$nodeDepth === void 0 ? 0 : _props$nodeDepth,
    fieldDirectRef = props.fieldDirectRef,
    _props$refIds = props.refIds,
    refIds = _props$refIds === void 0 ? [] : _props$refIds,
    current_ref_id = props.current_ref_id;
  var _useState = useState(props.modalDepth ? props.modalDepth : 0),
    _useState2 = _slicedToArray(_useState, 2),
    modalDepth = _useState2[0],
    setModalDepth = _useState2[1];
  useEffect(function () {
    setModalDepth(props.modalDepth ? props.modalDepth : 0);
  }, [props.modalDepth]);
  // const refData = useMemo(() => {
  //   const refPath = schema?.['$ref'];
  //   const schemas = components?.schemas;

  //   if (isString(refPath)) {
  //     const refId = refPath.split('/').pop() || '';
  //     if (isPlainObject(schemas?.[refId]) && isPlainObject(schemas?.[refId]?.schema?.properties)) {
  //       return schemas?.[refId];
  //     }
  //   }
  //   return null;
  // }, [schema, components])
  var _useSortable = useSortable({
      id: uniqueKey || String(refName),
      data: {
        namePath: namePath,
        orderKey: refName
      }
    }),
    attributes = _useSortable.attributes,
    listeners = _useSortable.listeners,
    setNodeRef = _useSortable.setNodeRef,
    transform = _useSortable.transform,
    transition = _useSortable.transition,
    isDragging = _useSortable.isDragging;
  var style = transform ? {
    transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0)"),
    transition: transition,
    opacity: isDragging ? 0.5 : 1
  } : undefined;
  var refCount = refIds.concat(current_ref_id || '').filter(function (x) {
    return x === (refData === null || refData === void 0 ? void 0 : refData.model_id);
  }).length;
  var getRefData = function getRefData() {
    var _refData$schema, _props$components;
    // 需要解析更多信息
    var refPath = refData === null || refData === void 0 || (_refData$schema = refData.schema) === null || _refData$schema === void 0 ? void 0 : _refData$schema['$ref'];
    var schemas = props === null || props === void 0 || (_props$components = props.components) === null || _props$components === void 0 ? void 0 : _props$components.schemas;
    if (isString(refPath)) {
      var _schemas$refId;
      var refId = refPath.split('/').pop() || '';
      if (isPlainObject(schemas === null || schemas === void 0 ? void 0 : schemas[refId]) && isPlainObject(schemas === null || schemas === void 0 || (_schemas$refId = schemas[refId]) === null || _schemas$refId === void 0 || (_schemas$refId = _schemas$refId.schema) === null || _schemas$refId === void 0 ? void 0 : _schemas$refId.properties)) {
        return schemas === null || schemas === void 0 ? void 0 : schemas[refId];
      }
    }
    return null;
  };
  var renderDataModelContent = function renderDataModelContent() {
    var _refData$schema2, _refData$schema3, _refData$schema4, _refData$schema5, _refData$schema6;
    if (isEmpty(refData)) {
      return /*#__PURE__*/React.createElement(Row, {
        className: "sortable-table-item-ignore",
        align: 'stretch',
        wrap: false,
        style: {
          borderBottom: '1px solid var(--color-border,#F2F4F6)',
          gap: '5px'
        }
      }, /*#__PURE__*/React.createElement(Flex, {
        flex: 1,
        align: "center",
        style: {
          width: '100%'
        }
      }, /*#__PURE__*/React.createElement("span", {
        style: {
          width: "".concat(nodeDepth <= 0 ? 0 : nodeDepth * 20, "px"),
          flexShrink: 0
        }
      }), /*#__PURE__*/React.createElement(Flex, {
        align: "center",
        gap: 4,
        style: {
          fontSize: '14px'
        }
      }, t('deleted_referenced_model'))));
    } else if (refCount >= 2) {
      return /*#__PURE__*/React.createElement(Row, {
        className: "sortable-table-item-ignore",
        align: 'stretch',
        wrap: false,
        style: {
          borderBottom: '1px solid var(--color-border,#F2F4F6)',
          gap: '5px'
        }
      }, /*#__PURE__*/React.createElement(Flex, {
        flex: 1,
        align: "center",
        style: {
          width: '100%'
        }
      }, /*#__PURE__*/React.createElement("span", {
        style: {
          width: "".concat(nodeDepth <= 0 ? 0 : nodeDepth * 20, "px"),
          flexShrink: 0
        }
      }), /*#__PURE__*/React.createElement(Flex, {
        align: "center",
        gap: 4,
        style: {
          fontSize: '14px'
        }
      }, t('cyclically_referenced_model'), ' ', /*#__PURE__*/React.createElement("span", {
        className: "model-name"
      }, (refData === null || refData === void 0 ? void 0 : refData.display_name) || (refData === null || refData === void 0 ? void 0 : refData.name)), ' ', "\uFF0C", t('will_ignored'))));
    } else if (refData !== null && refData !== void 0 && (_refData$schema2 = refData.schema) !== null && _refData$schema2 !== void 0 && _refData$schema2.type && !refData.schema.type.includes('object')) {
      return /*#__PURE__*/React.createElement(Row, {
        className: "sortable-table-item-ignore",
        align: 'stretch',
        wrap: false,
        style: {
          borderBottom: '1px solid var(--color-border,#F2F4F6)',
          gap: '5px'
        }
      }, /*#__PURE__*/React.createElement(Flex, {
        flex: 1,
        align: "center",
        style: {
          width: '100%'
        }
      }, /*#__PURE__*/React.createElement("span", {
        style: {
          width: "".concat(nodeDepth <= 0 ? 0 : nodeDepth * 20, "px"),
          flexShrink: 0
        }
      }), /*#__PURE__*/React.createElement(Flex, {
        align: "center",
        gap: 4,
        style: {
          fontSize: '14px'
        }
      }, t('cited_data_model'), ' ', /*#__PURE__*/React.createElement("span", {
        className: "model-name"
      }, (refData === null || refData === void 0 ? void 0 : refData.display_name) || (refData === null || refData === void 0 ? void 0 : refData.name)), ' ', t('not_object_tip'))));
    } else if (isString(refData === null || refData === void 0 || (_refData$schema3 = refData.schema) === null || _refData$schema3 === void 0 ? void 0 : _refData$schema3.$ref)) {
      var _ref;
      var data = getRefData();
      return /*#__PURE__*/React.createElement(DataModel, _extends({}, props, {
        // nodeDepth={nodeDepth + 1}
        // modalDepth={isDataModelItems
        //   ? (props?.modalDepth || 0) + 1
        //   : props?.modalDepth || 0}
        fieldDirectRef: true,
        isUnLinkDataModelItems: false,
        nodeDepthPathObj: {}
        // refName={(schema?.['$ref'] || '').split('/').pop() || ''}
        ,
        refData: data,
        refIds: (_ref = refIds || []) === null || _ref === void 0 ? void 0 : _ref.concat(data === null || data === void 0 ? void 0 : data.model_id),
        schema: data === null || data === void 0 ? void 0 : data.schema
      }));
    } else if (isEmpty(refData === null || refData === void 0 || (_refData$schema4 = refData.schema) === null || _refData$schema4 === void 0 ? void 0 : _refData$schema4.properties) && isEmpty(refData === null || refData === void 0 || (_refData$schema5 = refData.schema) === null || _refData$schema5 === void 0 ? void 0 : _refData$schema5['x-schema-refs'])) {
      return /*#__PURE__*/React.createElement(Row, {
        className: "sortable-table-item-ignore",
        align: 'stretch',
        wrap: false,
        style: {
          borderBottom: '1px solid var(--color-border,#F2F4F6)',
          gap: '5px'
        }
      }, /*#__PURE__*/React.createElement(Flex, {
        flex: 1,
        align: "center",
        style: {
          width: '100%'
        }
      }, /*#__PURE__*/React.createElement("span", {
        style: {
          width: "".concat(nodeDepth <= 0 ? 0 : nodeDepth * 20, "px"),
          flexShrink: 0
        }
      }), /*#__PURE__*/React.createElement(Flex, {
        align: "center",
        gap: 4,
        style: {
          fontSize: '14px'
        }
      }, t('cyclically_referenced_model'), ' ', /*#__PURE__*/React.createElement("span", {
        className: "model-name"
      }, (refData === null || refData === void 0 ? void 0 : refData.display_name) || (refData === null || refData === void 0 ? void 0 : refData.name)), ' ', "\uFF0C", t('no_set_fields'))));
    } else if (isPlainObject(refData) && isPlainObject(refData === null || refData === void 0 || (_refData$schema6 = refData.schema) === null || _refData$schema6 === void 0 ? void 0 : _refData$schema6.properties)) {
      return /*#__PURE__*/React.createElement(DataObject, _extends({}, props, {
        modalDepth: modalDepth,
        isDataModelItems: true,
        schema: refData === null || refData === void 0 ? void 0 : refData.schema,
        refSchema: schema
      }));
    } else {
      return /*#__PURE__*/React.createElement(React.Fragment, null);
    }
  };
  return /*#__PURE__*/React.createElement("div", _extends({
    ref: setNodeRef,
    style: style
  }, attributes, {
    className: "sortable-table-data-model"
  }), renderDataModelContent(), refIds.length === 1 && /*#__PURE__*/React.createElement("div", {
    className: "data-model-title"
  }, /*#__PURE__*/React.createElement("span", {
    className: "data-model-title-name"
  }, (refData === null || refData === void 0 ? void 0 : refData.display_name) || (refData === null || refData === void 0 ? void 0 : refData.name)), refCount < 2 && includes(refData === null || refData === void 0 || (_refData$schema7 = refData.schema) === null || _refData$schema7 === void 0 ? void 0 : _refData$schema7.type, 'object') && /*#__PURE__*/React.createElement("span", {
    className: "data-model-title-unlink",
    onClick: function onClick() {
      if (unreferenceRef) {
        unreferenceRef(namePath || [], refData === null || refData === void 0 ? void 0 : refData.schema, schema);
      }
    },
    style: {
      cursor: 'pointer'
    }
  }, t('un_link')), !fieldDirectRef && /*#__PURE__*/React.createElement("span", {
    className: "data-model-title-delete",
    onClick: function onClick() {
      if (removeRef) {
        removeRef(namePath || []);
      }
    },
    style: {
      cursor: 'pointer'
    }
  }, t('delete'))), refIds.length === 2 && /*#__PURE__*/React.createElement("div", {
    className: "data-model-children-title"
  }, /*#__PURE__*/React.createElement(Tooltip, {
    title: (refData === null || refData === void 0 ? void 0 : refData.display_name) || (refData === null || refData === void 0 ? void 0 : refData.name)
  }, /*#__PURE__*/React.createElement(IconFont, {
    type: "icon-data-model"
  }))), !isDataModelItems && refName !== undefined && /*#__PURE__*/React.createElement("div", {
    style: {
      left: "".concat((nodeDepth - 1) * 20, "px")
    },
    className: "sortable-table-drag sortable-table-model-drag"
  }, /*#__PURE__*/React.createElement(IconFont, _extends({
    style: {
      cursor: 'move',
      fontSize: '10px'
    }
  }, listeners, {
    type: "icon-drag"
  }))), (refIds === null || refIds === void 0 ? void 0 : refIds.length) <= 2 && /*#__PURE__*/React.createElement("div", {
    style: {
      right: refIds.length === 2 ? '48px' : ''
    },
    className: "sortable-table-data-model-border"
  }));
};
export default /*#__PURE__*/React.memo(DataModel);