@quiet-front-end/json-schema-editor-antd/dist/JsonSchemaEditor/SchemaItem/index.js

Json Schema Editor

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
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 { CaretDownOutlined, CaretRightOutlined, DeleteOutlined, ImportOutlined, PlusOutlined, SettingOutlined } from '@ant-design/icons';
import AdvancedSettingModal from "./AdvancedSettingModal";
import ImportModal from "./ImportModal";
import { Button, Checkbox, Col, Dropdown, Input, message, Row, Select, theme, Tooltip } from 'antd';
import _ from 'lodash';
import React, { useCallback, useEffect, useState } from 'react';
import { useI18n } from "../i18n";
import { getDefaultSchema, getPropertyIndex, SchemaTypeOptions } from "../utils";
function SchemaItem(props) {
  var _theme$useToken = theme.useToken(),
    token = _theme$useToken.token;
  var _useI18n = useI18n(),
    t = _useI18n.t;
  var _message$useMessage = message.useMessage(),
    _message$useMessage2 = _slicedToArray(_message$useMessage, 2),
    messageApi = _message$useMessage2[0],
    contextHolder = _message$useMessage2[1];
  var changeSchema = props.changeSchema,
    renameProperty = props.renameProperty,
    isArrayItems = props.isArrayItems,
    updateRequiredProperty = props.updateRequiredProperty,
    removeProperty = props.removeProperty,
    addProperty = props.addProperty,
    isRequire = props.isRequire,
    handleAdvancedSettingClick = props.handleAdvancedSettingClick;
  var _useState = useState(props.schema),
    _useState2 = _slicedToArray(_useState, 2),
    schema = _useState2[0],
    setSchema = _useState2[1];
  var _useState3 = useState(props.propertyName),
    _useState4 = _slicedToArray(_useState3, 2),
    propertyName = _useState4[0],
    setPropertyName = _useState4[1];
  var _useState5 = useState(schema.title),
    _useState6 = _slicedToArray(_useState5, 2),
    schemaTitle = _useState6[0],
    setSchemaTitle = _useState6[1];
  var _useState7 = useState(schema.description),
    _useState8 = _slicedToArray(_useState7, 2),
    schemaDescription = _useState8[0],
    setSchemaDescription = _useState8[1];
  var _useState9 = useState(props.nodeDepth ? props.nodeDepth : 0),
    _useState10 = _slicedToArray(_useState9, 2),
    nodeDepth = _useState10[0],
    setNodeDepth = _useState10[1];
  var _useState11 = useState(props.namePath ? props.namePath : []),
    _useState12 = _slicedToArray(_useState11, 2),
    namePath = _useState12[0],
    setNamePath = _useState12[1];
  var _useState13 = useState(true),
    _useState14 = _slicedToArray(_useState13, 2),
    expand = _useState14[0],
    setExpand = _useState14[1];
  var _useState15 = useState(false),
    _useState16 = _slicedToArray(_useState15, 2),
    advancedModal = _useState16[0],
    setAdvancedModal = _useState16[1];
  var _useState17 = useState(false),
    _useState18 = _slicedToArray(_useState17, 2),
    importModal = _useState18[0],
    setImportModal = _useState18[1];
  var isRoot = typeof propertyName === 'undefined';
  useEffect(function () {
    setSchema(props.schema);
  }, [props.schema]);
  useEffect(function () {
    setNamePath(props.namePath ? props.namePath : []);
  }, [props.namePath]);
  useEffect(function () {
    setNodeDepth(props.nodeDepth ? props.nodeDepth : 0);
  }, [props.nodeDepth]);
  var handleDebounce = useCallback(_.debounce(function (callback) {
    if (typeof callback === 'function') {
      callback();
    } else {
      console.log('Provided argument is not a function');
    }
  }, 300, {
    maxWait: 1000
  }), []);
  useEffect(function () {
    return function () {
      handleDebounce.cancel();
    };
  }, [handleDebounce]);
  var schemaItems = schema.items;
  var addChildItems = !!(schema.type === 'object' || isArrayItems && (schemaItems === null || schemaItems === void 0 ? void 0 : schemaItems.type) === 'object') && !isArrayItems && !isRoot;
  if (!schema.type) {
    return /*#__PURE__*/React.createElement(React.Fragment, null);
  }
  return /*#__PURE__*/React.createElement(React.Fragment, null, contextHolder, /*#__PURE__*/React.createElement(Row, {
    align: 'middle',
    style: {
      paddingBottom: 10
    }
  }, /*#__PURE__*/React.createElement(Col, {
    flex: "".concat(24 + nodeDepth * 17, "px"),
    style: {
      marginLeft: nodeDepth * 5
    }
  }, /*#__PURE__*/React.createElement(Row, {
    justify: 'end'
  }, schema.type === 'object' && /*#__PURE__*/React.createElement(Button, {
    type: 'text',
    size: 'small',
    icon: expand ? /*#__PURE__*/React.createElement(CaretDownOutlined, null) : /*#__PURE__*/React.createElement(CaretRightOutlined, null),
    onClick: function onClick() {
      return setExpand(!expand);
    }
  }))), /*#__PURE__*/React.createElement(Col, {
    flex: 'auto',
    style: {
      marginLeft: 5
    }
  }, /*#__PURE__*/React.createElement(Input, {
    status: !isRoot && propertyName.length === 0 ? 'error' : undefined,
    disabled: isRoot || isArrayItems,
    value: isRoot ? 'root' : propertyName,
    placeholder: t('PropertyPlaceholder'),
    onBlur: function onBlur() {
      if ((propertyName === null || propertyName === void 0 ? void 0 : propertyName.length) === 0) {
        messageApi.warning(t('PropertyNameEmptyWarnMsg')).then();
        return;
      }
      if (renameProperty && propertyName && (propertyName === null || propertyName === void 0 ? void 0 : propertyName.length) !== 0) {
        renameProperty(namePath, propertyName);
      }
    },
    onChange: function onChange(name) {
      return setPropertyName(name.target.value);
    }
  })), /*#__PURE__*/React.createElement(Col, {
    flex: '16px',
    style: {
      marginLeft: 5
    }
  }, /*#__PURE__*/React.createElement(Checkbox, {
    disabled: isArrayItems || isRoot,
    checked: isRequire,
    onChange: function onChange(e) {
      if (updateRequiredProperty && propertyName) {
        updateRequiredProperty(namePath, !e.target.checked);
      }
    }
  })), /*#__PURE__*/React.createElement(Col, {
    flex: '95px',
    style: {
      marginLeft: 5
    }
  }, /*#__PURE__*/React.createElement(Select, {
    style: {
      width: '95px'
    },
    value: schema.type,
    options: SchemaTypeOptions,
    onChange: function onChange(type) {
      if (changeSchema) {
        changeSchema(namePath, getDefaultSchema(type), 'type');
      }
    }
  })), /*#__PURE__*/React.createElement(Col, {
    flex: 'auto',
    style: {
      marginLeft: 5
    }
  }, /*#__PURE__*/React.createElement(Input, {
    placeholder: t('TitlePlaceholder'),
    value: schemaTitle,
    onBlur: function onBlur() {
      if (changeSchema) {
        changeSchema(namePath.concat(getPropertyIndex(schema, 'title')), schemaTitle, 'title');
      }
    },
    onChange: function onChange(title) {
      return setSchemaTitle(title.target.value);
    }
  })), /*#__PURE__*/React.createElement(Col, {
    flex: 'auto',
    style: {
      marginLeft: 5
    }
  }, /*#__PURE__*/React.createElement(Input, {
    placeholder: t('DescriptionPlaceholder'),
    value: schemaDescription,
    onBlur: function onBlur() {
      if (changeSchema) {
        changeSchema(namePath.concat(getPropertyIndex(schema, 'description')), schemaDescription, 'description');
      }
    },
    onChange: function onChange(description) {
      return setSchemaDescription(description.target.value);
    }
  })), /*#__PURE__*/React.createElement(Col, {
    flex: '72px',
    style: {
      marginLeft: 5
    }
  }, /*#__PURE__*/React.createElement(Row, {
    style: {
      width: '72px'
    }
  }, /*#__PURE__*/React.createElement(Tooltip, {
    title: t('AdvancedSettings')
  }, /*#__PURE__*/React.createElement(Button, {
    type: 'text',
    size: 'small',
    icon: /*#__PURE__*/React.createElement(SettingOutlined, null),
    style: {
      color: 'green'
    },
    onClick: function onClick() {
      if (handleAdvancedSettingClick && !handleAdvancedSettingClick(namePath, schema, isRoot || schema.type === 'object' ? undefined : propertyName)) {
        return;
      }
      setAdvancedModal(!advancedModal);
    }
  })), !isRoot && !isArrayItems || schema.type === 'object' ? /*#__PURE__*/React.createElement(Dropdown, {
    disabled: !addChildItems,
    placement: "bottom",
    menu: {
      items: [{
        key: 'addNode',
        label: t('SiblingNodes'),
        onClick: function onClick() {
          if (addProperty) {
            addProperty(namePath, false);
          }
        }
      }, {
        key: 'addChildNode',
        label: t('ChildNodes'),
        onClick: function onClick() {
          if (addProperty) {
            addProperty(namePath, true);
          }
        }
      }]
    }
  }, /*#__PURE__*/React.createElement(Tooltip, {
    title: !addChildItems && t('AddNode')
  }, /*#__PURE__*/React.createElement(Button, {
    type: 'text',
    size: 'small',
    icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
    style: {
      color: token.colorPrimary
    },
    onClick: function onClick() {
      if (addChildItems) {
        return;
      }
      if (addProperty) {
        addProperty(namePath, !(!isArrayItems && !isRoot));
      }
    }
  }))) : /*#__PURE__*/React.createElement("div", {
    style: {
      width: '24px'
    }
  }), /*#__PURE__*/React.createElement(Col, {
    flex: '24px'
  }, isRoot ? /*#__PURE__*/React.createElement(Tooltip, {
    title: t('ImportJson')
  }, /*#__PURE__*/React.createElement(Button, {
    type: 'text',
    size: 'small',
    icon: /*#__PURE__*/React.createElement(ImportOutlined, null),
    style: {
      color: 'purple'
    },
    onClick: function onClick() {
      return setImportModal(true);
    }
  })) : !isArrayItems ? /*#__PURE__*/React.createElement(Tooltip, {
    title: t('DeleteNode')
  }, /*#__PURE__*/React.createElement(Button, {
    danger: true,
    type: 'text',
    size: 'small',
    icon: /*#__PURE__*/React.createElement(DeleteOutlined, null),
    onClick: function onClick() {
      if (removeProperty) {
        removeProperty(namePath);
      }
    }
  })) : /*#__PURE__*/React.createElement("div", {
    style: {
      width: '24px'
    }
  })), isRoot && schema.type !== 'object' && /*#__PURE__*/React.createElement(Col, {
    flex: '24px'
  }, !isArrayItems && /*#__PURE__*/React.createElement("div", {
    style: {
      width: '24px'
    }
  }))))), schema.type === 'object' && expand && schema.properties && Object.keys(schema.properties).map(function (name) {
    if (schema.properties) {
      var _schema$required;
      return /*#__PURE__*/React.createElement("div", {
        key: String(name)
      }, /*#__PURE__*/React.createElement(SchemaItem, _extends({}, props, {
        isRequire: (_schema$required = schema.required) === null || _schema$required === void 0 ? void 0 : _schema$required.includes(name),
        isArrayItems: false,
        nodeDepth: nodeDepth + 1,
        namePath: namePath.concat(getPropertyIndex(schema, 'properties'), getPropertyIndex(schema.properties, name)),
        propertyName: name,
        schema: schema.properties[name],
        handleAdvancedSettingClick: handleAdvancedSettingClick
      })));
    }
    return /*#__PURE__*/React.createElement(React.Fragment, null);
  }), schema.type === 'array' && expand && /*#__PURE__*/React.createElement(SchemaItem, _extends({}, props, {
    isRequire: false,
    isArrayItems: true,
    nodeDepth: nodeDepth + 1,
    propertyName: 'items',
    namePath: namePath.concat(getPropertyIndex(schema, 'items')),
    schema: schema.items,
    handleAdvancedSettingClick: handleAdvancedSettingClick
  })), /*#__PURE__*/React.createElement(AdvancedSettingModal, {
    schema: schema,
    open: advancedModal,
    onOk: function onOk(newSchema) {
      if (!changeSchema) {
        return;
      }
      if (isRoot || schema.type === 'object') {
        changeSchema(namePath, _objectSpread({}, newSchema));
        setAdvancedModal(false);
        return;
      }
      changeSchema(namePath, _objectSpread({}, newSchema), propertyName);
      setAdvancedModal(false);
    },
    onCancel: function onCancel() {
      return setAdvancedModal(false);
    }
  }), /*#__PURE__*/React.createElement(ImportModal, {
    open: importModal,
    onOk: function onOk(newSchema) {
      if (changeSchema) {
        changeSchema([], newSchema);
        setImportModal(false);
      }
    },
    onCancel: function onCancel() {
      return setImportModal(false);
    }
  }));
}
export default SchemaItem;