amis-editor 5.2.0 → 5.2.1-beta.15

package/esm/renderer/RangePartsControl.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @file 组件选项组件的可视化编辑控件
+ */
+import React from 'react';
+import type { FormControlProps } from 'amis-core';
+import type { Option } from 'amis';
+export type PartsOptionControlItem = Option & {
+    number: number;
+};
+export type MarksOptionControlItem = Option & {
+    number: number;
+    label: any;
+};
+export interface PartsControlProps extends FormControlProps {
+    className?: string;
+}
+export interface PartsControlState {
+    options: Array<PartsOptionControlItem>;
+    source: string;
+    parts: number;
+}
+export interface MarksControlProps extends FormControlProps {
+    className?: string;
+}
+export interface MarksControlState {
+    options: Array<MarksOptionControlItem>;
+    source: string;
+}
+/**
+ * 分块
+ */
+export declare class PartsControl extends React.Component<PartsControlProps, PartsControlState> {
+    constructor(props: PartsControlProps);
+    transformOptionValue(source: string, parts: number | number[]): {
+        number: number;
+    }[];
+    /**
+     * 更新数据
+     */
+    onChange(): void;
+    /**
+     * 切换选项类型
+     */
+    handleSourceChange(source: string): void;
+    /**
+     * 自定义分块数据更新
+     * @param value
+     */
+    handleOptionsChange(value?: {
+        number: number;
+    }[]): void;
+    renderHeader(): JSX.Element;
+    renderContent(source: string): JSX.Element;
+    handlePartsChange(value: number): void;
+    render(): JSX.Element;
+}
+/**
+ * 下标
+ */
+export declare class MarksControl extends React.Component<MarksControlProps, MarksControlState> {
+    constructor(props: MarksControlProps);
+    componentDidUpdate(prevProps: MarksControlProps): void;
+    /**
+     * 配置拿到的marks数据转换为options
+     * @param marks
+     * @returns
+     */
+    transformOptionValue(marks: any): {
+        number: number;
+        label: any;
+    }[];
+    /**
+     * 更新数据
+     */
+    onChange(): void;
+    /**
+     * 不同分块方式 => 不同下标数据
+     */
+    onSynchronismParts(): void;
+    /**
+     * 下标方式变化
+     * @param source
+     */
+    handleSourceChange(source: any): void;
+    renderHeader(): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class PartsControlRenderer extends PartsControl {
+}
+export declare class OptionControlRenderer extends MarksControl {
+}

package/esm/renderer/RangePartsControl.js

@@ -0,0 +1,505 @@
+/**
+ * amis-editor v5.2.1-beta.15
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import cx from 'classnames';
+import { NumberInput, FormItem } from 'amis';
+import { getSchemaTpl, autobind } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 组件选项组件的可视化编辑控件
+ */
+var PartsSourceEnum = {
+  NO_BLOCK: 'NO_BLOCK',
+  AVERAGE: 'AVERAGE',
+  STEPS: 'STEPS',
+  CUSTOM: 'CUSTOM'
+};
+var MarksSourceEnum = {
+  PARKS: 'PARKS',
+  CUSTOM: 'CUSTOM'
+};
+var PartsSourceOptions = [{
+  label: i18n("5b4ffa2eadaf629b833b37a3e8742b2c"),
+  value: PartsSourceEnum.NO_BLOCK
+}, {
+  label: i18n("3569877e498155b59ef5299870c43f80"),
+  value: PartsSourceEnum.AVERAGE
+}, {
+  label: i18n("15e1fdd9d5cc4dc595fba0eee0719cba"),
+  value: PartsSourceEnum.STEPS
+}, {
+  label: i18n("f1d4ff50f3828f9b73412e7d94e6dd6e"),
+  value: PartsSourceEnum.CUSTOM
+}];
+var MarksSourceOptions = [{
+  label: i18n("56d37871117270ce5d157a8de90dacd6"),
+  value: MarksSourceEnum.PARKS
+}, {
+  label: i18n("f1d4ff50f3828f9b73412e7d94e6dd6e"),
+  value: MarksSourceEnum.CUSTOM
+}];
+// 根据滑块配置获取分块方式
+var getPartsSource = function (parts, showSteps) {
+  if (Array.isArray(parts)) {
+    return PartsSourceEnum.CUSTOM;
+  }
+  if (parts > 1) {
+    return PartsSourceEnum.AVERAGE;
+  }
+  if (showSteps) {
+    return PartsSourceEnum.STEPS;
+  }
+  return PartsSourceEnum.NO_BLOCK;
+};
+/**
+ * 分块
+ */
+var PartsControl = /** @class */function (_super) {
+  __extends(PartsControl, _super);
+  function PartsControl(props) {
+    var _this = _super.call(this, props) || this;
+    var _a = props.data,
+      _b = _a.parts,
+      parts = _b === void 0 ? 1 : _b,
+      showSteps = _a.showSteps;
+    _this.state = {
+      options: _this.transformOptionValue(getPartsSource(parts), parts),
+      source: getPartsSource(parts, showSteps),
+      parts: parts
+    };
+    return _this;
+  }
+  Object.defineProperty(PartsControl.prototype, "transformOptionValue", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (source, parts) {
+      if (source === PartsSourceEnum.CUSTOM && Array.isArray(parts)) {
+        return parts.map(function (value) {
+          return {
+            number: Number(value)
+          };
+        });
+      }
+      return [];
+    }
+  });
+  /**
+   * 更新数据
+   */
+  Object.defineProperty(PartsControl.prototype, "onChange", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _a = this.state,
+        source = _a.source,
+        parts = _a.parts,
+        options = _a.options;
+      var onBulkChange = this.props.onBulkChange;
+      var data = {
+        parts: parts,
+        showSteps: false
+      };
+      switch (source) {
+        case PartsSourceEnum.NO_BLOCK:
+          data.parts = 1;
+          break;
+        case PartsSourceEnum.AVERAGE:
+          data.parts = parts;
+          break;
+        case PartsSourceEnum.STEPS:
+          data.parts = 1;
+          data.showSteps = true;
+          break;
+        case PartsSourceEnum.CUSTOM:
+          data.parts = [];
+          if (options && !!options.length) {
+            options.forEach(function (item) {
+              data.parts.push(item.number);
+            });
+          }
+      }
+      onBulkChange && onBulkChange(data);
+    }
+  });
+  /**
+   * 切换选项类型
+   */
+  Object.defineProperty(PartsControl.prototype, "handleSourceChange", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (source) {
+      this.setState({
+        source: source
+      }, this.onChange);
+    }
+  });
+  /**
+   * 自定义分块数据更新
+   * @param value
+   */
+  Object.defineProperty(PartsControl.prototype, "handleOptionsChange", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (value) {
+      if (value === void 0) {
+        value = [];
+      }
+      this.setState({
+        options: value
+      }, this.onChange);
+    }
+  });
+  Object.defineProperty(PartsControl.prototype, "renderHeader", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _a;
+      var _b = this.props,
+        env = _b.env,
+        render = _b.render;
+      var source = this.state.source;
+      var classPrefix = (_a = env === null || env === void 0 ? void 0 : env.theme) === null || _a === void 0 ? void 0 : _a.classPrefix;
+      return React__default.createElement("div", {
+        className: cx("".concat(classPrefix, "Form-item"), "".concat(classPrefix, "Form-item--horizontal"), "".concat(classPrefix, "Form-item--horizontal-justify"))
+      }, React__default.createElement("label", {
+        className: cx("".concat(classPrefix, "Form-label"), "".concat(classPrefix, "Form-itemColumn--4"))
+      }, "\u5206\u5757"), React__default.createElement("div", {
+        className: cx("".concat(classPrefix, "Form-value"))
+      }, render('header', {
+        type: 'select',
+        name: 'optionSourceList',
+        options: PartsSourceOptions,
+        value: source,
+        onChange: this.handleSourceChange
+      })));
+    }
+  });
+  Object.defineProperty(PartsControl.prototype, "renderContent", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (source) {
+      var _this = this;
+      var _a = this.props,
+        classPrefix = _a.classPrefix,
+        render = _a.render;
+      var _b = this.state,
+        parts = _b.parts,
+        options = _b.options;
+      if (source === PartsSourceEnum.AVERAGE) {
+        return React__default.createElement("div", {
+          className: cx('ae-ExtendMore', "".concat(classPrefix, "Form-item"), "".concat(classPrefix, "Form-item--horizontal"), "".concat(classPrefix, "Form-item--horizontal-justify"))
+        }, React__default.createElement("label", {
+          className: cx("".concat(classPrefix, "Form-label"), "".concat(classPrefix, "Form-itemColumn--4"))
+        }, "\u5757\u6570"), React__default.createElement("div", {
+          className: cx("".concat(classPrefix, "Form-value"))
+        }, React__default.createElement(NumberInput, {
+          value: parts,
+          onChange: this.handlePartsChange
+        })));
+      } else if (source === PartsSourceEnum.CUSTOM) {
+        return React__default.createElement("div", {
+          className: "ae-OptionControl-wrapper"
+        }, render('content', getSchemaTpl('combo-container', {
+          type: 'combo',
+          label: false,
+          name: 'texts',
+          items: [{
+            type: 'input-number',
+            name: 'number',
+            require: true
+          }],
+          draggable: false,
+          multiple: true,
+          value: options,
+          onChange: function (value) {
+            return _this.setState({
+              options: value
+            }, _this.onChange);
+          },
+          addButtonText: i18n("1c8737ec7da60e12207c9eb04ccabcd4")
+        })));
+      }
+      return React__default.createElement(React__default.Fragment, null);
+    }
+  });
+  Object.defineProperty(PartsControl.prototype, "handlePartsChange", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (value) {
+      this.setState({
+        parts: value
+      }, this.onChange);
+    }
+  });
+  Object.defineProperty(PartsControl.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var className = this.props.className;
+      var source = this.state.source;
+      return React__default.createElement("div", {
+        className: cx('ae-OptionControl', className)
+      }, this.renderHeader(), this.renderContent(source));
+    }
+  });
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String, Object]), __metadata("design:returntype", void 0)], PartsControl.prototype, "transformOptionValue", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", void 0)], PartsControl.prototype, "handleSourceChange", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Array]), __metadata("design:returntype", void 0)], PartsControl.prototype, "handleOptionsChange", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Number]), __metadata("design:returntype", void 0)], PartsControl.prototype, "handlePartsChange", null);
+  return PartsControl;
+}(React__default.Component);
+/**
+ * 下标
+ */
+var MarksControl = /** @class */function (_super) {
+  __extends(MarksControl, _super);
+  function MarksControl(props) {
+    var _this = _super.call(this, props) || this;
+    var _a = props.data.marks,
+      marks = _a === void 0 ? {} : _a;
+    _this.state = {
+      options: _this.transformOptionValue(marks),
+      source: !Object.keys(marks).length ? MarksSourceEnum.PARKS : MarksSourceEnum.CUSTOM
+    };
+    return _this;
+  }
+  Object.defineProperty(MarksControl.prototype, "componentDidUpdate", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (prevProps) {
+      var _a = prevProps.data,
+        parts = _a.parts,
+        unit = _a.unit,
+        max = _a.max,
+        min = _a.min,
+        showSteps = _a.showSteps;
+      var _b = this.props.data,
+        nextParts = _b.parts,
+        nextUnit = _b.unit,
+        nextMax = _b.max,
+        nextMin = _b.min,
+        nextShowSteps = _b.showSteps;
+      var source = this.state.source;
+      if (parts !== nextParts || unit !== nextUnit || max !== nextMax || min !== nextMin || showSteps !== nextShowSteps) {
+        // 与分块保持一致，当分块、单位发生变换同步时，同步下标
+        source === MarksSourceEnum.PARKS && this.onSynchronismParts();
+      }
+    }
+  });
+  /**
+   * 配置拿到的marks数据转换为options
+   * @param marks
+   * @returns
+   */
+  Object.defineProperty(MarksControl.prototype, "transformOptionValue", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (marks) {
+      return Object.keys(marks).map(function (number) {
+        return {
+          number: +number,
+          label: marks[number]
+        };
+      });
+    }
+  });
+  /**
+   * 更新数据
+   */
+  Object.defineProperty(MarksControl.prototype, "onChange", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var options = this.state.options;
+      var onChange = this.props.onChange;
+      var marks = {};
+      if (options && !!options.length) {
+        options.forEach(function (item) {
+          marks[item.number] = item.label || item.number;
+        });
+      }
+      onChange && onChange(marks);
+    }
+  });
+  /**
+   * 不同分块方式 => 不同下标数据
+   */
+  Object.defineProperty(MarksControl.prototype, "onSynchronismParts", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _a = this.props.data,
+        parts = _a.parts,
+        max = _a.max,
+        min = _a.min,
+        _b = _a.step,
+        step = _b === void 0 ? 1 : _b,
+        _c = _a.unit,
+        unit = _c === void 0 ? '' : _c,
+        showSteps = _a.showSteps;
+      var options = [];
+      var partsSource = getPartsSource(parts, showSteps);
+      switch (partsSource) {
+        case PartsSourceEnum.AVERAGE:
+          var len = (max - min) / parts;
+          for (var i = 0; i <= parts; i++) {
+            options.push({
+              number: i * len + min,
+              label: i * len + min + unit
+            });
+          }
+          break;
+        case PartsSourceEnum.STEPS:
+          var length_1 = (max - min) / step;
+          for (var i = 0; i <= length_1; i++) {
+            options.push({
+              number: i * step + min,
+              label: i * step + min + unit
+            });
+          }
+          break;
+        case PartsSourceEnum.CUSTOM:
+          if (Array.isArray(parts)) {
+            parts.forEach(function (number) {
+              (!!number || number === 0) && options.push({
+                number: number,
+                label: number + unit
+              });
+            });
+          }
+          break;
+      }
+      this.setState({
+        options: options
+      }, this.onChange);
+    }
+  });
+  /**
+   * 下标方式变化
+   * @param source
+   */
+  Object.defineProperty(MarksControl.prototype, "handleSourceChange", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (source) {
+      this.setState({
+        source: source
+      });
+      if (source === MarksSourceEnum.PARKS) {
+        this.onSynchronismParts();
+      }
+    }
+  });
+  Object.defineProperty(MarksControl.prototype, "renderHeader", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _a;
+      var _b = this.props,
+        env = _b.env,
+        render = _b.render;
+      var source = this.state.source;
+      var classPrefix = (_a = env === null || env === void 0 ? void 0 : env.theme) === null || _a === void 0 ? void 0 : _a.classPrefix;
+      return React__default.createElement("div", {
+        className: cx("".concat(classPrefix, "Form-item"), "".concat(classPrefix, "Form-item--horizontal"), "".concat(classPrefix, "Form-item--horizontal-justify"))
+      }, React__default.createElement("label", {
+        className: cx("".concat(classPrefix, "Form-label"), "".concat(classPrefix, "Form-itemColumn--4"))
+      }, "\u4E0B\u6807"), React__default.createElement("div", {
+        className: cx("".concat(classPrefix, "Form-value"))
+      }, render('header', {
+        type: 'select',
+        name: 'optionSourceList',
+        options: MarksSourceOptions,
+        value: source,
+        onChange: this.handleSourceChange
+      })));
+    }
+  });
+  Object.defineProperty(MarksControl.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _this = this;
+      var _a = this.props,
+        className = _a.className,
+        render = _a.render;
+      var _b = this.state,
+        source = _b.source,
+        options = _b.options;
+      return React__default.createElement("div", {
+        className: cx('ae-OptionControl', className)
+      }, this.renderHeader(), source === MarksSourceEnum.CUSTOM && render('inner', getSchemaTpl('combo-container', {
+        type: 'combo',
+        label: false,
+        name: 'texts',
+        draggable: false,
+        multiple: true,
+        items: [{
+          type: 'input-number',
+          name: 'number',
+          required: true
+        }, {
+          type: 'input-text',
+          name: 'label',
+          required: true
+        }],
+        addButtonText: i18n("662d8b49913650f543c024d4d02009a2"),
+        value: options,
+        onChange: function (value) {
+          _this.setState({
+            options: value
+          }, _this.onChange);
+        }
+      })));
+    }
+  });
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], MarksControl.prototype, "transformOptionValue", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], MarksControl.prototype, "onChange", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], MarksControl.prototype, "onSynchronismParts", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], MarksControl.prototype, "handleSourceChange", null);
+  return MarksControl;
+}(React__default.Component);
+/** @class */(function (_super) {
+  __extends(PartsControlRenderer, _super);
+  function PartsControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  PartsControlRenderer = __decorate([FormItem({
+    type: 'ae-partsControl',
+    renderLabel: false
+  })], PartsControlRenderer);
+  return PartsControlRenderer;
+})(PartsControl);
+/** @class */(function (_super) {
+  __extends(OptionControlRenderer, _super);
+  function OptionControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  OptionControlRenderer = __decorate([FormItem({
+    type: 'ae-marksControl',
+    renderLabel: false
+  })], OptionControlRenderer);
+  return OptionControlRenderer;
+})(MarksControl);
+
+export { MarksControl, PartsControl };

