@formily-design/formily-setters 1.0.0

package/.umirc.js

@@ -0,0 +1,44 @@
+import { resolve } from 'path'
+export default {
+  mode: 'site',
+  logo: '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
+  title: 'Formily',
+  hash: true,
+  favicon:
+    '//img.alicdn.com/imgextra/i3/O1CN01XtT3Tv1Wd1b5hNVKy_!!6000000002810-55-tps-360-360.svg',
+  outputPath: './doc-site',
+  navs: [
+    {
+      title: 'Ant Design',
+      path: '/components',
+    },
+    {
+      title: '主站',
+      path: 'https://v2.formilyjs.org',
+    },
+    {
+      title: 'GITHUB',
+      path: 'https://github.com/alibaba/formily',
+    },
+  ],
+  styles: [
+    `.__dumi-default-navbar-logo{
+      height: 60px !important;
+      width: 150px !important;
+      padding-left:0 !important;
+      color: transparent !important;
+    }
+    .__dumi-default-navbar{
+      padding: 0 28px !important;
+    }
+    .__dumi-default-layout-hero{
+      background-image: url(//img.alicdn.com/imgextra/i4/O1CN01ZcvS4e26XMsdsCkf9_!!6000000007671-2-tps-6001-4001.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+    nav a{
+      text-decoration: none !important;
+    }
+    `,
+  ],
+}

package/LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present, Alibaba Group Holding Limited. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,7 @@
+# @formily/designable-antd
+
+### Install
+
+```bash
+npm install --save @formily/designable-antd
+```

package/copy.ts

@@ -0,0 +1,6 @@
+import { runCopy } from '../../scripts/build-style'
+
+runCopy({
+  esStr: 'antd/es/',
+  libStr: 'antd/lib/',
+})

package/esm/components/DataSourceSetter/DataSettingPanel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Form as FormCore } from '@formily/core';
+import { ITreeDataSource } from './types';
+import './styles.less';
+export interface IDataSettingPanelProps {
+    treeDataSource: ITreeDataSource;
+    allowExtendOption?: boolean;
+    effects?: (form: FormCore<any>) => void;
+}
+export declare const DataSettingPanel: React.FC<IDataSettingPanelProps>;

package/esm/components/DataSourceSetter/DataSettingPanel.js

