amis 2.0.0-rc.10 → 2.0.0-rc.16

package/esm/renderers/Form/InputFormula.d.ts

@@ -0,0 +1,91 @@
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import type { FormBaseControlSchema, SchemaIcon } from '../../Schema';
+import type { FuncGroup, VariableItem } from 'amis-ui/lib/components/formula/Editor';
+/**
+ * InputFormula 公式编辑器
+ * 文档：https://baidu.gitee.io/amis/zh-CN/components/form/input-formula
+ */
+export interface InputFormulaControlSchema extends FormBaseControlSchema {
+    type: 'input-formula';
+    /**
+     * evalMode 即直接就是表达式，否则
+     * 需要 ${这里面才是表达式}
+     * 默认为 true
+     */
+    evalMode?: boolean;
+    /**
+     * 用于提示的变量集合，默认为空
+     */
+    variables: Array<VariableItem>;
+    /**
+     * 变量展现模式，可选值：'tabs' ｜ 'tree'
+     */
+    variableMode?: 'tabs' | 'tree';
+    /**
+     * 函数集合，默认不需要传，即  amis-formula 里面那个函数
+     * 如果有扩充，则需要传。
+     */
+    functions: Array<FuncGroup>;
+    /**
+     * 编辑器标题
+     */
+    title?: string;
+    /**
+     * 顶部标题，默认为表达式
+     */
+    header: string;
+    /**
+     * 控件模式
+     */
+    inputMode?: 'button' | 'input-button' | 'input-group';
+    /**
+     * 外层input是否允许输入，否需要点击fx在弹窗中输入
+     */
+    allowInput?: boolean;
+    /**
+     * 按钮图标
+     */
+    icon?: SchemaIcon;
+    /**
+     * 按钮Label，inputMode为button时生效
+     */
+    btnLabel?: string;
+    /**
+     * 按钮样式
+     */
+    level?: 'info' | 'success' | 'warning' | 'danger' | 'link' | 'primary' | 'dark' | 'light';
+    /**
+     * 按钮大小
+     */
+    btnSize?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * 边框模式，全边框，还是半边框，或者没边框。
+     */
+    borderMode?: 'full' | 'half' | 'none';
+    /**
+     * 输入框占位符
+     */
+    placeholder?: string;
+    /**
+     * 变量面板CSS样式类名
+     */
+    variableClassName?: string;
+    /**
+     * 函数面板CSS样式类名
+     */
+    functionClassName?: string;
+    /**
+     * 当前输入项字段 name: 用于避免循环绑定自身导致无限渲染
+     */
+    selfVariableName?: string;
+}
+export interface InputFormulaProps extends FormControlProps, Omit<InputFormulaControlSchema, 'options' | 'inputClassName' | 'className' | 'descriptionClassName'> {
+}
+export declare class InputFormulaRenderer extends React.Component<InputFormulaProps> {
+    static defaultProps: Pick<InputFormulaControlSchema, 'inputMode' | 'borderMode' | 'evalMode'>;
+    ref: any;
+    formulaRef(ref: any): void;
+    validate(): any;
+    render(): JSX.Element;
+}

package/esm/renderers/Form/InputFormula.js

