amis-editor 5.2.0 → 5.2.1-beta.15

package/esm/component/BaseControl.d.ts

@@ -0,0 +1,224 @@
+/**
+ * @file 基础控件集合
+ */
+import type { BaseEventContext } from 'amis-editor-core';
+export declare const BUTTON_DEFAULT_ACTION: {
+    onEvent: {
+        click: {
+            actions: never[];
+        };
+    };
+};
+export type PrimitiveType = string | number | boolean;
+/**
+ * 校验项
+ * 数组项为 ValidationType 或 对象形式的配置
+ * 对象形式配置规则 优先匹配 isShow 形式，后匹配 isHidden 形式
+ * 如下：
+ */
+export type ValidationOptions = Array<{
+    option: string;
+    isShow?: {
+        [key: string]: PrimitiveType | Array<PrimitiveType>;
+    };
+    isHidden?: {
+        [key: string]: PrimitiveType | Array<PrimitiveType>;
+    };
+}>;
+export type FormItemControlPanel = 'property' | 'common' | 'option' | 'status' | 'validation' | 'style' | 'option' | 'event';
+/**
+ * Label提示
+ * 支持传入Schema或String，传入String则使用默认配置，如下：
+ *
+ * @default
+ * ```
+ * className: 'ae-BaseRemark',
+ * icon: 'fa fa-question-circle',
+ * trigger: ['hover', 'click'],
+ * placement: 'left'
+ * ```
+ */
+export declare const BaseLabelMark: (schema: Record<string, any> | string) => {
+    content: any;
+    className: string;
+    icon: string;
+    trigger: string[];
+    placement: string;
+} | undefined;
+/**
+ * 表单项组件面板
+ *
+ * @param {Object=} panels
+ * @param {string=} key
+ * `property` 属性
+ *     `common` 基本
+ *     `status` 状态
+ *     `validation` 校验
+ * `style` 样式
+ * `event` 事件
+ * @param {string=} panels.body - 配置面板Schema
+ * @param {boolean=} panels.replace - 是否完全替换默认Schema，默认追加
+ * @param {Array} panels.validation.validationType - 默认显示的校验类型
+ */
+export declare const formItemControl: (panels: Partial<Record<FormItemControlPanel, {
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 配置项内容
+     */
+    body?: any;
+    /**
+     * 是否完全替换默认配置项
+     */
+    replace?: boolean;
+    /**
+     * 配置项倒序排列
+     */
+    reverse?: boolean;
+    /**
+     * 是否隐藏面板
+     */
+    hidden?: boolean;
+    /**
+     * 配置项排序优先级
+     */
+    order?: Record<string, number>;
+    /**
+     * 默认支持的校验规则
+     */
+    validationType?: ValidationOptions;
+}>>, context?: BaseEventContext) => Array<any>;
+/**
+ * 信息提示组件模版
+ */
+export declare function remarkTpl(config: {
+    name: 'remark' | 'labelRemark';
+    label: string;
+    labelRemark?: string;
+}): {
+    type: string;
+    formType: string;
+    className: string;
+    label: any;
+    bulk: boolean;
+    name: "labelRemark" | "remark";
+    pipeIn: (value: any) => boolean;
+    pipeOut: (value: any) => any;
+    form: {
+        size: string;
+        className: string;
+        mode: string;
+        horizontal: {
+            left: number;
+            right: number;
+            justify: boolean;
+        };
+        body: {
+            type: string;
+            className: string;
+            gap: string;
+            columns: ({
+                md: string;
+                body: ({
+                    name: string;
+                    type: string;
+                    label: string;
+                    placeholder: string;
+                } | {
+                    name: string;
+                    type: string;
+                    label: string;
+                    placeholder?: undefined;
+                })[];
+            } | {
+                md: string;
+                body: ({
+                    name: string;
+                    type: string;
+                    size: string;
+                    label: string;
+                    options: {
+                        label: string;
+                        value: string;
+                    }[];
+                    labelRemark?: undefined;
+                    multiple?: undefined;
+                    pipeIn?: undefined;
+                    pipeOut?: undefined;
+                    visibleOn?: undefined;
+                    mode?: undefined;
+                    inputClassName?: undefined;
+                } | {
+                    type: string;
+                    name: string;
+                    label: string;
+                    size?: undefined;
+                    options?: undefined;
+                    labelRemark?: undefined;
+                    multiple?: undefined;
+                    pipeIn?: undefined;
+                    pipeOut?: undefined;
+                    visibleOn?: undefined;
+                    mode?: undefined;
+                    inputClassName?: undefined;
+                } | {
+                    name: string;
+                    label: string;
+                    type: string;
+                    labelRemark: {
+                        content: any;
+                        className: string;
+                        icon: string;
+                        trigger: string[];
+                        placement: string;
+                    } | undefined;
+                    size?: undefined;
+                    options?: undefined;
+                    multiple?: undefined;
+                    pipeIn?: undefined;
+                    pipeOut?: undefined;
+                    visibleOn?: undefined;
+                    mode?: undefined;
+                    inputClassName?: undefined;
+                } | {
+                    name: string;
+                    type: string;
+                    label: string;
+                    labelRemark: {
+                        content: any;
+                        className: string;
+                        icon: string;
+                        trigger: string[];
+                        placement: string;
+                    } | undefined;
+                    multiple: boolean;
+                    pipeIn: (value: any) => string | never[];
+                    pipeOut: (value: any) => any;
+                    options: {
+                        label: string;
+                        value: string;
+                    }[];
+                    size?: undefined;
+                    visibleOn?: undefined;
+                    mode?: undefined;
+                    inputClassName?: undefined;
+                } | {
+                    name: string;
+                    visibleOn: string;
+                    label: string;
+                    type: string;
+                    mode: string;
+                    inputClassName: string;
+                    size?: undefined;
+                    options?: undefined;
+                    labelRemark?: undefined;
+                    multiple?: undefined;
+                    pipeIn?: undefined;
+                    pipeOut?: undefined;
+                })[];
+            })[];
+        };
+    };
+};

