amis-editor 5.2.0-beta.1 → 5.2.0-beta.2

package/esm/renderer/DataBindingControl.js

@@ -0,0 +1,300 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __awaiter, __generator, __decorate, __metadata } from 'tslib';
+import { PickerContainer, Spinner, InputBox, Icon, FormItem, SearchBox, CollapseGroup, Collapse } from 'amis';
+import { generateIcon, Renderer } from 'amis-core';
+import { debounce } from 'lodash';
+import React__default from 'react';
+import { autobind } from 'amis-editor-core';
+import { matchSorter } from 'match-sorter';
+import cx from 'classnames';
+import { i18n } from 'i18n-runtime';
+
+var DataBindingControl =
+/** @class */
+function (_super) {
+  __extends(DataBindingControl, _super);
+
+  function DataBindingControl(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.state = {
+      loading: false,
+      hint: undefined
+    };
+    return _this;
+  }
+
+  DataBindingControl.prototype.handleConfirm = function (result) {
+    var _a, _b;
+
+    var _c = this.props,
+        manager = _c.manager,
+        data = _c.data,
+        onChange = _c.onChange,
+        onBulkChange = _c.onBulkChange,
+        onBindingChange = _c.onBindingChange;
+
+    if (result === null || result === void 0 ? void 0 : result.value) {
+      onChange(result.value);
+      onBulkChange && (onBindingChange === null || onBindingChange === void 0 ? void 0 : onBindingChange(result, onBulkChange));
+      (_b = (_a = manager.config) === null || _a === void 0 ? void 0 : _a.dataBindingChange) === null || _b === void 0 ? void 0 : _b.call(_a, result.value, data, manager);
+    }
+  };
+
+  DataBindingControl.prototype.handlePickerOpen = function () {
+    return __awaiter(this, void 0, void 0, function () {
+      var _a, manager, node, schema;
+
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            _a = this.props, manager = _a.manager, node = _a.node;
+            this.setState({
+              loading: true,
+              schema: undefined
+            });
+            _b.label = 1;
+
+          case 1:
+            _b.trys.push([1, 3,, 4]);
+
+            return [4
+            /*yield*/
+            , manager.getAvailableContextFields(node)];
+
+          case 2:
+            schema = _b.sent();
+            return [3
+            /*break*/
+            , 4];
+
+          case 3:
+            _b.sent();
+            this.setState({
+              loading: false,
+              hint: i18n("005c50d1af6e833d6991ab882653b7ae")
+            });
+            return [2
+            /*return*/
+            ];
+
+          case 4:
+            this.setState({
+              loading: false,
+              hint: schema ? undefined : i18n("76f47297fe988267a26073a9aaf7911f"),
+              schema: schema !== null && schema !== void 0 ? schema : undefined
+            });
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    });
+  };
+
+  DataBindingControl.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        className = _a.className;
+        _a.classnames;
+        var result = _a.value,
+        onChange = _a.onChange;
+        _a.multiple;
+        var disabled = _a.disabled,
+        render = _a.render;
+    var _b = this.state,
+        schema = _b.schema,
+        loading = _b.loading,
+        hint = _b.hint;
+    return React__default.createElement(PickerContainer, {
+      onPickerOpen: this.handlePickerOpen,
+      className: className,
+      title: "\u7ED1\u5B9A\u5B57\u6BB5",
+      bodyRender: function (_a) {
+        var value = _a.value,
+            isOpened = _a.isOpened,
+            onChange = _a.onChange;
+
+        if (!isOpened) {
+          return null;
+        }
+
+        if (loading) {
+          return React__default.createElement(Spinner, {
+            show: true,
+            icon: "reload",
+            spinnerClassName: "ae-DataBindingList-spinner"
+          });
+        }
+
+        if (hint) {
+          return React__default.createElement("p", {
+            className: "ae-DataBindingList-hint"
+          }, hint);
+        }
+
+        return render('content', schema, {
+          onSelect: onChange,
+          value: value ? value.value : result
+        });
+      },
+      value: result,
+      onConfirm: this.handleConfirm
+    }, function (_a) {
+      var onClick = _a.onClick;
+      return React__default.createElement(InputBox, {
+        className: "ae-InputVariable",
+        clearable: false,
+        value: result,
+        onChange: onChange,
+        disabled: disabled
+      }, React__default.createElement("span", {
+        onClick: function (e) {
+          return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+              onClick(e);
+              return [2
+              /*return*/
+              ];
+            });
+          });
+        }
+      }, React__default.createElement(Icon, {
+        icon: "info",
+        className: "icon cursor-pointer"
+      })));
+    });
+  };
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], DataBindingControl.prototype, "handleConfirm", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", Promise)], DataBindingControl.prototype, "handlePickerOpen", null);
+
+  return DataBindingControl;
+}(React__default.Component);
+
+/** @class */
+(function (_super) {
+  __extends(DataBindingControlRenderer, _super);
+
+  function DataBindingControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  DataBindingControlRenderer = __decorate([FormItem({
+    type: 'ae-DataBindingControl'
+  })], DataBindingControlRenderer);
+  return DataBindingControlRenderer;
+})(DataBindingControl);
+
+var SimpleDataBindingControl =
+/** @class */
+function (_super) {
+  __extends(SimpleDataBindingControl, _super);
+
+  function SimpleDataBindingControl(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.handleSearchDebounced = debounce(_this.handleSearch, 250, {
+      trailing: true,
+      leading: false
+    });
+    _this.state = {
+      filteredFields: props.fields
+    };
+    return _this;
+  }
+
+  SimpleDataBindingControl.prototype.handleSearch = function (keywords) {
+    return __awaiter(this, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        this.setState({
+          filteredFields: matchSorter(this.props.fields, keywords, {
+            keys: ['label', 'value', 'children']
+          })
+        });
+        return [2
+        /*return*/
+        ];
+      });
+    });
+  };
+
+  SimpleDataBindingControl.prototype.handleSelect = function () {};
+
+  SimpleDataBindingControl.prototype.render = function () {
+    var _a = this.props,
+        className = _a.className,
+        value = _a.value,
+        onSelect = _a.onSelect,
+        isSelected = _a.isSelected;
+    var filteredFields = this.state.filteredFields;
+    return React__default.createElement("div", {
+      className: cx('ae-DataBindingList', className)
+    }, React__default.createElement("div", {
+      className: cx('ae-DataBindingList-searchBox')
+    }, React__default.createElement(SearchBox, {
+      mini: false,
+      placeholder: i18n("91be693dd1ccea38f8f514318fd8a944"),
+      onSearch: this.handleSearchDebounced
+    })), React__default.createElement("div", {
+      className: cx('ae-DataBindingList-body')
+    }, React__default.createElement(CollapseGroup, {
+      className: cx('ae-DataBindingList-collapseGroup'),
+      defaultActiveKey: filteredFields.map(function (item) {
+        return item.value || item.label;
+      }),
+      expandIcon: generateIcon(cx, 'fa fa-chevron-right expandIcon', 'Icon'),
+      expandIconPosition: "right"
+    }, filteredFields.map(function (item, index) {
+      return React__default.createElement(Collapse, {
+        className: cx('ae-DataBindingList-collapse'),
+        headingClassName: cx('ae-DataBindingList-collapse-title'),
+        bodyClassName: cx('ae-DataBindingList-collapse-body'),
+        propKey: item.value || item.label,
+        key: item.value || item.label,
+        header: React__default.createElement("span", null, item.label)
+      }, Array.isArray(item.children) && item.children.length > 0 ? item.children.map(function (childItem) {
+        var checked = isSelected ? isSelected(childItem) : childItem.value === value;
+        return React__default.createElement("div", {
+          className: cx('ae-DataBindingList-item', {
+            'is-active': checked
+          }),
+          onClick: function () {
+            return onSelect(childItem);
+          },
+          key: childItem.value
+        }, childItem.label);
+      }) : React__default.createElement("p", {
+        className: cx('ae-DataBindingList-hint')
+      }, "\u6682\u65E0\u53EF\u7528\u5B57\u6BB5"));
+    }))));
+  };
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", Promise)], SimpleDataBindingControl.prototype, "handleSearch", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], SimpleDataBindingControl.prototype, "handleSelect", null);
+
+  return SimpleDataBindingControl;
+}(React__default.Component);
+
+/** @class */
+(function (_super) {
+  __extends(SimpleDataBindingControlRenderer, _super);
+
+  function SimpleDataBindingControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  SimpleDataBindingControlRenderer = __decorate([Renderer({
+    type: 'ae-SimpleDataBindingPanel'
+  })], SimpleDataBindingControlRenderer);
+  return SimpleDataBindingControlRenderer;
+})(SimpleDataBindingControl);
+
+export { DataBindingControl, SimpleDataBindingControl };