@@ -0,0 +1,67 @@
+/**
+ * amis v2.0.0-rc.16
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { isPureVariable, resolveVariableAndFilter, autobind, FormItem } from 'amis-core';
+import { FormulaPicker } from 'amis-ui';
+
+/** @class */ ((function (_super) {
+    __extends(InputFormulaRenderer, _super);
+    function InputFormulaRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    InputFormulaRenderer.prototype.formulaRef = function (ref) {
+        if (ref) {
+            while (ref && ref.getWrappedInstance) {
+                ref = ref.getWrappedInstance();
+            }
+            this.ref = ref;
+        }
+        else {
+            this.ref = undefined;
+        }
+    };
+    InputFormulaRenderer.prototype.validate = function () {
+        var _a;
+        var _b = this.props, __ = _b.translate, value = _b.value;
+        if (((_a = this.ref) === null || _a === void 0 ? void 0 : _a.validate) && value) {
+            var res = this.ref.validate(value);
+            if (res !== true) {
+                return __('FormulaEditor.invalidData', { err: res });
+            }
+        }
+    };
+    InputFormulaRenderer.prototype.render = function () {
+        var _a = this.props; _a.selectedOptions; var disabled = _a.disabled, onChange = _a.onChange, evalMode = _a.evalMode, variableMode = _a.variableMode, header = _a.header, label = _a.label, value = _a.value, clearable = _a.clearable, className = _a.className; _a.classPrefix; _a.classnames; var _b = _a.allowInput, allowInput = _b === void 0 ? true : _b, borderMode = _a.borderMode, placeholder = _a.placeholder, inputMode = _a.inputMode, btnLabel = _a.btnLabel, level = _a.level, btnSize = _a.btnSize, icon = _a.icon, title = _a.title, variableClassName = _a.variableClassName, functionClassName = _a.functionClassName, data = _a.data, onPickerOpen = _a.onPickerOpen, selfVariableName = _a.selfVariableName;
+        var _c = this.props, variables = _c.variables, functions = _c.functions;
+        if (isPureVariable(variables)) {
+            // 如果 variables 是 ${xxx} 这种形式，将其处理成实际的值
+            variables = resolveVariableAndFilter(variables, this.props.data, '| raw');
+        }
+        if (isPureVariable(functions)) {
+            // 如果 functions 是 ${xxx} 这种形式，将其处理成实际的值
+            functions = resolveVariableAndFilter(functions, this.props.data, '| raw');
+        }
+        return (React.createElement(FormulaPicker, { ref: this.formulaRef, className: className, value: value, disabled: disabled, allowInput: allowInput, onChange: onChange, evalMode: evalMode, variables: variables, variableMode: variableMode, functions: functions, header: header || label || '', borderMode: borderMode, placeholder: placeholder, mode: inputMode, btnLabel: btnLabel, level: level, btnSize: btnSize, icon: icon, title: title, clearable: clearable, variableClassName: variableClassName, functionClassName: functionClassName, data: data, onPickerOpen: onPickerOpen, selfVariableName: selfVariableName }));
+    };
+    InputFormulaRenderer.defaultProps = {
+        inputMode: 'input-button',
+        borderMode: 'full',
+        evalMode: true
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], InputFormulaRenderer.prototype, "formulaRef", null);
+    InputFormulaRenderer = __decorate([
+        FormItem({
+            type: 'input-formula'
+        })
+    ], InputFormulaRenderer);
+    return InputFormulaRenderer;
+})(React.Component));

package/esm/renderers/Form/InputGroup.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import { IFormStore } from 'amis-core';
+import { FormBaseControlSchema, SchemaCollection } from '../../Schema';
+/**
+ * InputGroup
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/input-group
+ */
+export interface InputGroupControlSchema extends FormBaseControlSchema {
+    type: 'input-group';
+    /**
+     * FormItem 集合
+     */
+    body: SchemaCollection;
+}
+export interface InputGroupProps extends FormControlProps {
+    body: Array<any>;
+    formStore: IFormStore;
+}
+interface InputGroupState {
+    isFocused: boolean;
+}
+export declare class InputGroup extends React.Component<InputGroupProps, InputGroupState> {
+    constructor(props: InputGroupProps);
+    handleFocus(): void;
+    handleBlur(): void;
+    renderControl(control: any, index: any, otherProps?: any): JSX.Element | null;
+    validate(): "" | string[];
+    render(): JSX.Element;
+}
+export default class InputGroupRenderer extends InputGroup {
+}
+export {};

package/esm/renderers/Form/InputGroup.js

