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

package/lib/renderer/ValidationControl.js

@@ -0,0 +1,279 @@
+/**
+ * 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 groupBy = require('lodash/groupBy');
+var remove = require('lodash/remove');
+var cx = require('classnames');
+var amis = require('amis');
+var AMisCodeEditor = require('amis-editor-core');
+var ValidationItem = require('./ValidationItem.js');
+var validator = require('../validator.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var groupBy__default = /*#__PURE__*/_interopDefaultLegacy(groupBy);
+var remove__default = /*#__PURE__*/_interopDefaultLegacy(remove);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+/**
+ * @file 表单项校验配置
+ */
+var ValidationControl = /** @class */ (function (_super) {
+    tslib.__extends(ValidationControl, _super);
+    function ValidationControl(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            avaliableValids: _this.getAvaliableValids(props)
+        };
+        return _this;
+    }
+    ValidationControl.prototype.componentWillReceiveProps = function (nextProps) {
+        if (this.props.data.type !== nextProps.data.type) {
+            this.setState({
+                avaliableValids: this.getAvaliableValids(nextProps)
+            });
+            var validators = this.transformValid(this.props.data);
+            this.updateValidation(validators);
+        }
+        // todo 删除不允许配置的值
+    };
+    ValidationControl.prototype.getAvaliableValids = function (props) {
+        var data = props.data, tag = props.tag;
+        tag = typeof tag === 'string' ? tag : tag(data);
+        return validator.getValidatorsByTag(tag);
+    };
+    ValidationControl.prototype.transformValid = function (data) {
+        var required = data.required, validations = data.validations, validationErrors = data.validationErrors;
+        var validators = [];
+        if (required) {
+            validators.push({
+                name: 'required',
+                value: true,
+                message: validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.required
+            });
+        }
+        if (validations) {
+            Object.keys(validations).forEach(function (name) {
+                validators.push({
+                    name: name,
+                    value: validations[name],
+                    message: validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[name]
+                });
+            });
+        }
+        return validators;
+    };
+    /**
+     * 统一更新校验相关字段
+     */
+    ValidationControl.prototype.updateValidation = function (validators) {
+        var onBulkChange = this.props.onBulkChange;
+        if (!validators.length) {
+            onBulkChange &&
+                onBulkChange({
+                    required: undefined,
+                    validations: undefined,
+                    validationErrors: undefined
+                });
+            return;
+        }
+        var required = undefined;
+        var validations = {};
+        var validationErrors = {};
+        validators.forEach(function (data) {
+            var name = data.name, value = data.value, message = data.message;
+            if (name === 'required') {
+                required = value;
+                return;
+            }
+            if (value != null) {
+                validations[name] = value;
+                message && (validationErrors[name] = message);
+            }
+        });
+        onBulkChange &&
+            onBulkChange({
+                required: required,
+                validations: Object.keys(validations).length ? validations : undefined,
+                validationErrors: Object.keys(validationErrors).length
+                    ? validationErrors
+                    : undefined
+            });
+    };
+    /**
+     * 添加规则
+     *
+     * @param {Validator} valid 校验规则配置
+     */
+    ValidationControl.prototype.handleAddValidator = function (valid) {
+        var validators = this.transformValid(this.props.data);
+        validators.push({
+            name: valid.name,
+            value: valid.schema ? '' : true,
+            message: ''
+        });
+        this.updateValidation(validators);
+    };
+    /**
+     * 更新校验规则
+     */
+    ValidationControl.prototype.handleEditRule = function (data) {
+        var validators = this.transformValid(this.props.data);
+        var validator = validators.find(function (v) { return v.name === data.name; });
+        if (validator) {
+            validator.value = data.value;
+            validator.message = data.message;
+        }
+        else {
+            /** 预设的校验规则props.data取不到 */
+            validators.push(data);
+        }
+        this.updateValidation(validators);
+    };
+    /**
+     * 删除校验规则
+     */
+    ValidationControl.prototype.handleRemoveRule = function (valid) {
+        var validators = this.transformValid(this.props.data);
+        remove__default["default"](validators, function (v) { return v.name === valid; });
+        this.updateValidation(validators);
+    };
+    /**
+     * 开关默认规则
+     */
+    ValidationControl.prototype.handleSwitchRule = function (checked, data) {
+        var validators = this.transformValid(this.props.data);
+        var valid = validators.find(function (v) { return v.name === data.name; });
+        if (!valid) {
+            valid = { name: data.name };
+            validators.push(valid);
+        }
+        valid.value = checked ? data.value : undefined;
+        valid.message = checked ? data.message : undefined;
+        this.updateValidation(validators);
+    };
+    /**
+     * 添加规则下拉框
+     */
+    ValidationControl.prototype.renderDropdown = function () {
+        var _this = this;
+        var _a = this.props, render = _a.render, _b = _a.validations, validations = _b === void 0 ? {} : _b;
+        var moreValidators = this.state.avaliableValids.moreValidators;
+        // 去掉已经选用的
+        var validators = Object.values(moreValidators).filter(function (item) { return !validations.hasOwnProperty(item.name); });
+        var buttons = Object.entries(groupBy__default["default"](validators, 'group')).map(function (_a) {
+            var group = _a[0], validations = _a[1];
+            return ({
+                label: group,
+                children: validations.map(function (v) { return ({
+                    label: v.label,
+                    onClick: function () { return _this.handleAddValidator(v); }
+                }); })
+            });
+        });
+        return (React__default["default"].createElement("div", { className: "ae-ValidationControl-dropdown" }, render('validation-control-dropdown', {
+            type: 'dropdown-button',
+            btnClassName: 'ae-ValidationControl-dropdown-btn',
+            menuClassName: 'ae-ValidationControl-dropdown-menu',
+            level: 'link',
+            size: 'md',
+            icon: 'fa fa-plus',
+            label: '',
+            tooltip: '添加校验规则',
+            placement: 'top',
+            align: 'right',
+            tooltipTrigger: 'hover',
+            closeOnClick: true,
+            closeOnOutside: true,
+            hideCaret: true,
+            disabled: buttons.length === 0,
+            buttons: buttons
+        }, {
+            key: 'validation-control-dropdown',
+            popOverContainer: null
+        })));
+    };
+    /**
+     * 规则列表
+     */
+    ValidationControl.prototype.renderValidaton = function () {
+        var _this = this;
+        var _a, _b, _c;
+        var classPrefix = (_c = (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.theme) === null || _c === void 0 ? void 0 : _c.classPrefix;
+        var _d = this.state.avaliableValids, defaultValidators = _d.defaultValidators, moreValidators = _d.moreValidators, builtInValidators = _d.builtInValidators;
+        var validators = this.transformValid(this.props.data);
+        var rules = [];
+        validators = validators.concat();
+        // 优先渲染默认的顺序
+        Object.keys(defaultValidators).forEach(function (validName) {
+            var data = remove__default["default"](validators, function (v) { return v.name === validName; });
+            rules.push(React__default["default"].createElement(ValidationItem["default"], { key: validName, validator: defaultValidators[validName], data: data.length ? data[0] : { name: validName }, classPrefix: classPrefix, isDefault: defaultValidators.hasOwnProperty(validName), onEdit: _this.handleEditRule, onDelete: _this.handleRemoveRule, onSwitch: _this.handleSwitchRule }));
+        });
+        Object.keys(builtInValidators).forEach(function (validName) {
+            var data = remove__default["default"](validators, function (v) { return v.name === validName; });
+            rules.push(React__default["default"].createElement(ValidationItem["default"], { key: validName, validator: builtInValidators[validName], data: data.length
+                    ? data[0]
+                    : { name: validName, value: true, isBuiltIn: true }, classPrefix: classPrefix, isDefault: builtInValidators.hasOwnProperty(validName), onEdit: _this.handleEditRule, onDelete: _this.handleRemoveRule, onSwitch: _this.handleSwitchRule }));
+        });
+        // 剩余的按顺序渲染
+        if (validators.length) {
+            validators.forEach(function (valid) {
+                var validator$1 = moreValidators[valid.name] || validator.getValidator(valid.name);
+                if (!validator$1) {
+                    return;
+                }
+                rules.push(React__default["default"].createElement(ValidationItem["default"], { key: valid.name, data: valid, classPrefix: classPrefix, validator: validator$1, isDefault: defaultValidators.hasOwnProperty(valid.name), onEdit: _this.handleEditRule, onDelete: _this.handleRemoveRule, onSwitch: _this.handleSwitchRule }));
+            });
+        }
+        return (React__default["default"].createElement("div", { className: "ae-ValidationControl-rules", key: "rules" }, rules));
+    };
+    ValidationControl.prototype.render = function () {
+        var className = this.props.className;
+        return (React__default["default"].createElement("div", { className: cx__default["default"]('ae-ValidationControl', className), key: "validation-control" },
+            this.renderDropdown(),
+            this.renderValidaton()));
+    };
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ValidationControl.prototype, "handleEditRule", null);
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [String]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ValidationControl.prototype, "handleRemoveRule", null);
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Boolean, Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ValidationControl.prototype, "handleSwitchRule", null);
+    return ValidationControl;
+}(React__default["default"].Component));
+/** @class */ ((function (_super) {
+    tslib.__extends(ValidationControlRenderer, _super);
+    function ValidationControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ValidationControlRenderer = tslib.__decorate([
+        amis.FormItem({
+            type: 'ae-validationControl',
+            renderLabel: false
+        })
+    ], ValidationControlRenderer);
+    return ValidationControlRenderer;
+})(ValidationControl));
+
+exports["default"] = ValidationControl;

