ze-react-component-library
Version:
ZeroETP React Component Library
231 lines (210 loc) • 7 kB
JavaScript
import "antd/es/modal/style";
import _Modal from "antd/es/modal";
import "antd/es/menu/style";
import _Menu from "antd/es/menu";
import "antd/es/dropdown/style";
import _Dropdown from "antd/es/dropdown";
import "antd/es/select/style";
import _Select from "antd/es/select";
var __assign = this && this.__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);
};
import React, { useRef, useEffect, useState } from "react";
import FullscreenBtn from "../components/FullscreenBtn";
import JSONEditor from "jsoneditor";
import flatten from "flat";
import merge from "deepmerge";
import "jsoneditor/dist/jsoneditor.css";
import ace from "ace-builds";
import { useFullscreen } from "@umijs/hooks";
import "./index.less";
import { EditOutlined } from "@ant-design/icons";
import TsEditor from "../components/TsEditor";
ace.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 = useRef();
var rootRef = useRef();
var fullscreenProps = useFullscreen({
dom: function dom() {
return rootRef.current;
}
});
var isFullscreen = fullscreenProps.isFullscreen;
var editorRef = useRef();
var editableRef = useRef(true);
var editingRef = useRef(false);
var _d = useState(),
mode = _d[0],
setMode = _d[1];
var _e = useState({}),
jsModalProps = _e[0],
setJsModalProps = _e[1];
var _f = 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 = flatten.unflatten(jsValues);
var mJson = merge(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);
};
useEffect(function () {
var newMode = editable ? _mode : "view";
onModeChange(newMode);
}, [editable, _mode]);
useEffect(function () {
if (editorRef.current) {
schema && editorRef.current.setSchema(schema);
}
}, [JSON.stringify({
schema: schema
})]);
useEffect(function () {
if (editorRef.current && !editingRef.current) {
editorRef.current.set(value);
}
}, [JSON.stringify({
value: value
})]);
useEffect(function () {
if (containerRef.current) {
editorRef.current = new JSONEditor(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.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.createElement(_Select, {
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.createElement(_Dropdown, {
overlay: /*#__PURE__*/React.createElement(_Menu, {
onClick: function onClick(info) {
var _a, _b;
setJsModalProps({
open: true,
field: info.key
});
var newJson = flatten((_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.createElement(_Menu.Item, {
key: d
}, "\u7F16\u8F91 ", d);
}))
}, /*#__PURE__*/React.createElement("span", {
className: ["ze-json-editor-by-js", mode].join(" ")
}, "\u4F7F\u7528js\u7F16\u8F91", /*#__PURE__*/React.createElement(EditOutlined, null))), /*#__PURE__*/React.createElement(_Modal, {
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.createElement(TsEditor, {
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.createElement(FullscreenBtn, __assign({}, fullscreenProps)), /*#__PURE__*/React.createElement("div", {
ref: containerRef,
style: {
height: "100%"
}
}));
};
export default ZEJsonEditor;