package/esm/renderer/StatusControl.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @file 状态配置组件
+ */
+import React from 'react';
+import { Option } from 'amis';
+import type { FormControlProps } from 'amis-core';
+import type { SchemaCollection } from 'amis/lib/Schema';
+import type { FormSchema } from 'amis/lib/schema';
+export interface StatusControlProps extends FormControlProps {
+    name: string;
+    expressionName: string;
+    trueValue?: boolean;
+    falseValue?: boolean;
+    options?: Option[];
+    children?: SchemaCollection;
+    messages?: Pick<FormSchema, 'messages'>;
+}
+type StatusFormData = {
+    statusType: number;
+    expression: string;
+};
+interface StatusControlState {
+    checked: boolean;
+    formData: StatusFormData;
+}
+export declare class StatusControl extends React.Component<StatusControlProps, StatusControlState> {
+    static defaultProps: {
+        trueValue: boolean;
+        falseValue: boolean;
+    };
+    constructor(props: StatusControlProps);
+    initState(): {
+        checked: boolean;
+        formData: StatusFormData;
+    };
+    shouldComponentUpdate(nextProps: StatusControlProps, nextState: StatusControlState): boolean;
+    handleSwitch(value: boolean): void;
+    handleFormSubmit(values: StatusFormData): void;
+    render(): JSX.Element;
+    renderContent(): JSX.Element;
+}
+export declare class StatusControlRenderer extends StatusControl {
+}
+export {};