amis-editor 5.2.0 → 5.2.1-beta.15

package/lib/renderer/ValidationControl.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @file 表单项校验配置
+ */
+import React from 'react';
+import { ValidatorData } from './ValidationItem';
+import type { FormControlProps } from 'amis-core';
+import { Validator, ValidatorTag } from '../validator';
+export type ValidatorFilter = string[] | ((ctx: any) => string[]);
+export interface ValidationControlProps extends FormControlProps {
+    /**
+     * 匹配验证器标签进行默认和顶部可选的验证器展示
+     */
+    tag: ValidatorTag | ((ctx: any) => ValidatorTag);
+}
+interface ValidationControlState {
+    avaliableValids: {
+        moreValidators: Record<string, Validator>;
+        defaultValidators: Record<string, Validator>;
+        builtInValidators: Record<string, Validator>;
+    };
+}
+export default class ValidationControl extends React.Component<ValidationControlProps, ValidationControlState> {
+    constructor(props: ValidationControlProps);
+    componentWillReceiveProps(nextProps: ValidationControlProps): void;
+    getAvaliableValids(props: ValidationControlProps): {
+        defaultValidators: Record<string, Validator>;
+        moreValidators: Record<string, Validator>;
+        builtInValidators: Record<string, Validator>;
+    };
+    transformValid(data: any): ValidatorData[];
+    /**
+     * 统一更新校验相关字段
+     */
+    updateValidation(validators: ValidatorData[]): void;
+    /**
+     * 添加规则
+     *
+     * @param {Validator} valid 校验规则配置
+     */
+    handleAddValidator(valid: Validator): void;
+    /**
+     * 更新校验规则
+     */
+    handleEditRule(data: ValidatorData): void;
+    /**
+     * 删除校验规则
+     */
+    handleRemoveRule(valid: string): void;
+    /**
+     * 开关默认规则
+     */
+    handleSwitchRule(checked: boolean, data: ValidatorData): void;
+    /**
+     * 添加规则下拉框
+     */
+    renderDropdown(): JSX.Element;
+    /**
+     * 规则列表
+     */
+    renderValidaton(): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class ValidationControlRenderer extends ValidationControl {
+}
+export {};

package/lib/renderer/ValidationControl.js

@@ -0,0 +1,381 @@
+/**
+ * amis-editor v5.2.1-beta.15
+ * 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 amisEditorCore = require('amis-editor-core');
+var ValidationItem = require('./ValidationItem.js');
+var validator = require('../validator.js');
+var i18nRuntime = require('i18n-runtime');
+
+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;
+  }
+  Object.defineProperty(ValidationControl.prototype, "componentWillReceiveProps", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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 删除不允许配置的值
+    }
+  });
+
+  Object.defineProperty(ValidationControl.prototype, "getAvaliableValids", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (props) {
+      var data = props.data,
+        tag = props.tag;
+      tag = typeof tag === 'string' ? tag : tag(data);
+      return validator.getValidatorsByTag(tag);
+    }
+  });
+  Object.defineProperty(ValidationControl.prototype, "transformValid", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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;
+    }
+  });
+  /**
+   * 统一更新校验相关字段
+   */
+  Object.defineProperty(ValidationControl.prototype, "updateValidation", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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 校验规则配置
+   */
+  Object.defineProperty(ValidationControl.prototype, "handleAddValidator", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (valid) {
+      var validators = this.transformValid(this.props.data);
+      validators.push({
+        name: valid.name,
+        value: valid.schema ? '' : true,
+        message: ''
+      });
+      this.updateValidation(validators);
+    }
+  });
+  /**
+   * 更新校验规则
+   */
+  Object.defineProperty(ValidationControl.prototype, "handleEditRule", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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);
+    }
+  });
+  /**
+   * 删除校验规则
+   */
+  Object.defineProperty(ValidationControl.prototype, "handleRemoveRule", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (valid) {
+      var validators = this.transformValid(this.props.data);
+      remove__default["default"](validators, function (v) {
+        return v.name === valid;
+      });
+      this.updateValidation(validators);
+    }
+  });
+  /**
+   * 开关默认规则
+   */
+  Object.defineProperty(ValidationControl.prototype, "handleSwitchRule", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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);
+    }
+  });
+  /**
+   * 添加规则下拉框
+   */
+  Object.defineProperty(ValidationControl.prototype, "renderDropdown", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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: i18nRuntime.i18n("442781667396d6eff51113f482d89e54"),
+        placement: 'left',
+        align: 'right',
+        tooltipTrigger: 'hover',
+        closeOnClick: true,
+        closeOnOutside: true,
+        hideCaret: true,
+        disabled: buttons.length === 0,
+        buttons: buttons
+      }, {
+        key: 'validation-control-dropdown',
+        popOverContainer: null
+      }));
+    }
+  });
+  /**
+   * 规则列表
+   */
+  Object.defineProperty(ValidationControl.prototype, "renderValidaton", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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);
+    }
+  });
+  Object.defineProperty(ValidationControl.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], ValidationControl.prototype, "handleEditRule", null);
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [String]), tslib.__metadata("design:returntype", void 0)], ValidationControl.prototype, "handleRemoveRule", null);
+  tslib.__decorate([amisEditorCore.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 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,209 @@
+/**
+ * amis-editor v5.2.1-beta.15
+ * 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 amisEditorCore = require('amis-editor-core');
+var i18nRuntime = require('i18n-runtime');
+
+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;
+    Object.defineProperty(_this, "validator", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
+    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;
+  }
+  Object.defineProperty(ValidationItem.prototype, "handleEdit", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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));
+      }
+    }
+  });
+  Object.defineProperty(ValidationItem.prototype, "handleDelete", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _a = this.props,
+        onDelete = _a.onDelete,
+        data = _a.data;
+      onDelete && onDelete(data.name);
+    }
+  });
+  Object.defineProperty(ValidationItem.prototype, "handleSwitch", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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);
+    }
+  });
+  Object.defineProperty(ValidationItem.prototype, "renderActions", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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;
+    }
+  });
+  Object.defineProperty(ValidationItem.prototype, "renderInputControl", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _this = this;
+      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: amisEditorCore.tipedLabel(i18nRuntime.i18n("d7a169e81b60ee08c82b5d9de473e362"), "\u7CFB\u7EDF\u9ED8\u8BA4\u63D0\u793A\uFF1A".concat(this.validator.message)),
+          pipeIn: function (value, data) {
+            // value中 $1 会被运算，导致无法正确回显$1。此处从this.props.data中获取该校验项的错误提示
+            return _this.props.data.message;
+          },
+          placeholder: i18nRuntime.i18n("5ef6ce89f52b4331b080a0f3019414f3")
+        });
+      }
+      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;
+    }
+  });
+  Object.defineProperty(ValidationItem.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object, Object]), tslib.__metadata("design:returntype", void 0)], ValidationItem.prototype, "handleEdit", null);
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], ValidationItem.prototype, "handleDelete", null);
+  tslib.__decorate([amisEditorCore.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;