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

package/lib/renderer/BadgeControl.d.ts

@@ -0,0 +1,134 @@
+/**
+ * @file 角标控件
+ */
+/// <reference types="lodash" />
+import React from 'react';
+import type { FormControlProps } from 'amis-core';
+import type { SchemaExpression } from 'amis/lib/Schema';
+export interface BadgeControlProps extends FormControlProps {
+    /**
+     * 角标类型
+     */
+    mode?: 'text' | 'dot' | 'ribbon';
+    /**
+     * 文本内容
+     */
+    text?: string | number;
+    /**
+     * 角标大小
+     */
+    size?: any;
+    /**
+     * 角标位置，优先级大于position
+     */
+    offset?: [number | string, number | string];
+    /**
+     * 角标位置
+     */
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    /**
+     * 封顶的数字值
+     */
+    overflowCount?: number;
+    /**
+     * 动态控制是否显示
+     */
+    visibleOn?: SchemaExpression;
+    /**
+     * 是否显示动画
+     */
+    animation?: boolean;
+    /**
+     * 角标的自定义样式
+     */
+    style?: {
+        [propName: string]: any;
+    };
+    /**
+     * 提示类型
+     */
+    level?: 'info' | 'warning' | 'success' | 'danger' | SchemaExpression;
+}
+interface BadgeControlState {
+    checked: boolean;
+}
+interface BadgeForm extends Partial<Pick<BadgeControlProps, 'mode' | 'text' | 'size' | 'position' | 'overflowCount' | 'visibleOn' | 'animation' | 'style' | 'level'>> {
+    offset: {
+        x: number;
+        y: number;
+    };
+}
+export default class BadgeControl extends React.Component<BadgeControlProps, BadgeControlState> {
+    static defaultProps: {
+        mode: string;
+        overflowCount: number;
+        position: string;
+        level: string;
+        animation: boolean;
+    };
+    constructor(props: BadgeControlProps);
+    componentDidUpdate(prevProps: BadgeControlProps): void;
+    transformBadgeValue(): BadgeForm;
+    normalizeBadgeValue(form: BadgeForm): {
+        style: import("lodash").Dictionary<any>;
+        offset: number[];
+        text?: string | number | undefined;
+        size?: any;
+        level?: string | undefined;
+        visibleOn?: string | undefined;
+        mode?: "text" | "dot" | "ribbon" | undefined;
+        animation?: boolean | undefined;
+        position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | undefined;
+        overflowCount?: number | undefined;
+    } | {
+        style?: {
+            [propName: string]: any;
+        } | undefined;
+        offset: number[];
+        text?: string | number | undefined;
+        size?: any;
+        level?: string | undefined;
+        visibleOn?: string | undefined;
+        mode?: "text" | "dot" | "ribbon" | undefined;
+        animation?: boolean | undefined;
+        position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | undefined;
+        overflowCount?: number | undefined;
+    } | {
+        style: import("lodash").Dictionary<any>;
+        offset: {
+            x: number;
+            y: number;
+        };
+        text?: string | number | undefined;
+        size?: any;
+        level?: string | undefined;
+        visibleOn?: string | undefined;
+        mode?: "text" | "dot" | "ribbon" | undefined;
+        animation?: boolean | undefined;
+        position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | undefined;
+        overflowCount?: number | undefined;
+    } | {
+        style?: {
+            [propName: string]: any;
+        } | undefined;
+        offset: {
+            x: number;
+            y: number;
+        };
+        text?: string | number | undefined;
+        size?: any;
+        level?: string | undefined;
+        visibleOn?: string | undefined;
+        mode?: "text" | "dot" | "ribbon" | undefined;
+        animation?: boolean | undefined;
+        position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | undefined;
+        overflowCount?: number | undefined;
+    };
+    handleSwitchChange(checked: boolean): void;
+    handleSubmit(form: BadgeForm, action: any): void;
+    renderBody(): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class BadgeControlRenderer extends BadgeControl {
+}
+export {};

package/lib/renderer/BadgeControl.js

@@ -0,0 +1,290 @@
+/**
+ * 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 camelCase = require('lodash/camelCase');
+var mapKeys = require('lodash/mapKeys');
+var amis = require('amis');
+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 cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var camelCase__default = /*#__PURE__*/_interopDefaultLegacy(camelCase);
+var mapKeys__default = /*#__PURE__*/_interopDefaultLegacy(mapKeys);
+
+/**
+ * @file 角标控件
+ */
+var BadgeControl = /** @class */ (function (_super) {
+    tslib.__extends(BadgeControl, _super);
+    function BadgeControl(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            checked: !!AMisCodeEditor.isObject(props === null || props === void 0 ? void 0 : props.value)
+        };
+        return _this;
+    }
+    BadgeControl.prototype.componentDidUpdate = function (prevProps) {
+        var _a, _b;
+        var props = this.props;
+        if (AMisCodeEditor.anyChanged([
+            'mode',
+            'text',
+            'size',
+            'offset',
+            'position',
+            'overflowCount',
+            'visibleOn',
+            'animation',
+            'style',
+            'level'
+        ], (_a = prevProps === null || prevProps === void 0 ? void 0 : prevProps.value) !== null && _a !== void 0 ? _a : {}, (_b = props === null || props === void 0 ? void 0 : props.value) !== null && _b !== void 0 ? _b : {})) {
+            this.setState({ checked: !!AMisCodeEditor.isObject(props === null || props === void 0 ? void 0 : props.value) });
+        }
+    };
+    BadgeControl.prototype.transformBadgeValue = function () {
+        var _a, _b;
+        var ctx = this.props.data;
+        var badge = (_a = ctx === null || ctx === void 0 ? void 0 : ctx.badge) !== null && _a !== void 0 ? _a : {};
+        // 避免获取到上层的size
+        var size = (_b = ctx === null || ctx === void 0 ? void 0 : ctx.badge) === null || _b === void 0 ? void 0 : _b.size;
+        var offset = { x: 0, y: 0 };
+        // 转换成combo可以识别的格式
+        if (Array.isArray(badge === null || badge === void 0 ? void 0 : badge.offset) && (badge === null || badge === void 0 ? void 0 : badge.offset.length) >= 2) {
+            offset.x = badge === null || badge === void 0 ? void 0 : badge.offset[0];
+            offset.y = badge === null || badge === void 0 ? void 0 : badge.offset[1];
+        }
+        return tslib.__assign(tslib.__assign({}, badge), { size: size, offset: offset });
+    };
+    BadgeControl.prototype.normalizeBadgeValue = function (form) {
+        var _a, _b;
+        var offset = AMisCodeEditor.isObject(form === null || form === void 0 ? void 0 : form.offset) && ((_a = form === null || form === void 0 ? void 0 : form.offset) === null || _a === void 0 ? void 0 : _a.x) && ((_b = form === null || form === void 0 ? void 0 : form.offset) === null || _b === void 0 ? void 0 : _b.y)
+            ? { offset: [form.offset.x, form.offset.y] }
+            : {};
+        var style = AMisCodeEditor.isObject(form === null || form === void 0 ? void 0 : form.style) && !AMisCodeEditor.isEmpty(form === null || form === void 0 ? void 0 : form.style)
+            ? {
+                style: mapKeys__default["default"](form === null || form === void 0 ? void 0 : form.style, function (value, key) {
+                    return camelCase__default["default"](key);
+                })
+            }
+            : {};
+        return tslib.__assign(tslib.__assign(tslib.__assign({}, form), offset), style);
+    };
+    BadgeControl.prototype.handleSwitchChange = function (checked) {
+        var _a = this.props, onChange = _a.onChange, disabled = _a.disabled;
+        if (disabled) {
+            return;
+        }
+        this.setState({ checked: checked });
+        onChange === null || onChange === void 0 ? void 0 : onChange(checked ? { mode: 'dot' } : undefined);
+    };
+    BadgeControl.prototype.handleSubmit = function (form, action) {
+        var onBulkChange = this.props.onBulkChange;
+        if ((action === null || action === void 0 ? void 0 : action.type) === 'submit') {
+            onBulkChange === null || onBulkChange === void 0 ? void 0 : onBulkChange({ badge: this.normalizeBadgeValue(form) });
+        }
+    };
+    BadgeControl.prototype.renderBody = function () {
+        var render = this.props.render;
+        var data = this.transformBadgeValue();
+        return render('badge-form', {
+            type: 'form',
+            className: 'ae-BadgeControl-form w-full',
+            wrapWithPanel: false,
+            panelClassName: 'border-none shadow-none mb-0',
+            bodyClassName: 'p-none',
+            actionsClassName: 'border-none mt-2.5',
+            wrapperComponent: 'div',
+            preventEnterSubmit: true,
+            submitOnChange: true,
+            body: [
+                {
+                    label: '类型',
+                    name: 'mode',
+                    type: 'button-group-select',
+                    size: 'xs',
+                    mode: 'row',
+                    tiled: true,
+                    className: 'ae-BadgeControl-buttonGroup',
+                    options: [
+                        { label: '点', value: 'dot', icon: 'fa fa-circle' },
+                        { label: '文字', value: 'text', icon: 'fa fa-font' },
+                        { label: '缎带', value: 'ribbon', icon: 'fa fa-ribbon' }
+                    ],
+                    pipeIn: AMisCodeEditor.defaultValue('dot')
+                },
+                {
+                    label: '文本内容',
+                    name: 'text',
+                    type: 'input-text',
+                    mode: 'row',
+                    visibleOn: "data.mode !== 'dot'"
+                },
+                {
+                    label: '角标主题色',
+                    name: 'level',
+                    type: 'button-group-select',
+                    size: 'xs',
+                    mode: 'row',
+                    tiled: true,
+                    className: 'ae-BadgeControl-buttonGroup',
+                    options: [
+                        { label: '成功', value: 'success' },
+                        { label: '警告', value: 'warning' },
+                        { label: '危险', value: 'danger' },
+                        { label: '信息', value: 'info' }
+                    ],
+                    pipeIn: AMisCodeEditor.defaultValue('danger')
+                },
+                {
+                    label: '角标位置',
+                    name: 'position',
+                    type: 'button-group-select',
+                    size: 'xs',
+                    mode: 'row',
+                    tiled: true,
+                    className: 'ae-BadgeControl-buttonGroup',
+                    options: [
+                        {
+                            label: '左上',
+                            value: 'top-left',
+                            icon: 'fa fa-long-arrow-alt-up',
+                            className: 'ae-BadgeControl-position--antiClockwise'
+                        },
+                        {
+                            label: '右上',
+                            value: 'top-right',
+                            icon: 'fa fa-long-arrow-alt-up',
+                            className: 'ae-BadgeControl-position--clockwise'
+                        },
+                        {
+                            label: '左下',
+                            value: 'bottom-left',
+                            icon: 'fa fa-long-arrow-alt-down',
+                            className: 'ae-BadgeControl-position--clockwise'
+                        },
+                        {
+                            label: '右下',
+                            value: 'bottom-right',
+                            icon: 'fa fa-long-arrow-alt-down',
+                            className: 'ae-BadgeControl-position--antiClockwise'
+                        }
+                    ],
+                    pipeIn: AMisCodeEditor.defaultValue('top-right')
+                },
+                {
+                    type: 'group',
+                    className: 'ae-BadgeControl-offset',
+                    body: [
+                        {
+                            label: '水平偏移量',
+                            name: 'offset.x',
+                            type: 'input-number',
+                            suffix: 'px',
+                            step: 1
+                        },
+                        {
+                            label: '垂直偏移量',
+                            name: 'offset.y',
+                            type: 'input-number',
+                            suffix: 'px',
+                            step: 1
+                        }
+                    ]
+                },
+                {
+                    label: '自定义角标尺寸',
+                    name: 'size',
+                    type: 'switch',
+                    mode: 'row',
+                    inputClassName: 'inline-flex justify-between flex-row-reverse',
+                    pipeIn: function (value) { return !!value; },
+                    pipeOut: function (value, oldValue, data) {
+                        return value
+                            ? (data === null || data === void 0 ? void 0 : data.mode) === 'dot'
+                                ? 6
+                                : (data === null || data === void 0 ? void 0 : data.mode) === 'ribbon'
+                                    ? 12
+                                    : 16
+                            : undefined;
+                    }
+                },
+                {
+                    label: '',
+                    name: 'size',
+                    type: 'input-number',
+                    size: 'sm',
+                    mode: 'row',
+                    min: 1,
+                    max: 100,
+                    suffix: 'px',
+                    visibleOn: 'this.size',
+                    pipeIn: function (value) { return (typeof value === 'number' ? value : 0); }
+                },
+                {
+                    label: '封顶数字',
+                    name: 'overflowCount',
+                    type: 'input-number',
+                    size: 'sm',
+                    mode: 'row',
+                    visibleOn: "data.mode === 'text'"
+                },
+                {
+                    label: '动画',
+                    name: 'animation',
+                    type: 'switch',
+                    mode: 'row',
+                    inputClassName: 'inline-flex justify-between flex-row-reverse'
+                }
+            ]
+        }, {
+            data: data,
+            onSubmit: this.handleSubmit.bind(this)
+        });
+    };
+    BadgeControl.prototype.render = function () {
+        var _a = this.props, classPrefix = _a.classPrefix, className = _a.className, labelClassName = _a.labelClassName, label = _a.label, disabled = _a.disabled;
+        var checked = this.state.checked;
+        return (React__default["default"].createElement("div", { className: cx__default["default"]('ae-BadgeControl', className) },
+            React__default["default"].createElement("div", { className: cx__default["default"]('ae-BadgeControl-switch') },
+                React__default["default"].createElement("label", { className: cx__default["default"]("".concat(classPrefix, "Form-label"), labelClassName) }, label || '角标'),
+                React__default["default"].createElement(amis.Switch, { value: checked, onChange: this.handleSwitchChange, disabled: disabled })),
+            checked ? this.renderBody() : null));
+    };
+    BadgeControl.defaultProps = {
+        mode: 'dot',
+        overflowCount: 99,
+        position: 'top-right',
+        level: 'danger',
+        animation: false
+    };
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Boolean]),
+        tslib.__metadata("design:returntype", void 0)
+    ], BadgeControl.prototype, "handleSwitchChange", null);
+    return BadgeControl;
+}(React__default["default"].Component));
+/** @class */ ((function (_super) {
+    tslib.__extends(BadgeControlRenderer, _super);
+    function BadgeControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    BadgeControlRenderer = tslib.__decorate([
+        amis.FormItem({ type: 'ae-badge', renderLabel: false })
+    ], BadgeControlRenderer);
+    return BadgeControlRenderer;
+})(BadgeControl));
+
+exports["default"] = BadgeControl;

