@thienvu18/designable-react-settings-form 2.0.0

package/esm/components/PolyInput/index.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState, useRef } from 'react';
+import { Button } from 'antd';
+import { usePrefix, IconWidget } from '@thienvu18/designable-react';
+import cls from 'classnames';
+import './styles.less';
+const isValid = (val) => val !== undefined && val !== null;
+const getEventValue = (event) => {
+    if (event?.target) {
+        if (isValid(event.target.value))
+            return event.target.value;
+        if (isValid(event.target.checked))
+            return event.target.checked;
+        return;
+    }
+    return event;
+};
+const createTypes = (types, exclude, include) => {
+    return types.filter(({ type }) => {
+        if (Array.isArray(include) && include.length) {
+            return include.includes(type);
+        }
+        if (Array.isArray(exclude) && exclude.length) {
+            return !exclude.includes(type);
+        }
+        return true;
+    });
+};
+export function createPolyInput(polyTypes = []) {
+    return ({ className, style, value, onChange, exclude, include, ...props }) => {
+        const prefix = usePrefix('poly-input');
+        const types = createTypes(polyTypes, exclude, include);
+        const [current, setCurrent] = useState(types[0]?.type);
+        const type = types?.find(({ type }) => type === current);
+        const component = type?.component;
+        const typesValue = useRef({});
+        useEffect(() => {
+            types?.forEach(({ checker, type }) => {
+                if (checker(value)) {
+                    setCurrent(type);
+                }
+            });
+        }, [value]);
+        const getNextType = () => {
+            const currentIndex = types?.findIndex(({ type }) => type === current);
+            const nextIndex = currentIndex + 1 > types?.length - 1 ? 0 : currentIndex + 1;
+            return types[nextIndex];
+        };
+        const transformOnChangeValue = (value, type) => {
+            return type?.toChangeValue ? type?.toChangeValue(value) : value;
+        };
+        return (_jsxs("div", { className: cls(prefix, className), style: style, children: [component && (_jsx("div", { className: prefix + '-content', children: React.createElement(component, {
+                        ...props,
+                        value: type?.toInputValue ? type?.toInputValue(value) : value,
+                        onChange: (event) => {
+                            const value = getEventValue(event);
+                            typesValue.current[type?.type] = value;
+                            onChange?.(transformOnChangeValue(value, type));
+                        },
+                    }) })), _jsx(Button, { className: prefix + '-controller', style: {
+                        width: !component ? '100%' : 'auto',
+                    }, block: true, onClick: () => {
+                        const nextType = getNextType();
+                        if (nextType === type)
+                            return;
+                        setCurrent(nextType?.type);
+                        onChange?.(transformOnChangeValue(typesValue.current[nextType?.type], nextType));
+                    }, children: type?.icon ? (_jsx(IconWidget, { infer: type.icon })) : (type?.title || type?.type) })] }));
+    };
+}

package/esm/components/PolyInput/styles.less

