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

UI Component for chief editor

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