package/lib/renderer/DataBindingControl.d.ts

@@ -0,0 +1,14 @@
+import type { FormControlProps } from 'amis-core';
+import React from 'react';
+export declare class DataBindingControl extends React.Component<FormControlProps> {
+    handleConfirm(result: {
+        value: string;
+        schema: any;
+    }): void;
+    handlePickerOpen(): Promise<{
+        schemas: any;
+    }>;
+    render(): JSX.Element;
+}
+export declare class DataBindingControlRenderer extends DataBindingControl {
+}

package/lib/renderer/DataBindingControl.js

@@ -0,0 +1,91 @@
+/**
+ * amis-editor v5.2.0-beta.1
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 DataBindingControl = /** @class */ (function (_super) {
+    tslib.__extends(DataBindingControl, _super);
+    function DataBindingControl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DataBindingControl.prototype.handleConfirm = function (result) {
+        var _a, _b;
+        var _c = this.props, manager = _c.manager, data = _c.data;
+        if (result === null || result === void 0 ? void 0 : result.value) {
+            this.props.onChange("".concat(result.value));
+            (_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 () {
+        var _a, _b;
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var _c, manager, node, withSuper, schemas;
+            return tslib.__generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        _c = this.props, manager = _c.manager, node = _c.node;
+                        withSuper = (_b = (_a = manager.config) === null || _a === void 0 ? void 0 : _a.withSuperDataSchema) !== null && _b !== void 0 ? _b : false;
+                        return [4 /*yield*/, manager.getContextSchemas(node.info.id, !withSuper)];
+                    case 1:
+                        schemas = _d.sent();
+                        return [2 /*return*/, { schemas: schemas }];
+                }
+            });
+        });
+    };
+    DataBindingControl.prototype.render = function () {
+        var _this = this;
+        var _a = this.props; _a.classnames; var value = _a.value, onChange = _a.onChange, disabled = _a.disabled;
+        return (React__default["default"].createElement(amis.SchemaVariableListPicker, { onPickerOpen: this.handlePickerOpen, onConfirm: this.handleConfirm, title: "\u7ED1\u5B9A\u53D8\u91CF" }, 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: function (e) { return tslib.__awaiter(_this, void 0, void 0, function () {
+                        return tslib.__generator(this, function (_a) {
+                            onClick(e);
+                            return [2 /*return*/];
+                        });
+                    }); } },
+                    React__default["default"].createElement(amis.Icon, { icon: "info", className: "icon cursor-pointer" }))));
+        }));
+    };
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], DataBindingControl.prototype, "handleConfirm", null);
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", Promise)
+    ], DataBindingControl.prototype, "handlePickerOpen", null);
+    return DataBindingControl;
+}(React__default["default"].Component));
+/** @class */ ((function (_super) {
+    tslib.__extends(DataBindingControlRenderer, _super);
+    function DataBindingControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DataBindingControlRenderer = tslib.__decorate([
+        amis.FormItem({
+            type: 'ae-DataBindingControl'
+        })
+    ], DataBindingControlRenderer);
+    return DataBindingControlRenderer;
+})(DataBindingControl));
+
+exports.DataBindingControl = DataBindingControl;

