amis-editor 4.1.0-beta.4 → 5.2.0-beta.1

package/lib/renderer/DataPickerControl.js

@@ -0,0 +1,83 @@
+/**
+ * amis-editor v5.2.0-beta.1
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+var tslib = require('tslib');
+var amis = require('amis');
+var React = require('react');
+var AMisCodeEditor = require('amis-editor-core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var DataPickerControl = /** @class */ (function (_super) {
+    tslib.__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 tslib.__awaiter(this, void 0, void 0, function () {
+            var _b, manager, node, variables;
+            return tslib.__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 (tslib.__assign(tslib.__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["default"].createElement(amis.FormulaPicker, { onPickerOpen: this.handlePickerOpen, evalMode: false, onConfirm: this.handleConfirm, value: value, onChange: function () { }, header: '' }, function (_a) {
+            var onClick = _a.onClick; _a.isOpened; _a.setState;
+            return (React__default["default"].createElement(amis.InputBox, { className: "ae-InputVariable", clearable: false, value: value, onChange: onChange, disabled: disabled },
+                React__default["default"].createElement("span", { onClick: onClick },
+                    React__default["default"].createElement(amis.Icon, { icon: "info", className: "icon" }))));
+        }));
+    };
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [String]),
+        tslib.__metadata("design:returntype", void 0)
+    ], DataPickerControl.prototype, "handleConfirm", null);
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", Promise)
+    ], DataPickerControl.prototype, "handlePickerOpen", null);
+    return DataPickerControl;
+}(React__default["default"].Component));
+/** @class */ ((function (_super) {
+    tslib.__extends(DataPickerControlRenderer, _super);
+    function DataPickerControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DataPickerControlRenderer = tslib.__decorate([
+        amis.FormItem({
+            type: 'ae-DataPickerControl',
+            renderLabel: false
+        })
+    ], DataPickerControlRenderer);
+    return DataPickerControlRenderer;
+})(DataPickerControl));

package/lib/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 {};

package/lib/renderer/DateShortCutControl.js

