@yuntijs/ui
Version:
☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps
261 lines • 12 kB
JavaScript
import { Icon } from '@lobehub/ui';
import { Button } from 'antd';
import { Maximize2, Minimize2 } from 'lucide-react';
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { INITIAL_OPTIONS, WORD_EDITOR_INITIALIZING, useEditor, useFullScreen } from "./helper";
import { useStyles } from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export * from "./controller";
export * from "./monaco";
function noop() {}
var SingleMonacoEditor = function SingleMonacoEditor(props) {
var _props$options;
var onChange = props.onChange,
onBlur = props.onBlur,
enableOutline = props.enableOutline,
width = props.width,
height = props.height,
language = props.language,
supportFullScreen = props.supportFullScreen,
onFullScreenChange = props.onFullScreenChange;
var onChangeRef = useRef(onChange);
var onBlurRef = useRef(onBlur);
var _useEditor = useEditor('single', props),
isEditorReady = _useEditor.isEditorReady,
focused = _useEditor.focused,
loading = _useEditor.loading,
containerRef = _useEditor.containerRef,
monacoRef = _useEditor.monacoRef,
editorRef = _useEditor.editorRef,
valueRef = _useEditor.valueRef;
var subscriptionRef = useRef(null);
var subscriptionBlurRef = useRef(null);
var _useFullScreen = useFullScreen(editorRef === null || editorRef === void 0 ? void 0 : editorRef.current),
isFullScreen = _useFullScreen.isFullScreen,
fullScreen = _useFullScreen.fullScreen;
var _useStyles = useStyles({
isFullScreen: isFullScreen,
minimapEnabled: (_props$options = props.options) === null || _props$options === void 0 || (_props$options = _props$options.minimap) === null || _props$options === void 0 ? void 0 : _props$options.enabled,
variant: props.variant
}),
cx = _useStyles.cx,
styles = _useStyles.styles;
var className = cx(styles.base, props.className, {
've-focused': focused,
've-outline': enableOutline
});
var style = useMemo(function () {
return {
width: width,
height: height
};
}, [width, height]);
useEffect(function () {
onChangeRef.current = onChange;
}, [onChange]);
useEffect(function () {
onBlurRef.current = onBlur;
}, [onBlur]);
useEffect(function () {
if (isEditorReady) {
var _subscriptionRef$curr, _subscriptionBlurRef$;
var editorInstance = editorRef.current;
(_subscriptionRef$curr = subscriptionRef.current) === null || _subscriptionRef$curr === void 0 || _subscriptionRef$curr.dispose();
subscriptionRef.current = editorInstance === null || editorInstance === void 0 ? void 0 : editorInstance.onDidChangeModelContent(function (event) {
var _editorInstance$getMo;
var editorValue = editorInstance === null || editorInstance === void 0 || (_editorInstance$getMo = editorInstance.getModel()) === null || _editorInstance$getMo === void 0 ? void 0 : _editorInstance$getMo.getValue();
if (valueRef.current !== editorValue) {
var _onChangeRef$current;
(_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 || _onChangeRef$current.call(onChangeRef, editorValue, event);
}
});
(_subscriptionBlurRef$ = subscriptionBlurRef.current) === null || _subscriptionBlurRef$ === void 0 || _subscriptionBlurRef$.dispose();
subscriptionBlurRef.current = editorInstance === null || editorInstance === void 0 ? void 0 : editorInstance.onDidBlurEditorText(function (event) {
var _editorInstance$getMo2, _onBlurRef$current;
var editorValue = editorInstance === null || editorInstance === void 0 || (_editorInstance$getMo2 = editorInstance.getModel()) === null || _editorInstance$getMo2 === void 0 ? void 0 : _editorInstance$getMo2.getValue();
(_onBlurRef$current = onBlurRef.current) === null || _onBlurRef$current === void 0 || _onBlurRef$current.call(onBlurRef, editorValue, event);
});
}
}, [editorRef, isEditorReady, subscriptionRef, valueRef]);
useEffect(function () {
return function () {
var _subscriptionRef$curr2, _subscriptionBlurRef$2, _editorInstance$getMo3, _editorRef$current;
var editorInstance = editorRef.current;
(_subscriptionRef$curr2 = subscriptionRef.current) === null || _subscriptionRef$curr2 === void 0 || _subscriptionRef$curr2.dispose();
(_subscriptionBlurRef$2 = subscriptionBlurRef.current) === null || _subscriptionBlurRef$2 === void 0 || _subscriptionBlurRef$2.dispose();
editorInstance === null || editorInstance === void 0 || (_editorInstance$getMo3 = editorInstance.getModel()) === null || _editorInstance$getMo3 === void 0 || _editorInstance$getMo3.dispose();
// eslint-disable-next-line react-hooks/exhaustive-deps
(_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || _editorRef$current.dispose();
};
}, [editorRef]);
useEffect(function () {
var _editorRef$current2;
if (!isEditorReady) {
return;
}
var model = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getModel();
if (model) {
var _monacoRef$current;
(_monacoRef$current = monacoRef.current) === null || _monacoRef$current === void 0 || _monacoRef$current.editor.setModelLanguage(model, language);
}
}, [editorRef, isEditorReady, language, monacoRef]);
var fullScreenChange = useCallback(function () {
onFullScreenChange === null || onFullScreenChange === void 0 || onFullScreenChange(!isFullScreen);
fullScreen();
}, [fullScreen, isFullScreen, onFullScreenChange]);
return /*#__PURE__*/_jsxs("div", {
className: className,
style: props.style,
children: [loading && /*#__PURE__*/_jsx("span", {
className: cx(styles.loading, 'loading'),
children: WORD_EDITOR_INITIALIZING
}), /*#__PURE__*/_jsx("div", {
className: "react-monaco-editor-container",
ref: containerRef,
style: style,
children: supportFullScreen && /*#__PURE__*/_jsx(Button, {
className: styles.fullScreenBtn,
icon: /*#__PURE__*/_jsx(Icon, {
icon: isFullScreen ? Minimize2 : Maximize2
}),
onClick: fullScreenChange,
size: "small",
type: "text"
})
})]
});
};
var DiffMonacoEditor = function DiffMonacoEditor(props) {
var enableOutline = props.enableOutline,
width = props.width,
height = props.height,
language = props.language,
onChange = props.onChange,
original = props.original,
supportFullScreen = props.supportFullScreen,
onFullScreenChange = props.onFullScreenChange;
var onChangeRef = useRef(onChange);
var _useEditor2 = useEditor('diff', props),
isEditorReady = _useEditor2.isEditorReady,
focused = _useEditor2.focused,
loading = _useEditor2.loading,
containerRef = _useEditor2.containerRef,
monacoRef = _useEditor2.monacoRef,
editorRef = _useEditor2.editorRef,
valueRef = _useEditor2.valueRef;
var _useFullScreen2 = useFullScreen(),
isFullScreen = _useFullScreen2.isFullScreen,
fullScreen = _useFullScreen2.fullScreen;
var _useStyles2 = useStyles({
isFullScreen: isFullScreen,
diff: true,
variant: props.variant
}),
cx = _useStyles2.cx,
styles = _useStyles2.styles;
var className = cx(styles.base, props.className, {
've-focused': focused,
've-outline': enableOutline
});
var style = useMemo(function () {
return {
width: width,
height: height
};
}, [width, height]);
useEffect(function () {
onChangeRef.current = onChange;
}, [onChange]);
useEffect(function () {
var _editorRef$current$ge;
if (!isEditorReady) {
return;
}
(_editorRef$current$ge = editorRef.current.getModel()) === null || _editorRef$current$ge === void 0 || _editorRef$current$ge.original.setValue(original !== null && original !== void 0 ? original : '');
var _ref = editorRef.current.getModel() || {},
modified = _ref.modified;
modified === null || modified === void 0 || modified.onDidChangeContent(function (event) {
var editorValue = modified.getValue();
if (valueRef.current !== editorValue) {
var _onChangeRef$current2;
(_onChangeRef$current2 = onChangeRef.current) === null || _onChangeRef$current2 === void 0 || _onChangeRef$current2.call(onChangeRef, editorValue, event);
}
});
}, [editorRef, isEditorReady, original, valueRef]);
useEffect(function () {
return function () {
var _editorRef$current3, _editorRef$current4, _editorRef$current5;
(_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 || (_editorRef$current3 = _editorRef$current3.getModel()) === null || _editorRef$current3 === void 0 || (_editorRef$current3 = _editorRef$current3.original) === null || _editorRef$current3 === void 0 || _editorRef$current3.dispose();
(_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 || (_editorRef$current4 = _editorRef$current4.getModel()) === null || _editorRef$current4 === void 0 || (_editorRef$current4 = _editorRef$current4.modified) === null || _editorRef$current4 === void 0 || _editorRef$current4.dispose();
// eslint-disable-next-line react-hooks/exhaustive-deps
(_editorRef$current5 = editorRef.current) === null || _editorRef$current5 === void 0 || _editorRef$current5.dispose();
};
}, [editorRef]);
useEffect(function () {
var _editorRef$current6, _monacoRef$current2, _monacoRef$current3;
if (!isEditorReady) {
return;
}
var _ref2 = ((_editorRef$current6 = editorRef.current) === null || _editorRef$current6 === void 0 ? void 0 : _editorRef$current6.getModel()) || {},
originalModel = _ref2.original,
modifiedModel = _ref2.modified;
(_monacoRef$current2 = monacoRef.current) === null || _monacoRef$current2 === void 0 || _monacoRef$current2.editor.setModelLanguage(originalModel, language);
(_monacoRef$current3 = monacoRef.current) === null || _monacoRef$current3 === void 0 || _monacoRef$current3.editor.setModelLanguage(modifiedModel, language);
}, [editorRef, isEditorReady, language, monacoRef]);
var fullScreenChange = useCallback(function () {
onFullScreenChange === null || onFullScreenChange === void 0 || onFullScreenChange(!isFullScreen);
fullScreen();
}, [fullScreen, isFullScreen, onFullScreenChange]);
return /*#__PURE__*/_jsxs("div", {
className: className,
style: props.style,
children: [loading && /*#__PURE__*/_jsx("span", {
className: cx(styles.loading, 'loading'),
children: WORD_EDITOR_INITIALIZING
}), /*#__PURE__*/_jsx("div", {
className: "react-monaco-editor-container react-monaco-editor-diff-container",
ref: containerRef,
style: style,
children: supportFullScreen && /*#__PURE__*/_jsx(Button, {
className: styles.fullScreenBtn,
icon: /*#__PURE__*/_jsx(Icon, {
icon: isFullScreen ? Minimize2 : Maximize2
}),
onClick: fullScreenChange,
size: "small",
type: "text"
})
})]
});
};
var DiffMonacoEditorComponent = Object.assign(DiffMonacoEditor, {
displayName: 'DiffMonacoEditor',
default: {
width: '100%',
height: 150,
defaultValue: '',
language: 'javascript',
options: INITIAL_OPTIONS,
editorDidMount: noop,
editorWillMount: noop,
onChange: noop,
requireConfig: {}
}
});
export var SingleMonacoEditorComponent = Object.assign(SingleMonacoEditor, {
displayName: 'SingleMonacoEditor',
default: {
width: '100%',
height: 150,
defaultValue: '',
language: 'javascript',
options: INITIAL_OPTIONS,
editorDidMount: noop,
editorWillMount: noop,
onChange: noop,
requireConfig: {}
},
MonacoDiffEditor: DiffMonacoEditorComponent
});
export default SingleMonacoEditorComponent;