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

package/esm/renderer/SwitchMoreControl.js

@@ -0,0 +1,434 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { findDOMNode } from 'react-dom';
+import cx from 'classnames';
+import { Button, Icon, Overlay, PopOver, Switch, FormItem } from 'amis';
+import { autobind } from 'amis-editor-core';
+import { some, fromPairs } from 'lodash';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 开关 + 更多编辑组合控件
+ * 使用时需关注所有的配置项是一个object还是整个data中，可使用bulk来区分
+ *
+ */
+
+var SwitchMore =
+/** @class */
+function (_super) {
+  __extends(SwitchMore, _super);
+
+  function SwitchMore(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.state = _this.initState();
+    return _this;
+  }
+
+  SwitchMore.prototype.initState = 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
+    };
+  };
+
+  SwitchMore.prototype.getFormItemNames = 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;
+  };
+
+  SwitchMore.prototype.overlayRef = function (ref) {
+    this.overlay = ref ? findDOMNode(ref) : null;
+  };
+
+  SwitchMore.prototype.openPopover = function () {
+    this.setState({
+      show: true
+    });
+  };
+
+  SwitchMore.prototype.toogleExtend = function () {
+    this.setState({
+      show: !this.state.show
+    });
+  };
+
+  SwitchMore.prototype.closePopover = function () {
+    this.setState({
+      show: false
+    });
+  };
+
+  SwitchMore.prototype.handleDelete = function (e) {
+    var onRemove = this.props.onRemove;
+    onRemove && onRemove(e);
+  };
+
+  SwitchMore.prototype.handleSwitchChange = 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 ? __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);
+  };
+
+  SwitchMore.prototype.handleSubmit = function (values) {
+    var _a = this.props,
+        onChange = _a.onChange,
+        onBulkChange = _a.onBulkChange,
+        bulk = _a.bulk;
+
+    if (bulk) {
+      onBulkChange && onBulkChange(values);
+    } else {
+      onChange && onChange(values);
+    }
+  };
+
+  SwitchMore.prototype.handleAction = function (e, action, data, throwErrors, delegate) {
+
+    var onClose = this.props.onClose;
+
+    if (action.actionType === 'close') {
+      this.setState({
+        show: false
+      });
+      onClose && onClose(e);
+    }
+  };
+
+  SwitchMore.prototype.renderActions = 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.createElement(Button, {
+        key: "edit",
+        level: "link",
+        size: "sm",
+        className: "action-btn",
+        ref: this.overlayRef,
+        onClick: this.openPopover
+      }, React__default.createElement(Icon, {
+        icon: "pencil",
+        className: "icon"
+      })));
+    } else if (bulk && hiddenOnDefault && formType === 'extend') {
+      actions.push(React__default.createElement("div", {
+        key: "open",
+        "data-tooltip": !show ? i18n("311f6d1fa5f13b0e280d7b3c9d40c5be") : undefined,
+        "data-position": "bottom"
+      }, React__default.createElement(Button, {
+        level: "link",
+        size: "sm",
+        className: 'action-btn open-btn' + (show ? ' opening' : ''),
+        onClick: this.toogleExtend
+      }, React__default.createElement(Icon, {
+        icon: "caret",
+        className: "icon"
+      }))));
+    }
+
+    if (removable) {
+      actions.push(React__default.createElement(Button, {
+        key: "remove",
+        level: "link",
+        size: "sm",
+        onClick: this.handleDelete
+      }, React__default.createElement(Icon, {
+        icon: "delete-btn",
+        className: "icon ae-SwitchMore-icon"
+      })));
+    }
+
+    return actions;
+  };
+
+  SwitchMore.prototype.renderPopover = 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.createElement(Overlay, {
+      show: true,
+      rootClose: rootClose,
+      placement: placement,
+      target: target || this.overlay,
+      container: container
+    }, React__default.createElement(PopOver, {
+      className: cx('ae-SwitchMore-popover', popOverclassName),
+      placement: placement,
+      overlay: overlay,
+      offset: offset,
+      style: style
+    }, React__default.createElement("header", null, React__default.createElement("p", {
+      className: "ae-SwitchMore-title"
+    }, title || i18n("38aa9dc2a0f14555322061d2ff997349")), React__default.createElement("a", {
+      onClick: this.closePopover,
+      className: "ae-SwitchMore-close"
+    }, React__default.createElement(Icon, {
+      icon: "close",
+      className: "icon"
+    }))), render('switch-more-form', this.renderForm(), {
+      onSubmit: this.handleSubmit
+    })));
+  };
+
+  SwitchMore.prototype.renderExtend = 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.createElement("div", null, React__default.createElement("div", {
+      className: cx('ae-SwitchMore-content', 'inFormItem')
+    }, render('switch-more-form', this.renderForm(), {
+      onSubmit: this.handleSubmit
+    })));
+  };
+
+  SwitchMore.prototype.renderDialogMore = function () {
+    return {
+      type: 'input-sub-form',
+      btnLabel: '',
+      className: 'inline-block m-0 h-6',
+      itemClassName: 'bg-white hover:bg-white m-0 p-0',
+      icon: 'fa fa-cog',
+      form: __assign({
+        title: this.props.label
+      }, this.renderForm())
+    };
+  };
+
+  SwitchMore.prototype.renderForm = 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 __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);
+  };
+
+  SwitchMore.prototype.renderMoreSection = 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;
+  };
+
+  SwitchMore.prototype.render = 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.createElement("div", {
+      className: cx('ae-SwitchMore', 'ae-SwitchMore-' + formType, className)
+    }, React__default.createElement("div", {
+      className: cx('ae-SwitchMore-switch')
+    }, body ? render('body', body) : null, actions && actions.length ? React__default.createElement("div", {
+      className: "ae-SwitchMore-actions"
+    }, actions, checked ? React__default.createElement("hr", null) : null) : null, React__default.createElement(Switch, {
+      value: checked,
+      onChange: this.handleSwitchChange,
+      disabled: disabled,
+      onText: onText,
+      offText: offText
+    })), this.renderMoreSection());
+  };
+
+  SwitchMore.defaultProps = {
+    // 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
+
+  };
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], SwitchMore.prototype, "overlayRef", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], SwitchMore.prototype, "openPopover", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], SwitchMore.prototype, "toogleExtend", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], SwitchMore.prototype, "closePopover", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], SwitchMore.prototype, "handleDelete", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Boolean]), __metadata("design:returntype", void 0)], SwitchMore.prototype, "handleSwitchChange", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], SwitchMore.prototype, "handleSubmit", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object, Object, Object, Boolean, Object]), __metadata("design:returntype", void 0)], SwitchMore.prototype, "handleAction", null);
+
+  return SwitchMore;
+}(React__default.Component);
+
+/** @class */
+(function (_super) {
+  __extends(SwitchMoreRenderer, _super);
+
+  function SwitchMoreRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  SwitchMoreRenderer = __decorate([FormItem({
+    type: 'ae-switch-more'
+  })], SwitchMoreRenderer);
+  return SwitchMoreRenderer;
+})(SwitchMore);
+
+export { SwitchMore as default };

