@thienvu18/designable-formily-setters 2.0.0

package/esm/components/ReactionsSetter/index.js

@@ -0,0 +1,251 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { clone, uid } from '@formily/shared';
+import { createForm, isVoidField } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import { GlobalRegistry } from '@thienvu18/designable-core';
+import { requestIdle } from '@thienvu18/designable-shared';
+import { usePrefix, TextWidget } from '@thienvu18/designable-react';
+import { MonacoInput } from '@thienvu18/designable-react-settings-form';
+import { Form, ArrayTable, Input, Select, FormItem, FormCollapse, } from '@thienvu18/formily-antd-v6';
+import { Modal, Card, Button, Tag, Tooltip } from 'antd';
+import { PathSelector } from './PathSelector';
+import { FieldPropertySetter } from './FieldPropertySetter';
+import { FulfillRunHelper } from './helpers';
+import { initDeclaration } from './declarations';
+import './styles.less';
+const TypeView = ({ value }) => {
+    const text = String(value);
+    if (text.length <= 26)
+        return _jsx(Tag, { children: text });
+    return (_jsx(Tag, { children: _jsxs(Tooltip, { title: _jsx("div", { style: { fontSize: 12 }, children: _jsx("code", { children: _jsx("pre", { style: { whiteSpace: 'pre-wrap', padding: 0, margin: 0 }, children: text }) }) }), children: [text.substring(0, 24), "..."] }) }));
+};
+const SchemaField = createSchemaField({
+    components: {
+        Card,
+        FormCollapse,
+        Input,
+        TypeView,
+        Select,
+        FormItem,
+        PathSelector,
+        FieldPropertySetter,
+        ArrayTable,
+        MonacoInput,
+    },
+});
+const FieldStateProperties = [
+    'value',
+    'initialValue',
+    'inputValue',
+    'inputValues',
+    'modified',
+    'initialized',
+    'title',
+    'description',
+    'mounted',
+    'unmounted',
+    'active',
+    'visited',
+    'loading',
+    'errors',
+    'warnings',
+    'successes',
+    'feedbacks',
+    'valid',
+    'invalid',
+    'pattern',
+    'display',
+    'disabled',
+    'readOnly',
+    'readPretty',
+    'visible',
+    'hidden',
+    'editable',
+    'validateStatus',
+    'validating',
+];
+const FieldStateValueTypes = {
+    modified: 'boolean',
+    initialized: 'boolean',
+    title: 'string',
+    description: 'string',
+    mounted: 'boolean',
+    unmounted: 'boolean',
+    active: 'boolean',
+    visited: 'boolean',
+    loading: 'boolean',
+    errors: 'string[]',
+    warnings: 'string[]',
+    successes: 'string[]',
+    feedbacks: `Array<
+  triggerType?: 'onInput' | 'onFocus' | 'onBlur'
+  type?: 'error' | 'success' | 'warning'
+  code?:
+    | 'ValidateError'
+    | 'ValidateSuccess'
+    | 'ValidateWarning'
+    | 'EffectError'
+    | 'EffectSuccess'
+    | 'EffectWarning'
+  messages?: string[]
+>
+`,
+    valid: 'boolean',
+    invalid: 'boolean',
+    pattern: "'editable' | 'disabled' | 'readOnly' | 'readPretty'",
+    display: "'visible' | 'hidden' | 'none'",
+    disabled: 'boolean',
+    readOnly: 'boolean',
+    readPretty: 'boolean',
+    visible: 'boolean',
+    hidden: 'boolean',
+    editable: 'boolean',
+    validateStatus: "'error' | 'warning' | 'success' | 'validating'",
+    validating: 'boolean',
+};
+export const ReactionsSetter = (props) => {
+    const [modalVisible, setModalVisible] = useState(false);
+    const [innerVisible, setInnerVisible] = useState(false);
+    const prefix = usePrefix('reactions-setter');
+    const form = useMemo(() => {
+        return createForm({
+            values: clone(props.value),
+        });
+    }, [modalVisible, props.value]);
+    const formCollapse = useMemo(() => FormCollapse.createFormCollapse(['deps', 'state']), [modalVisible]);
+    const openModal = () => setModalVisible(true);
+    const closeModal = () => setModalVisible(false);
+    useEffect(() => {
+        if (modalVisible) {
+            requestIdle(() => {
+                initDeclaration().then(() => {
+                    setInnerVisible(true);
+                });
+            }, {
+                timeout: 400,
+            });
+        }
+        else {
+            setInnerVisible(false);
+        }
+    }, [modalVisible]);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { block: true, onClick: openModal, children: _jsx(TextWidget, { token: "SettingComponents.ReactionsSetter.configureReactions" }) }), _jsx(Modal, { title: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.configureReactions'), width: "70%", centered: true, styles: { body: { padding: 10 } }, transitionName: "", maskTransitionName: "", open: modalVisible, onCancel: closeModal, destroyOnHidden: true, onOk: () => {
+                    form.submit((values) => {
+                        props.onChange?.(values);
+                    });
+                    closeModal();
+                }, children: _jsx("div", { className: prefix, children: innerVisible && (_jsx(Form, { form: form, children: _jsx(SchemaField, { children: _jsxs(SchemaField.Void, { "x-component": "FormCollapse", "x-component-props": {
+                                    formCollapse,
+                                    defaultActiveKey: ['deps', 'state'],
+                                    style: { marginBottom: 10 },
+                                }, children: [_jsx(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
+                                            key: 'deps',
+                                            header: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.relationsFields'),
+                                        }, children: _jsxs(SchemaField.Array, { name: "dependencies", default: [{}], "x-component": "ArrayTable", children: [_jsxs(SchemaField.Object, { children: [_jsx(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                                                title: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.sourceField'),
+                                                                width: 240,
+                                                            }, children: _jsx(SchemaField.String, { name: "source", "x-decorator": "FormItem", "x-component": "PathSelector", "x-component-props": {
+                                                                    placeholder: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.pleaseSelect'),
+                                                                } }) }), _jsx(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                                                title: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.sourceProperty'),
+                                                                width: 200,
+                                                            }, children: _jsx(SchemaField.String, { name: "property", default: "value", "x-decorator": "FormItem", "x-component": "Select", "x-component-props": { showSearch: true }, enum: FieldStateProperties }) }), _jsx(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                                                title: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableName'),
+                                                                width: 200,
+                                                            }, children: _jsx(SchemaField.String, { name: "name", "x-decorator": "FormItem", "x-validator": {
+                                                                    pattern: /^[$_a-zA-Z]+[$_a-zA-Z0-9]*$/,
+                                                                    message: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableNameValidateMessage'),
+                                                                }, "x-component": "Input", "x-component-props": {
+                                                                    addonBefore: '$deps.',
+                                                                    placeholder: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.pleaseInput'),
+                                                                }, "x-reactions": (field) => {
+                                                                    if (isVoidField(field))
+                                                                        return;
+                                                                    field.query('.source').take((source) => {
+                                                                        if (isVoidField(source))
+                                                                            return;
+                                                                        if (source.value &&
+                                                                            !field.value &&
+                                                                            !field.modified) {
+                                                                            field.value =
+                                                                                source.inputValues[1]?.props?.name ||
+                                                                                    `v_${uid()}`;
+                                                                        }
+                                                                    });
+                                                                } }) }), _jsx(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                                                title: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableType'),
+                                                                ellipsis: {
+                                                                    showTitle: false,
+                                                                },
+                                                                width: 200,
+                                                                align: 'center',
+                                                            }, children: _jsx(SchemaField.String, { name: "type", default: "any", "x-decorator": "FormItem", "x-component": "TypeView", "x-reactions": (field) => {
+                                                                    if (isVoidField(field))
+                                                                        return;
+                                                                    const property = field
+                                                                        .query('.property')
+                                                                        .get('inputValues');
+                                                                    if (!property)
+                                                                        return;
+                                                                    property[0] = property[0] || 'value';
+                                                                    field.query('.source').take((source) => {
+                                                                        if (isVoidField(source))
+                                                                            return;
+                                                                        if (source.value) {
+                                                                            if (property[0] === 'value' ||
+                                                                                property[0] === 'initialValue' ||
+                                                                                property[0] === 'inputValue') {
+                                                                                field.value =
+                                                                                    source.inputValues[1]?.props?.type ||
+                                                                                        'any';
+                                                                            }
+                                                                            else if (property[0] === 'inputValues') {
+                                                                                field.value = `any[]`;
+                                                                            }
+                                                                            else if (property[0]) {
+                                                                                field.value =
+                                                                                    FieldStateValueTypes[property[0]];
+                                                                            }
+                                                                            else {
+                                                                                field.value = 'any';
+                                                                            }
+                                                                        }
+                                                                    });
+                                                                } }) }), _jsx(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                                                title: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.operations'),
+                                                                align: 'center',
+                                                                width: 80,
+                                                            }, children: _jsx(SchemaField.Markup, { type: "void", "x-component": "ArrayTable.Remove" }) })] }), _jsx(SchemaField.Void, { title: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.addRelationField'), "x-component": "ArrayTable.Addition", "x-component-props": { style: { marginTop: 8 } } })] }) }), _jsx(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
+                                            header: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.propertyReactions'),
+                                            key: 'state',
+                                            className: 'reaction-state',
+                                        }, children: _jsx(SchemaField.Markup, { name: "fulfill.state", "x-component": "FieldPropertySetter" }) }), _jsx(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
+                                            key: 'run',
+                                            header: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.actionReactions'),
+                                            className: 'reaction-runner',
+                                        }, children: _jsx(SchemaField.String, { name: "fulfill.run", "x-component": "MonacoInput", "x-component-props": {
+                                                width: '100%',
+                                                height: 400,
+                                                language: 'typescript',
+                                                helpCode: FulfillRunHelper,
+                                                options: {
+                                                    minimap: {
+                                                        enabled: false,
+                                                    },
+                                                },
+                                            }, "x-reactions": (field) => {
+                                                const deps = field.query('dependencies').value();
+                                                if (Array.isArray(deps)) {
+                                                    field.componentProps.extraLib = `
+                          declare var $deps : {
+                            ${deps.map(({ name, type }) => {
+                                                        if (!name)
+                                                            return '';
+                                                        return `${name}?:${type || 'any'},`;
+                                                    })}
+                          }
+                          `;
+                                                }
+                                            } }) })] }) }) })) }) })] }));
+};