package/esm/renderer/DataMappingControl.d.ts

@@ -0,0 +1,11 @@
+import type { FormControlProps } from 'amis-core';
+import React from 'react';
+export interface DataMappingProps extends FormControlProps {
+    schema?: string;
+}
+export declare class DataMappingControl extends React.Component<DataMappingProps> {
+    renderValue(value: any, onChange: (value: any) => void, schema: any): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class DataMappingControlRenderer extends DataMappingControl {
+}

package/esm/renderer/DataMappingControl.js

@@ -0,0 +1,65 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __rest, __assign, __decorate, __metadata } from 'tslib';
+import { Renderer } from 'amis';
+import React__default from 'react';
+import { autobind } from 'amis-editor-core';
+
+var DataMappingControl = /** @class */ (function (_super) {
+    __extends(DataMappingControl, _super);
+    function DataMappingControl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DataMappingControl.prototype.renderValue = function (value, onChange, schema) {
+        var render = this.props.render;
+        return render('value', {
+            type: 'ae-DataPickerControl',
+            inputOnly: true,
+            name: 'any'
+        }, {
+            value: value,
+            onChange: onChange
+        });
+    };
+    DataMappingControl.prototype.render = function () {
+        var _a = this.props, schema = _a.schema, render = _a.render, name = _a.name, description = _a.description, required = _a.required, rest = __rest(_a, ["schema", "render", "name", "description", "required"]);
+        return render('inner', {
+            type: 'json-schema',
+            schema: schema,
+            name: name,
+            description: description,
+            required: required
+        }, __assign(__assign({}, rest), { renderValue: this.renderValue }));
+        // return (
+        //   <InputJSONSchema
+        //     {...rest}
+        //     schema={this.state.schema}
+        //     renderValue={this.renderValue}
+        //   />
+        // );
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Function, Object]),
+        __metadata("design:returntype", void 0)
+    ], DataMappingControl.prototype, "renderValue", null);
+    return DataMappingControl;
+}(React__default.Component));
+/** @class */ ((function (_super) {
+    __extends(DataMappingControlRenderer, _super);
+    function DataMappingControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DataMappingControlRenderer = __decorate([
+        Renderer({
+            type: 'ae-DataMappingControl'
+        })
+    ], DataMappingControlRenderer);
+    return DataMappingControlRenderer;
+})(DataMappingControl));
+
+export { DataMappingControl };