@@ -0,0 +1,66 @@
+import React, { useMemo, Fragment } from 'react';
+import { Button } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { ArrayItems, Form, Input, FormItem } from '@formily/antd-v5';
+import { createForm } from '@formily/core';
+import { observer } from '@formily/reactive-react';
+import { createSchemaField } from '@formily/react';
+import { ValueInput } from '@formily-design/react-settings-form';
+import { usePrefix, TextWidget } from '@formily-design/react';
+import { Header } from './Header';
+import { traverseTree } from './shared';
+import './styles.less';
+const SchemaField = createSchemaField({
+    components: {
+        FormItem,
+        Input,
+        ArrayItems,
+        ValueInput,
+    },
+});
+export const DataSettingPanel = observer((props) => {
+    const { allowExtendOption, effects } = props;
+    const prefix = usePrefix('data-source-setter');
+    const form = useMemo(() => {
+        let values;
+        traverseTree(props.treeDataSource.dataSource, (dataItem) => {
+            if (dataItem.key === props.treeDataSource.selectedKey) {
+                values = dataItem;
+            }
+        });
+        return createForm({
+            values,
+            effects: effects,
+        });
+    }, [
+        props.treeDataSource.selectedKey,
+        props.treeDataSource.dataSource.length,
+    ]);
+    if (!props.treeDataSource.selectedKey)
+        return (React.createElement(Fragment, null,
+            React.createElement(Header, { title: React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.nodeProperty" }), extra: null }),
+            React.createElement("div", { className: `${prefix + '-layout-item-content'}` },
+                React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.pleaseSelectNode" }))));
+    return (React.createElement(Fragment, null,
+        React.createElement(Header, { title: React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.nodeProperty" }), extra: allowExtendOption ? (React.createElement(Button, { type: "text", onClick: () => {
+                    form.setFieldState('map', (state) => {
+                        state.value.push({});
+                    });
+                }, icon: React.createElement(PlusOutlined, null) },
+                React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.addKeyValuePair" }))) : null }),
+        React.createElement("div", { className: `${prefix + '-layout-item-content'}` },
+            React.createElement(Form, { form: form, labelWidth: 60, wrapperWidth: 160 },
+                React.createElement(SchemaField, null,
+                    React.createElement(SchemaField.Array, { name: "map", "x-component": "ArrayItems" },
+                        React.createElement(SchemaField.Object, { "x-decorator": "ArrayItems.Item", "x-decorator-props": { type: 'divide' } },
+                            React.createElement(SchemaField.String, { title: React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.label" }), "x-decorator": "FormItem", "x-disabled": !allowExtendOption, name: "label", "x-component": "Input" }),
+                            React.createElement(SchemaField.String, { title: React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.value" }), "x-decorator": "FormItem", name: "value", "x-component": "ValueInput" }),
+                            React.createElement(SchemaField.Void, { "x-component": "ArrayItems.Remove", "x-visible": allowExtendOption, "x-component-props": {
+                                    style: {
+                                        margin: 5,
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                    },
+                                } }))))))));
+});

package/esm/components/DataSourceSetter/Header.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+import './styles.less';
+export interface IHeaderProps {
+    extra: ReactNode | null;
+    title: ReactNode | string;
+}
+export declare const Header: React.FC<IHeaderProps>;

package/esm/components/DataSourceSetter/Header.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { observer } from '@formily/reactive-react';
+import { usePrefix } from '@formily-design/react';
+import './styles.less';
+export const Header = observer(({ extra, title }) => {
+    const prefix = usePrefix('data-source-setter');
+    return (React.createElement("div", { className: `${prefix + '-layout-item-header'}` },
+        React.createElement("div", { className: `${prefix + '-layout-item-title'}` }, title),
+        extra));
+});

package/esm/components/DataSourceSetter/Title.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { INodeItem, ITreeDataSource } from './types';
+import './styles.less';
+export interface ITitleProps extends INodeItem {
+    treeDataSource: ITreeDataSource;
+}
+export declare const Title: React.FC<ITitleProps>;

package/esm/components/DataSourceSetter/Title.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { clone, toArr } from '@formily/shared';
+import { observer } from '@formily/reactive-react';
+import { IconWidget, TextWidget, usePrefix } from '@formily-design/react';
+import { traverseTree } from './shared';
+import './styles.less';
+export const Title = observer((props) => {
+    const prefix = usePrefix('data-source-setter-node-title');
+    const getTitleValue = (dataSource) => {
+        const optionalKeys = ['label', 'title', 'header'];
+        let nodeTitle;
+        optionalKeys.some((key) => {
+            var _a;
+            const title = (_a = toArr(dataSource).find((item) => item.label === key)) === null || _a === void 0 ? void 0 : _a.value;
+            if (title !== undefined) {
+                nodeTitle = title;
+                return true;
+            }
+            return false;
+        });
+        if (nodeTitle === undefined) {
+            toArr(dataSource || []).some((item) => {
+                if (item.value && typeof item.value === 'string') {
+                    nodeTitle = item.value;
+                    return true;
+                }
+                return false;
+            });
+        }
+        return nodeTitle;
+    };
+    const renderTitle = (dataSource) => {
+        const nodeTitle = getTitleValue(dataSource);
+        if (nodeTitle === undefined)
+            return (React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.defaultTitle" }));
+        else
+            return nodeTitle + '';
+    };
+    return (React.createElement("div", { className: prefix },
+        React.createElement("span", { style: { marginRight: '5px' } }, renderTitle((props === null || props === void 0 ? void 0 : props.map) || [])),
+        React.createElement(IconWidget, { className: prefix + '-icon', infer: "Remove", onClick: () => {
+                var _a;
+                const newDataSource = clone((_a = props === null || props === void 0 ? void 0 : props.treeDataSource) === null || _a === void 0 ? void 0 : _a.dataSource);
+                traverseTree(newDataSource || [], (dataItem, i, data) => {
+                    if (data[i].key === props.duplicateKey)
+                        toArr(data).splice(i, 1);
+                });
+                props.treeDataSource.dataSource = newDataSource;
+            } })));
+});

package/esm/components/DataSourceSetter/TreePanel.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ITreeDataSource } from './types';
+import './styles.less';
+export interface ITreePanelProps {
+    treeDataSource: ITreeDataSource;
+    allowTree: boolean;
+    defaultOptionValue: {
+        label: string;
+        value: any;
+    }[];
+}
+export declare const TreePanel: React.FC<ITreePanelProps>;

package/esm/components/DataSourceSetter/TreePanel.js

@@ -0,0 +1,98 @@
+import React, { Fragment } from 'react';
+import { Tree, Button } from 'antd';
+import { uid } from '@formily/shared';
+import { observer } from '@formily/reactive-react';
+import { usePrefix, TextWidget, IconWidget } from '@formily-design/react';
+import { Title } from './Title';
+import { Header } from './Header';
+import { traverseTree } from './shared';
+import './styles.less';
+import { GlobalRegistry } from '@formily-design/core';
+const limitTreeDrag = ({ dropPosition }) => {
+    if (dropPosition === 0) {
+        return false;
+    }
+    return true;
+};
+export const TreePanel = observer((props) => {
+    const prefix = usePrefix('data-source-setter');
+    const dropHandler = (info) => {
+        var _a, _b;
+        const dropKey = (_a = info.node) === null || _a === void 0 ? void 0 : _a.key;
+        const dragKey = (_b = info.dragNode) === null || _b === void 0 ? void 0 : _b.key;
+        const dropPos = info.node.pos.split('-');
+        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
+        const data = [...props.treeDataSource.dataSource];
+        // Find dragObject
+        let dragObj;
+        traverseTree(data, (item, index, arr) => {
+            if (arr[index].key === dragKey) {
+                arr.splice(index, 1);
+                dragObj = item;
+            }
+        });
+        if (!info.dropToGap) {
+            traverseTree(data, (item) => {
+                if (item.key === dropKey) {
+                    item.children = item.children || [];
+                    item.children.unshift(dragObj);
+                }
+            });
+        }
+        else if ((info.node.children || []).length > 0 &&
+            info.node.expanded &&
+            dropPosition === 1) {
+            traverseTree(data, (item) => {
+                if (item.key === dropKey) {
+                    item.children = item.children || [];
+                    item.children.unshift(dragObj);
+                }
+            });
+        }
+        else {
+            let ar;
+            let i;
+            traverseTree(data, (item, index, arr) => {
+                if (item.key === dropKey) {
+                    ar = arr;
+                    i = index;
+                }
+            });
+            if (dropPosition === -1) {
+                ar.splice(i, 0, dragObj);
+            }
+            else {
+                ar.splice(i + 1, 0, dragObj);
+            }
+        }
+        props.treeDataSource.dataSource = data;
+    };
+    return (React.createElement(Fragment, null,
+        React.createElement(Header, { title: React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.dataSourceTree" }), extra: React.createElement(Button, { type: "text", onClick: () => {
+                    var _a;
+                    const uuid = uid();
+                    const dataSource = props.treeDataSource.dataSource;
+                    const initialKeyValuePairs = ((_a = props.defaultOptionValue) === null || _a === void 0 ? void 0 : _a.map((item) => ({ ...item }))) || [
+                        {
+                            label: 'label',
+                            value: `${GlobalRegistry.getDesignerMessage(`SettingComponents.DataSourceSetter.item`)} ${dataSource.length + 1}`,
+                        },
+                        { label: 'value', value: uuid },
+                    ];
+                    props.treeDataSource.dataSource = dataSource.concat({
+                        key: uuid,
+                        duplicateKey: uuid,
+                        map: initialKeyValuePairs,
+                        children: [],
+                    });
+                }, icon: React.createElement(IconWidget, { infer: "Add" }) },
+                React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.addNode" })) }),
+        React.createElement("div", { className: `${prefix + '-layout-item-content'}` },
+            React.createElement(Tree, { blockNode: true, draggable: true, allowDrop: props.allowTree ? () => true : limitTreeDrag, defaultExpandAll: true, defaultExpandParent: true, autoExpandParent: true, showLine: { showLeafIcon: false }, treeData: props.treeDataSource.dataSource, onDragEnter: () => { }, onDrop: dropHandler, titleRender: (titleProps) => {
+                    return (React.createElement(Title, { ...titleProps, treeDataSource: props.treeDataSource }));
+                }, onSelect: (selectedKeys) => {
+                    if (selectedKeys[0]) {
+                        props.treeDataSource.selectedKey = selectedKeys[0].toString();
+                    }
+                } }))));
+});

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Form } from '@formily/core';
+import { IDataSourceItem } from './types';
+import './styles.less';
+export interface IDataSourceSetterProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onChange: (dataSource: IDataSourceItem[]) => void;
+    value: IDataSourceItem[];
+    allowTree?: boolean;
+    allowExtendOption?: boolean;
+    defaultOptionValue?: {
+        label: string;
+        value: any;
+    }[];
+    effects?: (form: Form<any>) => void;
+}
+export declare const DataSourceSetter: React.FC<IDataSourceSetterProps>;

package/esm/components/DataSourceSetter/index.js

@@ -0,0 +1,34 @@
+import React, { Fragment, useMemo, useState } from 'react';
+import cls from 'classnames';
+import { Modal, Button } from 'antd';
+import { observable } from '@formily/reactive';
+import { observer } from '@formily/reactive-react';
+import { usePrefix, useTheme, TextWidget } from '@formily-design/react';
+import { DataSettingPanel } from './DataSettingPanel';
+import { TreePanel } from './TreePanel';
+import { transformDataToValue, transformValueToData } from './shared';
+import './styles.less';
+export const DataSourceSetter = observer((props) => {
+    const { className, value = [], onChange, allowTree = true, allowExtendOption = true, defaultOptionValue, effects = () => { }, } = props;
+    const theme = useTheme();
+    const prefix = usePrefix('data-source-setter');
+    const [modalVisible, setModalVisible] = useState(false);
+    const treeDataSource = useMemo(() => observable({
+        dataSource: transformValueToData(value),
+        selectedKey: '',
+    }), [value, modalVisible]);
+    const openModal = () => setModalVisible(true);
+    const closeModal = () => setModalVisible(false);
+    return (React.createElement(Fragment, null,
+        React.createElement(Button, { block: true, onClick: openModal },
+            React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.configureDataSource" })),
+        React.createElement(Modal, { title: React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.configureDataSource" }), width: "65%", bodyStyle: { padding: 10 }, transitionName: "", maskTransitionName: "", visible: modalVisible, onCancel: closeModal, onOk: () => {
+                onChange(transformDataToValue(treeDataSource.dataSource));
+                closeModal();
+            } },
+            React.createElement("div", { className: `${cls(prefix, className)} ${prefix + '-' + theme} ${prefix + '-layout'}` },
+                React.createElement("div", { className: `${prefix + '-layout-item left'}` },
+                    React.createElement(TreePanel, { defaultOptionValue: defaultOptionValue, allowTree: allowTree, treeDataSource: treeDataSource })),
+                React.createElement("div", { className: `${prefix + '-layout-item right'}` },
+                    React.createElement(DataSettingPanel, { allowExtendOption: allowExtendOption, treeDataSource: treeDataSource, effects: effects }))))));
+});

package/esm/components/DataSourceSetter/shared.d.ts

@@ -0,0 +1,9 @@
+import { IDataSourceItem, INodeItem } from './types';
+export interface INode {
+    key?: string;
+    map?: any;
+    children?: INode[];
+}
+export declare const traverseTree: <T extends INode>(data: T[], callback: (dataItem: T, i: number, data: T[]) => any) => void;
+export declare const transformValueToData: (value: IDataSourceItem[]) => INodeItem[];
+export declare const transformDataToValue: (data: INodeItem[]) => IDataSourceItem[];

package/esm/components/DataSourceSetter/shared.js

@@ -0,0 +1,47 @@
+import { uid, clone, toArr } from '@formily/shared';
+export const traverseTree = (data, callback) => {
+    var _a, _b;
+    for (let i = 0; i < data.length; i++) {
+        callback(data[i], i, data);
+        if ((_a = data[i]) === null || _a === void 0 ? void 0 : _a.children) {
+            traverseTree((_b = data[i]) === null || _b === void 0 ? void 0 : _b.children, callback);
+        }
+    }
+};
+export const transformValueToData = (value) => {
+    const data = clone(value);
+    traverseTree(data, (item, i, dataSource) => {
+        const dataItem = {
+            key: '',
+            duplicateKey: '',
+            map: [],
+            children: [],
+        };
+        for (const [key, value] of Object.entries(dataSource[i] || {})) {
+            if (key !== 'children')
+                dataItem.map.push({ label: key, value: value });
+        }
+        const uuid = uid();
+        dataItem.key = uuid;
+        dataItem.duplicateKey = uuid;
+        dataItem.children = dataSource[i].children || [];
+        dataSource[i] = dataItem;
+    });
+    return data;
+};
+export const transformDataToValue = (data) => {
+    const value = clone(data);
+    traverseTree(value, (item, i, dataSource) => {
+        var _a;
+        const valueItem = {
+            children: [],
+        };
+        toArr(dataSource[i].map).forEach((item) => {
+            if (item.label)
+                valueItem[item.label] = item.value;
+        });
+        valueItem.children = ((_a = dataSource[i]) === null || _a === void 0 ? void 0 : _a.children) || [];
+        dataSource[i] = valueItem;
+    });
+    return value;
+};

package/esm/components/DataSourceSetter/styles.less

@@ -0,0 +1,80 @@
+@root-entry-name: 'default';
+
+.dn-data-source-setter {
+  ::-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);
+  }
+  &-node-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &-icon {
+      transition: all 0.15s ease-in-out;
+      opacity: 0;
+
+      &:hover {
+      }
+    }
+  }
+
+  &-layout {
+    display: flex;
+    justify-content: space-around;
+    border: 1px solid #d9d9d9;
+    border-radius: 3px;
+
+    .ant-tree-treenode {
+      padding-right: 10px;
+      white-space: nowrap;
+
+      &:hover {
+        .dn-data-source-setter-node-title-icon {
+          opacity: 1;
+        }
+      }
+    }
+
+    &-item {
+      position: relative;
+
+      &.left {
+        width: 40%;
+        border-right: 1px solid #d9d9d9;
+      }
+
+      &.right {
+        width: 60%;
+      }
+
+      &-header {
+        display: flex;
+        flex: none;
+        align-items: center;
+        justify-content: space-between;
+        height: 40px;
+        padding: 8px 12px 9px;
+        border-bottom: 1px solid #d9d9d9;
+        border-radius: 2px 2px 0 0;
+      }
+
+      &-content {
+        padding: 2%;
+        height: 300px;
+        max-height: 300px;
+        overflow: scroll;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+export interface IDataSourceItem {
+    label?: '';
+    value?: any;
+    children?: any[];
+}
+export interface INodeItem {
+    key: string;
+    duplicateKey?: string;
+    map?: {
+        label: string;
+        value: any;
+    }[];
+    children?: INodeItem[];
+}
+export interface ITreeDataSource {
+    dataSource: INodeItem[];
+    selectedKey: string;
+}

package/esm/components/DataSourceSetter/types.js

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface IFieldProperty {
+    [key: string]: string;
+}
+export interface IFieldPropertySetterProps {
+    extraLib?: string;
+    value?: IFieldProperty;
+    onChange?: (value: IFieldProperty) => void;
+}
+export declare const FieldPropertySetter: React.FC<IFieldPropertySetterProps>;

package/esm/components/ReactionsSetter/FieldPropertySetter.js

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { TextWidget, usePrefix } from '@formily-design/react';
+import { Menu } from 'antd';
+import { MonacoInput } from '@formily-design/react-settings-form';
+import { isPlainObj, reduce } from '@formily/shared';
+import { FieldProperties } from './properties';
+const template = (code) => {
+    if (!code)
+        return;
+    return code.trim();
+};
+export const FieldPropertySetter = (props) => {
+    const [selectKeys, setSelectKeys] = useState(['visible']);
+    const prefix = usePrefix('field-property-setter');
+    const value = { ...props.value };
+    const parseExpression = (expression) => {
+        var _a;
+        if (!expression)
+            return '';
+        return ((_a = String(expression).match(/^\{\{([\s\S]*)\}\}$/)) === null || _a === void 0 ? void 0 : _a[1]) || '';
+    };
+    const filterEmpty = (value) => {
+        return reduce(value, (buf, value, key) => {
+            if (!value || value === '{{}}')
+                return buf;
+            buf[key] = value;
+            return buf;
+        }, {});
+    };
+    const currentProperty = FieldProperties.find((item) => item.key === selectKeys[0]);
+    return (React.createElement("div", { className: prefix },
+        React.createElement(Menu, { mode: "vertical", style: {
+                width: 200,
+                height: 300,
+                paddingRight: 4,
+                overflowY: 'auto',
+                overflowX: 'hidden',
+            }, defaultSelectedKeys: selectKeys, selectedKeys: selectKeys, onSelect: ({ selectedKeys }) => {
+                setSelectKeys(selectedKeys);
+            } }, FieldProperties.map((key) => {
+            if (isPlainObj(key)) {
+                return (React.createElement(Menu.Item, { key: key.key },
+                    React.createElement(TextWidget, { token: `SettingComponents.ReactionsSetter.${key.token || key.key}` })));
+            }
+            return (React.createElement(Menu.Item, { key: key },
+                React.createElement(TextWidget, { token: `SettingComponents.ReactionsSetter.${key}` })));
+        })),
+        React.createElement("div", { className: prefix + '-coder-wrapper' },
+            React.createElement("div", { className: prefix + '-coder-start' },
+                `$self.${selectKeys[0]} = (`,
+                React.createElement("span", { style: {
+                        fontSize: 14,
+                        marginLeft: 10,
+                        color: '#888',
+                        fontWeight: 'normal',
+                    } },
+                    '//',
+                    ' ',
+                    React.createElement(TextWidget, { token: "SettingComponents.ReactionsSetter.expressionValueTypeIs" }),
+                    ' ',
+                    '`', currentProperty === null || currentProperty === void 0 ? void 0 :
+                    currentProperty.type,
+                    '`')),
+            React.createElement("div", { className: prefix + '-coder' },
+                React.createElement(MonacoInput, { key: selectKeys[0], language: "javascript.expression", extraLib: props.extraLib, helpCode: template(currentProperty === null || currentProperty === void 0 ? void 0 : currentProperty.helpCode), value: parseExpression(value[selectKeys[0]]), options: {
+                        lineNumbers: 'off',
+                        wordWrap: 'on',
+                        glyphMargin: false,
+                        folding: false,
+                        lineDecorationsWidth: 0,
+                        lineNumbersMinChars: 0,
+                        minimap: {
+                            enabled: false,
+                        },
+                    }, onChange: (expression) => {
+                        var _a;
+                        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, filterEmpty({
+                            ...value,
+                            [selectKeys[0]]: `{{${expression}}}`,
+                        }));
+                    } })),
+            React.createElement("div", { className: prefix + '-coder-end' }, `)`))));
+};