@@ -0,0 +1,111 @@
+/**
+ * amis v2.0.0-rc.16
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate } from 'tslib';
+import React from 'react';
+import { getExprProperties, makeHorizontalDeeper, FormItem } from 'amis-core';
+
+var InputGroup = /** @class */ (function (_super) {
+    __extends(InputGroup, _super);
+    function InputGroup(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleFocus = _this.handleFocus.bind(_this);
+        _this.handleBlur = _this.handleBlur.bind(_this);
+        _this.state = {
+            isFocused: false
+        };
+        return _this;
+    }
+    InputGroup.prototype.handleFocus = function () {
+        this.setState({
+            isFocused: true
+        });
+    };
+    InputGroup.prototype.handleBlur = function () {
+        this.setState({
+            isFocused: false
+        });
+    };
+    InputGroup.prototype.renderControl = function (control, index, otherProps) {
+        var _a = this.props, render = _a.render, onChange = _a.onChange;
+        if (!control) {
+            return null;
+        }
+        var subSchema = control;
+        return render("".concat(index), subSchema, __assign({ onChange: onChange }, otherProps));
+    };
+    InputGroup.prototype.validate = function () {
+        var formItem = this.props.formItem;
+        var errors = [];
+        // issue 处理这个，按理不需要这么弄。
+        formItem === null || formItem === void 0 ? void 0 : formItem.subFormItems.forEach(function (item) {
+            if (item.errors.length) {
+                errors.push.apply(errors, item.errors);
+            }
+        });
+        return errors.length ? errors : '';
+    };
+    InputGroup.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, body = _a.body, controls = _a.controls, className = _a.className; _a.mode; var horizontal = _a.horizontal; _a.formMode; var formHorizontal = _a.formHorizontal, data = _a.data, cx = _a.classnames;
+        var inputs = Array.isArray(controls) ? controls : body;
+        if (!Array.isArray(inputs)) {
+            inputs = [];
+        }
+        inputs = inputs.filter(function (item) {
+            if (item && (item.hidden || item.visible === false)) {
+                return false;
+            }
+            var exprProps = getExprProperties(item || {}, data);
+            if (exprProps.hidden || exprProps.visible === false) {
+                return false;
+            }
+            return true;
+        });
+        var horizontalDeeper = horizontal ||
+            (formHorizontal
+                ? makeHorizontalDeeper(formHorizontal, inputs.length)
+                : undefined);
+        return (React.createElement("div", { className: cx("InputGroup", className, {
+                'is-focused': this.state.isFocused
+            }) }, inputs.map(function (control, index) {
+            var isAddOn = ~[
+                'icon',
+                'plain',
+                'tpl',
+                'button',
+                'submit',
+                'reset'
+            ].indexOf(control && control.type);
+            var dom = _this.renderControl(control, index, {
+                formHorizontal: horizontalDeeper,
+                formMode: 'normal',
+                inputOnly: true,
+                key: index,
+                onFocus: _this.handleFocus,
+                onBlur: _this.handleBlur
+            });
+            return isAddOn ? (React.createElement("span", { key: index, className: cx(control.addOnclassName, ~['button', 'submit', 'reset'].indexOf(control && control.type)
+                    ? 'InputGroup-btn'
+                    : 'InputGroup-addOn') }, dom)) : (dom);
+        })));
+    };
+    return InputGroup;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(InputGroupRenderer, _super);
+    function InputGroupRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    InputGroupRenderer = __decorate([
+        FormItem({
+            type: 'input-group',
+            strictMode: false
+        })
+    ], InputGroupRenderer);
+    return InputGroupRenderer;
+})(InputGroup));
+
+export { InputGroup };

package/esm/renderers/Form/InputImage.d.ts