@@ -0,0 +1,254 @@
+/**
+ * amis-editor v5.2.0-beta.1
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cx = require('classnames');
+var Sortable = require('sortablejs');
+var reactDom = require('react-dom');
+var amis = require('amis');
+var AMisCodeEditor = require('amis-editor-core');
+var FormulaControl = require('./FormulaControl.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
+
+var CustomType = 'custom';
+var klass = 'ae-DateShortCutControl';
+var DateShortCutControl = /** @class */ (function (_super) {
+    tslib.__extends(DateShortCutControl, _super);
+    function DateShortCutControl(props) {
+        var _this = _super.call(this, props) || this;
+        var dropDownOption = props.dropDownOption, data = props.data;
+        _this.dropDownOptionArr = Object.keys(dropDownOption).map(function (key) { return ({
+            label: dropDownOption[key],
+            value: key
+        }); });
+        _this.initOptions(data.ranges);
+        return _this;
+    }
+    DateShortCutControl.prototype.initOptions = function (ranges) {
+        if (!ranges) {
+            // 这里先写固定，如果amis的dateTimeRange组件暴露对应属性，从中获取更合适，到时需要让其暴露下
+            ranges = [
+                'yesterday',
+                '7daysago',
+                'prevweek',
+                'thismonth',
+                'prevmonth',
+                'prevquarter'
+            ];
+        }
+        var dropDownOption = this.props.dropDownOption;
+        var options = [];
+        if (Array.isArray(ranges)) {
+            ranges.map(function (item) {
+                if (typeof item === 'string' && dropDownOption.hasOwnProperty(item)) {
+                    options.push({
+                        label: dropDownOption[item],
+                        type: item,
+                        inputValue: item
+                    });
+                }
+                if (typeof item === 'object') {
+                    options.push({
+                        label: item === null || item === void 0 ? void 0 : item.label,
+                        type: CustomType,
+                        inputValue: item.range
+                    });
+                }
+            });
+        }
+        this.state = { options: options };
+    };
+    /**
+     * 添加
+     */
+    DateShortCutControl.prototype.addItem = function (item) {
+        var _this = this;
+        var options = this.state.options;
+        this.setState({
+            options: tslib.__spreadArray(tslib.__spreadArray([], options, true), [
+                tslib.__assign(tslib.__assign({}, item), { inputValue: item.value === CustomType ? '' : item.value, type: item.value })
+            ], false)
+        }, function () {
+            _this.onChangeOptions();
+            _this.scrollToBottom();
+        });
+    };
+    DateShortCutControl.prototype.dragRef = function (ref) {
+        if (!this.drag && ref) {
+            this.initDragging();
+        }
+        else if (this.drag && !ref) {
+            this.destroyDragging();
+        }
+        this.drag = ref;
+    };
+    /*
+     * 滚动到底部
+     */
+    DateShortCutControl.prototype.scrollToBottom = function () {
+        var _a, _b;
+        this.drag &&
+            ((_b = (_a = this.drag) === null || _a === void 0 ? void 0 : _a.lastElementChild) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'start'
+            }));
+    };
+    /**
+     * 初始化拖动
+     */
+    DateShortCutControl.prototype.initDragging = function () {
+        var _this = this;
+        var dom = reactDom.findDOMNode(this);
+        this.sortable = new Sortable__default["default"](dom.querySelector(".".concat(klass, "-content")), {
+            group: 'OptionControlGroup',
+            animation: 150,
+            handle: ".".concat(klass, "Item-dragBar"),
+            ghostClass: "".concat(klass, "Item-dragging"),
+            onEnd: function (e) {
+                // 没有移动
+                if (e.newIndex === e.oldIndex) {
+                    return;
+                }
+                // 换回来
+                var parent = e.to;
+                if (e.newIndex < e.oldIndex &&
+                    e.oldIndex < parent.childNodes.length - 1) {
+                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
+                }
+                else if (e.oldIndex < parent.childNodes.length - 1) {
+                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+                }
+                else {
+                    parent.appendChild(e.item);
+                }
+                var options = _this.state.options.concat();
+                options[e.oldIndex] = options.splice(e.newIndex, 1, options[e.oldIndex])[0];
+                _this.setState({ options: options }, function () { return _this.onChangeOptions(); });
+            }
+        });
+    };
+    /**
+     * 拖动的销毁
+     */
+    DateShortCutControl.prototype.destroyDragging = function () {
+        this.sortable && this.sortable.destroy();
+    };
+    /**
+     * 生成内容体
+     */
+    DateShortCutControl.prototype.renderContent = function () {
+        var _this = this;
+        var options = this.state.options;
+        return (React__default["default"].createElement("div", { className: klass + '-wrapper' }, options && options.length ? (React__default["default"].createElement("ul", { className: klass + '-content', ref: this.dragRef }, options.map(function (option, index) { return _this.renderOption(option, index); }))) : (React__default["default"].createElement("div", { className: "ae-OptionControl-placeholder" }, "\u672A\u914D\u7F6E"))));
+    };
+    /**
+     * 生成选项
+     */
+    DateShortCutControl.prototype.renderOption = function (option, index) {
+        var _this = this;
+        return (React__default["default"].createElement("li", { className: klass + 'Item', key: index },
+            React__default["default"].createElement("a", { className: klass + 'Item-dragBar' },
+                React__default["default"].createElement(amis.Icon, { icon: "drag-bar", className: "icon" })),
+            React__default["default"].createElement(amis.InputBox, { className: klass + 'Item-input', clearable: false, placeholder: "\u540D\u79F0", value: option.label, onInput: function (e) {
+                    return _this.onInputChange(index, e.target.value, 'label');
+                } }),
+            React__default["default"].createElement(FormulaControl["default"], tslib.__assign({}, this.props, { simple: true, variables: [], functions: [], header: '', onChange: function (value) {
+                    return _this.onInputChange(index, value, 'inputValue');
+                }, value: option.inputValue })),
+            React__default["default"].createElement(amis.Button, { className: klass + 'Item-action', level: "link", size: "md", onClick: function (e) { return _this.handleDelete(index, e); } },
+                React__default["default"].createElement(amis.Icon, { icon: "delete-btn", className: "icon" }))));
+    };
+    /**
+     * 输入框的改变
+     */
+    DateShortCutControl.prototype.onInputChange = function (index, value, key) {
+        var _this = this;
+        var options = this.state.options.concat();
+        options[index][key] = value;
+        options[index].type = CustomType;
+        this.setState({ options: options }, function () { return _this.onChangeOptions(); });
+    };
+    /**
+     * 删除选项
+     */
+    DateShortCutControl.prototype.handleDelete = function (index, e) {
+        var _this = this;
+        var options = this.state.options.concat();
+        options.splice(index, 1);
+        this.setState({ options: options }, function () { return _this.onChangeOptions(); });
+    };
+    /**
+     * 更新options字段的统一出口
+     */
+    DateShortCutControl.prototype.onChangeOptions = function () {
+        var options = this.state.options;
+        var onBulkChange = this.props.onBulkChange;
+        var newOptions = [];
+        options.forEach(function (item) {
+            if (item.type !== CustomType) {
+                newOptions.push(item.inputValue);
+            }
+            else {
+                newOptions.push({
+                    label: item.label,
+                    range: item.inputValue
+                });
+            }
+        });
+        onBulkChange && onBulkChange({ ranges: newOptions });
+    };
+    DateShortCutControl.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, className = _a.className, label = _a.label;
+        var optionList = this.dropDownOptionArr.map(function (item) { return (tslib.__assign(tslib.__assign({}, item), { type: 'button', onAction: function (e, action) { return _this.addItem(item); } })); });
+        return (React__default["default"].createElement("div", { className: cx__default["default"](klass, className) },
+            React__default["default"].createElement("header", { className: klass + '-header' },
+                React__default["default"].createElement("label", null, label)),
+            this.renderContent(),
+            React__default["default"].createElement("div", { className: klass + '-footer' }, amis.render({
+                type: 'dropdown-button',
+                label: '添加选项',
+                closeOnClick: true,
+                closeOnOutside: true,
+                buttons: optionList
+            }))));
+    };
+    DateShortCutControl.defaultProps = {
+        label: '快捷键'
+    };
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], DateShortCutControl.prototype, "dragRef", null);
+    return DateShortCutControl;
+}(React__default["default"].PureComponent));
+/** @class */ ((function (_super) {
+    tslib.__extends(DateShortCutControlRender, _super);
+    function DateShortCutControlRender() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DateShortCutControlRender = tslib.__decorate([
+        amis.FormItem({
+            type: klass,
+            renderLabel: false
+        })
+    ], DateShortCutControlRender);
+    return DateShortCutControlRender;
+})(DateShortCutControl));
+
+exports.DateShortCutControl = DateShortCutControl;