package/esm/component/BaseControl.js

@@ -0,0 +1,309 @@
+/**
+ * amis-editor v5.2.1-beta.15
+ * Copyright 2018-2022 @fex
+ */
+
+import { __assign, __rest, __spreadArray } from 'tslib';
+import flatten from 'lodash/flatten';
+import { SUPPORT_STATIC_FORMITEM_CMPTS, getEventControlConfig } from '../renderer/event-control/helper.js';
+import { isObject, getSchemaTpl, tipedLabel } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 基础控件集合
+ */
+var BUTTON_DEFAULT_ACTION = {
+  onEvent: {
+    click: {
+      actions: []
+    }
+  }
+};
+/**
+ * Label提示
+ * 支持传入Schema或String，传入String则使用默认配置，如下：
+ *
+ * @default
+ * ```
+ * className: 'ae-BaseRemark',
+ * icon: 'fa fa-question-circle',
+ * trigger: ['hover', 'click'],
+ * placement: 'left'
+ * ```
+ */
+var BaseLabelMark = function (schema) {
+  var base = {
+    className: 'ae-BaseRemark',
+    icon: 'fa fa-question-circle',
+    trigger: ['hover', 'click'],
+    placement: 'left',
+    content: ''
+  };
+  if (!isObject(schema) || typeof schema === 'string') {
+    return schema ? __assign(__assign({}, base), {
+      content: schema.toString()
+    }) : undefined;
+  }
+  var className = schema.className,
+    content = schema.content,
+    rest = __rest(schema, ["className", "content"]);
+  return content ? __assign(__assign(__assign(__assign({}, base), rest), className ? {
+    className: "".concat(base.className, " ").concat(rest.className)
+  } : {}), {
+    content: content
+  }) : undefined;
+};
+var normalizCollapsedGroup = function (publicProps, body) {
+  if (publicProps === void 0) {
+    publicProps = {};
+  }
+  return body ? Array.isArray(body) ? body.filter(function (item) {
+    return item;
+  }).map(function (item, index) {
+    return __assign(__assign(__assign(__assign({}, publicProps), {
+      key: item.key || index.toString()
+    }), item), {
+      body: flatten(item.body)
+    });
+  }) : [__assign(__assign(__assign({}, publicProps), {
+    key: '0'
+  }), body)] : [];
+};
+/**
+ * 更新/归一化处理表单项
+ *
+ * @param defaultBody 默认配置
+ * @param body 输入配置
+ * @param replace 是否完全替换
+ * @returns
+ */
+var normalizeBodySchema = function (defaultBody, body, replace, reverse, order) {
+  if (replace === void 0) {
+    replace = false;
+  }
+  if (reverse === void 0) {
+    reverse = false;
+  }
+  var normalizedBody = body ? Array.isArray(body) ? body.concat() : [body] : [];
+  var schema = flatten(replace ? normalizedBody : reverse ? __spreadArray(__spreadArray([], normalizedBody, true), defaultBody, true) : __spreadArray(__spreadArray([], defaultBody, true), normalizedBody, true));
+  return schema;
+};
+/**
+ * 表单项组件面板
+ *
+ * @param {Object=} panels
+ * @param {string=} key
+ * `property` 属性
+ *     `common` 基本
+ *     `status` 状态
+ *     `validation` 校验
+ * `style` 样式
+ * `event` 事件
+ * @param {string=} panels.body - 配置面板Schema
+ * @param {boolean=} panels.replace - 是否完全替换默认Schema，默认追加
+ * @param {Array} panels.validation.validationType - 默认显示的校验类型
+ */
+var formItemControl = function (panels, context) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+  var type = ((_a = context === null || context === void 0 ? void 0 : context.schema) === null || _a === void 0 ? void 0 : _a.type) || '';
+  var supportStatic = SUPPORT_STATIC_FORMITEM_CMPTS.includes(type);
+  var collapseProps = {
+    type: 'collapse',
+    headingClassName: 'ae-formItemControl-header',
+    bodyClassName: 'ae-formItemControl-body'
+  };
+  // 已经配置了的属性
+  Object.keys((_b = context === null || context === void 0 ? void 0 : context.schema) !== null && _b !== void 0 ? _b : {});
+  // 选项面版内容，支持Option的组件才展示该面板
+  var optionBody = normalizeBodySchema([], (_c = panels === null || panels === void 0 ? void 0 : panels.option) === null || _c === void 0 ? void 0 : _c.body, (_d = panels === null || panels === void 0 ? void 0 : panels.option) === null || _d === void 0 ? void 0 : _d.replace);
+  // 属性面板配置
+  var collapseGroupBody = (panels === null || panels === void 0 ? void 0 : panels.property) ? normalizCollapsedGroup(collapseProps, panels === null || panels === void 0 ? void 0 : panels.property) : __spreadArray(__spreadArray([__assign(__assign({}, collapseProps), {
+    header: i18n("4092ed98e9035652d4c9ca9441701ed7"),
+    key: 'common',
+    body: normalizeBodySchema([getSchemaTpl('formItemName', {
+      required: true
+    }), getSchemaTpl('label'), getSchemaTpl('labelRemark'), getSchemaTpl('remark'), getSchemaTpl('placeholder'), getSchemaTpl('description')], (_e = panels === null || panels === void 0 ? void 0 : panels.common) === null || _e === void 0 ? void 0 : _e.body, (_f = panels === null || panels === void 0 ? void 0 : panels.common) === null || _f === void 0 ? void 0 : _f.replace, (_g = panels === null || panels === void 0 ? void 0 : panels.common) === null || _g === void 0 ? void 0 : _g.reverse)
+  })], optionBody.length !== 0 ? [__assign(__assign({}, collapseProps), {
+    header: ((_h = panels === null || panels === void 0 ? void 0 : panels.option) === null || _h === void 0 ? void 0 : _h.title) || i18n("ea15ae2b7fba76c83eec6d0986d15197"),
+    key: 'option',
+    body: optionBody
+  })] : [], true), [__assign(__assign({}, collapseProps), {
+    header: i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
+    key: 'status',
+    body: normalizeBodySchema([getSchemaTpl('hidden'), supportStatic ? getSchemaTpl('static') : null,
+    // TODO: 下面的部分表单项才有，是不是判断一下是否是表单项
+    getSchemaTpl('disabled'), getSchemaTpl('clearValueOnHidden')], (_j = panels === null || panels === void 0 ? void 0 : panels.status) === null || _j === void 0 ? void 0 : _j.body, (_k = panels === null || panels === void 0 ? void 0 : panels.status) === null || _k === void 0 ? void 0 : _k.replace, (_l = panels === null || panels === void 0 ? void 0 : panels.status) === null || _l === void 0 ? void 0 : _l.reverse)
+  })], false);
+  return [{
+    type: 'tabs',
+    tabsMode: 'line',
+    className: 'editor-prop-config-tabs',
+    linksClassName: 'editor-prop-config-tabs-links',
+    contentClassName: 'no-border editor-prop-config-tabs-cont',
+    tabs: __spreadArray([{
+      title: i18n("24d67862f87f439db7ca957aecb77cce"),
+      className: 'p-none',
+      body: [{
+        type: 'collapse-group',
+        expandIconPosition: 'right',
+        expandIcon: {
+          type: 'icon',
+          icon: 'chevron-right'
+        },
+        className: 'ae-formItemControl',
+        activeKey: collapseGroupBody.map(function (group, index) {
+          return group.key;
+        }),
+        body: collapseGroupBody
+      }]
+    }, {
+      title: i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+      body: normalizeBodySchema(__spreadArray([getSchemaTpl('formItemMode'), getSchemaTpl('horizontalMode'), getSchemaTpl('horizontal', {
+        label: '',
+        visibleOn: 'data.mode == "horizontal" && data.label !== false && data.horizontal'
+      }),
+      // renderer.sizeMutable !== false
+      //   ? getSchemaTpl('formItemSize')
+      //   : null,
+      getSchemaTpl('formItemInline'), getSchemaTpl('className'), getSchemaTpl('className', {
+        label: i18n("6d0034a2419e1f394dedab07994b9665"),
+        name: 'labelClassName'
+      }), getSchemaTpl('className', {
+        label: i18n("2cadb6621afe19333b142faa541b0f91"),
+        name: 'inputClassName'
+      }), getSchemaTpl('className', {
+        label: i18n("0e627e6a0ff773ee76bc4cc0871cb48d"),
+        name: 'descriptionClassName',
+        visibleOn: 'this.description'
+      })], !supportStatic ? [] : [getSchemaTpl('className', {
+        label: i18n("3e573fd37473d789211ee44335d82fad"),
+        name: 'staticClassName'
+      })], true), (_m = panels === null || panels === void 0 ? void 0 : panels.style) === null || _m === void 0 ? void 0 : _m.body, (_o = panels === null || panels === void 0 ? void 0 : panels.style) === null || _o === void 0 ? void 0 : _o.replace, (_p = panels === null || panels === void 0 ? void 0 : panels.style) === null || _p === void 0 ? void 0 : _p.reverse)
+    }], isObject(context) && !((_q = panels === null || panels === void 0 ? void 0 : panels.event) === null || _q === void 0 ? void 0 : _q.hidden) ? [{
+      title: i18n("10b2761db5a8e089049df39675abc550"),
+      className: 'p-none',
+      body: normalizeBodySchema([getSchemaTpl('eventControl', __assign({
+        name: 'onEvent'
+      }, getEventControlConfig(context.info.plugin.manager, context)))], (_r = panels === null || panels === void 0 ? void 0 : panels.event) === null || _r === void 0 ? void 0 : _r.body, (_s = panels === null || panels === void 0 ? void 0 : panels.event) === null || _s === void 0 ? void 0 : _s.replace)
+    }] : [], true)
+  }];
+};
+/**
+ * 信息提示组件模版
+ */
+function remarkTpl(config) {
+  return {
+    type: 'ae-switch-more',
+    formType: 'dialog',
+    className: 'ae-switch-more-flex',
+    label: config.labelRemark ? tipedLabel(config.label, config.labelRemark) : config.label,
+    bulk: false,
+    name: config.name,
+    pipeIn: function (value) {
+      return !!value;
+    },
+    pipeOut: function (value) {
+      // 更新内容
+      if (isObject(value)) {
+        return value;
+      }
+      // 关到开
+      if (value) {
+        return {
+          icon: 'fa fa-question-circle',
+          trigger: ['hover'],
+          className: 'Remark--warning',
+          placement: 'top'
+        };
+      }
+      // 开到关
+      return undefined;
+    },
+    form: {
+      size: 'md',
+      className: 'mb-8',
+      mode: 'horizontal',
+      horizontal: {
+        left: 4,
+        right: 8,
+        justify: true
+      },
+      body: {
+        type: 'grid',
+        className: 'pt-4 right-panel-pop',
+        gap: 'lg',
+        columns: [{
+          md: '6',
+          body: [{
+            name: 'title',
+            type: 'input-text',
+            label: i18n("dc19704991f1476fa4dcbb80c50bedd6"),
+            placeholder: i18n("55713166f8bddcc0aefc3a32464746f1")
+          }, {
+            name: 'content',
+            type: 'textarea',
+            label: i18n("2d711b09bd0db0ad240cc83b30dd8014")
+          }]
+        }, {
+          md: '6',
+          body: [{
+            name: 'placement',
+            type: 'button-group-select',
+            size: 'md',
+            label: i18n("59b9e2022323a63079c6ddab63fec112"),
+            options: [{
+              label: i18n("af767b7e4ae069d54f9ea839858d4c6d"),
+              value: 'top'
+            }, {
+              label: i18n("3850a186c3235bc646d4c2f79cebac36"),
+              value: 'bottom'
+            }, {
+              label: i18n("d2aff1417831aa621c16cd5b95306b4b"),
+              value: 'left'
+            }, {
+              label: i18n("4d9c32c23df5d234e629c922c58d8e12"),
+              value: 'right'
+            }]
+          }, {
+            type: 'icon-select',
+            name: 'icon',
+            label: i18n("5ef69f62dc668c1a3e68b51c50a2530a")
+          }, {
+            name: 'className',
+            label: i18n("4434b33a8731a73613ba5fa1eb984efb"),
+            type: 'input-text',
+            labelRemark: BaseLabelMark(i18n("f10b676db977ae808af8d96b327be7f3"))
+          }, {
+            name: 'trigger',
+            type: 'select',
+            label: i18n("159dbc2fafd57b9d3652f16659b1b519"),
+            labelRemark: BaseLabelMark(i18n("45a51525391d4a3771b22f2cf1aa96b3")),
+            multiple: true,
+            pipeIn: function (value) {
+              return Array.isArray(value) ? value.join(',') : [];
+            },
+            pipeOut: function (value) {
+              return value && value.length ? value.split(',') : ['hover'];
+            },
+            options: [{
+              label: i18n("728c7cdfa431821d291b5108394ec65a"),
+              value: 'hover'
+            }, {
+              label: i18n("4363c17ebb346b646af55bd8c8075915"),
+              value: 'click'
+            }]
+          }, {
+            name: 'rootClose',
+            visibleOn: '~this.trigger.indexOf("click")',
+            label: i18n("5632c68dac780bd766f740830481f4b0"),
+            type: 'switch',
+            mode: 'row',
+            inputClassName: 'inline-flex justify-between flex-row-reverse'
+          }]
+        }]
+      }
+    }
+  };
+}
+
+export { BUTTON_DEFAULT_ACTION, BaseLabelMark, formItemControl, remarkTpl };