package/lib/renderer/ValidationItem.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @file 校验项
+ */
+import React from 'react';
+import { Validator } from '../validator';
+export declare type ValidatorData = {
+    name: string;
+    value?: any;
+    message?: string;
+    isBuiltIn?: boolean;
+};
+export interface ValidationItemProps {
+    /**
+     * 组件的CSS主题前缀
+     */
+    classPrefix?: string;
+    /**
+     * 校验配置
+     */
+    data: ValidatorData;
+    /**
+     * 是否是默认props，默认可开关
+     */
+    isDefault: boolean;
+    validator: Validator;
+    onEdit?: (data: ValidatorData) => void;
+    onDelete?: (name: string) => void;
+    onSwitch?: (checked: boolean, data?: ValidatorData) => void;
+}
+interface ValidationItemState {
+    value: string | number | boolean | undefined;
+    checked: boolean;
+    message: string;
+    isBuiltIn: boolean | undefined;
+}
+export default class ValidationItem extends React.Component<ValidationItemProps, ValidationItemState> {
+    validator: Validator;
+    constructor(props: ValidationItemProps);
+    handleEdit(value: any, action: any): void;
+    handleDelete(): void;
+    handleSwitch(checked: boolean): void;
+    renderActions(): JSX.Element | null;
+    renderInputControl(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export {};

package/lib/renderer/ValidationItem.js

@@ -0,0 +1,147 @@
+/**
+ * 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 amis = require('amis');
+var AMisCodeEditor = require('amis-editor-core');
+var BaseControl = require('../component/BaseControl.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);
+
+/**
+ * @file 校验项
+ */
+var ValidationItem = /** @class */ (function (_super) {
+    tslib.__extends(ValidationItem, _super);
+    function ValidationItem(props) {
+        var _this = _super.call(this, props) || this;
+        var data = _this.props.data;
+        _this.validator = _this.props.validator;
+        _this.state = {
+            value: data === null || data === void 0 ? void 0 : data.value,
+            checked: data.value != null,
+            message: (data === null || data === void 0 ? void 0 : data.message) || '',
+            isBuiltIn: data === null || data === void 0 ? void 0 : data.isBuiltIn
+        };
+        return _this;
+    }
+    ValidationItem.prototype.handleEdit = function (value, action) {
+        var _a = this.props, onEdit = _a.onEdit, data = _a.data;
+        if ((action === null || action === void 0 ? void 0 : action.type) === 'submit') {
+            onEdit &&
+                onEdit(tslib.__assign({ name: data.name }, value));
+        }
+    };
+    ValidationItem.prototype.handleDelete = function () {
+        var _a = this.props, onDelete = _a.onDelete, data = _a.data;
+        onDelete && onDelete(data.name);
+    };
+    ValidationItem.prototype.handleSwitch = function (checked) {
+        var _a = this.props, onSwitch = _a.onSwitch, data = _a.data;
+        var _b = this.state, value = _b.value; _b.message;
+        this.setState({
+            checked: checked
+        });
+        if (checked) {
+            data.value = this.validator.schema ? value : true;
+            data.message = '';
+        }
+        onSwitch && onSwitch(checked, data);
+    };
+    ValidationItem.prototype.renderActions = function () {
+        var isDefault = this.props.isDefault;
+        var actions = [];
+        if (!isDefault) {
+            actions.push(React__default["default"].createElement(amis.Button, { className: "ae-ValidationControl-item-action", level: "link", size: "md", key: "delete", onClick: this.handleDelete },
+                React__default["default"].createElement("i", { className: "fa fa-trash" })));
+        }
+        return actions.length !== 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement("div", { className: "ae-ValidationControl-item-actions" }, actions))) : null;
+    };
+    ValidationItem.prototype.renderInputControl = function () {
+        var _a = this.state, value = _a.value, message = _a.message, checked = _a.checked;
+        var control = [];
+        if (!checked) {
+            return null;
+        }
+        if (this.validator.schema) {
+            control = control.concat(this.validator.schema);
+        }
+        if (this.validator.message) {
+            control.push({
+                name: 'message',
+                type: 'input-text',
+                label: BaseControl.tipedLabel('错误提示', "\u7CFB\u7EDF\u9ED8\u8BA4\u63D0\u793A\uFF1A".concat(this.validator.message)),
+                placeholder: '默认使用系统定义提示'
+            });
+        }
+        return control.length !== 0 ? (React__default["default"].createElement("section", { className: cx__default["default"]('ae-ValidationControl-item-input', 'ae-ExtendMore') }, amis.render({
+            type: 'form',
+            className: 'w-full',
+            wrapWithPanel: false,
+            panelClassName: 'border-none shadow-none mb-0',
+            bodyClassName: 'p-none',
+            actionsClassName: 'border-none mt-2.5',
+            wrapperComponent: 'div',
+            mode: 'horizontal',
+            horizontal: {
+                justify: true,
+                left: 4,
+                right: 8
+            },
+            preventEnterSubmit: true,
+            submitOnChange: true,
+            body: control,
+            data: { value: value, message: message }
+        }, {
+            onSubmit: this.handleEdit
+        }))) : null;
+    };
+    ValidationItem.prototype.render = function () {
+        var _a = this.props, classPrefix = _a.classPrefix, data = _a.data; _a.isDefault;
+        var _b = this.state, checked = _b.checked, isBuiltIn = _b.isBuiltIn;
+        return (React__default["default"].createElement("div", { className: cx__default["default"]('ae-ValidationControl-item', {
+                'is-active': checked
+            }), key: data.name },
+            React__default["default"].createElement("section", { className: cx__default["default"]('ae-ValidationControl-item-control', {
+                    'is-active': checked && data.name !== 'required'
+                }) },
+                React__default["default"].createElement("label", { className: cx__default["default"]("".concat(classPrefix, "Form-label")) }, this.validator.label),
+                React__default["default"].createElement("div", null,
+                    this.renderActions(),
+                    React__default["default"].createElement(amis.Switch, { key: "switch", value: checked, disabled: isBuiltIn, onChange: this.handleSwitch }))),
+            this.renderInputControl()));
+    };
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object, Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ValidationItem.prototype, "handleEdit", null);
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], ValidationItem.prototype, "handleDelete", null);
+    tslib.__decorate([
+        AMisCodeEditor.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Boolean]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ValidationItem.prototype, "handleSwitch", null);
+    return ValidationItem;
+}(React__default["default"].Component));
+
+exports["default"] = ValidationItem;

package/lib/renderer/style-control/Background.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @file Background.ts
+ * @description 背景设置
+ */
+import React from 'react';
+import type { FormControlProps } from 'amis-core';
+import type { PlainObject } from './types';
+interface BackgroundProps extends FormControlProps {
+    receiver?: string;
+    value?: PlainObject;
+    onChange: (value: PlainObject) => void;
+}
+declare const Background: React.FC<BackgroundProps>;
+export default Background;
+export declare class BackgroundRenderer extends React.Component<FormControlProps> {
+    render(): JSX.Element;
+}