package/esm/renderer/DataPickerControl.d.ts

@@ -0,0 +1,13 @@
+import type { FormControlProps } from 'amis-core';
+import React from 'react';
+declare class DataPickerControl extends React.Component<FormControlProps> {
+    handleConfirm(value: string): void;
+    handlePickerOpen(): Promise<{
+        variables: any;
+        variableMode: string;
+    }>;
+    render(): JSX.Element;
+}
+export declare class DataPickerControlRenderer extends DataPickerControl {
+}
+export {};

package/esm/renderer/DataPickerControl.js

@@ -0,0 +1,77 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __awaiter, __generator, __assign, __decorate, __metadata } from 'tslib';
+import { FormulaPicker, InputBox, Icon, FormItem } from 'amis';
+import React__default from 'react';
+import { autobind } from 'amis-editor-core';
+
+var DataPickerControl = /** @class */ (function (_super) {
+    __extends(DataPickerControl, _super);
+    function DataPickerControl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DataPickerControl.prototype.handleConfirm = function (value) {
+        this.props.onChange(value);
+    };
+    DataPickerControl.prototype.handlePickerOpen = function () {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var _b, manager, node, variables;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _b = this.props, manager = _b.manager, node = _b.node;
+                        variables = (_a = this.props.variables) !== null && _a !== void 0 ? _a : this.props.data.variables;
+                        if (!!variables) return [3 /*break*/, 2];
+                        return [4 /*yield*/, manager.getContextSchemas(node.info.id)];
+                    case 1:
+                        _c.sent();
+                        variables = manager.dataSchema.getDataPropsAsOptions();
+                        _c.label = 2;
+                    case 2: return [2 /*return*/, {
+                            variables: variables.map(function (item) { return (__assign(__assign({}, item), { selectMode: 'tree' })); }),
+                            variableMode: 'tabs'
+                        }];
+                }
+            });
+        });
+    };
+    DataPickerControl.prototype.render = function () {
+        var _a = this.props; _a.classnames; var value = _a.value, onChange = _a.onChange, disabled = _a.disabled; _a.manager; _a.node;
+        return (React__default.createElement(FormulaPicker, { onPickerOpen: this.handlePickerOpen, evalMode: false, onConfirm: this.handleConfirm, value: value, onChange: function () { }, header: '' }, function (_a) {
+            var onClick = _a.onClick;
+            return (React__default.createElement(InputBox, { className: "ae-InputVariable", clearable: false, value: value, onChange: onChange, disabled: disabled },
+                React__default.createElement("span", { onClick: onClick },
+                    React__default.createElement(Icon, { icon: "info", className: "icon" }))));
+        }));
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], DataPickerControl.prototype, "handleConfirm", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Promise)
+    ], DataPickerControl.prototype, "handlePickerOpen", null);
+    return DataPickerControl;
+}(React__default.Component));
+/** @class */ ((function (_super) {
+    __extends(DataPickerControlRenderer, _super);
+    function DataPickerControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DataPickerControlRenderer = __decorate([
+        FormItem({
+            type: 'ae-DataPickerControl',
+            renderLabel: false
+        })
+    ], DataPickerControlRenderer);
+    return DataPickerControlRenderer;
+})(DataPickerControl));