package/esm/components/ReactionsSetter/properties.d.ts

@@ -0,0 +1,11 @@
+export declare const FieldProperties: ({
+    key: string;
+    type: string;
+    helpCode: string;
+    token?: undefined;
+} | {
+    key: string;
+    token: string;
+    type: string;
+    helpCode: string;
+})[];

package/esm/components/ReactionsSetter/properties.js

@@ -0,0 +1,41 @@
+import { BooleanHelper, PatternHelper, StringHelper, AnyHelper, DataSourceHelper, DecoratorPropsHelper, DisplayHelper, ComponentPropsHelper, } from './helpers';
+export const FieldProperties = [
+    {
+        key: 'visible',
+        type: 'boolean',
+        helpCode: BooleanHelper,
+    },
+    { key: 'hidden', type: 'boolean', helpCode: BooleanHelper },
+    {
+        key: 'display',
+        type: '"visible" | "hidden" | "none"',
+        helpCode: DisplayHelper,
+    },
+    {
+        key: 'pattern',
+        type: '"editable" | "disabled" | "readOnly" | "readPretty"',
+        helpCode: PatternHelper,
+    },
+    { key: 'title', type: 'string', helpCode: StringHelper },
+    { key: 'description', type: 'string', helpCode: StringHelper },
+    { key: 'value', type: 'any', helpCode: AnyHelper },
+    { key: 'initialValue', type: 'any', helpCode: AnyHelper },
+    { key: 'required', type: 'boolean', helpCode: BooleanHelper },
+    {
+        key: 'dataSource',
+        type: 'Array<{label?:string,value?:any}>',
+        helpCode: DataSourceHelper,
+    },
+    {
+        key: 'componentProps',
+        token: 'componentProps',
+        type: 'object',
+        helpCode: ComponentPropsHelper,
+    },
+    {
+        key: 'decoratorProps',
+        token: 'decoratorProps',
+        type: 'object',
+        helpCode: DecoratorPropsHelper,
+    },
+];

