ze-react-component-library
Version:
ZeroETP React Component Library
268 lines (220 loc) • 9.45 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("antd/lib/modal/style");
var _modal = _interopRequireDefault(require("antd/lib/modal"));
require("antd/lib/menu/style");
var _menu = _interopRequireDefault(require("antd/lib/menu"));
require("antd/lib/dropdown/style");
var _dropdown = _interopRequireDefault(require("antd/lib/dropdown"));
require("antd/lib/select/style");
var _select = _interopRequireDefault(require("antd/lib/select"));
var _react = _interopRequireWildcard(require("react"));
var _FullscreenBtn = _interopRequireDefault(require("../components/FullscreenBtn"));
var _jsoneditor = _interopRequireDefault(require("jsoneditor"));
var _flat = _interopRequireDefault(require("flat"));
var _deepmerge = _interopRequireDefault(require("deepmerge"));
require("jsoneditor/dist/jsoneditor.css");
var _aceBuilds = _interopRequireDefault(require("ace-builds"));
var _hooks = require("@umijs/hooks");
require("./index.less");
var _icons = require("@ant-design/icons");
var _TsEditor = _interopRequireDefault(require("../components/TsEditor"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var __assign = void 0 && (void 0).__assign || function () {
__assign = Object.assign || function (t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
}
return t;
};
return __assign.apply(this, arguments);
};
_aceBuilds.default.config.setModuleUrl("ace/mode/json", require("file-loader?esModule=false!ace-builds/src-noconflict/mode-json.js"));
var modes = ["tree", "view", "form", "code", "text", "preview"];
var ZEJsonEditor = function ZEJsonEditor(_a) {
var json = _a.value,
_b = _a.mode,
_mode = _b === void 0 ? "tree" : _b,
modeOptions = _a.modes,
onChange = _a.onChange,
editorInstanceRef = _a.editorRef,
editable = _a.editable,
schema = _a.schema,
templates = _a.templates,
_c = _a.style,
style = _c === void 0 ? {} : _c,
jsFields = _a.jsFields;
var containerRef = (0, _react.useRef)();
var rootRef = (0, _react.useRef)();
var fullscreenProps = (0, _hooks.useFullscreen)({
dom: function dom() {
return rootRef.current;
}
});
var isFullscreen = fullscreenProps.isFullscreen;
var editorRef = (0, _react.useRef)();
var editableRef = (0, _react.useRef)(true);
var editingRef = (0, _react.useRef)(false);
var _d = (0, _react.useState)(),
mode = _d[0],
setMode = _d[1];
var _e = (0, _react.useState)({}),
jsModalProps = _e[0],
setJsModalProps = _e[1];
var _f = (0, _react.useState)({}),
jsValues = _f[0],
setJsValues = _f[1];
editableRef.current = editable;
var value = json || {};
var setCurrentJsValue = function setCurrentJsValue() {
var _a, _b;
var newJson = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.get();
var rest = _flat.default.unflatten(jsValues);
var mJson = (0, _deepmerge.default)(newJson, rest);
(_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.set(mJson);
};
var onModeChange = function onModeChange(m) {
if (editorRef.current) {
editorRef.current.setMode(m);
}
setMode(m);
};
(0, _react.useEffect)(function () {
var newMode = editable ? _mode : "view";
onModeChange(newMode);
}, [editable, _mode]);
(0, _react.useEffect)(function () {
if (editorRef.current) {
schema && editorRef.current.setSchema(schema);
}
}, [JSON.stringify({
schema: schema
})]);
(0, _react.useEffect)(function () {
if (editorRef.current && !editingRef.current) {
editorRef.current.set(value);
}
}, [JSON.stringify({
value: value
})]);
(0, _react.useEffect)(function () {
if (containerRef.current) {
editorRef.current = new _jsoneditor.default(containerRef.current, {
mode: _mode,
schema: schema,
onEditable: function onEditable() {
return editableRef.current;
},
templates: templates,
onChange: function onChange(v) {
editingRef.current = true;
},
onNodeName: function onNodeName(_a) {
var path = _a.path,
type = _a.type,
size = _a.size,
value = _a.value;
return (value === null || value === void 0 ? void 0 : value.name) || size;
},
onBlur: function onBlur() {
editingRef.current = false;
}
}, value);
if (editorInstanceRef) {
editorInstanceRef.current = editorRef.current;
}
}
}, []);
return /*#__PURE__*/_react.default.createElement("div", {
ref: rootRef,
className: "ze-json-editor " + ((modeOptions === null || modeOptions === void 0 ? void 0 : modeOptions.length) > 0 ? "mode-changeable" : "") + " " + (isFullscreen ? "ze-json-editor-full-screen" : ""),
style: __assign({
height: "100%"
}, style),
onMouseLeave: function onMouseLeave() {
try {
var newJson = editorRef.current.get();
onChange === null || onChange === void 0 ? void 0 : onChange(newJson);
} catch (error) {}
}
}, (modeOptions === null || modeOptions === void 0 ? void 0 : modeOptions.length) > 0 && /*#__PURE__*/_react.default.createElement(_select.default, {
className: "ze-json-editor-mode-switcher",
value: mode,
bordered: false,
options: modeOptions.map(function (d) {
return {
label: d,
value: d
};
}),
onChange: onModeChange
}), (jsFields === null || jsFields === void 0 ? void 0 : jsFields.length) > 0 && /*#__PURE__*/_react.default.createElement(_dropdown.default, {
overlay: /*#__PURE__*/_react.default.createElement(_menu.default, {
onClick: function onClick(info) {
var _a, _b;
setJsModalProps({
open: true,
field: info.key
});
var newJson = (0, _flat.default)((_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.get()) !== null && _b !== void 0 ? _b : value);
setJsValues(function (p) {
var _a;
return __assign(__assign({}, p), (_a = {}, _a[info.key] = newJson[info.key], _a));
});
}
}, jsFields.map(function (d) {
return /*#__PURE__*/_react.default.createElement(_menu.default.Item, {
key: d
}, "\u7F16\u8F91 ", d);
}))
}, /*#__PURE__*/_react.default.createElement("span", {
className: ["ze-json-editor-by-js", mode].join(" ")
}, "\u4F7F\u7528js\u7F16\u8F91", /*#__PURE__*/_react.default.createElement(_icons.EditOutlined, null))), /*#__PURE__*/_react.default.createElement(_modal.default, {
open: jsModalProps.open,
centered: true,
title: "\u7F16\u8F91" + jsModalProps.field,
cancelButtonProps: {
style: {
display: "none"
}
},
className: "ze-json-editor-js-modal",
onCancel: function onCancel() {
setJsModalProps({
open: false
});
setCurrentJsValue();
},
onOk: function onOk() {
setJsModalProps({
open: false
});
setCurrentJsValue();
}
}, /*#__PURE__*/_react.default.createElement(_TsEditor.default, {
value: jsValues[jsModalProps.field],
autoFoldFirstLine: false,
onChange: function onChange(v) {
setJsValues(function (r) {
var _a;
return __assign(__assign({}, r), (_a = {}, _a[jsModalProps.field] = v, _a));
});
}
})), /*#__PURE__*/_react.default.createElement(_FullscreenBtn.default, __assign({}, fullscreenProps)), /*#__PURE__*/_react.default.createElement("div", {
ref: containerRef,
style: {
height: "100%"
}
}));
};
var _default = ZEJsonEditor;
exports.default = _default;