package/esm/component/InputComponentName.js

@@ -0,0 +1,41 @@
+/**
+ * amis-editor v5.2.1-beta.15
+ * Copyright 2018-2022 @fex
+ */
+
+import { useState, useEffect } from 'react';
+
+function InputComponentName(props) {
+    var value = props.value, onChange = props.onChange, render = props.render, name = props.name, node = props.node, placeholder = props.placeholder;
+    var _a = useState([]), options = _a[0], setOptions = _a[1];
+    useEffect(function () {
+        var thisComp = node === null || node === void 0 ? void 0 : node.getComponent();
+        var scoped = thisComp === null || thisComp === void 0 ? void 0 : thisComp.context;
+        var comps = [];
+        while (scoped === null || scoped === void 0 ? void 0 : scoped.getComponents) {
+            scoped.getComponents().forEach(function (c) {
+                if (c.props.name && c !== thisComp) {
+                    // todo 把孩子节点拼装成 xxx.xxx
+                    comps.push(c.props.name);
+                }
+            });
+            scoped = scoped.parent;
+        }
+        setOptions(comps);
+    }, [node]);
+    function onInnerChange(value) {
+        onChange(value);
+        return false;
+    }
+    return render('inner', {
+        type: 'input-text',
+        name: name,
+        placeholder: placeholder
+    }, {
+        value: value,
+        onChange: onInnerChange,
+        options: options
+    });
+}
+
+export { InputComponentName };