package/esm/renderer/TimelineItemControl.d.ts

@@ -0,0 +1,220 @@
+/**
+ * @file Timeline组件节点的可视化编辑控件
+ */
+import React from 'react';
+import Sortable from 'sortablejs';
+import type { FormControlProps } from 'amis-core';
+import { SchemaApi } from 'amis/lib/Schema';
+declare 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>): ({
+        type: string;
+        name: string;
+        required: boolean;
+        placeholder: string;
+        label: string;
+        value: string | undefined;
+        clearable?: undefined;
+        description?: undefined;
+        className?: undefined;
+        pipeIn?: undefined;
+        pipeOut?: undefined;
+    } | {
+        type: string;
+        name: string;
+        value: string | undefined;
+        placeholder: string;
+        label: string;
+        required?: undefined;
+        clearable?: undefined;
+        description?: undefined;
+        className?: undefined;
+        pipeIn?: undefined;
+        pipeOut?: undefined;
+    } | {
+        type: string;
+        name: string;
+        value: string | undefined;
+        placeholder: string;
+        clearable: boolean;
+        description: string;
+        label: string;
+        className: string;
+        pipeIn: (value: any) => any;
+        pipeOut: (value: any) => {
+            type: string;
+            vendor: string;
+            icon: any;
+        } | undefined;
+        required?: undefined;
+    })[];
+    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: ({
+                    type: string;
+                    name: string;
+                    required: boolean;
+                    placeholder: string;
+                    label: string;
+                    value: string | undefined;
+                    clearable?: undefined;
+                    description?: undefined;
+                    className?: undefined;
+                    pipeIn?: undefined;
+                    pipeOut?: undefined;
+                } | {
+                    type: string;
+                    name: string;
+                    value: string | undefined;
+                    placeholder: string;
+                    label: string;
+                    required?: undefined;
+                    clearable?: undefined;
+                    description?: undefined;
+                    className?: undefined;
+                    pipeIn?: undefined;
+                    pipeOut?: undefined;
+                } | {
+                    type: string;
+                    name: string;
+                    value: string | undefined;
+                    placeholder: string;
+                    clearable: boolean;
+                    description: string;
+                    label: string;
+                    className: string;
+                    pipeIn: (value: any) => any;
+                    pipeOut: (value: any) => {
+                        type: string;
+                        vendor: string;
+                        icon: any;
+                    } | undefined;
+                    required?: undefined;
+                })[];
+            }[];
+        };
+    };
+    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 {};