package/esm/components/ReactionsSetter/styles.less

@@ -0,0 +1,105 @@
+
+.dn-reactions-setter {
+  width: 100%;
+  min-height: 623px;
+  overflow: hidden;
+
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 0;
+    transition: all 0.25s ease-in-out;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  .@{ant-prefix}-collapse {
+    border: 1px solid var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06));
+
+    &-header {
+      padding: 8px 10px !important;
+      background-color: var(--dn-color-bg-container, #fff) !important;
+      border-bottom: 1px solid var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06)) !important;
+      font-weight: 500 !important;
+
+      .@{ant-prefix}-collapse-arrow {
+        margin-right: 4px !important;
+      }
+    }
+
+    &-item {
+      border: none !important;
+    }
+
+    &-content {
+      border: none !important;
+      transition: none !important;
+    }
+
+    &-content-box {
+      padding: 12px !important;
+    }
+  }
+
+  .reaction-runner {
+    .@{ant-prefix}-collapse-content-box {
+      padding: 12px 0 !important;
+    }
+  }
+
+  .reaction-state {
+    .@{ant-prefix}-collapse-content-box {
+      padding: 12px 0 !important;
+    }
+  }
+
+  .dn-field-property-setter {
+    display: flex;
+    height: 300px;
+
+    &-coder-wrapper {
+      display: flex;
+      flex-grow: 2;
+      height: 100%;
+      padding-left: 10px;
+      position: relative;
+      flex-direction: column;
+    }
+
+    &-coder-start {
+      font-size: 18px;
+      line-height: 30px;
+      margin-bottom: 4px;
+      color: var(--dn-color-text, rgba(0, 0, 0, 0.88));
+      font-weight: 300;
+      flex-grow: 0;
+      opacity: 0.96;
+      height: 31px;
+    }
+
+    &-coder-end {
+      font-size: 18px;
+      height: 31px;
+      color: var(--dn-color-text, rgba(0, 0, 0, 0.88));
+      margin-top: 4px;
+      margin-bottom: 4px;
+      line-height: 30px;
+      font-weight: 300;
+      flex-grow: 0;
+      opacity: 0.96;
+    }
+
+    &-coder {
+      min-width: 0;
+      flex-grow: 2;
+      padding-left: 10px;
+    }
+  }
+}
+@ant-prefix: ant;

