@flatbiz/antd
Version:
180 lines (176 loc) • 6.62 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { _ as _objectWithoutProperties, a as _slicedToArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { classNames } from '@dimjs/utils/class-names/class-names';
import { hooks } from '@wove/react/hooks';
import { isObject } from '@dimjs/lang/is-object';
import { useState, useRef, useMemo, Fragment } from 'react';
import Ace from 'react-ace';
import { isUndefinedOrNull, jsonStringToJsonObject } from '@flatbiz/utils';
import { B as ButtonWrapper } from './button-wrapper-l9FUsrWl.js';
import { E as ErrorBoundaryWrapper } from './error-boundary-DtShAEtQ.js';
import { F as FlexLayout } from './flex-layout-BaDncU_Z.js';
import 'ace-builds/src-noconflict/ext-language_tools.js';
import 'ace-builds/src-noconflict/mode-json.js';
import 'ace-builds/src-noconflict/snippets/json.js';
import { jsxs, jsx } from 'react/jsx-runtime';
var _excluded = ["value", "onChange", "height", "hiddenVerifyBtn", "autoCompleterList", "onLoad", "hiddenErrorMsg"];
/**
* Json编辑器
* ```
* 1. 受控组件，需要使用value、onChange配合显示数据
* 2. heigth 默认为100%，如果外层无高度，需要自定义设置height属性
* 3. 通过 autoCompleterList 配置自动提示关键字
* 4. 通过 hiddenVerifyBtn 配置隐藏底部操作按钮
* 5. 通过 theme 配置编辑器主题，例如：
* 5.1 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
* 5.2 配置 theme = xxxx
* ```
*/
var AceEditorJson = function AceEditorJson(props) {
var value = props.value,
onChange = props.onChange,
height = props.height,
hiddenVerifyBtn = props.hiddenVerifyBtn,
autoCompleterList = props.autoCompleterList,
onLoad = props.onLoad,
hiddenErrorMsg = props.hiddenErrorMsg,
otherProps = _objectWithoutProperties(props, _excluded);
var heightFt = isUndefinedOrNull(height) ? '100%' : height;
var _useState = useState(Date.now()),
_useState2 = _slicedToArray(_useState, 2),
rootNodekey = _useState2[0],
setRootNodekey = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
errorMsg = _useState4[0],
setErrorMsg = _useState4[1];
var editorRef = useRef();
var valueNew = useMemo(function () {
if (isObject(value)) {
return JSON.stringify(value, null, 2);
}
return value;
}, [value]);
var handleChange = hooks.useCallbackRef(function (content) {
if (errorMsg) {
setErrorMsg(undefined);
}
onChange === null || onChange === void 0 || onChange(content);
});
var getCompletions = hooks.useCallbackRef(function (_a, _b, _c, _d, callback) {
callback(null, autoCompleterList === null || autoCompleterList === void 0 ? void 0 : autoCompleterList.map(function (item) {
return {
name: item.name,
value: item.name,
// score: 100,
meta: item.desc
};
}));
});
var onLoadHandle = function onLoadHandle(editor) {
editorRef.current = editor;
/** 向编辑器中添加自动补全列表 */
var findIndex = editor.completers.findIndex(function (item) {
return item.id === 'custom';
});
if (findIndex >= 0) {
editor.completers[findIndex] = {
getCompletions: getCompletions,
id: 'custom'
};
} else {
editor.completers.push({
getCompletions: getCompletions,
id: 'custom'
});
}
onLoad === null || onLoad === void 0 || onLoad(editor);
};
var inputValueVerify = function inputValueVerify(inputValue) {
try {
var result = jsonStringToJsonObject(inputValue);
onChange === null || onChange === void 0 || onChange(result);
} catch (_error) {
setErrorMsg('数据解析异常，正确格式：{"name":"张三", "age": 20}');
}
};
var footer = /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx(ButtonWrapper, {
hidden: hiddenVerifyBtn === true,
type: "primary",
block: false,
ghost: true,
onClick: function onClick() {
var _editorRef$current;
var currentValue = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getValue();
if (!currentValue) {
onChange === null || onChange === void 0 || onChange(currentValue);
return;
}
inputValueVerify(currentValue);
},
children: "\u9A8C\u8BC1&\u683C\u5F0F\u5316\u6570\u636E"
}), !hiddenErrorMsg && errorMsg ? /*#__PURE__*/jsx("span", {
style: {
color: 'red',
marginLeft: 10
},
children: errorMsg
}) : null]
});
var Element = (Ace === null || Ace === void 0 ? void 0 : Ace['default']) || Ace;
return /*#__PURE__*/jsxs(FlexLayout, {
fullIndex: 0,
className: classNames('ace-editor-json', props.className),
style: _objectSpread2({
height: heightFt
}, props.style),
children: [/*#__PURE__*/jsx("div", {
className: "aej-content",
children: /*#__PURE__*/jsx(ErrorBoundaryWrapper, {
onRenderReset: function onRenderReset() {
onChange === null || onChange === void 0 || onChange(undefined);
setRootNodekey(Date.now());
},
children: /*#__PURE__*/jsx(Element, _objectSpread2(_objectSpread2({
fontSize: 14,
showPrintMargin: true,
showGutter: true,
highlightActiveLine: true,
height: "100%",
width: "auto",
placeholder: "\u8BF7\u8F93\u5165"
}, otherProps), {}, {
setOptions: _objectSpread2({
useWorker: false,
enableBasicAutocompletion: false,
enableLiveAutocompletion: true,
enableSnippets: false,
showLineNumbers: true,
tabSize: 2
}, otherProps.setOptions),
mode: "json",
onLoad: onLoadHandle,
onChange: handleChange,
onBlur: function onBlur(_event, editor) {
var value = editor === null || editor === void 0 ? void 0 : editor.getValue();
if (value) {
inputValueVerify(value);
}
},
value: valueNew
}))
})
}), /*#__PURE__*/jsx("div", {
className: "ace-editor-json-footer",
style: _objectSpread2({
marginTop: 10
}, props.footerStyle),
children: props.footerExtraRender ? props.footerExtraRender(footer) : /*#__PURE__*/jsx(Fragment, {
children: footer
})
})]
}, rootNodekey);
};
export { AceEditorJson as A };
//# sourceMappingURL=editor-CGXUpHWU.js.map