react-json-schema-editor-antd
Version:
Json Schema Editor
143 lines (141 loc) • 4.75 kB
JavaScript
import { PlusCircleOutlined } from '@ant-design/icons';
import { Button, Dropdown, Flex, theme, Tooltip } from 'antd';
import React, { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
var AddBtns = function AddBtns(props) {
var nodeType = props.nodeType,
isArrayItems = props.isArrayItems,
isDataModelItems = props.isDataModelItems,
namePath = props.namePath,
addProperty = props.addProperty,
setExpand = props.setExpand,
isRoot = props.isRoot,
isTmpProperties = props.isTmpProperties,
isUnLinkDataModelItems = props.isUnLinkDataModelItems;
var _theme$useToken = theme.useToken(),
token = _theme$useToken.token;
var _useTranslation = useTranslation(),
t = _useTranslation.t;
var renderAddBtn = useMemo(function () {
var adjoinOne = /*#__PURE__*/React.createElement(Tooltip, {
title: t('add_adjacent_node')
}, /*#__PURE__*/React.createElement(Button, {
type: 'text',
size: 'small',
icon: /*#__PURE__*/React.createElement(PlusCircleOutlined, {
style: {
color: '#22C55E',
fontSize: '16px'
}
}),
style: {
color: token.colorPrimary
},
onClick: function onClick() {
if (addProperty) {
addProperty(namePath);
// 自动展开
setExpand(true);
}
}
}));
var childOne = /*#__PURE__*/React.createElement(Tooltip, {
title: t('add_child_node')
}, /*#__PURE__*/React.createElement(Button, {
type: 'text',
size: 'small',
icon: /*#__PURE__*/React.createElement(PlusCircleOutlined, {
style: {
color: '#22C55E',
fontSize: '16px'
}
}),
style: {
color: token.colorPrimary
},
onClick: function onClick() {
if (addProperty) {
addProperty(namePath, true);
// 自动展开
setExpand(true);
}
}
}));
var adjoinAndChild = /*#__PURE__*/React.createElement(Dropdown, {
placement: "bottomRight",
menu: {
items: [{
key: 'addNode',
label: t('add_adjacent_node'),
onClick: function onClick() {
if (addProperty) {
addProperty(namePath);
}
}
}, {
key: 'addChildNode',
label: t('add_child_node'),
onClick: function onClick() {
if (addProperty) {
addProperty(namePath, true);
// 自动展开
setExpand(true);
}
}
}]
}
}, /*#__PURE__*/React.createElement(Tooltip, {
title: ''
}, /*#__PURE__*/React.createElement(Button, {
type: 'text',
size: 'small',
icon: /*#__PURE__*/React.createElement(PlusCircleOutlined, {
style: {
color: '#22C55E',
fontSize: '16px'
}
}),
style: {
color: token.colorPrimary
},
onClick: function onClick() {
return;
// if (addProperty) {
// addProperty(namePath);
// }
}
})));
// 数据模型 && 解除关联 && 层级不为1
var isDataModelShowBtn = isDataModelItems && isUnLinkDataModelItems && (props === null || props === void 0 ? void 0 : props.modalDepth) !== 0;
// 数据模型 && 解除关联 && 层级为1
var isDataModelPropertyDisabled = isDataModelItems && ((props === null || props === void 0 ? void 0 : props.modalDepth) === 0 || !isUnLinkDataModelItems);
var isShowAddChild = ['object', 'allOf', 'oneOf', 'anyOf'].includes(nodeType);
var isShowAdjoinOne = isTmpProperties || nodeType === 'array' || isDataModelShowBtn && !isShowAddChild;
var isShowChildOne = isRoot && isShowAddChild || isArrayItems && isShowAddChild || isDataModelPropertyDisabled && isShowAddChild;
var isShowEmpty = isArrayItems && !isShowAddChild;
var isShowAdjoinAndChild = isShowAddChild;
if (isShowEmpty || isDataModelItems && !isUnLinkDataModelItems || isDataModelPropertyDisabled && !isShowAddChild || isRoot && !isShowAddChild) {
return /*#__PURE__*/React.createElement("div", {
style: {
width: '24px'
}
});
} else if (isShowAdjoinOne) {
return adjoinOne;
} else if (isShowChildOne) {
return childOne;
} else if (isShowAdjoinAndChild) {
return adjoinAndChild;
} else {
return adjoinOne;
}
}, [nodeType, isArrayItems, isDataModelItems, namePath, isRoot, token, isUnLinkDataModelItems]);
return /*#__PURE__*/React.createElement(Flex, {
flex: '24px',
align: "center",
style: {
maxWidth: '24px'
}
}, renderAddBtn);
};
export default /*#__PURE__*/memo(AddBtns);