package/esm/components/ReactionsSetter/types.d.ts

@@ -0,0 +1,13 @@
+export interface IReaction {
+    dependencies?: {
+        [key: string]: string;
+    };
+    fulfill?: {
+        state?: {
+            [key: string]: string;
+        };
+        schema?: {
+            [key: string]: string;
+        };
+    };
+}

package/esm/components/ReactionsSetter/types.js

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IValidatorSetterProps {
+    value?: any;
+    onChange?: (value: any) => void;
+}
+export declare const ValidatorSetter: React.FC<IValidatorSetterProps>;

package/esm/components/ValidatorSetter/index.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer, useField, SchemaContext, Schema, } from '@formily/react';
+import { GlobalRegistry } from '@thienvu18/designable-core';
+import { ArrayItems } from '@thienvu18/formily-antd-v6';
+import { FoldItem } from '@thienvu18/designable-react-settings-form';
+import { Select } from 'antd';
+const ValidatorSchema = {
+    type: 'array',
+    items: {
+        type: 'object',
+        'x-decorator': 'ArrayItems.Item',
+        'x-decorator-props': {
+            style: {
+                alignItems: 'center',
+                borderRadius: 3,
+                paddingTop: 6,
+                paddingBottom: 6,
+            },
+        },
+        properties: {
+            sortable: {
+                type: 'void',
+                'x-component': 'ArrayItems.SortHandle',
+                'x-component-props': { style: { marginRight: 10 } },
+            },
+            drawer: {
+                type: 'void',
+                'x-component': 'DrawerSetter',
+                properties: {
+                    triggerType: {
+                        type: 'string',
+                        enum: ['onInput', 'onFocus', 'onBlur'],
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Select',
+                    },
+                    validator: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'ValueInput',
+                        'x-component-props': {
+                            include: ['EXPRESSION'],
+                        },
+                    },
+                    message: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input.TextArea',
+                    },
+                    format: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Select',
+                        'x-component-props': {
+                            allowClear: true,
+                        },
+                    },
+                    pattern: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                        'x-component-props': {
+                            prefix: '/',
+                            suffix: '/',
+                        },
+                    },
+                    len: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    max: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    min: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    exclusiveMaximum: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    exclusiveMinimum: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    whitespace: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Switch',
+                    },
+                    required: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Switch',
+                    },
+                },
+            },
+            moveDown: {
+                type: 'void',
+                'x-component': 'ArrayItems.MoveDown',
+                'x-component-props': { style: { marginLeft: 10 } },
+            },
+            moveUp: {
+                type: 'void',
+                'x-component': 'ArrayItems.MoveUp',
+                'x-component-props': { style: { marginLeft: 5 } },
+            },
+            remove: {
+                type: 'void',
+                'x-component': 'ArrayItems.Remove',
+                'x-component-props': { style: { marginLeft: 5 } },
+            },
+        },
+    },
+    properties: {
+        addValidatorRules: {
+            type: 'void',
+            'x-component': 'ArrayItems.Addition',
+            'x-component-props': {
+                style: {
+                    marginBottom: 10,
+                },
+            },
+        },
+    },
+};
+export const ValidatorSetter = observer((props) => {
+    const field = useField();
+    return (_jsxs(FoldItem, { label: field.title, children: [_jsx(FoldItem.Base, { children: _jsx(Select, { value: Array.isArray(props.value) ? undefined : props.value, onChange: props.onChange, allowClear: true, placeholder: GlobalRegistry.getDesignerMessage('SettingComponents.ValidatorSetter.pleaseSelect'), options: GlobalRegistry.getDesignerMessage('SettingComponents.ValidatorSetter.formats') }) }), _jsx(FoldItem.Extra, { children: _jsx(SchemaContext.Provider, { value: new Schema(ValidatorSchema), children: _jsx(ArrayItems, {}) }) })] }));
+});

package/esm/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DataSourceSetter';
+export * from './ReactionsSetter';
+export * from './ValidatorSetter';

package/esm/components/index.js

@@ -0,0 +1,3 @@
+export * from './DataSourceSetter';
+export * from './ReactionsSetter';
+export * from './ValidatorSetter';

package/esm/index.d.ts

@@ -0,0 +1,2 @@
+import './locales';
+export * from './components';

package/esm/index.js

@@ -0,0 +1,2 @@
+import './locales';
+export * from './components';