amis-editor 4.0.1-beta.16 → 4.0.1-beta.18

package/dist/component/Control/OptionControl.d.ts

@@ -0,0 +1,163 @@
+/**
+ * @file 组件选项组件的可视化编辑控件
+ */
+import React from 'react';
+import Sortable from 'sortablejs';
+import type { Option } from 'amis';
+import type { FormControlProps } from 'amis/lib/renderers/Form/Item';
+import type { OptionValue } from 'amis/lib/components/Select';
+export declare type valueType = 'text' | 'boolean' | 'number';
+export interface PopoverForm {
+    optionLabel: string;
+    optionValue: any;
+    optionValueType: valueType;
+}
+export declare type OptionControlItem = Option & {
+    checked: boolean;
+};
+export interface OptionControlProps extends FormControlProps {
+    className?: string;
+}
+export interface OptionControlState {
+    options: Array<OptionControlItem>;
+    popOverData: any;
+    popOverCtx?: {
+        mode: 'add' | 'edit';
+        index?: number;
+    };
+    source: 'custom' | 'api' | 'form';
+    sourceOptions: Array<Option>;
+}
+export declare class OptionControl extends React.Component<OptionControlProps, OptionControlState> {
+    sortable?: Sortable;
+    drag?: HTMLElement | null;
+    target: HTMLElement | null;
+    internalProps: string[];
+    constructor(props: OptionControlProps);
+    componentDidUpdate(prevProps: OptionControlProps): void;
+    /**
+     * 获取当前选项值的类型
+     */
+    getOptionValueType(value: any): valueType;
+    /**
+     * 将当前选项值转换为选择的类型
+     */
+    normalizeOptionValue(value: any, valueType: valueType): string | number | boolean;
+    /**
+     * 处理填入输入框的值
+     */
+    transformOptionValue(value: any): string;
+    transformOptions(props: OptionControlProps): {
+        checked: boolean;
+        label?: string | undefined;
+        scopeLabel?: string | undefined;
+        value?: any;
+        disabled?: boolean | undefined;
+        children?: import("amis").Options | undefined;
+        visible?: boolean | undefined;
+        hidden?: boolean | undefined;
+        description?: string | undefined;
+        defer?: boolean | undefined;
+        deferApi?: import("amis").SchemaApi | undefined;
+        loading?: boolean | undefined;
+        loaded?: boolean | undefined;
+    }[];
+    /**
+     * 处理当前组件的默认值
+     */
+    normalizeValue(): OptionValue | OptionValue[];
+    /**
+     * 更新options字段的统一出口
+     */
+    onChangeOptions(): void;
+    targetRef(ref: any): void;
+    dragRef(ref: any): void;
+    initDragging(): void;
+    destroyDragging(): void;
+    scroll2Bottom(): void;
+    /**
+     * 切换选项类型
+     */
+    handleSourceChange(option: {
+        label: string;
+        value: 'custom' | 'api' | 'form';
+    }): void;
+    /**
+     * 删除选项
+     */
+    handleDelete(index: number, e: React.UIEvent<any>): void;
+    /**
+     * 设置默认选项
+     */
+    handleToggleDefaultValue(index: number, checked: any, shift?: boolean): void;
+    /**
+     * 编辑选项
+     */
+    handleEdit(index: number, e: React.UIEvent<any>): void;
+    handleEditLabel(index: number, e: React.FocusEvent<HTMLInputElement>): void;
+    handleAdd(): void;
+    handlePopoverSubmit(values: PopoverForm, action: any): void;
+    closePopoverEdit(): boolean;
+    handleBatchAdd(values: {
+        batchOption: string;
+    }, action: any): void;
+    renderHeader(): JSX.Element;
+    renderOption(props: any): JSX.Element;
+    renderPopover(): JSX.Element;
+    buildBatchAddSchema(): {
+        type: string;
+        actionType: string;
+        level: string;
+        size: string;
+        label: string;
+        dialog: {
+            title: string;
+            headerClassName: string;
+            closeOnEsc: boolean;
+            closeOnOutside: boolean;
+            showCloseButton: boolean;
+            body: ({
+                type: string;
+                level: string;
+                body: 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;
+            })[];
+        };
+    };
+    render(): JSX.Element;
+}
+export declare class OptionControlRenderer extends OptionControl {
+}