package/esm/component/TableViewEditor.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @file tableview 相关的可视化编辑，拖动行高等
+ */
+import React from 'react';
+import { TableViewSchema } from 'amis/lib/renderers/TableView';
+import { EditorManager } from 'amis-editor-core';
+import { EditorStoreType } from 'amis-editor-core';
+interface TableViewEditorProps {
+    schema: TableViewSchema;
+    manager: EditorManager;
+}
+interface TableViewEditorState {
+    trIds: string[];
+    tdIds: string[];
+    displayMergeCell: boolean;
+}
+export declare class TableViewEditor extends React.Component<TableViewEditorProps, TableViewEditorState> {
+    tableViewWrapperRef: React.RefObject<HTMLDivElement>;
+    draggingId: string;
+    draggingElement: HTMLElement;
+    draggingElementTop: number;
+    draggingElementLeft: number;
+    startX: number;
+    startY: number;
+    maxChildTrIndex: number;
+    store: EditorStoreType;
+    isSelectionCell: boolean;
+    selectedCell: {
+        [cellId: string]: any;
+    };
+    preventTableClick: boolean;
+    constructor(props: TableViewEditorProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    syncLineState(): void;
+    removeListenTdSelection(): void;
+    listenTdSelection(): void;
+    handleCellMouseDown(e: MouseEvent): void;
+    handleCellMouseMove(e: MouseEvent): void;
+    findFirstAndLastCell(): {
+        minRow: number;
+        minCol: number;
+        maxRow: number;
+        maxCol: number;
+        firstCell: any;
+        lastCell: null;
+    };
+    /**
+     * 选择 td 主要是为了单元格合并，它要求是必须是矩形，比如下面的例子
+     *		┌───┬───┬───┬───┐
+     *		│ a │ b │ c │ d │
+     *		├───┴───┼───┤   │
+     *		│ e     │ f │   │
+     *		│       ├───┼───┤
+     *		│       │ g │ h │
+     *		└───────┴───┴───┘
+     * 直接选 a 和 c 是不行的，无法进行单元格合并，所以需要补上 b
+     * 如果选择了 e 和 f，需要自动选择 g 来让整体变成矩形
+     * 这个函数的主要作用就是将矩形补充完整
+     */
+    markSelectingCell(): void;
+    removeAllSelectionMark(): void;
+    handleCellMouseUp(e: MouseEvent): void;
+    handleCellMouseClick(e: MouseEvent): void;
+    handleMergeCell(): void;
+    syncLinePos(): void;
+    componentDidUpdate(prevProps: TableViewEditorProps): void;
+    lineMouseDownCommon(e: React.MouseEvent<HTMLElement>): void;
+    handleRowMouseDown(e: React.MouseEvent<HTMLElement>): void;
+    handleRowMouseMove(e: MouseEvent): void;
+    handleRowMouseUp(e: MouseEvent): void;
+    handleColMouseDown(e: React.MouseEvent<HTMLElement>): void;
+    handleColMouseMove(e: MouseEvent): void;
+    handleColMouseUp(e: MouseEvent): void;
+    handleLineClick(e: MouseEvent): void;
+    renderMergeIcon(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export {};