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

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 declare type PartsOptionControlItem = Option & {
+    number: number;
+};
+export declare 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,511 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * 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;
+  }
+
+  PartsControl.prototype.transformOptionValue = function (source, parts) {
+    if (source === PartsSourceEnum.CUSTOM && Array.isArray(parts)) {
+      return parts.map(function (value) {
+        return {
+          number: Number(value)
+        };
+      });
+    }
+
+    return [];
+  };
+  /**
+   * 更新数据
+   */
+
+
+  PartsControl.prototype.onChange = 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);
+  };
+  /**
+   * 切换选项类型
+   */
+
+
+  PartsControl.prototype.handleSourceChange = function (source) {
+    this.setState({
+      source: source
+    }, this.onChange);
+  };
+  /**
+   * 自定义分块数据更新
+   * @param value
+   */
+
+
+  PartsControl.prototype.handleOptionsChange = function (value) {
+    if (value === void 0) {
+      value = [];
+    }
+
+    this.setState({
+      options: value
+    }, this.onChange);
+  };
+
+  PartsControl.prototype.renderHeader = 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
+    })));
+  };
+
+  PartsControl.prototype.renderContent = 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);
+  };
+
+  PartsControl.prototype.handlePartsChange = function (value) {
+    this.setState({
+      parts: value
+    }, this.onChange);
+  };
+
+  PartsControl.prototype.render = 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;
+  }
+
+  MarksControl.prototype.componentDidUpdate = 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
+   */
+
+
+  MarksControl.prototype.transformOptionValue = function (marks) {
+    return Object.keys(marks).map(function (number) {
+      return {
+        number: +number,
+        label: marks[number]
+      };
+    });
+  };
+  /**
+   * 更新数据
+   */
+
+
+  MarksControl.prototype.onChange = 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);
+  };
+  /**
+   * 不同分块方式 => 不同下标数据
+   */
+
+
+  MarksControl.prototype.onSynchronismParts = 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
+   */
+
+
+  MarksControl.prototype.handleSourceChange = function (source) {
+    this.setState({
+      source: source
+    });
+
+    if (source === MarksSourceEnum.PARKS) {
+      this.onSynchronismParts();
+    }
+  };
+
+  MarksControl.prototype.renderHeader = 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
+    })));
+  };
+
+  MarksControl.prototype.render = 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'>;
+}
+declare 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 {};