react-json-schema-editor-antd/dist/JsonSchemaEditor/SchemaItem/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 { useMemoizedFn, useUpdateEffect } from 'ahooks';
import _, { cloneDeep, isArray, isNumber, isPlainObject, isString, once } from 'lodash';
import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
import SchemaRefModal from "../../components/SchemaRefModal";
import { ALL_TYPES } from "../constants";
import CombinedMode from "./components/CombinedMode";
import DataModel from "./components/DataModel";
import DataObject from "./components/DataObject";
import SchemaRow from "./components/SchemaRow";
import "./index.less";
var SchemaItem = function SchemaItem(props) {
  var _props$schema, _props$schema3;
  // const [messageApi, contextHolder] = message.useMessage();
  var renameProperty = props.renameProperty,
    renamePropertySource = props.renamePropertySource,
    isArrayItems = props.isArrayItems,
    isCombinedItems = props.isCombinedItems,
    isDataModelItems = props.isDataModelItems,
    isUnLinkDataModelItems = props.isUnLinkDataModelItems,
    updateRequiredProperty = props.updateRequiredProperty,
    linkRefProperty = props.linkRefProperty,
    removeProperty = props.removeProperty,
    addProperty = props.addProperty,
    addRef = props.addRef,
    isRequire = props.isRequire,
    allowNull = props.allowNull,
    updateAllowNull = props.updateAllowNull,
    updateSchema = props.updateSchema,
    isHidden = props.isHidden,
    components = props.components,
    refIds = props.refIds,
    displayRefPropertyActions = props.displayRefPropertyActions,
    hiddenRefProperty = props.hiddenRefProperty,
    renderValueComponents = props.renderValueComponents,
    renderKeyComponents = props.renderKeyComponents,
    onSchemaRowUpdate = props.onSchemaRowUpdate,
    isFirstCombinedData = props.isFirstCombinedData,
    uniqueKey = props.uniqueKey,
    _props$keyWidth = props.keyWidth,
    keyWidth = _props$keyWidth === void 0 ? 260 : _props$keyWidth,
    setKeyWidth = props.setKeyWidth,
    isRepeat = props.isRepeat;
  var schema = useMemo(function () {
    return props.schema;
  }, [props.schema]);
  var _useState = useState(props !== null && props !== void 0 && (_props$schema = props.schema) !== null && _props$schema !== void 0 && _props$schema['x-tmp-properties'] ? '' : (props === null || props === void 0 ? void 0 : props.propertyName) || ''),
    _useState2 = _slicedToArray(_useState, 2),
    propertyName = _useState2[0],
    setPropertyName = _useState2[1];

  // const [schemaTitle, setSchemaTitle] = useState(schema?.title);
  var _useState3 = useState((schema === null || schema === void 0 ? void 0 : schema['x-schema-mock']) || ''),
    _useState4 = _slicedToArray(_useState3, 2),
    mock = _useState4[0],
    setMock = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    schemaRefModalShow = _useState6[0],
    setSchemaRefModalShow = _useState6[1];
  var _useState7 = useState(schema === null || schema === void 0 ? void 0 : schema.description),
    _useState8 = _slicedToArray(_useState7, 2),
    schemaDescription = _useState8[0],
    setSchemaDescription = _useState8[1];
  var defaultValue = useMemo(function () {
    return isNumber(schema === null || schema === void 0 ? void 0 : schema.default) ? schema.default : (schema === null || schema === void 0 ? void 0 : schema.default) || '';
  }, [schema === null || schema === void 0 ? void 0 : schema.default]);
  var nodeDepth = useMemo(function () {
    return props !== null && props !== void 0 && props.nodeDepth ? props.nodeDepth : 0;
  }, [props === null || props === void 0 ? void 0 : props.nodeDepth]);
  var namePath = useMemo(function () {
    return props !== null && props !== void 0 && props.namePath ? props.namePath : [];
  }, [props === null || props === void 0 ? void 0 : props.namePath]);
  var isRoot = nodeDepth === 0;
  var _useSortable = useSortable({
      id: uniqueKey || propertyName,
      data: {
        namePath: namePath,
        orderKey: propertyName
      }
    }),
    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 nodeType = useMemo(function () {
    if (schema !== null && schema !== void 0 && schema['x-tmp-properties']) {
      return 'string';
    } else if (isString(schema === null || schema === void 0 ? void 0 : schema.type)) {
      return schema === null || schema === void 0 ? void 0 : schema.type;
      // return ['object','array'].includes(schema.type);
    } else if (isArray(schema === null || schema === void 0 ? void 0 : schema.type)) {
      // 判断是否为any
      if (ALL_TYPES.every(function (type) {
        var _schema$type;
        return schema === null || schema === void 0 || (_schema$type = schema.type) === null || _schema$type === void 0 ? void 0 : _schema$type.includes(type);
      })) {
        return 'any';
      }
      for (var index = 0; index < schema.type.length; index++) {
        var item = schema.type[index];
        if (item !== 'null') {
          return item;
        }
      }
    } else if (isString(schema === null || schema === void 0 ? void 0 : schema.$ref) && schema.$ref.length > 0) {
      // DataModel
      return 'dataModel';
    } else {
      if (isArray(schema === null || schema === void 0 ? void 0 : schema.anyOf)) {
        return 'anyOf';
      } else if (isArray(schema === null || schema === void 0 ? void 0 : schema.oneOf)) {
        return 'oneOf';
      } else if (isArray(schema === null || schema === void 0 ? void 0 : schema.allOf)) {
        return 'allOf';
      }

      // oneof allof anyof
    }
    return '';
  }, [schema === null || schema === void 0 ? void 0 : schema.type, schema === null || schema === void 0 ? void 0 : schema.$ref, schema === null || schema === void 0 ? void 0 : schema.anyOf, schema === null || schema === void 0 ? void 0 : schema.oneOf, schema === null || schema === void 0 ? void 0 : schema.allOf]);
  var examples = useMemo(function () {
    return schema !== null && schema !== void 0 && schema.example ? [schema === null || schema === void 0 ? void 0 : schema.example] : isArray(schema === null || schema === void 0 ? void 0 : schema.examples) ? schema === null || schema === void 0 ? void 0 : schema.examples : [];
  }, [schema === null || schema === void 0 ? void 0 : schema.example, schema === null || schema === void 0 ? void 0 : schema.examples]);
  var _useState9 = useState(isRoot || nodeType === 'array' ? true : false),
    _useState10 = _slicedToArray(_useState9, 2),
    expand = _useState10[0],
    setExpand = _useState10[1];
  useEffect(function () {
    setMock((schema === null || schema === void 0 ? void 0 : schema['x-schema-mock']) || '');
  }, [schema === null || schema === void 0 ? void 0 : schema['x-schema-mock']]);
  useEffect(function () {
    var _props$schema2;
    if (props !== null && props !== void 0 && (_props$schema2 = props.schema) !== null && _props$schema2 !== void 0 && _props$schema2['x-tmp-properties']) {
      setPropertyName('');
    } else {
      setPropertyName((props === null || props === void 0 ? void 0 : props.propertyName) || '');
    }
  }, [props === null || props === void 0 ? void 0 : props.propertyName, props === null || props === void 0 || (_props$schema3 = props.schema) === null || _props$schema3 === void 0 ? void 0 : _props$schema3['x-tmp-properties']]);
  useUpdateEffect(function () {
    setSchemaDescription((schema === null || schema === void 0 ? void 0 : schema.description) || '');
  }, [schema === null || schema === void 0 ? void 0 : schema.description]);
  var isTmpProperties = (schema === null || schema === void 0 ? void 0 : schema['x-tmp-properties']) && propertyName === '';
  var keyChange = useMemoizedFn(function (val) {
    setPropertyName(val);

    // 临时属性才修改schema
    if (renamePropertySource && isString(val) && isTmpProperties) {
      once(renamePropertySource)(namePath, val);
      // 修改react 状态值
      // renamePropertySource(namePath, val);
    }
  });
  var onKeySchemaRowUpdate = useMemoizedFn(function (key, newSchema) {
    if (onSchemaRowUpdate && isPlainObject(newSchema) && key.length > 0) {
      onSchemaRowUpdate(namePath, key, newSchema);
    }
  });
  var getSchemaData = useMemoizedFn(function () {
    return cloneDeep(schema);
  });
  var handleDebounce = useCallback(_.debounce(function (callback) {
    if (typeof callback === 'function') {
      callback();
    } else {}
  }, 300, {
    maxWait: 1000
  }), []);
  useEffect(function () {
    return function () {
      handleDebounce.cancel();
    };
  }, [handleDebounce]);
  var refData = useMemo(function () {
    // 需要解析更多信息
    if (nodeType !== 'dataModel') {
      return null;
    }
    var refPath = schema === null || schema === void 0 ? void 0 : schema['$ref'];
    var schemas = components === null || components === void 0 ? void 0 : 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;
  }, [components === null || components === void 0 ? void 0 : components.schemas, schema, nodeType]);
  var itemsNamePath = useMemo(function () {
    return namePath.concat('items');
  }, [namePath]);
  var examplesNamePath = useMemo(function () {
    return namePath.concat('examples');
  }, [namePath]);
  var onExampleChange = useMemoizedFn(function (examples) {
    if (updateSchema) {
      if (isArray(examples)) {
        updateSchema(examplesNamePath, examples);
      }
    }
  });
  if (!nodeType) {
    return /*#__PURE__*/React.createElement(React.Fragment, null);
  }
  var renderChildren = function renderChildren() {
    var _schema$items, _ref;
    if (isRepeat) {
      return;
    }
    if (['anyOf', 'oneOf', 'allOf'].includes(nodeType)) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, expand && (schema === null || schema === void 0 ? void 0 : schema[nodeType]) && /*#__PURE__*/React.createElement(CombinedMode, _extends({}, props, {
        nameType: nodeType,
        combinedData: schema === null || schema === void 0 ? void 0 : schema[nodeType],
        modalDepth: isDataModelItems ? ((props === null || props === void 0 ? void 0 : props.modalDepth) || 0) + 1 : (props === null || props === void 0 ? void 0 : props.modalDepth) || 0,
        nodeDepth: nodeDepth + 1,
        namePath: namePath,
        nodeDepthPathObj: {}
      })));
    }
    switch (nodeType) {
      case 'object':
        return /*#__PURE__*/React.createElement(React.Fragment, null, expand && (schema === null || schema === void 0 ? void 0 : schema.properties) && /*#__PURE__*/React.createElement(DataObject, _extends({}, props, {
          schema: schema,
          modalDepth: isDataModelItems ? ((props === null || props === void 0 ? void 0 : props.modalDepth) || 0) + 1 : (props === null || props === void 0 ? void 0 : props.modalDepth) || 0,
          nodeDepth: nodeDepth + 1,
          namePath: namePath,
          nodeDepthPathObj: {}
        })));
        break;
      case 'array':
        return /*#__PURE__*/React.createElement(React.Fragment, null, expand && /*#__PURE__*/React.createElement(SchemaItem, _extends({}, props, {
          uniqueKey: "".concat(uniqueKey, "-items"),
          isRequire: false,
          allowNull: schema === null || schema === void 0 || (_schema$items = schema.items) === null || _schema$items === void 0 || (_schema$items = _schema$items.type) === null || _schema$items === void 0 ? void 0 : _schema$items.includes('null'),
          nodeDepthPathObj: {},
          isArrayItems: true,
          isCombinedItems: false,
          modalDepth: isDataModelItems ? ((props === null || props === void 0 ? void 0 : props.modalDepth) || 0) + 1 : (props === null || props === void 0 ? void 0 : props.modalDepth) || 0,
          nodeDepth: nodeDepth + 1,
          propertyName: 'items',
          namePath: itemsNamePath,
          schema: schema === null || schema === void 0 ? void 0 : schema.items
        })));
        break;
      case 'dataModel':
        return /*#__PURE__*/React.createElement(React.Fragment, null, expand && /*#__PURE__*/React.createElement(DataModel
        // key={String(name)}
        , _extends({}, props, {
          nodeDepth: nodeDepth + 1,
          modalDepth: isDataModelItems ? ((props === null || props === void 0 ? void 0 : props.modalDepth) || 0) + 1 : (props === null || props === void 0 ? void 0 : props.modalDepth) || 0,
          fieldDirectRef: true,
          isUnLinkDataModelItems: false,
          nodeDepthPathObj: {}
          // refName={(schema?.['$ref'] || '').split('/').pop() || ''}
          ,
          refData: refData,
          refIds: (_ref = refIds || []) === null || _ref === void 0 ? void 0 : _ref.concat(refData === null || refData === void 0 ? void 0 : refData.model_id),
          schema: schema
        })));
    }
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
    ref: setNodeRef,
    key: uniqueKey,
    style: style
  }, attributes, {
    className: !isRoot ? 'sortable-table-item' : ''
  }), /*#__PURE__*/React.createElement(SchemaRow, {
    schema: schema,
    uniqueKey: uniqueKey,
    propertyName: propertyName,
    setPropertyName: setPropertyName,
    renamePropertySource: renamePropertySource,
    namePath: namePath,
    isDataModelItems: isDataModelItems,
    modalDepth: props === null || props === void 0 ? void 0 : props.modalDepth,
    isUnLinkDataModelItems: isUnLinkDataModelItems,
    nodeDepth: nodeDepth,
    isArrayItems: isArrayItems,
    isCombinedItems: isCombinedItems,
    isHidden: isHidden,
    isFirstCombinedData: isFirstCombinedData,
    isTmpProperties: isTmpProperties,
    isRepeat: isRepeat,
    keyWidth: keyWidth,
    setKeyWidth: setKeyWidth,
    nodeType: nodeType,
    listeners: listeners,
    expand: expand,
    setExpand: setExpand,
    renderKeyComponents: renderKeyComponents,
    keyChange: keyChange,
    onKeySchemaRowUpdate: onKeySchemaRowUpdate,
    getSchemaData: getSchemaData,
    renderValueComponents: renderValueComponents,
    renameProperty: renameProperty,
    addProperty: addProperty,
    setSchemaRefModalShow: setSchemaRefModalShow,
    defaultValue: defaultValue,
    isRequire: isRequire,
    mock: mock,
    setMock: setMock,
    schemaDescription: schemaDescription,
    setSchemaDescription: setSchemaDescription,
    allowNull: allowNull,
    examples: examples,
    onExampleChange: onExampleChange,
    updateSchema: updateSchema,
    updateRequiredProperty: updateRequiredProperty,
    refData: refData,
    updateAllowNull: updateAllowNull,
    removeProperty: removeProperty,
    displayRefPropertyActions: displayRefPropertyActions,
    linkRefProperty: linkRefProperty,
    hiddenRefProperty: hiddenRefProperty,
    components: components,
    addRef: addRef
  }), renderChildren()), schemaRefModalShow && /*#__PURE__*/React.createElement(SchemaRefModal, {
    onLinkSchema: function onLinkSchema(val) {
      if (isPlainObject(val) && addRef) {
        addRef(namePath, val);
      }
      setSchemaRefModalShow(false);
    },
    schemaData: (components === null || components === void 0 ? void 0 : components.schemas) || {}
  }));
};
export default /*#__PURE__*/memo(SchemaItem);