@thienvu18/designable-react-settings-form 2.0.0

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

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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/lib/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>;

package/lib/components/PolyInput/index.js

@@ -0,0 +1,100 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPolyInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const antd_1 = require("antd");
+const designable_react_1 = require("@thienvu18/designable-react");
+const classnames_1 = __importDefault(require("classnames"));
+require("./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;
+    });
+};
+function createPolyInput(polyTypes = []) {
+    return ({ className, style, value, onChange, exclude, include, ...props }) => {
+        const prefix = (0, designable_react_1.usePrefix)('poly-input');
+        const types = createTypes(polyTypes, exclude, include);
+        const [current, setCurrent] = (0, react_1.useState)(types[0]?.type);
+        const type = types?.find(({ type }) => type === current);
+        const component = type?.component;
+        const typesValue = (0, react_1.useRef)({});
+        (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(prefix, className), style: style, children: [component && ((0, jsx_runtime_1.jsx)("div", { className: prefix + '-content', children: react_1.default.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));
+                        },
+                    }) })), (0, jsx_runtime_1.jsx)(antd_1.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 ? ((0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: type.icon })) : (type?.title || type?.type) })] }));
+    };
+}
+exports.createPolyInput = createPolyInput;

package/lib/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/lib/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/lib/components/PositionInput/index.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PositionInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const designable_react_1 = require("@thienvu18/designable-react");
+const classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+const PositionInput = (props) => {
+    const prefix = (0, designable_react_1.usePrefix)('position-input');
+    const [current, setCurrent] = (0, react_1.useState)(props.value);
+    (0, react_1.useEffect)(() => {
+        if (!props.value) {
+            setCurrent('center');
+        }
+    }, [props.value]);
+    const createCellProps = (type) => ({
+        className: (0, classnames_1.default)(prefix + '-cell', { active: current === type }),
+        onClick() {
+            setCurrent(type);
+            props.onChange?.(type);
+        },
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(prefix, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)("div", { className: prefix + '-row', children: (0, jsx_runtime_1.jsx)("div", { ...createCellProps('top'), children: "\u2533" }) }), (0, jsx_runtime_1.jsxs)("div", { className: prefix + '-row', children: [(0, jsx_runtime_1.jsx)("div", { ...createCellProps('left'), children: "\u2523" }), (0, jsx_runtime_1.jsx)("div", { ...createCellProps('center'), children: "\u254B" }), (0, jsx_runtime_1.jsx)("div", { ...createCellProps('right'), children: "\u252B" })] }), (0, jsx_runtime_1.jsx)("div", { className: prefix + '-row', children: (0, jsx_runtime_1.jsx)("div", { ...createCellProps('bottom'), children: "\u253B" }) })] }));
+};
+exports.PositionInput = PositionInput;

package/lib/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/lib/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/lib/components/SizeInput/index.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackgroundSizeInput = exports.SizeInput = void 0;
+const antd_1 = require("antd");
+const PolyInput_1 = require("../PolyInput");
+const takeNumber = (value) => {
+    const num = String(value)
+        .trim()
+        .replace(/[^\d\.]+/, '');
+    if (num === '')
+        return;
+    return Number(num);
+};
+const createUnitType = (type) => {
+    return {
+        type,
+        component: antd_1.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'),
+];
+exports.SizeInput = (0, PolyInput_1.createPolyInput)(NormalSizeOptions);
+exports.BackgroundSizeInput = (0, PolyInput_1.createPolyInput)([
+    createSpecialSizeOption('cover'),
+    createSpecialSizeOption('contain'),
+    createUnitType('px'),
+    createUnitType('%'),
+    createUnitType('vh'),
+    createUnitType('em'),
+]);

package/lib/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/lib/components/ValueInput/index.d.ts

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

package/lib/components/ValueInput/index.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValueInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PolyInput_1 = require("../PolyInput");
+const antd_1 = require("antd");
+const MonacoInput_1 = require("../MonacoInput");
+const designable_react_1 = require("@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);
+};
+exports.ValueInput = (0, PolyInput_1.createPolyInput)([
+    {
+        type: 'TEXT',
+        icon: 'Text',
+        component: antd_1.Input,
+        checker: isNormalText,
+    },
+    {
+        type: 'EXPRESSION',
+        icon: 'Expression',
+        component: (props) => {
+            return ((0, jsx_runtime_1.jsx)(antd_1.Popover, { content: (0, jsx_runtime_1.jsx)("div", { style: {
+                        width: 400,
+                        height: 200,
+                        marginLeft: -16,
+                        marginRight: -16,
+                        marginBottom: -12,
+                    }, children: (0, jsx_runtime_1.jsx)(MonacoInput_1.MonacoInput, { ...props, language: "javascript.expression" }) }), trigger: "click", children: (0, jsx_runtime_1.jsx)(antd_1.Button, { block: true, children: (0, jsx_runtime_1.jsx)(designable_react_1.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) => ((0, jsx_runtime_1.jsx)(antd_1.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: antd_1.InputNumber,
+        checker: isNumber,
+        toInputValue: takeNumber,
+        toChangeValue: takeNumber,
+    },
+]);

package/lib/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/lib/components/index.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ColorInput"), exports);
+__exportStar(require("./CornerInput"), exports);
+__exportStar(require("./ImageInput"), exports);
+__exportStar(require("./PositionInput"), exports);
+__exportStar(require("./SizeInput"), exports);
+__exportStar(require("./PolyInput"), exports);
+__exportStar(require("./ValueInput"), exports);
+__exportStar(require("./MonacoInput"), exports);
+__exportStar(require("./DrawerSetter"), exports);
+__exportStar(require("./BoxStyleSetter"), exports);
+__exportStar(require("./BorderStyleSetter"), exports);
+__exportStar(require("./BorderRadiusStyleSetter"), exports);
+__exportStar(require("./BackgroundStyleSetter"), exports);
+__exportStar(require("./BoxShadowStyleSetter"), exports);
+__exportStar(require("./FontStyleSetter"), exports);
+__exportStar(require("./DisplayStyleSetter"), exports);
+__exportStar(require("./FlexStyleSetter"), exports);
+__exportStar(require("./FoldItem"), exports);
+__exportStar(require("./CollapseItem"), exports);
+__exportStar(require("./InputItems"), exports);

package/lib/effects/index.d.ts

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

package/lib/effects/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLocales"), exports);
+__exportStar(require("./useSnapshot"), exports);

package/lib/effects/useLocales.d.ts

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