amis-editor 5.2.0 → 5.2.1-beta.19

package/lib/renderer/SwitchMoreControl.js

@@ -0,0 +1,491 @@
+/**
+ * amis-editor v5.2.1-beta.19
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var reactDom = require('react-dom');
+var cx = require('classnames');
+var amis = require('amis');
+var amisEditorCore = require('amis-editor-core');
+var _ = require('lodash');
+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 开关 + 更多编辑组合控件
+ * 使用时需关注所有的配置项是一个object还是整个data中，可使用bulk来区分
+ *
+ */
+var SwitchMore = /** @class */function (_super) {
+  tslib.__extends(SwitchMore, _super);
+  function SwitchMore(props) {
+    var _this = _super.call(this, props) || this;
+    Object.defineProperty(_this, "overlay", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(_this, "formNames", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
+    _this.state = _this.initState();
+    return _this;
+  }
+  Object.defineProperty(SwitchMore.prototype, "initState", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _a = this.props,
+        data = _a.data,
+        value = _a.value,
+        trueValue = _a.trueValue;
+        _a.falseValue;
+        var name = _a.name,
+        bulk = _a.bulk;
+        _a.hiddenOnDefault;
+      var checked = false;
+      var show = false;
+      // 这个开关 无具体属性对应
+      if (!name) {
+        // 子表单项是组件根属性，遍历看是否有值
+        if (bulk) {
+          var formNames = this.getFormItemNames();
+          checked = _.some(formNames, function (key) {
+            return data[key] !== undefined;
+          });
+          show = checked;
+        } else {
+          checked = value === trueValue;
+        }
+      } else {
+        checked = !!value === trueValue;
+      }
+      // 开关有属性对应
+      return {
+        checked: checked,
+        show: show
+      };
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "getFormItemNames", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var form = this.props.form;
+      var formNames = form && Array.isArray(form === null || form === void 0 ? void 0 : form.body) ? form.body.map(function (item) {
+        return typeof item === 'string' ? undefined : item === null || item === void 0 ? void 0 : item.name;
+      }).filter(function (name) {
+        return name;
+      }) : [];
+      return formNames;
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "overlayRef", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (ref) {
+      this.overlay = ref ? reactDom.findDOMNode(ref) : null;
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "openPopover", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      this.setState({
+        show: true
+      });
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "toogleExtend", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      this.setState({
+        show: !this.state.show
+      });
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "closePopover", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      this.setState({
+        show: false
+      });
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "handleDelete", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (e) {
+      var onRemove = this.props.onRemove;
+      onRemove && onRemove(e);
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "handleSwitchChange", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (checked) {
+      var _a = this.props,
+        onBulkChange = _a.onBulkChange,
+        onChange = _a.onChange,
+        bulk = _a.bulk,
+        defaultData = _a.defaultData,
+        name = _a.name,
+        trueValue = _a.trueValue,
+        falseValue = _a.falseValue;
+      this.setState({
+        checked: checked
+      });
+      // 子表单项是组件根属性，用bulk处理所有属性
+      if (bulk) {
+        // 选中后，给一个默认 {} 或 配置的默认值
+        if (checked) {
+          var data = defaultData ? tslib.__assign({}, defaultData) : {};
+          name && (data[name] = trueValue);
+          onBulkChange && onBulkChange(data);
+        }
+        // 取消选中后，讲所有字段重置
+        else {
+          var values = _.fromPairs(this.getFormItemNames().map(function (i) {
+            return [i, undefined];
+          }));
+          name && (values[name] = falseValue);
+          onBulkChange && onBulkChange(values);
+        }
+        return;
+      }
+      onChange(checked ? defaultData || true : undefined);
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "handleSubmit", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (values) {
+      var _a = this.props,
+        onChange = _a.onChange,
+        onBulkChange = _a.onBulkChange,
+        bulk = _a.bulk;
+      if (bulk) {
+        onBulkChange && onBulkChange(values);
+      } else {
+        onChange && onChange(values);
+      }
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "handleAction", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (e, action, data, throwErrors, delegate) {
+      var onClose = this.props.onClose;
+      if (action.actionType === 'close') {
+        this.setState({
+          show: false
+        });
+        onClose && onClose(e);
+      }
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "renderActions", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _a = this.props,
+        render = _a.render,
+        removable = _a.removable,
+        disabled = _a.disabled,
+        form = _a.form,
+        formType = _a.formType,
+        hiddenOnDefault = _a.hiddenOnDefault,
+        bulk = _a.bulk;
+      var _b = this.state,
+        checked = _b.checked,
+        show = _b.show;
+      if (!form || !checked || disabled) {
+        return null;
+      }
+      var actions = [];
+      if (formType === 'dialog') {
+        actions.push(render('switch-more-form', this.renderDialogMore(), {
+          key: 'edit',
+          onSubmit: this.handleSubmit
+        }));
+      } else if (formType === 'pop') {
+        actions.push(React__default["default"].createElement(amis.Button, {
+          key: "edit",
+          level: "link",
+          size: "sm",
+          className: "action-btn",
+          ref: this.overlayRef,
+          onClick: this.openPopover
+        }, React__default["default"].createElement(amis.Icon, {
+          icon: "pencil",
+          className: "icon"
+        })));
+      } else if (bulk && hiddenOnDefault && formType === 'extend') {
+        actions.push(React__default["default"].createElement("div", {
+          key: "open",
+          "data-tooltip": !show ? i18nRuntime.i18n("311f6d1fa5f13b0e280d7b3c9d40c5be") : undefined,
+          "data-position": "bottom"
+        }, React__default["default"].createElement(amis.Button, {
+          level: "link",
+          size: "sm",
+          className: 'action-btn open-btn' + (show ? ' opening' : ''),
+          onClick: this.toogleExtend
+        }, React__default["default"].createElement(amis.Icon, {
+          icon: "caret",
+          className: "icon"
+        }))));
+      }
+      if (removable) {
+        actions.push(React__default["default"].createElement(amis.Button, {
+          key: "remove",
+          level: "link",
+          size: "sm",
+          onClick: this.handleDelete
+        }, React__default["default"].createElement(amis.Icon, {
+          icon: "delete-btn",
+          className: "icon ae-SwitchMore-icon"
+        })));
+      }
+      return actions;
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "renderPopover", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _a = this.props,
+        render = _a.render,
+        popOverclassName = _a.popOverclassName,
+        overlay = _a.overlay,
+        offset = _a.offset,
+        target = _a.target,
+        container = _a.container,
+        placement = _a.placement,
+        rootClose = _a.rootClose,
+        style = _a.style,
+        title = _a.title;
+      return React__default["default"].createElement(amis.Overlay, {
+        show: true,
+        rootClose: rootClose,
+        placement: placement,
+        target: target || this.overlay,
+        container: container
+      }, React__default["default"].createElement(amis.PopOver, {
+        className: cx__default["default"]('ae-SwitchMore-popover', popOverclassName),
+        placement: placement,
+        overlay: overlay,
+        offset: offset,
+        style: style
+      }, React__default["default"].createElement("header", null, React__default["default"].createElement("p", {
+        className: "ae-SwitchMore-title"
+      }, title || i18nRuntime.i18n("38aa9dc2a0f14555322061d2ff997349")), React__default["default"].createElement("a", {
+        onClick: this.closePopover,
+        className: "ae-SwitchMore-close"
+      }, React__default["default"].createElement(amis.Icon, {
+        icon: "close",
+        className: "icon"
+      }))), render('switch-more-form', this.renderForm(), {
+        onSubmit: this.handleSubmit
+      })));
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "renderExtend", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _a = this.props,
+        render = _a.render;
+        _a.form;
+        _a.bulk;
+        var hiddenOnDefault = _a.hiddenOnDefault;
+      var show = this.state.show;
+      if (hiddenOnDefault && !show) {
+        return null;
+      }
+      return React__default["default"].createElement("div", null, React__default["default"].createElement("div", {
+        className: cx__default["default"]('ae-SwitchMore-content', 'inFormItem')
+      }, render('switch-more-form', this.renderForm(), {
+        onSubmit: this.handleSubmit
+      })));
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "renderDialogMore", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      return {
+        type: 'input-sub-form',
+        btnLabel: '',
+        className: 'inline-block m-0 h-6 bg-white ',
+        itemClassName: 'bg-white hover:bg-white m-0 p-0',
+        icon: 'fa fa-cog',
+        form: tslib.__assign({
+          title: this.props.label
+        }, this.renderForm())
+      };
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "renderForm", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _a;
+      var _b = this.props,
+        form = _b.form,
+        name = _b.name,
+        formType = _b.formType,
+        ctx = _b.data,
+        bulk = _b.bulk,
+        defaultData = _b.defaultData,
+        autoFocus = _b.autoFocus;
+      return tslib.__assign({
+        type: 'form',
+        wrapWithPanel: false,
+        panelClassName: 'border-none shadow-none mb-0',
+        actionsClassName: 'border-none mt-2.5',
+        wrapperComponent: 'div',
+        mode: 'horizontal',
+        horizontal: {
+          justify: true,
+          left: 4
+        },
+        autoFocus: autoFocus,
+        formLazyChange: true,
+        preventEnterSubmit: true,
+        submitOnChange: ['pop', 'extend'].includes(formType),
+        data: ctx && name && !bulk ? (_a = ctx[name]) !== null && _a !== void 0 ? _a : defaultData : defaultData !== null && defaultData !== void 0 ? defaultData : {}
+      }, form);
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "renderMoreSection", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var formType = this.props.formType;
+      var _a = this.state,
+        show = _a.show,
+        checked = _a.checked;
+      if (!checked) {
+        return null;
+      }
+      if (formType === 'pop') {
+        return show ? this.renderPopover() : null;
+      } else if (formType === 'extend') {
+        return this.renderExtend();
+      }
+      return null;
+    }
+  });
+  Object.defineProperty(SwitchMore.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _a;
+      var _b = this.props,
+        render = _b.render,
+        disabled = _b.disabled,
+        className = _b.className,
+        body = _b.body,
+        env = _b.env,
+        hidden = _b.hidden,
+        formType = _b.formType,
+        onText = _b.onText,
+        offText = _b.offText;
+      if (hidden) {
+        return null;
+      }
+      var _c = this.state;
+        _c.show;
+        var checked = _c.checked;
+      var actions = this.renderActions();
+      (_a = env === null || env === void 0 ? void 0 : env.theme) === null || _a === void 0 ? void 0 : _a.classPrefix;
+      return React__default["default"].createElement("div", {
+        className: cx__default["default"]('ae-SwitchMore', 'ae-SwitchMore-' + formType, className)
+      }, React__default["default"].createElement("div", {
+        className: cx__default["default"]('ae-SwitchMore-switch')
+      }, body ? render('body', body) : null, actions && actions.length ? React__default["default"].createElement("div", {
+        className: "ae-SwitchMore-actions"
+      }, actions, checked ? React__default["default"].createElement("hr", null) : null) : null, React__default["default"].createElement(amis.Switch, {
+        value: checked,
+        onChange: this.handleSwitchChange,
+        disabled: disabled,
+        onText: onText,
+        offText: offText
+      })), this.renderMoreSection());
+    }
+  });
+  Object.defineProperty(SwitchMore, "defaultProps", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {
+      // btnIcon: 'pencil',
+      // iconPosition: 'right',
+      container: document.body,
+      autoFocus: true,
+      // placement: 'left',
+      overlay: true,
+      rootClose: false,
+      trueValue: true,
+      falseValue: false,
+      formType: 'pop',
+      bulk: true
+      // editable: true
+    }
+  });
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], SwitchMore.prototype, "overlayRef", null);
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], SwitchMore.prototype, "openPopover", null);
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], SwitchMore.prototype, "toogleExtend", null);
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], SwitchMore.prototype, "closePopover", null);
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], SwitchMore.prototype, "handleDelete", null);
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Boolean]), tslib.__metadata("design:returntype", void 0)], SwitchMore.prototype, "handleSwitchChange", null);
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], SwitchMore.prototype, "handleSubmit", null);
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object, Object, Object, Boolean, Object]), tslib.__metadata("design:returntype", void 0)], SwitchMore.prototype, "handleAction", null);
+  return SwitchMore;
+}(React__default["default"].Component);
+/** @class */(function (_super) {
+  tslib.__extends(SwitchMoreRenderer, _super);
+  function SwitchMoreRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  SwitchMoreRenderer = tslib.__decorate([amis.FormItem({
+    type: 'ae-switch-more'
+  })], SwitchMoreRenderer);
+  return SwitchMoreRenderer;
+})(SwitchMore);
+
+exports["default"] = SwitchMore;

