amis-editor 5.6.1 → 5.6.2

package/lib/renderer/KeyValueMapControl.js

@@ -0,0 +1,357 @@
+/**
+ * amis-editor v5.6.2
+ * build time: 2023-10-31
+ * Copyright 2018-2023 @fex
+ */
+
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var amis = require('amis');
+var amisEditorCore = require('amis-editor-core');
+var uniqBy = require('lodash/uniqBy');
+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 uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
+
+/** @class */(function (_super) {
+  tslib.__extends(KeyValueMapControl, _super);
+  function KeyValueMapControl(props) {
+    var _this = _super.call(this, props) || this;
+    _this.state = {
+      unitOptions: _this.transformOptions(props)
+    };
+    return _this;
+  }
+  KeyValueMapControl.prototype.transformOptions = function (props) {
+    var value = props.value;
+    if (Array.isArray(value)) {
+      return value.map(function (item) {
+        return typeof item === 'string' ? {
+          label: item,
+          value: item
+        } : item;
+      });
+    } else {
+      return [];
+    }
+  };
+  /**
+   * 数据更新
+   */
+  KeyValueMapControl.prototype.componentWillReceiveProps = function (nextProps) {
+    var unitOptions = nextProps.value ? this.transformOptions(nextProps) : [];
+    if (JSON.stringify(this.state.unitOptions.map(function (item) {
+      return tslib.__assign(tslib.__assign({}, item), {
+        editing: undefined
+      });
+    })) !== JSON.stringify(unitOptions)) {
+      this.setState({
+        unitOptions: unitOptions
+      });
+    }
+  };
+  /**
+   * 增加
+   */
+  KeyValueMapControl.prototype.handleAdd = function () {
+    var _this = this;
+    var unitOptions = this.state.unitOptions;
+    unitOptions.push({
+      label: '',
+      value: '',
+      editing: false
+    });
+    this.setState({
+      unitOptions: unitOptions
+    }, function () {
+      _this.onChange();
+    });
+  };
+  /**
+   * 批量增加
+   */
+  KeyValueMapControl.prototype.handleBatchAdd = function (values) {
+    var _this = this;
+    var unitOptions = this.state.unitOptions.concat();
+    var addedOptions = values[0].batchOption.split('\n').map(function (option) {
+      var item = option.trim();
+      if (~item.indexOf(' ')) {
+        var _a = tslib.__read(item.split(' '), 2),
+          label = _a[0],
+          value = _a[1];
+        return {
+          label: label.trim(),
+          value: value.trim()
+        };
+      }
+      return {
+        label: item,
+        value: item
+      };
+    });
+    var newOptionsUniqByLabel = uniqBy__default["default"](tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(unitOptions), false), tslib.__read(addedOptions), false), 'label');
+    var newOptions = uniqBy__default["default"](newOptionsUniqByLabel, 'value');
+    this.setState({
+      unitOptions: newOptions
+    }, function () {
+      return _this.onChange();
+    });
+  };
+  /**
+   * 编辑文本
+   */
+  KeyValueMapControl.prototype.handleEditLabel = function (index, value) {
+    var _this = this;
+    var unitOptions = this.state.unitOptions.concat();
+    unitOptions.splice(index, 1, tslib.__assign(tslib.__assign({}, unitOptions[index]), {
+      label: value
+    }));
+    this.setState({
+      unitOptions: unitOptions
+    }, function () {
+      return _this.onChange();
+    });
+  };
+  /**
+   * 编辑值
+   */
+  KeyValueMapControl.prototype.handleValueChange = function (index, value) {
+    var _this = this;
+    var unitOptions = this.state.unitOptions.concat();
+    unitOptions.splice(index, 1, tslib.__assign(tslib.__assign({}, unitOptions[index]), {
+      value: value
+    }));
+    this.setState({
+      unitOptions: unitOptions
+    }, function () {
+      return _this.onChange();
+    });
+  };
+  /**
+   * 修改编辑状态
+   */
+  KeyValueMapControl.prototype.toggleEdit = function (index) {
+    var unitOptions = this.state.unitOptions;
+    unitOptions[index].editing = !unitOptions[index].editing;
+    this.setState({
+      unitOptions: unitOptions
+    });
+  };
+  /**
+   * 删除选项
+   */
+  KeyValueMapControl.prototype.handleDelete = function (index) {
+    var _this = this;
+    var unitOptions = this.state.unitOptions.concat();
+    unitOptions.splice(index, 1);
+    this.setState({
+      unitOptions: unitOptions
+    }, function () {
+      return _this.onChange();
+    });
+  };
+  /**
+   * 更新unitOptions字段的统一出口
+   */
+  KeyValueMapControl.prototype.onChange = function () {
+    var onBulkChange = this.props.onBulkChange;
+    var unitOptions = this.state.unitOptions;
+    var options = unitOptions.map(function (item) {
+      return {
+        label: item.label,
+        value: item.value
+      };
+    });
+    onBulkChange && onBulkChange({
+      unitOptions: options
+    });
+    return;
+  };
+  KeyValueMapControl.prototype.renderOption = function (item, index) {
+    var _this = this;
+    var label = item.label,
+      value = item.value,
+      editing = item.editing;
+    var render = this.props.render;
+    var i18nEnabled = amisEditorCore.getI18nEnabled();
+    var editDom = editing ? React__default["default"].createElement("div", {
+      className: "ae-KeyValMapControlItem-extendMore"
+    }, render('option', {
+      type: 'container',
+      className: 'ae-ExtendMore right mb-2',
+      body: [{
+        type: 'button',
+        className: 'ae-KeyValMapControlItem-closeBtn',
+        label: '×',
+        level: 'link',
+        onClick: function () {
+          return _this.toggleEdit(index);
+        }
+      }, {
+        children: function (_a) {
+          var render = _a.render;
+          return render('label', {
+            type: i18nEnabled ? 'input-text-i18n' : 'input-text',
+            placeholder: '显示文本',
+            label: i18nRuntime.i18n("97d07614380da93d257f9fbf81aa56fb"),
+            mode: 'horizontal',
+            name: 'optionLabel',
+            labelClassName: 'ae-KeyValMapControlItem-EditLabel',
+            valueClassName: 'ae-KeyValMapControlItem-EditValue'
+          }, {
+            value: label,
+            onChange: function (v) {
+              return _this.handleEditLabel(index, v);
+            }
+          });
+        }
+      }, {
+        children: function (_a) {
+          var render = _a.render;
+          return render('value', {
+            type: i18nEnabled ? 'input-text-i18n' : 'input-text',
+            placeholder: i18nRuntime.i18n("2c8c25bb51dfd9ddfc74fd75a8a380a1"),
+            label: i18nRuntime.i18n("fe7509e0ed085b86f07e3e9975cc5b3d"),
+            mode: 'horizontal',
+            name: 'optionValue',
+            labelClassName: 'ae-KeyValMapControlItem-EditLabel',
+            valueClassName: 'ae-KeyValMapControlItem-EditValue'
+          }, {
+            value: value,
+            onChange: function (v) {
+              return _this.handleValueChange(index, v);
+            }
+          });
+        }
+      }]
+    })) : null;
+    var operationBtn = [{
+      type: 'button',
+      className: 'ae-KeyValMapControlItem-action',
+      label: i18nRuntime.i18n("95b351c86267f3aedf89520959bce689"),
+      onClick: function () {
+        return _this.toggleEdit(index);
+      }
+    }, {
+      type: 'button',
+      className: 'ae-KeyValMapControlItem-action',
+      label: i18nRuntime.i18n("2f4aaddde33c9b93c36fd2503f3d122b"),
+      onClick: function () {
+        return _this.handleDelete(index);
+      }
+    }];
+    return React__default["default"].createElement("div", {
+      className: "ae-KeyValMapControlItem",
+      key: index
+    }, React__default["default"].createElement("div", {
+      className: "ae-KeyValMapControlItem-Main"
+    }, render('dropdown', {
+      type: 'flex',
+      className: 'ae-KeyValMapControlItem-flex',
+      items: [{
+        children: function (_a) {
+          var render = _a.render;
+          return render('value', {
+            type: i18nEnabled ? 'input-text-i18n' : 'input-text',
+            className: 'ae-KeyValMapControlItem-input',
+            label: false,
+            name: 'optionLabel',
+            placeholder: i18nRuntime.i18n("5d26b8a41e805204c9dcd5ea7e23b150"),
+            clearable: false
+          }, {
+            value: label,
+            onChange: function (value) {
+              _this.handleEditLabel(index, value);
+            }
+          });
+        }
+      }, {
+        type: 'dropdown-button',
+        className: 'ae-KeyValMapControlItem-dropdown',
+        btnClassName: 'px-2',
+        icon: 'fa fa-ellipsis-h',
+        hideCaret: true,
+        closeOnClick: true,
+        align: 'right',
+        menuClassName: 'ae-KeyValMapControlItem-ulmenu',
+        buttons: operationBtn
+      }]
+    })), editDom);
+  };
+  KeyValueMapControl.prototype.buildBatchAddSchema = function () {
+    return {
+      type: 'action',
+      actionType: 'dialog',
+      label: i18nRuntime.i18n("22de6ef85ed60ec54dbdc1d8583e5104"),
+      dialog: {
+        title: i18nRuntime.i18n("421252e16c6cb544fe9ce0be94a190e0"),
+        headerClassName: 'font-bold',
+        closeOnEsc: true,
+        closeOnOutside: false,
+        showCloseButton: true,
+        onConfirm: this.handleBatchAdd,
+        body: [{
+          type: 'alert',
+          level: 'warning',
+          body: [{
+            type: 'tpl',
+            tpl: i18nRuntime.i18n("c130bd5b55edefdaf8923269e9a52439")
+          }],
+          showIcon: true,
+          className: 'mb-2.5'
+        }, {
+          type: 'form',
+          wrapWithPanel: false,
+          mode: 'normal',
+          wrapperComponent: 'div',
+          resetAfterSubmit: true,
+          autoFocus: true,
+          preventEnterSubmit: true,
+          horizontal: {
+            left: 0,
+            right: 12
+          },
+          body: [{
+            name: 'batchOption',
+            type: 'textarea',
+            label: '',
+            placeholder: i18nRuntime.i18n("1e2f96a69fbef8caa8823a3067ebbdc7"),
+            trimContents: true,
+            minRows: 10,
+            maxRows: 50,
+            required: true
+          }]
+        }]
+      }
+    };
+  };
+  KeyValueMapControl.prototype.render = function () {
+    var _this = this;
+    var unitOptions = this.state.unitOptions;
+    var render = this.props.render;
+    return React__default["default"].createElement("div", {
+      className: "ae-KeyValMapControl-wrapper"
+    }, unitOptions.length ? React__default["default"].createElement("div", null, unitOptions.map(function (item, index) {
+      return _this.renderOption(item, index);
+    })) : null, React__default["default"].createElement("div", {
+      className: "ae-KeyValMapControl-footer"
+    }, React__default["default"].createElement(amis.Button, {
+      level: "enhance",
+      onClick: this.handleAdd
+    }, i18nRuntime.i18n("e8755fb1e985a5d26df0fce1f0b7b0f8")), render('inner', this.buildBatchAddSchema())));
+  };
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], KeyValueMapControl.prototype, "handleAdd", null);
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Array]), tslib.__metadata("design:returntype", void 0)], KeyValueMapControl.prototype, "handleBatchAdd", null);
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Number, String]), tslib.__metadata("design:returntype", void 0)], KeyValueMapControl.prototype, "handleEditLabel", null);
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Number, String]), tslib.__metadata("design:returntype", void 0)], KeyValueMapControl.prototype, "handleValueChange", null);
+  KeyValueMapControl = tslib.__decorate([amis.FormItem({
+    type: 'ae-keyValueMapControl'
+  }), tslib.__metadata("design:paramtypes", [Object])], KeyValueMapControl);
+  return KeyValueMapControl;
+})(React__default["default"].Component);
+window.amisEditorVersionInfo={version:'5.6.2',buildTime:'2023-10-31'};

