@thienvu18/designable-react-settings-form 2.0.0

package/esm/components/MonacoInput/format.js

@@ -0,0 +1,31 @@
+import { parse } from '@babel/parser';
+import { getNpmCDNRegistry } from '../../registry';
+const cache = {
+    prettier: null,
+};
+export const format = async (language, source) => {
+    cache.prettier =
+        cache.prettier ||
+            new Function(`return import("${getNpmCDNRegistry()}/prettier@2.x/esm/standalone.mjs")`)();
+    return cache.prettier.then((module) => {
+        if (language === 'javascript.expression' ||
+            language === 'typescript.expression') {
+            return source;
+        }
+        if (/(?:javascript|typescript)/gi.test(language)) {
+            return module.default.format(source, {
+                semi: false,
+                parser(text) {
+                    return parse(text, {
+                        sourceType: 'module',
+                        plugins: ['typescript', 'jsx'],
+                    });
+                },
+            });
+        }
+        if (language === 'json') {
+            return JSON.stringify(JSON.parse(source), null, 2);
+        }
+        return source;
+    });
+};

package/esm/components/MonacoInput/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { EditorProps, loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import './styles.less';
+import './config';
+export type Monaco = typeof monaco;
+export interface MonacoInputProps extends EditorProps {
+    helpLink?: string | boolean;
+    helpCode?: string;
+    helpCodeViewWidth?: number | string;
+    extraLib?: string;
+    onChange?: (value: string) => void;
+}
+export declare const MonacoInput: React.FC<MonacoInputProps> & {
+    loader?: typeof loader;
+};

package/esm/components/MonacoInput/index.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import Editor, { loader } from '@monaco-editor/react';
+import { TextWidget, IconWidget, usePrefix, useTheme } from '@thienvu18/designable-react';
+import { Tooltip } from 'antd';
+import { parseExpression, parse } from '@babel/parser';
+import { uid } from '@thienvu18/designable-shared';
+import { format } from './format';
+import cls from 'classnames';
+import './styles.less';
+import './config';
+import { initMonaco } from './config';
+export const MonacoInput = ({ className, language, defaultLanguage, width, helpLink, helpCode, helpCodeViewWidth, height, onMount, onChange, ...props }) => {
+    const [loaded, setLoaded] = useState(false);
+    const theme = useTheme();
+    const valueRef = useRef('');
+    const validateRef = useRef(null);
+    const submitRef = useRef(null);
+    const declarationRef = useRef([]);
+    const extraLibRef = useRef(null);
+    const monacoRef = useRef(null);
+    const editorRef = useRef(null);
+    const computedLanguage = useRef(language || defaultLanguage);
+    const realLanguage = useRef('');
+    const unmountedRef = useRef(false);
+    const changedRef = useRef(false);
+    const uidRef = useRef(uid());
+    const prefix = usePrefix('monaco-input');
+    const input = props.value || props.defaultValue;
+    useEffect(() => {
+        unmountedRef.current = false;
+        initMonaco();
+        return () => {
+            if (extraLibRef.current) {
+                extraLibRef.current.dispose();
+            }
+            unmountedRef.current = true;
+        };
+    }, []);
+    useEffect(() => {
+        if (monacoRef.current && props.extraLib) {
+            updateExtraLib();
+        }
+    }, [props.extraLib]);
+    const updateExtraLib = () => {
+        if (extraLibRef.current) {
+            extraLibRef.current.dispose();
+        }
+        extraLibRef.current =
+            monacoRef.current.languages.typescript.typescriptDefaults.addExtraLib(props.extraLib, `${uidRef.current}.d.ts`);
+    };
+    const isFileLanguage = () => {
+        const lang = computedLanguage.current;
+        return lang === 'javascript' || lang === 'typescript';
+    };
+    const isExpLanguage = () => {
+        const lang = computedLanguage.current;
+        return lang === 'javascript.expression' || lang === 'typescript.expression';
+    };
+    const renderHelper = () => {
+        const getHref = () => {
+            if (typeof helpLink === 'string')
+                return helpLink;
+            if (isFileLanguage()) {
+                return 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript';
+            }
+            if (isExpLanguage()) {
+                return 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators';
+            }
+        };
+        if (helpLink === false)
+            return null;
+        const href = getHref();
+        return (href && (_jsx(Tooltip, { title: _jsx(TextWidget, { token: "SettingComponents.MonacoInput.helpDocument" }), children: _jsx("div", { className: prefix + '-helper', children: _jsx("a", { target: "_blank", href: href, rel: "noreferrer", children: _jsx(IconWidget, { infer: "Help" }) }) }) })));
+    };
+    const onMountHandler = (editor, monaco) => {
+        editorRef.current = editor;
+        monacoRef.current = monaco;
+        onMount?.(editor, monaco);
+        const model = editor.getModel();
+        const currentValue = editor.getValue();
+        model['getDesignerLanguage'] = () => computedLanguage.current;
+        if (currentValue) {
+            format(computedLanguage.current, currentValue)
+                .then((content) => {
+                editor.setValue(content);
+                setLoaded(true);
+            })
+                .catch(() => {
+                setLoaded(true);
+            });
+        }
+        else {
+            setLoaded(true);
+        }
+        if (props.extraLib) {
+            updateExtraLib();
+        }
+        editor.onDidChangeModelContent(() => {
+            onChangeHandler(editor.getValue());
+        });
+    };
+    const submit = () => {
+        clearTimeout(submitRef.current);
+        submitRef.current = setTimeout(() => {
+            onChange?.(valueRef.current);
+        }, 1000);
+    };
+    const validate = () => {
+        if (realLanguage.current === 'typescript') {
+            clearTimeout(validateRef.current);
+            validateRef.current = setTimeout(() => {
+                try {
+                    if (valueRef.current) {
+                        if (isFileLanguage()) {
+                            parse(valueRef.current, {
+                                sourceType: 'module',
+                                plugins: ['typescript', 'jsx'],
+                            });
+                        }
+                        else if (isExpLanguage()) {
+                            parseExpression(valueRef.current, {
+                                plugins: ['typescript', 'jsx'],
+                            });
+                        }
+                    }
+                    monacoRef.current.editor.setModelMarkers(editorRef.current.getModel(), computedLanguage.current, []);
+                    declarationRef.current = editorRef.current.deltaDecorations(declarationRef.current, [
+                        {
+                            range: new monacoRef.current.Range(1, 1, 1, 1),
+                            options: {},
+                        },
+                    ]);
+                    submit();
+                }
+                catch (e) {
+                    declarationRef.current = editorRef.current.deltaDecorations(declarationRef.current, [
+                        {
+                            range: new monacoRef.current.Range(e.loc.line, e.loc.column, e.loc.line, e.loc.column),
+                            options: {
+                                isWholeLine: true,
+                                glyphMarginClassName: 'monaco-error-highline',
+                            },
+                        },
+                    ]);
+                    monacoRef.current.editor.setModelMarkers(editorRef.current.getModel(), computedLanguage.current, [
+                        {
+                            code: '1003',
+                            severity: 8,
+                            startLineNumber: e.loc.line,
+                            startColumn: e.loc.column,
+                            endLineNumber: e.loc.line,
+                            endColumn: e.loc.column,
+                            message: e.message,
+                        },
+                    ]);
+                }
+            }, 240);
+        }
+        else {
+            submit();
+            declarationRef.current = editorRef.current.deltaDecorations(declarationRef.current, [
+                {
+                    range: new monacoRef.current.Range(1, 1, 1, 1),
+                    options: {},
+                },
+            ]);
+        }
+    };
+    const onChangeHandler = (value) => {
+        changedRef.current = true;
+        valueRef.current = value;
+        validate();
+    };
+    computedLanguage.current = language || defaultLanguage;
+    realLanguage.current = /(?:javascript|typescript)/gi.test(computedLanguage.current)
+        ? 'typescript'
+        : computedLanguage.current;
+    const renderHelpCode = () => {
+        if (!helpCode)
+            return null;
+        return (_jsx("div", { className: prefix + '-view', style: { width: helpCodeViewWidth || '50%' }, children: _jsx(Editor, { value: helpCode, theme: theme === 'dark' ? 'monokai' : 'chrome-devtools', defaultLanguage: realLanguage.current, language: realLanguage.current, options: {
+                    ...props.options,
+                    lineNumbers: 'off',
+                    readOnly: true,
+                    glyphMargin: false,
+                    folding: false,
+                    lineDecorationsWidth: 0,
+                    lineNumbersMinChars: 0,
+                    minimap: {
+                        enabled: false,
+                    },
+                    tabSize: 2,
+                    smoothScrolling: true,
+                    scrollbar: {
+                        verticalScrollbarSize: 5,
+                        horizontalScrollbarSize: 5,
+                        alwaysConsumeMouseWheel: false,
+                    },
+                }, width: "100%", height: "100%" }) }));
+    };
+    return (_jsxs("div", { className: cls(prefix, className, {
+            loaded,
+        }), style: { width, height }, children: [renderHelper(), _jsx("div", { className: prefix + '-view', children: _jsx(Editor, { ...props, theme: theme === 'dark' ? 'monokai' : 'chrome-devtools', defaultLanguage: realLanguage.current, language: realLanguage.current, options: {
+                        glyphMargin: true,
+                        ...props.options,
+                        tabSize: 2,
+                        smoothScrolling: true,
+                        scrollbar: {
+                            verticalScrollbarSize: 5,
+                            horizontalScrollbarSize: 5,
+                            alwaysConsumeMouseWheel: false,
+                        },
+                    }, value: input, width: "100%", height: "100%", onMount: onMountHandler }) }), renderHelpCode()] }));
+};
+MonacoInput.loader = loader;

package/esm/components/MonacoInput/styles.less

@@ -0,0 +1,33 @@
+.dn-monaco-input {
+  position: relative;
+  transition: all 0.15s ease-in-out;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  display: flex;
+
+  &.loaded {
+    opacity: 1;
+  }
+
+  &-view {
+    flex-grow: 2;
+    height: 100%;
+  }
+
+  &-helper {
+    position: absolute;
+    bottom: 10px;
+    right: 5%;
+    z-index: 2;
+  }
+
+  .monaco-error-highline {
+    left: 0px !important;
+    width: 5px !important;
+    height: 5px !important;
+    background: red !important;
+    border-radius: 100% !important;
+    transform: translate(35px, 5px) !important;
+  }
+}

package/esm/components/MonacoInput/themes/chrome.d.ts

@@ -0,0 +1,39 @@
+declare const _default: {
+    base: string;
+    inherit: boolean;
+    rules: ({
+        foreground: string;
+        token: string;
+        fontStyle?: undefined;
+        background?: undefined;
+    } | {
+        fontStyle: string;
+        token: string;
+        foreground?: undefined;
+        background?: undefined;
+    } | {
+        background: string;
+        token: string;
+        foreground?: undefined;
+        fontStyle?: undefined;
+    } | {
+        foreground: string;
+        background: string;
+        token: string;
+        fontStyle?: undefined;
+    } | {
+        foreground: string;
+        fontStyle: string;
+        token: string;
+        background?: undefined;
+    })[];
+    colors: {
+        'editor.foreground': string;
+        'editor.background': string;
+        'editor.selectionBackground': string;
+        'editor.lineHighlightBackground': string;
+        'editorCursor.foreground': string;
+        'editorWhitespace.foreground': string;
+    };
+};
+export default _default;

package/esm/components/MonacoInput/themes/chrome.js

@@ -0,0 +1,106 @@
+export default {
+    base: 'vs',
+    inherit: true,
+    rules: [
+        {
+            foreground: 'c41a16',
+            token: 'string',
+        },
+        {
+            foreground: '1c00cf',
+            token: 'constant.numeric',
+        },
+        {
+            foreground: 'aa0d91',
+            token: 'keyword',
+        },
+        {
+            foreground: '000000',
+            token: 'keyword.operator',
+        },
+        {
+            foreground: 'aa0d91',
+            token: 'constant.language',
+        },
+        {
+            foreground: '990000',
+            token: 'support.class.exception',
+        },
+        {
+            foreground: '000000',
+            token: 'entity.name.function',
+        },
+        {
+            fontStyle: 'bold underline',
+            token: 'entity.name.type',
+        },
+        {
+            fontStyle: 'italic',
+            token: 'variable.parameter',
+        },
+        {
+            foreground: '007400',
+            token: 'comment',
+        },
+        {
+            foreground: 'ff0000',
+            token: 'invalid',
+        },
+        {
+            background: 'e71a1100',
+            token: 'invalid.deprecated.trailing-whitespace',
+        },
+        {
+            foreground: '000000',
+            background: 'fafafafc',
+            token: 'text source',
+        },
+        {
+            foreground: 'aa0d91',
+            token: 'meta.tag',
+        },
+        {
+            foreground: 'aa0d91',
+            token: 'declaration.tag',
+        },
+        {
+            foreground: '000000',
+            fontStyle: 'bold',
+            token: 'support',
+        },
+        {
+            foreground: 'aa0d91',
+            token: 'storage',
+        },
+        {
+            fontStyle: 'bold underline',
+            token: 'entity.name.section',
+        },
+        {
+            foreground: '000000',
+            fontStyle: 'bold',
+            token: 'entity.name.function.frame',
+        },
+        {
+            foreground: '333333',
+            token: 'meta.tag.preprocessor.xml',
+        },
+        {
+            foreground: '994500',
+            fontStyle: 'italic',
+            token: 'entity.other.attribute-name',
+        },
+        {
+            foreground: '881280',
+            token: 'entity.name.tag',
+        },
+    ],
+    colors: {
+        'editor.foreground': '#000000',
+        'editor.background': '#FFFFFF',
+        'editor.selectionBackground': '#BAD6FD',
+        'editor.lineHighlightBackground': '#EFEFFF',
+        'editorCursor.foreground': '#000000',
+        'editorWhitespace.foreground': '#B3B3B3F4',
+    },
+};

package/esm/components/MonacoInput/themes/monokai.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    base: string;
+    inherit: boolean;
+    rules: ({
+        foreground: string;
+        token: string;
+        fontStyle?: undefined;
+        background?: undefined;
+    } | {
+        foreground: string;
+        fontStyle: string;
+        token: string;
+        background?: undefined;
+    } | {
+        foreground: string;
+        background: string;
+        token: string;
+        fontStyle?: undefined;
+    })[];
+    colors: {
+        'editor.foreground': string;
+        'editor.background': string;
+        'editor.selectionBackground': string;
+        'editor.lineHighlightBackground': string;
+        'editorCursor.foreground': string;
+        'editorWhitespace.foreground': string;
+        'editorIndentGuide.activeBackground': string;
+        'editor.selectionHighlightBorder': string;
+    };
+};
+export default _default;

