@chief-editor/ui/lib/components/json-editor/index.js

UI Component for chief editor

"use strict";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,r=1,a=arguments.length;r<a;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}},__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t};Object.defineProperty(exports,"__esModule",{value:!0});var jsoneditor_1=__importDefault(require("jsoneditor"));require("ayu-ace/dark"),require("jsoneditor/dist/jsoneditor.min.css");var react_1=__importStar(require("react")),use_1=require("@rc-hooks/use"),modal_1=require("../modal"),button_1=require("../button"),hooks_1=require("../../hooks");exports.JSONEditor=react_1.forwardRef((function(e,t){var r=e.value,a=react_1.useRef(null),o=react_1.useState(),n=o[0],u=o[1],i=hooks_1.usePrefixCls("json-editor");return react_1.useEffect((function(){var e=a.current;if(e&&!n){var t=new jsoneditor_1.default(e,{mode:"code",search:!1,indentation:4,mainMenuBar:!1,theme:"ace/theme/ayu-dark"});u(t)}return function(){var e;return null===(e=null==n?void 0:n.destroy)||void 0===e?void 0:e.call(n)}}),[]),react_1.useEffect((function(){null==n||n.set(r)}),[r,n]),react_1.useImperativeHandle(t,(function(){return n}),[n]),react_1.default.createElement("div",{ref:a,className:i})})),exports.JSONEditorModal=function(e){var t=e.value,r=e.onConfirm,a=e.resultType,o=void 0===a?"object":a,n=e.style,u=use_1.useToggle(!1),i=u[0],s=u[1],l=u[2],c=react_1.useRef(null),_=hooks_1.usePrefixCls("json-editor-modal"),d=hooks_1.usePrefixCls("editor-modal-confirm"),f=use_1.useRefCallback((function(){var e=c.current;r&&r("text"===o?null==e?void 0:e.getText():null==e?void 0:e.get()),l()}));return react_1.default.createElement(react_1.Fragment,null,react_1.default.createElement(button_1.Button,{type:"primary",onClick:s,style:__assign({width:"100%"},n)},"编辑数据"),react_1.default.createElement(modal_1.Modal,{show:i,header:"数据编辑",wrapperClassName:_,footer:react_1.default.createElement(button_1.Button,{type:"primary",onClick:f,className:d},"确认"),onClose:l},react_1.default.createElement(exports.JSONEditor,{ref:c,value:t})))};