@@ -0,0 +1,315 @@
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import { FileRejection } from 'react-dropzone';
+import 'blueimp-canvastoblob';
+import { Payload, ActionObject } from 'amis-core';
+import { ImageThumbProps } from '../Image';
+import { TranslateFn } from 'amis-core';
+import { FormBaseControlSchema, SchemaApi, SchemaClassName, SchemaTokenizeableString, SchemaUrlPath } from '../../Schema';
+/**
+ * Image 图片上传控件
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/image
+ */
+export interface ImageControlSchema extends FormBaseControlSchema {
+    /**
+     * 指定为图片上传控件
+     */
+    type: 'input-image';
+    /**
+     * 默认展示图片的链接
+     */
+    src?: SchemaUrlPath;
+    /**
+     * 默认展示图片的类名
+     */
+    imageClassName?: string;
+    /**
+     * 配置接收的图片类型
+     *
+     * 建议直接填写文件后缀
+     * 如：.txt,.csv
+     *
+     * 多个类型用逗号隔开。
+     */
+    accept?: string;
+    /**
+     * 默认都是通过用户选择图片后上传返回图片地址，如果开启此选项，则可以允许用户图片地址。
+     */
+    allowInput?: boolean;
+    /**
+     * 是否自动开始上传
+     */
+    autoUpload?: boolean;
+    /**
+     * 选择图片按钮的 CSS 类名
+     */
+    btnClassName?: SchemaClassName;
+    /**
+     * 上传按钮的 CSS 类名
+     */
+    btnUploadClassName?: SchemaClassName;
+    /**
+     * @deprecated
+     */
+    compress?: boolean;
+    /**
+     * @deprecated
+     */
+    compressOptions?: {
+        maxHeight?: number;
+        maxWidth?: number;
+    };
+    crop?: boolean | {
+        /**
+         * 默认 `1` 即 `1:1`
+         *
+         * 留空将不限制
+         */
+        aspectRatio?: number;
+        guides?: boolean;
+        dragMode?: string;
+        viewMode?: number;
+        rotatable?: boolean;
+        scalable?: boolean;
+    };
+    /**
+     * 裁剪后的图片类型
+     */
+    cropFormat?: string;
+    /**
+     * 裁剪后的质量
+     */
+    cropQuality?: number;
+    /**
+     * 是否允许二次裁剪。
+     */
+    reCropable?: boolean;
+    /**
+     * 是否隐藏上传按钮
+     */
+    hideUploadButton?: boolean;
+    /**
+     * 限制图片大小，超出不让上传。
+     */
+    limit?: {
+        /**
+         * 比率不对时的提示文字
+         */
+        aspectRatioLabel?: string;
+        /**
+         * 限制比率
+         */
+        aspectRatio?: number;
+        /**
+         * 限制图片高度
+         */
+        height?: number;
+        /**
+         *  限制图片宽度
+         */
+        width?: number;
+        /**
+         * 限制图片最大高度
+         */
+        maxHeight?: number;
+        /**
+         * 限制图片最大宽度
+         */
+        maxWidth?: number;
+        /**
+         * 限制图片最小高度
+         */
+        minHeight?: number;
+        /**
+         *  限制图片最小宽度
+         */
+        minWidth?: number;
+    };
+    /**
+     * 最多的个数
+     */
+    maxLength?: number;
+    /**
+     * 默认没有限制，当设置后，文件大小大于此值将不允许上传。
+     */
+    maxSize?: number;
+    /**
+     * 默认 `/api/upload` 如果想自己存储，请设置此选项。
+     */
+    receiver?: SchemaApi;
+    /**
+     * 默认为 false, 开启后，允许用户输入压缩选项。
+     *
+     * @deprecated
+     */
+    showCompressOptions?: boolean;
+    /**
+     * 是否为多选
+     */
+    multiple?: boolean;
+    /**
+     * 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。
+     * 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
+     */
+    joinValues?: boolean;
+    /**
+     * 分割符
+     */
+    delimiter?: string;
+    /**
+     * 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
+     */
+    extractValue?: boolean;
+    /**
+     * 清除时设置的值
+     */
+    resetValue?: any;
+    /**
+     * 缩路图展示模式
+     */
+    thumbMode?: 'w-full' | 'h-full' | 'contain' | 'cover';
+    /**
+     * 缩路图展示比率。
+     */
+    thumbRatio?: '1:1' | '4:3' | '16:9';
+    /**
+     * 上传后把其他字段同步到表单内部。
+     */
+    autoFill?: {
+        [propName: string]: SchemaTokenizeableString;
+    };
+    /**
+     * 初始化时是否把其他字段同步到表单内部。
+     */
+    initAutoFill?: boolean;
+    /**
+     * 默认占位图图片地址
+     */
+    frameImage?: SchemaUrlPath;
+    /**
+     * 是否开启固定尺寸
+     */
+    fixedSize?: boolean;
+    /**
+     * 固定尺寸的 CSS类名
+     */
+    fixedSizeClassName?: SchemaClassName;
+}
+export interface ImageProps extends FormControlProps, Omit<ImageControlSchema, 'type' | 'className' | 'descriptionClassName' | 'inputClassName'> {
+    onImageEnlarge?: (info: Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'> & {
+        index?: number;
+        list?: Array<Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'>>;
+    }) => void;
+}
+export interface ImageState {
+    uploading: boolean;
+    locked: boolean;
+    lockedReason?: string;
+    files: Array<FileValue | FileX>;
+    crop?: any;
+    error?: string;
+    cropFile?: FileValue;
+    cropFileName?: string;
+    submitOnChange?: boolean;
+    frameImageWidth?: number;
+}
+export interface FileValue {
+    value?: any;
+    state: 'init' | 'error' | 'pending' | 'uploading' | 'uploaded' | 'invalid';
+    url?: string;
+    error?: string;
+    info?: {
+        width: number;
+        height: number;
+        len?: number;
+    };
+    [propName: string]: any;
+}
+export interface FileX extends File {
+    id?: string | number;
+    preview?: string;
+    state?: 'init' | 'error' | 'pending' | 'uploading' | 'uploaded' | 'invalid';
+    progress?: number;
+    [propName: string]: any;
+}
+export declare type InputImageRendererEvent = 'change' | 'success' | 'fail' | 'remove';
+export declare type InputImageRendererAction = 'clear';
+export default class ImageControl extends React.Component<ImageProps, ImageState> {
+    static defaultProps: {
+        limit: undefined;
+        accept: string;
+        receiver: string;
+        hideUploadButton: boolean;
+        placeholder: string;
+        joinValues: boolean;
+        extractValue: boolean;
+        delimiter: string;
+        autoUpload: boolean;
+        multiple: boolean;
+    };
+    static formatFileSize(size: number | string, units?: string[]): string;
+    static valueToFile(value: string | object, props?: ImageProps): FileValue | undefined;
+    static sizeInfo(width: number | undefined, height: number | undefined, __: TranslateFn): string;
+    state: ImageState;
+    files: Array<FileValue | FileX>;
+    fileUploadCancelExecutors: Array<{
+        file: any;
+        executor: () => void;
+    }>;
+    cropper: Cropper;
+    dropzone: React.RefObject<any>;
+    frameImageRef: React.RefObject<any>;
+    current: FileValue | FileX | null;
+    resolve?: (value?: any) => void;
+    emitValue: any;
+    unmounted: boolean;
+    initAutoFill: boolean;
+    constructor(props: ImageProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ImageProps): void;
+    componentWillUnmount(): void;
+    buildCrop(props: ImageProps): false | {
+        /**
+         * 默认 `1` 即 `1:1`
+         *
+         * 留空将不限制
+         */
+        aspectRatio?: number | undefined;
+        guides?: boolean | undefined;
+        dragMode?: string | undefined;
+        viewMode?: number | undefined;
+        rotatable?: boolean | undefined;
+        scalable?: boolean | undefined;
+    } | null | undefined;
+    handleDropRejected(rejectedFiles: FileRejection[], evt: React.DragEvent<any>): void;
+    startUpload(retry?: boolean): void;
+    toggleUpload(): void;
+    stopUpload(): void;
+    tick(): void;
+    removeFile(file: FileValue, index: number): Promise<void>;
+    previewImage(file: FileX, index: number, e: React.MouseEvent<any>): void;
+    editImage(index: number): void;
+    onChange(changeImmediately?: boolean, changeEvent?: boolean): Promise<void>;
+    syncAutoFill(): void;
+    handleSelect(): void;
+    handleRetry(index: number): void;
+    handleDrop(files: Array<FileX>): void;
+    handlePaste(e: React.ClipboardEvent<any>): void;
+    handleCrop(): void;
+    cancelCrop(): void;
+    rotatableCrop(): void;
+    addFiles(files: Array<FileX>): void;
+    sendFile(file: FileX, cb: (error: null | string, file: FileX, obj?: FileValue) => void, onProgress: (progress: number) => void): void;
+    _upload(file: FileX, cb: (error: null | string, file: Blob, obj?: FileValue) => void, onProgress: (progress: number) => void): void;
+    _send(file: Blob, receiver: string, params: object, onProgress: (progress: number) => void): Promise<Payload>;
+    removeFileCanelExecutor(file: any, execute?: boolean): void;
+    handleClick(): void;
+    handleImageLoaded(index: number, e: React.UIEvent<any>): void;
+    handleFrameImageLoaded(e: React.UIEvent<any>): void;
+    validate(): any;
+    dispatchEvent(e: string, data?: Record<string, any>): Promise<any>;
+    doAction(action: ActionObject, data: object, throwErrors: boolean): void;
+    render(): JSX.Element;
+}
+export declare class ImageControlRenderer extends ImageControl {
+}