package/esm/components/MonacoInput/themes/monokai.js

@@ -0,0 +1,140 @@
+export default {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [
+        {
+            foreground: '75715e',
+            token: 'comment',
+        },
+        {
+            foreground: 'e6db74',
+            token: 'string',
+        },
+        {
+            foreground: 'ae81ff',
+            token: 'constant.numeric',
+        },
+        {
+            foreground: 'ae81ff',
+            token: 'constant.language',
+        },
+        {
+            foreground: 'ae81ff',
+            token: 'constant.character',
+        },
+        {
+            foreground: 'ae81ff',
+            token: 'constant.other',
+        },
+        {
+            foreground: 'f92672',
+            token: 'keyword',
+        },
+        {
+            foreground: 'f92672',
+            token: 'storage',
+        },
+        {
+            foreground: '66d9ef',
+            fontStyle: 'italic',
+            token: 'storage.type',
+        },
+        {
+            foreground: 'a6e22e',
+            fontStyle: 'underline',
+            token: 'entity.name.class',
+        },
+        {
+            foreground: 'a6e22e',
+            fontStyle: 'italic underline',
+            token: 'entity.other.inherited-class',
+        },
+        {
+            foreground: 'a6e22e',
+            token: 'entity.name.function',
+        },
+        {
+            foreground: 'fd971f',
+            fontStyle: 'italic',
+            token: 'variable.parameter',
+        },
+        {
+            foreground: 'f92672',
+            token: 'entity.name.tag',
+        },
+        {
+            foreground: 'a6e22e',
+            token: 'entity.other.attribute-name',
+        },
+        {
+            foreground: '66d9ef',
+            token: 'support.function',
+        },
+        {
+            foreground: '66d9ef',
+            token: 'support.constant',
+        },
+        {
+            foreground: '66d9ef',
+            fontStyle: 'italic',
+            token: 'support.type',
+        },
+        {
+            foreground: '66d9ef',
+            fontStyle: 'italic',
+            token: 'support.class',
+        },
+        {
+            foreground: 'f8f8f0',
+            background: 'f92672',
+            token: 'invalid',
+        },
+        {
+            foreground: 'f8f8f0',
+            background: 'ae81ff',
+            token: 'invalid.deprecated',
+        },
+        {
+            foreground: 'cfcfc2',
+            token: 'meta.structure.dictionary.json string.quoted.double.json',
+        },
+        {
+            foreground: '75715e',
+            token: 'meta.diff',
+        },
+        {
+            foreground: '75715e',
+            token: 'meta.diff.header',
+        },
+        {
+            foreground: 'f92672',
+            token: 'markup.deleted',
+        },
+        {
+            foreground: 'a6e22e',
+            token: 'markup.inserted',
+        },
+        {
+            foreground: 'e6db74',
+            token: 'markup.changed',
+        },
+        {
+            foreground: 'ae81ffa0',
+            token: 'constant.numeric.line-number.find-in-files - match',
+        },
+        {
+            foreground: 'e6db74',
+            token: 'entity.name.filename.find-in-files',
+        },
+    ],
+    colors: {
+        'editor.foreground': '#F8F8F2',
+        'editor.background': '#222222',
+        'editor.selectionBackground': '#49483E',
+        'editor.lineHighlightBackground': '#3E3D32',
+        'editorCursor.foreground': '#F8F8F0',
+        'editorWhitespace.foreground': '#3B3A32',
+        'editorIndentGuide.activeBackground': '#9D550FB0',
+        'editor.selectionHighlightBorder': '#222218',
+    },
+};

package/esm/components/PolyInput/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import './styles.less';
+export interface IInput {
+    style?: React.CSSProperties;
+    className?: string;
+    value: any;
+    onChange: (value: any) => void;
+    exclude?: string[];
+    include?: string[];
+}
+export interface IPolyType {
+    type: string;
+    title?: string;
+    icon?: string;
+    component?: any;
+    checker: (value: any) => boolean;
+    toInputValue?: (value: any) => any;
+    toChangeValue?: (value: any) => any;
+}
+export type PolyTypes = IPolyType[];
+export declare function createPolyInput(polyTypes?: PolyTypes): React.FC<IInput>;