@@ -0,0 +1,31 @@
+@ant-prefix: ant;
+.dn-poly-input {
+  display: flex;
+  width: 100%;
+  align-items: center;
+
+  .dn-poly-input-content {
+    flex-grow: 2;
+    margin-right: 2px;
+    display: flex;
+
+    .@{ant-prefix}-select {
+      width: 100%;
+    }
+
+    .@{ant-prefix}-input-number {
+      width: 100%;
+    }
+  }
+
+  .dn-poly-input-controller {
+    border: 1px solid var(--dn-color-border, #d9d9d9);
+    border-radius: 2px;
+    cursor: pointer;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 0;
+  }
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import './styles.less';
+export interface IPositionInputProps {
+    className?: string;
+    style?: React.CSSProperties;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const PositionInput: React.FC<IPositionInputProps>;

package/esm/components/PositionInput/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { usePrefix } from '@thienvu18/designable-react';
+import cls from 'classnames';
+import './styles.less';
+export const PositionInput = (props) => {
+    const prefix = usePrefix('position-input');
+    const [current, setCurrent] = useState(props.value);
+    useEffect(() => {
+        if (!props.value) {
+            setCurrent('center');
+        }
+    }, [props.value]);
+    const createCellProps = (type) => ({
+        className: cls(prefix + '-cell', { active: current === type }),
+        onClick() {
+            setCurrent(type);
+            props.onChange?.(type);
+        },
+    });
+    return (_jsxs("div", { className: cls(prefix, props.className), style: props.style, children: [_jsx("div", { className: prefix + '-row', children: _jsx("div", { ...createCellProps('top'), children: "\u2533" }) }), _jsxs("div", { className: prefix + '-row', children: [_jsx("div", { ...createCellProps('left'), children: "\u2523" }), _jsx("div", { ...createCellProps('center'), children: "\u254B" }), _jsx("div", { ...createCellProps('right'), children: "\u252B" })] }), _jsx("div", { className: prefix + '-row', children: _jsx("div", { ...createCellProps('bottom'), children: "\u253B" }) })] }));
+};

package/esm/components/PositionInput/styles.less

@@ -0,0 +1,28 @@
+
+.dn-position-input {
+  display: flex;
+  flex-direction: column;
+
+  &-row {
+    display: flex;
+    justify-content: center;
+  }
+
+  &-cell {
+    width: 26px;
+    height: 26px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 3px;
+    color: rgba(0, 0, 0, 0.6);
+    margin: 5px;
+    color: var(--dn-color-text, rgba(0, 0, 0, 0.88));
+
+    &.active {
+      background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SizeInput: import("react").FC<import("../PolyInput").IInput>;
+export declare const BackgroundSizeInput: import("react").FC<import("../PolyInput").IInput>;

package/esm/components/SizeInput/index.js

@@ -0,0 +1,53 @@
+import { InputNumber } from 'antd';
+import { createPolyInput } from '../PolyInput';
+const takeNumber = (value) => {
+    const num = String(value)
+        .trim()
+        .replace(/[^\d\.]+/, '');
+    if (num === '')
+        return;
+    return Number(num);
+};
+const createUnitType = (type) => {
+    return {
+        type,
+        component: InputNumber,
+        checker(value) {
+            return String(value).includes(type);
+        },
+        toInputValue(value) {
+            return takeNumber(value);
+        },
+        toChangeValue(value) {
+            return `${value || 0}${type}`;
+        },
+    };
+};
+const createSpecialSizeOption = (type) => ({
+    type: type,
+    checker(value) {
+        if (value === type)
+            return true;
+        return false;
+    },
+    toChangeValue() {
+        return type;
+    },
+});
+const NormalSizeOptions = [
+    createSpecialSizeOption('inherit'),
+    createSpecialSizeOption('auto'),
+    createUnitType('px'),
+    createUnitType('%'),
+    createUnitType('vh'),
+    createUnitType('em'),
+];
+export const SizeInput = createPolyInput(NormalSizeOptions);
+export const BackgroundSizeInput = createPolyInput([
+    createSpecialSizeOption('cover'),
+    createSpecialSizeOption('contain'),
+    createUnitType('px'),
+    createUnitType('%'),
+    createUnitType('vh'),
+    createUnitType('em'),
+]);

package/esm/components/SizeInput/styles.less

@@ -0,0 +1,23 @@
+
+.dn-size-input {
+  display: flex;
+  width: 100%;
+
+  .@{ant-prefix}-input-number {
+    flex-grow: 2;
+    margin-right: 2px;
+  }
+
+  .dn-size-input-unit {
+    border: 1px solid var(--dn-color-border, #d9d9d9);
+    border-radius: 2px;
+    cursor: pointer;
+    height: 32px;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 0;
+  }
+}
+@ant-prefix: ant;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ValueInput: React.FC<import("../PolyInput").IInput>;

package/esm/components/ValueInput/index.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPolyInput } from '../PolyInput';
+import { Input, Button, Popover, InputNumber, Select } from 'antd';
+import { MonacoInput } from '../MonacoInput';
+import { TextWidget } from '@thienvu18/designable-react';
+const STARTTAG_REX = /<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
+const EXPRESSION_REX = /^\{\{([\s\S]*)\}\}$/;
+const isNumber = (value) => typeof value === 'number';
+const isBoolean = (value) => typeof value === 'boolean';
+const isExpression = (value) => {
+    return typeof value === 'string' && EXPRESSION_REX.test(value);
+};
+const isRichText = (value) => {
+    return typeof value === 'string' && STARTTAG_REX.test(value);
+};
+const isNormalText = (value) => {
+    return typeof value === 'string' && !isExpression(value) && !isRichText(value);
+};
+const takeNumber = (value) => {
+    const num = String(value).replace(/[^\d\.]+/, '');
+    if (num === '')
+        return;
+    return Number(num);
+};
+export const ValueInput = createPolyInput([
+    {
+        type: 'TEXT',
+        icon: 'Text',
+        component: Input,
+        checker: isNormalText,
+    },
+    {
+        type: 'EXPRESSION',
+        icon: 'Expression',
+        component: (props) => {
+            return (_jsx(Popover, { content: _jsx("div", { style: {
+                        width: 400,
+                        height: 200,
+                        marginLeft: -16,
+                        marginRight: -16,
+                        marginBottom: -12,
+                    }, children: _jsx(MonacoInput, { ...props, language: "javascript.expression" }) }), trigger: "click", children: _jsx(Button, { block: true, children: _jsx(TextWidget, { token: "SettingComponents.ValueInput.expression" }) }) }));
+        },
+        checker: isExpression,
+        toInputValue: (value) => {
+            if (!value || value === '{{}}')
+                return;
+            const matched = String(value).match(EXPRESSION_REX);
+            return matched?.[1] || value || '';
+        },
+        toChangeValue: (value) => {
+            if (!value || value === '{{}}')
+                return;
+            const matched = String(value).match(EXPRESSION_REX);
+            return `{{${matched?.[1] || value || ''}}}`;
+        },
+    },
+    {
+        type: 'BOOLEAN',
+        icon: 'Boolean',
+        component: (props) => (_jsx(Select, { ...props, options: [
+                { label: 'True', value: true },
+                { label: 'False', value: false },
+            ] })),
+        checker: isBoolean,
+        toInputValue: (value) => {
+            return !!value;
+        },
+        toChangeValue: (value) => {
+            return !!value;
+        },
+    },
+    {
+        type: 'NUMBER',
+        icon: 'Number',
+        component: InputNumber,
+        checker: isNumber,
+        toInputValue: takeNumber,
+        toChangeValue: takeNumber,
+    },
+]);

package/esm/components/index.d.ts

@@ -0,0 +1,20 @@
+export * from './ColorInput';
+export * from './CornerInput';
+export * from './ImageInput';
+export * from './PositionInput';
+export * from './SizeInput';
+export * from './PolyInput';
+export * from './ValueInput';
+export * from './MonacoInput';
+export * from './DrawerSetter';
+export * from './BoxStyleSetter';
+export * from './BorderStyleSetter';
+export * from './BorderRadiusStyleSetter';
+export * from './BackgroundStyleSetter';
+export * from './BoxShadowStyleSetter';
+export * from './FontStyleSetter';
+export * from './DisplayStyleSetter';
+export * from './FlexStyleSetter';
+export * from './FoldItem';
+export * from './CollapseItem';
+export * from './InputItems';

package/esm/components/index.js

@@ -0,0 +1,20 @@
+export * from './ColorInput';
+export * from './CornerInput';
+export * from './ImageInput';
+export * from './PositionInput';
+export * from './SizeInput';
+export * from './PolyInput';
+export * from './ValueInput';
+export * from './MonacoInput';
+export * from './DrawerSetter';
+export * from './BoxStyleSetter';
+export * from './BorderStyleSetter';
+export * from './BorderRadiusStyleSetter';
+export * from './BackgroundStyleSetter';
+export * from './BoxShadowStyleSetter';
+export * from './FontStyleSetter';
+export * from './DisplayStyleSetter';
+export * from './FlexStyleSetter';
+export * from './FoldItem';
+export * from './CollapseItem';
+export * from './InputItems';

package/esm/effects/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useLocales';
+export * from './useSnapshot';

package/esm/effects/index.js

@@ -0,0 +1,2 @@
+export * from './useLocales';
+export * from './useSnapshot';

package/esm/effects/useLocales.d.ts

@@ -0,0 +1,2 @@
+import { TreeNode } from '@thienvu18/designable-core';
+export declare const useLocales: (node: TreeNode) => void;

package/esm/effects/useLocales.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isVoidField, onFieldReact } from '@formily/core';
+import { GlobalRegistry } from '@thienvu18/designable-core';
+import { isStr } from '@thienvu18/designable-shared';
+import { IconWidget } from '@thienvu18/designable-react';
+const takeIcon = (message) => {
+    if (!isStr(message))
+        return;
+    const matched = message.match(/@([^:\s]+)(?:\s*\:\s*([\s\S]+))?/);
+    if (matched)
+        return [matched[1], matched[2]];
+    return;
+};
+const mapEnum = (dataSource) => (item, index) => {
+    const label = dataSource[index] || dataSource[item.value] || item.label;
+    const icon = takeIcon(label);
+    return {
+        ...item,
+        value: item?.value ?? null,
+        label: icon ? (_jsx(IconWidget, { infer: icon[0], tooltip: icon[1] })) : (label?.label ?? label ?? 'Unknow'),
+    };
+};
+export const useLocales = (node) => {
+    onFieldReact('*', (field) => {
+        const path = field.path.toString().replace(/\.[\d+]/g, '');
+        const takeMessage = (prop) => {
+            const token = `settings.${path}${prop ? `.${prop}` : ''}`;
+            return node.getMessage(token) || GlobalRegistry.getDesignerMessage(token);
+        };
+        const title = takeMessage('title') || takeMessage();
+        const description = takeMessage('description');
+        const tooltip = takeMessage('tooltip');
+        const dataSource = takeMessage('dataSource');
+        const placeholder = takeMessage('placeholder');
+        if (title) {
+            field.title = title;
+        }
+        if (description) {
+            field.description = description;
+        }
+        if (tooltip) {
+            field.decorator[1] = field.decorator[1] || [];
+            field.decorator[1].tooltip = tooltip;
+        }
+        if (placeholder) {
+            field.component[1] = field.component[1] || [];
+            field.component[1].placeholder = placeholder;
+        }
+        if (!isVoidField(field)) {
+            if (dataSource?.length) {
+                if (field.dataSource?.length) {
+                    field.dataSource = field.dataSource.map(mapEnum(dataSource));
+                }
+                else {
+                    field.dataSource = dataSource.slice();
+                }
+            }
+            else {
+                field.dataSource = field.dataSource?.filter(Boolean);
+            }
+        }
+    });
+};

package/esm/effects/useSnapshot.d.ts

@@ -0,0 +1,2 @@
+import { Operation } from '@thienvu18/designable-core';
+export declare const useSnapshot: (operation: Operation) => void;

package/esm/effects/useSnapshot.js

@@ -0,0 +1,10 @@
+import { onFieldInputValueChange } from '@formily/core';
+let timeRequest = null;
+export const useSnapshot = (operation) => {
+    onFieldInputValueChange('*', () => {
+        clearTimeout(timeRequest);
+        timeRequest = setTimeout(() => {
+            operation.snapshot('update:node:props');
+        }, 1000);
+    });
+};

package/esm/index.d.ts

@@ -0,0 +1,5 @@
+import './locales';
+export * from './registry';
+export * from './components';
+export * from './SchemaField';
+export * from './SettingsForm';

package/esm/index.js

@@ -0,0 +1,5 @@
+import './locales';
+export * from './registry';
+export * from './components';
+export * from './SchemaField';
+export * from './SettingsForm';

package/esm/locales/en-US.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    'en-US': {
+        SettingComponents: {
+            ValueInput: {
+                expression: string;
+            };
+            MonacoInput: {
+                helpDocument: string;
+            };
+        };
+    };
+};
+export default _default;

package/esm/locales/en-US.js

@@ -0,0 +1,12 @@
+export default {
+    'en-US': {
+        SettingComponents: {
+            ValueInput: {
+                expression: 'Expression',
+            },
+            MonacoInput: {
+                helpDocument: 'Help Documents',
+            },
+        },
+    },
+};

package/esm/locales/index.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/locales/index.js

@@ -0,0 +1,5 @@
+import { GlobalRegistry } from '@thienvu18/designable-core';
+import zhCN from './zh-CN';
+import enUS from './en-US';
+import koKR from './ko-KR';
+GlobalRegistry.registerDesignerLocales(zhCN, enUS, koKR);

package/esm/locales/ko-KR.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    'ko-KR': {
+        SettingComponents: {
+            ValueInput: {
+                expression: string;
+            };
+            MonacoInput: {
+                helpDocument: string;
+            };
+        };
+    };
+};
+export default _default;

package/esm/locales/ko-KR.js

@@ -0,0 +1,12 @@
+export default {
+    'ko-KR': {
+        SettingComponents: {
+            ValueInput: {
+                expression: '표현식',
+            },
+            MonacoInput: {
+                helpDocument: '도움말 문서',
+            },
+        },
+    },
+};

package/esm/locales/zh-CN.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    'zh-CN': {
+        SettingComponents: {
+            ValueInput: {
+                expression: string;
+            };
+            MonacoInput: {
+                helpDocument: string;
+            };
+        };
+    };
+};
+export default _default;

package/esm/locales/zh-CN.js

@@ -0,0 +1,12 @@
+export default {
+    'zh-CN': {
+        SettingComponents: {
+            ValueInput: {
+                expression: '表达式',
+            },
+            MonacoInput: {
+                helpDocument: '帮助文档',
+            },
+        },
+    },
+};

package/esm/registry.d.ts

@@ -0,0 +1,2 @@
+export declare const setNpmCDNRegistry: (registry: string) => void;
+export declare const getNpmCDNRegistry: () => string;

package/esm/registry.js

@@ -0,0 +1,13 @@
+import loader from '@monaco-editor/loader';
+const Registry = {
+    cdn: '//cdn.jsdelivr.net/npm',
+};
+export const setNpmCDNRegistry = (registry) => {
+    Registry.cdn = registry;
+    loader.config({
+        paths: {
+            vs: `${registry}/monaco-editor@0.30.1/min/vs`,
+        },
+    });
+};
+export const getNpmCDNRegistry = () => String(Registry.cdn).replace(/\/$/, '');

package/esm/shared/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ISettingFormProps } from '../types';
+export declare const SettingsFormContext: import("react").Context<ISettingFormProps>;

package/esm/shared/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const SettingsFormContext = createContext(null);

package/esm/shared/loadScript.d.ts

@@ -0,0 +1,7 @@
+export interface ILoadScriptProps {
+    package: string;
+    entry: string;
+    root: string;
+    base?: string;
+}
+export declare const loadScript: (props: ILoadScriptProps) => Promise<any>;

package/esm/shared/loadScript.js

@@ -0,0 +1,29 @@
+import { getNpmCDNRegistry } from '../registry';
+import { globalThisPolyfill } from '@thienvu18/designable-shared';
+export const loadScript = async (props) => {
+    const options = {
+        base: getNpmCDNRegistry(),
+        ...props,
+    };
+    if (globalThisPolyfill[props.root])
+        return globalThisPolyfill[options.root];
+    const path = `${options.base}/${options.package}/${options.entry}`;
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.async = false;
+        script.src = path;
+        script.onload = () => {
+            const module = globalThisPolyfill[options.root];
+            globalThisPolyfill['define'] = define;
+            resolve(module);
+            script.remove();
+        };
+        script.onerror = (err) => {
+            reject(err);
+        };
+        const define = globalThisPolyfill['define'];
+        globalThisPolyfill['define'] = undefined;
+        document.body.appendChild(script);
+    });
+};