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

package/esm/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 declare 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/esm/renderer/ValidationControl.js

@@ -0,0 +1,362 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import groupBy from 'lodash/groupBy';
+import remove from 'lodash/remove';
+import cx from 'classnames';
+import { FormItem } from 'amis';
+import { autobind } from 'amis-editor-core';
+import ValidationItem from './ValidationItem.js';
+import { getValidatorsByTag, getValidator } from '../validator.js';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 表单项校验配置
+ */
+
+var ValidationControl =
+/** @class */
+function (_super) {
+  __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 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(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(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.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: i18n("442781667396d6eff51113f482d89e54"),
+      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(validators, function (v) {
+        return v.name === validName;
+      });
+      rules.push(React__default.createElement(ValidationItem, {
+        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(validators, function (v) {
+        return v.name === validName;
+      });
+      rules.push(React__default.createElement(ValidationItem, {
+        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 = moreValidators[valid.name] || getValidator(valid.name);
+
+        if (!validator) {
+          return;
+        }
+
+        rules.push(React__default.createElement(ValidationItem, {
+          key: valid.name,
+          data: valid,
+          classPrefix: classPrefix,
+          validator: validator,
+          isDefault: defaultValidators.hasOwnProperty(valid.name),
+          onEdit: _this.handleEditRule,
+          onDelete: _this.handleRemoveRule,
+          onSwitch: _this.handleSwitchRule
+        }));
+      });
+    }
+
+    return React__default.createElement("div", {
+      className: "ae-ValidationControl-rules",
+      key: "rules"
+    }, rules);
+  };
+
+  ValidationControl.prototype.render = function () {
+    var className = this.props.className;
+    return React__default.createElement("div", {
+      className: cx('ae-ValidationControl', className),
+      key: "validation-control"
+    }, this.renderDropdown(), this.renderValidaton());
+  };
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], ValidationControl.prototype, "handleEditRule", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", void 0)], ValidationControl.prototype, "handleRemoveRule", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Boolean, Object]), __metadata("design:returntype", void 0)], ValidationControl.prototype, "handleSwitchRule", null);
+
+  return ValidationControl;
+}(React__default.Component);
+
+/** @class */
+(function (_super) {
+  __extends(ValidationControlRenderer, _super);
+
+  function ValidationControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  ValidationControlRenderer = __decorate([FormItem({
+    type: 'ae-validationControl',
+    renderLabel: false
+  })], ValidationControlRenderer);
+  return ValidationControlRenderer;
+})(ValidationControl);
+
+export { ValidationControl as default };

package/esm/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/esm/renderer/ValidationItem.js

@@ -0,0 +1,189 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import cx from 'classnames';
+import { Button, render, Switch } from 'amis';
+import { tipedLabel, autobind } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 校验项
+ */
+
+var ValidationItem =
+/** @class */
+function (_super) {
+  __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(__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.createElement(Button, {
+        className: "ae-ValidationControl-item-action",
+        level: "link",
+        size: "md",
+        key: "delete",
+        onClick: this.handleDelete
+      }, React__default.createElement("i", {
+        className: "fa fa-trash"
+      })));
+    }
+
+    return actions.length !== 0 ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: "ae-ValidationControl-item-actions"
+    }, actions)) : null;
+  };
+
+  ValidationItem.prototype.renderInputControl = 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: tipedLabel(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: i18n("5ef6ce89f52b4331b080a0f3019414f3")
+      });
+    }
+
+    return control.length !== 0 ? React__default.createElement("section", {
+      className: cx('ae-ValidationControl-item-input', 'ae-ExtendMore')
+    }, 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.createElement("div", {
+      className: cx('ae-ValidationControl-item', {
+        'is-active': checked
+      }),
+      key: data.name
+    }, React__default.createElement("section", {
+      className: cx('ae-ValidationControl-item-control', {
+        'is-active': checked && data.name !== 'required'
+      })
+    }, React__default.createElement("label", {
+      className: cx("".concat(classPrefix, "Form-label"))
+    }, this.validator.label), React__default.createElement("div", null, this.renderActions(), React__default.createElement(Switch, {
+      key: "switch",
+      value: checked,
+      disabled: isBuiltIn,
+      onChange: this.handleSwitch
+    }))), this.renderInputControl());
+  };
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object, Object]), __metadata("design:returntype", void 0)], ValidationItem.prototype, "handleEdit", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], ValidationItem.prototype, "handleDelete", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Boolean]), __metadata("design:returntype", void 0)], ValidationItem.prototype, "handleSwitch", null);
+
+  return ValidationItem;
+}(React__default.Component);
+
+export { ValidationItem as default };