package/lib/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/lib/renderer/DataMappingControl.js

@@ -0,0 +1,73 @@
+/**
+ * amis-editor v5.2.0-beta.1
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 DataMappingControl = /** @class */ (function (_super) {
+    tslib.__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 = tslib.__rest(_a, ["schema", "render", "name", "description", "required"]);
+        return render('inner', {
+            type: 'json-schema',
+            schema: schema,
+            name: name,
+            description: description,
+            required: required
+        }, tslib.__assign(tslib.__assign({}, rest), { renderValue: this.renderValue }));
+        // return (
+        //   <InputJSONSchema
+        //     {...rest}
+        //     schema={this.state.schema}
+        //     renderValue={this.renderValue}
+        //   />
+        // );
+    };
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object, Function, Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], DataMappingControl.prototype, "renderValue", null);
+    return DataMappingControl;
+}(React__default["default"].Component));
+/** @class */ ((function (_super) {
+    tslib.__extends(DataMappingControlRenderer, _super);
+    function DataMappingControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DataMappingControlRenderer = tslib.__decorate([
+        amis.Renderer({
+            type: 'ae-DataMappingControl'
+        })
+    ], DataMappingControlRenderer);
+    return DataMappingControlRenderer;
+})(DataMappingControl));
+
+exports.DataMappingControl = DataMappingControl;

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