package/lib/renderer/ListItemControl.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @file 通用数组列表项的可视化编辑控件
+ */
+import React from 'react';
+import Sortable from 'sortablejs';
+import { FormControlProps } from 'amis-core';
+import type { SchemaApi } from 'amis';
+import type { PlainObject } from './style-control/types';
+export type valueType = 'text' | 'boolean' | 'number';
+export interface PopoverForm {
+    optionLabel: string;
+    optionValue: any;
+    optionValueType: valueType;
+}
+export interface OptionControlProps extends FormControlProps {
+    className?: string;
+}
+export type SourceType = 'custom' | 'api' | 'apicenter' | 'variable';
+export interface OptionControlState {
+    items: Array<PlainObject>;
+    api: SchemaApi;
+    labelField: string;
+    valueField: string;
+}
+export default class ListItemControl extends React.Component<OptionControlProps, OptionControlState> {
+    sortable?: Sortable;
+    drag?: HTMLElement | null;
+    target: HTMLElement | null;
+    internalProps: string[];
+    constructor(props: OptionControlProps);
+    /**
+     * 数据更新
+     */
+    componentWillReceiveProps(nextProps: OptionControlProps): void;
+    /**
+     * 处理填入输入框的值
+     */
+    transformOptionValue(value: any): string;
+    transformOptions(props: OptionControlProps): any[];
+    /**
+     * 更新options字段的统一出口
+     */
+    onChange(): void;
+    targetRef(ref: any): void;
+    dragRef(ref: any): void;
+    initDragging(): void;
+    destroyDragging(): void;
+    /**
+     * 删除选项
+     */
+    handleDelete(index: number): void;
+    /**
+     * 编辑选项
+     */
+    toggleEdit(index: number): void;
+    editItem(item: PlainObject, index: number): void;
+    handleEditLabel(index: number, value: string): void;
+    handleAdd(): void;
+    handleValueChange(index: number, value: string): void;
+    renderHeader(): React.JSX.Element;
+    renderOption(props: any): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export declare class ListItemControlRenderer extends ListItemControl {
+}