package/lib/renderer/FormulaControl.d.ts

@@ -0,0 +1,96 @@
+/**
+ * @file 表达式控件
+ */
+/// <reference types="lodash" />
+import React from 'react';
+import type { VariableItem, FuncGroup } from 'amis-ui/lib/components/formula/Editor';
+import type { FormControlProps } from 'amis-core';
+import type { BaseEventContext } from 'amis-editor-core';
+import { EditorManager } from 'amis-editor-core';
+export interface FormulaControlProps extends FormControlProps {
+    /**
+     * evalMode 即直接就是表达式，否则
+     * 需要 ${这里面才是表达式}
+     * 默认为 true，即默认不会将表达式用 ${} 包裹
+     */
+    evalMode?: boolean;
+    manager?: EditorManager;
+    /**
+     * 用于提示的变量集合，默认为空
+     */
+    variables?: Array<VariableItem>;
+    /**
+     * 变量展现模式，可选值：'tabs' ｜ 'tree'
+     */
+    variableMode?: 'tabs' | 'tree';
+    /**
+     * 函数集合，默认不需要传，即  amis-formula 里面那个函数
+     * 如果有扩充，则需要传。
+     */
+    functions: Array<FuncGroup>;
+    /**
+     * 顶部标题，默认为表达式
+     */
+    header: string;
+    /**
+     * 编辑器上下文数据，用于获取字段所在Form的其他字段
+     */
+    context: BaseEventContext;
+    /**
+     * simple 简易模式
+     * 备注: 为 true 时，仅显示 公式编辑器 icon 按钮
+     */
+    simple?: boolean;
+    /**
+     * 自定义渲染器:
+     * 备注: 可用于设置指定组件类型编辑默认值
+     */
+    rendererSchema?: any;
+    /**
+     * 自定义渲染器 是否需要浅色边框包裹，默认不包裹
+     */
+    rendererWrapper?: boolean;
+    /**
+     * 是否需要剔除属性
+     */
+    needDeleteProps?: Array<string>;
+    /**
+     * 期望的value类型，可用于校验公式运算结果类型是否匹配
+     * 备注1: 当前支持识别的类型有 int、boolean、date、object、array、string；
+     * 备注2: 开关组件可以设置 true 和 false 对应的值，如果设置了就不是普通的 boolean 类型；
+     * 备注3: 默认都是字符串类型；
+     */
+    valueType?: string;
+}
+interface FormulaControlState {
+    /** 变量数据 */
+    variables: any;
+    variableMode?: 'tree' | 'tabs';
+    evalMode?: boolean;
+}
+export default class FormulaControl extends React.Component<FormulaControlProps, FormulaControlState> {
+    static defaultProps: Partial<FormulaControlProps>;
+    isUnmount: boolean;
+    constructor(props: FormulaControlProps);
+    componentDidUpdate(prevProps: FormulaControlProps): void;
+    componentWillUnmount(): void;
+    normalizeVariables(variables: any): any[];
+    /**
+     * 将 ${xx}（非 \${xx}）替换成 \${xx}
+     * 备注: 手动编辑时，自动处理掉 ${xx}，避免识别成 公式表达式
+     */
+    replaceExpression(expression: any): any;
+    isLoopExpression(expression: any, selfName: string): boolean;
+    isExpectType(value: any): boolean;
+    resolveVariablesFromScope(): Promise<any[]>;
+    handleConfirm(value: any): void;
+    handleSimpleInputChange: import("lodash").DebouncedFunc<(value: any) => void>;
+    handleInputChange: (value: any) => void;
+    filterCustomRendererProps(rendererSchema: any): any;
+    renderFormulaValue(item: any): JSX.Element;
+    getContextData(): any;
+    render(): JSX.Element;
+}
+export declare class FormulaControlRenderer extends FormulaControl {
+}
+export {};