package/esm/renderer/DateShortCutControl.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @file 时间选择器的快捷键
+ */
+import React from 'react';
+import Sortable from 'sortablejs';
+import type { FormControlProps } from 'amis-core';
+import type { BaseEventContext } from 'amis-editor-core';
+declare type RangesType = Array<string | {
+    label: string;
+    range: any;
+}>;
+declare type DropDownOption = {
+    [key: string]: string;
+};
+export interface DateShortCutControlProps extends FormControlProps {
+    className?: string;
+    /**
+     * 编辑器上下文数据，用于获取字段所在Form的其他字段
+     */
+    context: BaseEventContext;
+    dropDownOption: DropDownOption;
+}
+interface OptionsType {
+    label: string;
+    type: string;
+    inputValue: string;
+}
+interface DateShortCutControlState {
+    options: Array<OptionsType>;
+}
+export declare class DateShortCutControl extends React.PureComponent<DateShortCutControlProps, DateShortCutControlState> {
+    sortable?: Sortable;
+    drag?: HTMLElement | null;
+    target: HTMLElement | null;
+    dropDownOptionArr: Array<{
+        label: string;
+        value: string;
+    }>;
+    static defaultProps: Partial<DateShortCutControlProps>;
+    constructor(props: DateShortCutControlProps);
+    initOptions(ranges: RangesType): void;
+    /**
+     * 添加
+     */
+    addItem(item: {
+        label: string;
+        value: string;
+    }): void;
+    dragRef(ref: any): void;
+    scrollToBottom(): void;
+    /**
+     * 初始化拖动
+     */
+    initDragging(): void;
+    /**
+     * 拖动的销毁
+     */
+    destroyDragging(): void;
+    /**
+     * 生成内容体
+     */
+    renderContent(): JSX.Element;
+    /**
+     * 生成选项
+     */
+    renderOption(option: OptionsType, index: number): JSX.Element;
+    /**
+     * 输入框的改变
+     */
+    onInputChange(index: number, value: string, key: 'inputValue' | 'label'): void;
+    /**
+     * 删除选项
+     */
+    handleDelete(index: number, e: React.UIEvent<any>): void;
+    /**
+     * 更新options字段的统一出口
+     */
+    onChangeOptions(): void;
+    render(): JSX.Element;
+}
+export declare class DateShortCutControlRender extends DateShortCutControl {
+}
+export {};