package/lib/renderer/TimelineItemControl.d.ts

@@ -0,0 +1,140 @@
+/**
+ * @file Timeline组件节点的可视化编辑控件
+ */
+import React from 'react';
+import Sortable from 'sortablejs';
+import type { FormControlProps } from 'amis-core';
+import { SchemaApi } from 'amis/lib/Schema';
+type TimelineItem = {
+    title: string;
+    time: string;
+    detail?: string;
+    otherConfig?: boolean;
+    detailCollapsedText?: string;
+    detailExpandedText?: string;
+    color?: string | 'info' | 'success' | 'warning' | 'danger';
+    icon?: string;
+};
+export interface TimelineItemProps extends FormControlProps {
+    className?: string;
+}
+export interface TimelineItemState {
+    items: Array<Partial<TimelineItem>>;
+    source: 'custom' | 'api';
+    api: SchemaApi;
+}
+export default class TimelineItemControl extends React.Component<TimelineItemProps, TimelineItemState> {
+    sortable?: Sortable;
+    drag?: HTMLElement | null;
+    target: HTMLElement | null;
+    constructor(props: TimelineItemProps);
+    /**
+     * 切换选项类型
+     */
+    handleSourceChange(source: 'custom' | 'api'): void;
+    handleAPIChange(source: SchemaApi): void;
+    onChange(): void;
+    toggleEdit(values: TimelineItem, index: number): void;
+    toggleCopy(index: number): void;
+    toggleDelete(index: number): void;
+    handleEditLabel(index: number, value: string, attr: 'time' | 'title'): void;
+    handleBatchAdd(values: {
+        batchItems: string;
+    }, action: any): void;
+    handleAdd(values: TimelineItem): void;
+    buildAddOrEditSchema(props?: Partial<TimelineItem>): any[];
+    buildBatchAddSchema(): {
+        type: string;
+        actionType: string;
+        label: string;
+        dialog: {
+            title: string;
+            headerClassName: string;
+            closeOnEsc: boolean;
+            closeOnOutside: boolean;
+            showCloseButton: boolean;
+            body: ({
+                type: string;
+                level: string;
+                body: {
+                    type: string;
+                    tpl: string;
+                }[];
+                showIcon: boolean;
+                className: string;
+                wrapWithPanel?: undefined;
+                mode?: undefined;
+                wrapperComponent?: undefined;
+                resetAfterSubmit?: undefined;
+                autoFocus?: undefined;
+                preventEnterSubmit?: undefined;
+                horizontal?: undefined;
+            } | {
+                type: string;
+                wrapWithPanel: boolean;
+                mode: string;
+                wrapperComponent: string;
+                resetAfterSubmit: boolean;
+                autoFocus: boolean;
+                preventEnterSubmit: boolean;
+                horizontal: {
+                    left: number;
+                    right: number;
+                };
+                body: {
+                    name: string;
+                    type: string;
+                    label: string;
+                    placeholder: string;
+                    trimContents: boolean;
+                    minRows: number;
+                    maxRows: number;
+                    required: boolean;
+                }[];
+                level?: undefined;
+                showIcon?: undefined;
+                className?: undefined;
+            })[];
+        };
+    };
+    buildAddSchema(): {
+        type: string;
+        actionType: string;
+        label: string;
+        active: boolean;
+        dialog: {
+            title: string;
+            headerClassName: string;
+            closeOnEsc: boolean;
+            closeOnOutside: boolean;
+            showCloseButton: boolean;
+            body: {
+                type: string;
+                wrapWithPanel: boolean;
+                wrapperComponent: string;
+                resetAfterSubmit: boolean;
+                autoFocus: boolean;
+                preventEnterSubmit: boolean;
+                horizontal: {
+                    justify: boolean;
+                    left: number;
+                    right: number;
+                };
+                body: any[];
+            }[];
+        };
+    };
+    dragRef(ref: any): void;
+    initDragging(): void;
+    destroyDragging(): void;
+    renderHeader(): JSX.Element;
+    renderOption(props: TimelineItem & {
+        index: number;
+    }): JSX.Element;
+    renderApiPanel(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export declare class TimelineItemControlRenderer extends React.Component<TimelineItemProps> {
+    render(): JSX.Element;
+}
+export {};