package/dist/component/Control/PopoverEdit.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @file 浮窗编辑
+ */
+import React from 'react';
+import type { Action } from 'amis/lib/types';
+import type { IScopedContext } from 'amis/lib/Scoped';
+import type { FormSchema } from 'amis/lib/renderers/Form';
+import type { FormControlProps } from 'amis/lib/renderers/Form/Item';
+import type { Offset } from 'amis/lib/components/PopOver';
+export interface PopoverEditProps extends FormControlProps {
+    className?: string;
+    popOverclassName?: string;
+    btnLabel?: string;
+    btnIcon?: string;
+    iconPosition?: 'right' | 'left';
+    mode: 'popover' | 'dialog';
+    form: Omit<FormSchema, 'type'>;
+    rootClose?: boolean;
+    placement?: string;
+    offset?: ((clip: object, offset: object) => Offset) | Offset;
+    style?: object;
+    overlay?: boolean;
+    container?: React.ReactNode | Function;
+    target?: React.ReactNode | Function;
+    trueValue?: any;
+    falseValue?: any;
+    enableEdit?: boolean;
+    removable?: boolean;
+    onClose: (e: React.UIEvent<any> | void) => void;
+}
+interface PopoverEditState {
+    /**
+     * 是否展示编辑窗口
+     */
+    show: boolean;
+    /**
+     * 是否开启编辑
+     */
+    checked: boolean;
+}
+export declare class PopoverEdit extends React.Component<PopoverEditProps, PopoverEditState> {
+    static defaultProps: Pick<PopoverEditProps, 'btnIcon' | 'iconPosition' | 'container' | 'placement' | 'overlay' | 'rootClose' | 'mode' | 'trueValue' | 'falseValue' | 'enableEdit'>;
+    overlay: HTMLElement | null;
+    constructor(props: PopoverEditProps);
+    overlayRef(ref: any): void;
+    openPopover(): void;
+    closePopover(): void;
+    handleDelete(e: React.UIEvent<any> | void): void;
+    handleSwitchChange(checked: boolean): void;
+    handleSubmit(values: any, action: any): void;
+    handleAction(e: React.UIEvent<any> | void, action: Action, data: object, throwErrors?: boolean, delegate?: IScopedContext): void;
+    renderPopover(): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class PopoverEditRenderer extends PopoverEdit {
+}
+export {};

package/dist/component/Control/ValidationControl.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @file 表单项校验配置
+ */
+/// <reference types="lodash" />
+import React from 'react';
+import type { FormControlProps } from 'amis/lib/renderers/Form/Item';
+export interface ValidationControlProps extends FormControlProps {
+}
+interface Rule {
+    label: string;
+    key: string;
+    value: boolean | string | number;
+    checked: boolean;
+    message?: string;
+}
+interface ValidationControlState {
+    rules: Array<Rule>;
+}
+export declare class ValidationControl extends React.Component<ValidationControlProps, ValidationControlState> {
+    validationRules: Record<string, string>;
+    constructor(props: ValidationControlProps);
+    transformRules(): Rule[];
+    normalizeRules(): import("lodash").Dictionary<boolean | Record<string, any>>;
+    handleAddRule(): void;
+    handleSubmit(values: any, action: any): void;
+    render(): JSX.Element;
+}
+export declare class ValidationControlRenderer extends ValidationControl {
+}
+export {};

package/dist/component/Panel/LeftPanels.d.ts

@@ -7,7 +7,6 @@ interface LeftPanelsProps {
     theme?: string;
 }
 interface LeftPanelsStates {
-    isOpenStatus: boolean;
     isFixedStatus: boolean;
 }
 export declare class LeftPanels extends React.Component<LeftPanelsProps, LeftPanelsStates> {

package/dist/component/base/SearchRendererPanel.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { EditorStoreType } from '../../store/editor';
+import { SubRendererInfo } from '../../plugin';
+interface SearchRendererProps {
+    store: EditorStoreType;
+}
+interface SearchRendererStates {
+    subRenderersByOrder: Array<SubRendererInfo>;
+    groupedSubRenderers: {
+        [propName: string]: Array<SubRendererInfo>;
+    };
+    searchSubRenderers: {
+        [propName: string]: Array<SubRendererInfo>;
+    };
+    visible: boolean;
+    curKeyword: string;
+    curKeywordSearchHistory: string[];
+    toggleTagFolderStatus: boolean;
+}
+export default class SearchRendererPanel extends React.Component<SearchRendererProps, SearchRendererStates> {
+    ref: React.RefObject<HTMLDivElement>;
+    curInputBox: any;
+    localStorageKey: string;
+    curTagFolded: {
+        [propName: string]: boolean;
+    };
+    lastSubRenderersTag: string;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentWillReceiveProps(nextProps: any): void;
+    componentWillUnmount(): void;
+    bindFocusEvent(): void;
+    bindBlurEvent(): void;
+    searchSubRenderersByKeyword(keywords: string): void;
+    changeTagFoldStatus(tagKey: string, event: any): void;
+    bindEnterEvent(event: any): void;
+    bindClearActionEvent(): void;
+    bindTagClickEvent(tag: string): void;
+    getSearchHistory(): any[];
+    addSearchHistory(newKeywords: string): void;
+    clickKeywordEvent(keywords: string): void;
+    deleteSearchHistory(event: any, newKeywords: string): void;
+    clearSearchHistory(event: any): void;
+    updateSearchHistory(): void;
+    renderNameByKeyword(rendererName: string, curKeyword: string): string | JSX.Element;
+    resultIsHasScroll(searchSubRenderers: {
+        [propName: string]: Array<SubRendererInfo>;
+    }, maxShowLine: number): boolean;
+    render(): JSX.Element;
+}
+export {};

package/dist/component/remarkTpl.d.ts

@@ -0,0 +1,150 @@
+/**
+ * @description 信息提示组件模版
+ * @file src/component/remarkTpl.tsx
+ * @author hanxiao11@baidu.com
+ */
+export default function remarkTpl(config: {
+    name: 'remark' | 'labelRemark';
+    label: string;
+}): {
+    type: string;
+    label: string;
+    mode: string;
+    className: string;
+    labelRemark: {
+        icon: string;
+        trigger: string[];
+        setting: boolean;
+        title: string;
+        content: string;
+        placement: string;
+    };
+    body: {
+        type: string;
+        className: string;
+        body: ({
+            type: string;
+            name: "remark" | "labelRemark";
+            label: string;
+            btnLabel: string;
+            visibleOn: string;
+            className: string;
+            itemClassName: string;
+            icon: string;
+            form: {
+                title: string;
+                mode: string;
+                size: string;
+                body: {
+                    type: 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;
+                        } | {
+                            name: string;
+                            label: string;
+                            type: string;
+                            size?: undefined;
+                            options?: undefined;
+                            labelRemark?: undefined;
+                            multiple?: undefined;
+                            pipeIn?: undefined;
+                            pipeOut?: undefined;
+                            visibleOn?: undefined;
+                        } | {
+                            name: string;
+                            label: string;
+                            type: string;
+                            labelRemark: {
+                                trigger: string;
+                                className: string;
+                                rootClose: boolean;
+                                content: string;
+                                placement: string;
+                            };
+                            size?: undefined;
+                            options?: undefined;
+                            multiple?: undefined;
+                            pipeIn?: undefined;
+                            pipeOut?: undefined;
+                            visibleOn?: undefined;
+                        } | {
+                            name: string;
+                            type: string;
+                            label: string;
+                            multiple: boolean;
+                            pipeIn: (value: any) => string | never[];
+                            pipeOut: (value: any) => any;
+                            options: {
+                                label: string;
+                                value: string;
+                            }[];
+                            size?: undefined;
+                            labelRemark?: undefined;
+                            visibleOn?: undefined;
+                        } | {
+                            name: string;
+                            visibleOn: string;
+                            label: string;
+                            type: string;
+                            size?: undefined;
+                            options?: undefined;
+                            labelRemark?: undefined;
+                            multiple?: undefined;
+                            pipeIn?: undefined;
+                            pipeOut?: undefined;
+                        })[];
+                    })[];
+                };
+            };
+            mode?: undefined;
+            pipeIn?: undefined;
+            pipeOut?: undefined;
+        } | {
+            type: string;
+            name: "remark" | "labelRemark";
+            mode: string;
+            pipeIn: (value: any) => boolean;
+            pipeOut: (value: any) => {
+                icon: string;
+                trigger: string[];
+                className: string;
+                setting: boolean;
+                placement: string;
+            } | null;
+            label?: undefined;
+            btnLabel?: undefined;
+            visibleOn?: undefined;
+            className?: undefined;
+            itemClassName?: undefined;
+            icon?: undefined;
+            form?: undefined;
+        })[];
+    }[];
+};

package/dist/index.d.ts

@@ -3,6 +3,10 @@
  */
 import Editor from './component/Editor';
 import './component/ClassNameControl';
+import './component/Control/OptionControl';
+import './component/Control/APIControl';
+import './component/Control/ValidationControl';
+import './component/Control/PopoverEdit';
 import './plugin/Panel/AvailableRenderers';
 import './plugin/Panel/Code';
 import './plugin/Panel/Name';