react-json-schema-editor-antd/dist/JsonSchemaEditor/SchemaItem/components/SchemaRow/KeyGroup/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 { useMemoizedFn } from 'ahooks';
import { Button, Flex, Input } from 'antd';
import cn from 'classnames';
import { isString, once } from 'lodash';
import React, { memo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import IconFont from "../../../../../components/IconFont";
import { EXPAND_TYPES } from "../../../../constants";
var KeyGroup = function KeyGroup(props) {
  var keyWidth = props.keyWidth,
    nodeDepth = props.nodeDepth,
    nodeType = props.nodeType,
    isHiddenDrag = props.isHiddenDrag,
    uniqueKey = props.uniqueKey,
    isKeyDisabled = props.isKeyDisabled,
    isRoot = props.isRoot,
    isRepeat = props.isRepeat,
    listeners = props.listeners,
    keyChange = props.keyChange,
    onKeySchemaRowUpdate = props.onKeySchemaRowUpdate,
    getSchemaData = props.getSchemaData,
    renameProperty = props.renameProperty,
    renamePropertySource = props.renamePropertySource,
    renderKeyComponents = props.renderKeyComponents,
    namePath = props.namePath,
    isHidden = props.isHidden,
    isTmpProperties = props.isTmpProperties,
    propertyName = props.propertyName,
    setPropertyName = props.setPropertyName,
    expand = props.expand,
    setExpand = props.setExpand;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isKeyHovered = _useState2[0],
    setIsKeyHovered = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isKeyFocused = _useState4[0],
    setIsKeyFocused = _useState4[1];
  var onKeyBlur = useMemoizedFn(function () {
    // 检查字段是否有重复,有重复给提示
    if (renameProperty && isString(propertyName) && !isTmpProperties) {
      renameProperty(namePath, propertyName);
    }
    setIsKeyFocused(false);
  });
  var handleMouseDown = function handleMouseDown(e) {
    var _listeners$onMouseDow;
    e.stopPropagation(); // 阻止事件冒泡到父级
    listeners === null || listeners === void 0 || (_listeners$onMouseDow = listeners.onMouseDown) === null || _listeners$onMouseDow === void 0 || _listeners$onMouseDow.call(listeners, e);
  };
  return /*#__PURE__*/React.createElement(Flex, {
    flex: undefined,
    align: "center",
    style: {
      width: keyWidth
    },
    className: "schema-key-group"
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      width: "".concat(nodeDepth <= 0 ? 0 : (nodeDepth - 1) * 20, "px"),
      flexShrink: 0
    }
  }), !EXPAND_TYPES.includes(nodeType) && /*#__PURE__*/React.createElement("div", {
    className: "sortable-table-expand-empty"
  }), !isHiddenDrag ? /*#__PURE__*/React.createElement("div", _extends({}, listeners, {
    onMouseDown: handleMouseDown,
    className: "sortable-table-drag ".concat(namePath)
  }), /*#__PURE__*/React.createElement(IconFont, {
    style: {
      cursor: 'move',
      fontSize: '10px',
      color: 'var(--icon-color)'
    },
    type: "icon-drag"
  })) : !isRoot ? /*#__PURE__*/React.createElement("div", {
    className: "sortable-table-drag-empty"
  }) : /*#__PURE__*/React.createElement(React.Fragment, null), EXPAND_TYPES.includes(nodeType) && !isRepeat && /*#__PURE__*/React.createElement(Button, {
    type: 'text',
    size: 'small',
    style: {
      width: '18px',
      flexShrink: 0
    },
    icon: /*#__PURE__*/React.createElement(IconFont, {
      type: "icon-drop-down",
      style: {
        fontSize: '14px',
        transform: expand ? '' : 'rotate(-90deg)',
        color: 'var(--font-light-color, #33363966)'
      }
    }),
    onClick: function onClick() {
      return setExpand(!expand);
    }
  }), /*#__PURE__*/React.createElement(Flex, {
    key: uniqueKey,
    flex: 'auto',
    onMouseEnter: function onMouseEnter() {
      return setIsKeyHovered(true);
    },
    onMouseLeave: function onMouseLeave() {
      if (!isKeyFocused) {
        setIsKeyHovered(false);
      }
    }
  }, (isKeyHovered || isKeyFocused) && !isRoot ? renderKeyComponents ? renderKeyComponents({
    uniqueKey: uniqueKey || '',
    value: isTmpProperties ? '' : propertyName,
    error: false,
    disabled: isKeyDisabled,
    lineThrough: Boolean(isHidden || isRepeat),
    onChange: keyChange,
    onBlur: onKeyBlur,
    onSchemaRowUpdate: onKeySchemaRowUpdate,
    getSchemaData: getSchemaData,
    onFocus: function onFocus() {
      return setIsKeyFocused(true);
    }
  }) : /*#__PURE__*/React.createElement(Input, {
    className: cn({
      'is-hidden': isHidden,
      'is-repeat': isRepeat,
      'is-root': isRoot
    }),
    status: undefined,
    disabled: isKeyDisabled,
    value: isRoot ? t('root') : isTmpProperties ? '' : propertyName,
    placeholder: t('attr_name'),
    style: {
      paddingLeft: 0
    },
    onFocus: function onFocus() {
      return setIsKeyFocused(true);
    },
    onBlur: function onBlur() {
      setIsKeyFocused(false);
      if (renameProperty && isString(propertyName) && !isTmpProperties) {
        renameProperty(namePath, propertyName);
      }
    },
    onChange: function onChange(e) {
      setPropertyName(e.target.value);
      if (renamePropertySource && isString(e.target.value) && isTmpProperties) {
        once(renamePropertySource)(namePath, e.target.value);
      }
    }
  }) : /*#__PURE__*/React.createElement("div", {
    className: cn('ant-input schema-input-div schema-key-input-div', {
      'is-hidden': isHidden,
      'is-repeat': isRepeat,
      'is-root': isRoot,
      'is-desc': !propertyName,
      'is-disabled': isKeyDisabled
    }),
    onClick: function onClick() {
      setIsKeyFocused(true);
    }
  }, isRoot ? t('root') : isTmpProperties ? t('input_key_name') : propertyName)));
};
export default /*#__PURE__*/memo(KeyGroup);