amis 2.0.0-rc.14 → 2.0.0-rc.15

package/esm/renderers/Form/Checkboxes.js

@@ -0,0 +1,226 @@
+/**
+ * amis v2.0.0-rc.15
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { createObject, hasAbility, columnsSplit, autobind, OptionsControl } from 'amis-core';
+import { Checkbox, Icon } from 'amis-ui';
+
+var CheckboxesControl = /** @class */ (function (_super) {
+    __extends(CheckboxesControl, _super);
+    function CheckboxesControl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CheckboxesControl.prototype.doAction = function (action, data, throwErrors) {
+        var _a = this.props, resetValue = _a.resetValue, onChange = _a.onChange;
+        var actionType = action === null || action === void 0 ? void 0 : action.actionType;
+        if (actionType === 'clear') {
+            onChange('');
+        }
+        else if (actionType === 'reset') {
+            onChange(resetValue !== null && resetValue !== void 0 ? resetValue : '');
+        }
+    };
+    CheckboxesControl.prototype.reload = function () {
+        var reload = this.props.reloadOptions;
+        reload && reload();
+    };
+    CheckboxesControl.prototype.handleAddClick = function () {
+        var onAdd = this.props.onAdd;
+        onAdd && onAdd();
+    };
+    CheckboxesControl.prototype.handleEditClick = function (e, item) {
+        var onEdit = this.props.onEdit;
+        e.preventDefault();
+        e.stopPropagation();
+        onEdit && onEdit(item);
+    };
+    CheckboxesControl.prototype.handleDeleteClick = function (e, item) {
+        var onDelete = this.props.onDelete;
+        e.preventDefault();
+        e.stopPropagation();
+        onDelete && onDelete(item);
+    };
+    CheckboxesControl.prototype.componentDidMount = function () {
+        this.updateBorderStyle();
+        window.addEventListener('resize', this.updateBorderStyle);
+    };
+    CheckboxesControl.prototype.componentWillMount = function () {
+        window.removeEventListener('resize', this.updateBorderStyle);
+    };
+    CheckboxesControl.prototype.updateBorderStyle = function () {
+        if (this.props.optionType !== 'button') {
+            return;
+        }
+        var wrapDom = this.refs.checkboxRef;
+        var wrapWidth = wrapDom.clientWidth;
+        var childs = Array.from(wrapDom.children);
+        childs.forEach(function (child) {
+            child.style.borderRadius = '0';
+            child.style.borderLeftWidth = '1px';
+            child.style.borderTopWidth = '1px';
+        });
+        var childTotalWidth = childs.reduce(function (pre, next) { return pre + next.clientWidth; }, 0);
+        if (childTotalWidth <= wrapWidth) {
+            if (childs.length === 1) {
+                childs[0].style.borderRadius = '4px';
+            }
+            else {
+                childs[0].style.borderRadius = '4px 0 0 4px';
+                childs[childs.length - 1].style.borderRadius = '0 4px 4px 0';
+                childs.forEach(function (child, idx) {
+                    idx !== 0 && (child.style.borderLeftWidth = '0');
+                });
+            }
+        }
+        else {
+            var curRowWidth_1 = 0;
+            var curRow_1 = 0;
+            var rowNum_1 = Math.floor(childTotalWidth / wrapWidth);
+            var rowColArr_1 = [];
+            for (var i = 0; i <= rowNum_1; i++) {
+                var arr = [];
+                rowColArr_1[i] = arr;
+            }
+            childs.forEach(function (child, idx) {
+                curRowWidth_1 += child.clientWidth;
+                if (curRowWidth_1 > wrapWidth) {
+                    curRowWidth_1 = child.clientWidth;
+                    curRow_1++;
+                }
+                if (curRow_1 > rowNum_1) {
+                    return;
+                }
+                rowColArr_1[curRow_1].push(child);
+            });
+            rowColArr_1.forEach(function (row, rowIdx) {
+                if (rowIdx === 0) {
+                    row.forEach(function (r, colIdx) {
+                        r.style.borderRadius = '0';
+                        colIdx !== 0 && (r.style.borderLeftWidth = '0');
+                        row.length > rowColArr_1[rowIdx + 1].length &&
+                            (row[row.length - 1].style.borderBottomRightRadius = '4px');
+                    });
+                    row[0].style.borderTopLeftRadius = '4px';
+                    row[row.length - 1].style.borderTopRightRadius = '4px';
+                }
+                else if (rowIdx === rowNum_1) {
+                    row.forEach(function (r, colIdx) {
+                        r.style.borderRadius = '0';
+                        colIdx !== 0 && (r.style.borderLeftWidth = '0');
+                        r.style.borderTopWidth = '0';
+                        row[0].style.borderBottomLeftRadius = '4px';
+                        row[row.length - 1].style.borderBottomRightRadius = '4px';
+                    });
+                }
+                else {
+                    row.forEach(function (r, colIdx) {
+                        r.style.borderRadius = '0';
+                        colIdx !== 0 && (r.style.borderLeftWidth = '0');
+                        r.style.borderTopWidth = '0';
+                        row.length > rowColArr_1[rowIdx + 1].length &&
+                            (row[row.length - 1].style.borderBottomRightRadius = '4px');
+                    });
+                }
+            });
+        }
+    };
+    CheckboxesControl.prototype.renderGroup = function (option, index) {
+        var _this = this;
+        var _a;
+        var _b = this.props, cx = _b.classnames, labelField = _b.labelField;
+        if (!((_a = option.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            return null;
+        }
+        return (React.createElement("div", { key: index, className: cx('CheckboxesControl-group', option.className) },
+            React.createElement("label", { className: cx('CheckboxesControl-groupLabel', option.labelClassName) }, option[labelField || 'label']),
+            option.children.map(function (option, index) { return _this.renderItem(option, index); })));
+    };
+    CheckboxesControl.prototype.renderItem = function (option, index) {
+        var _this = this;
+        if (option.children) {
+            return this.renderGroup(option, index);
+        }
+        var _a = this.props, render = _a.render, itemClassName = _a.itemClassName, onToggle = _a.onToggle, selectedOptions = _a.selectedOptions, disabled = _a.disabled, inline = _a.inline, labelClassName = _a.labelClassName, labelField = _a.labelField, removable = _a.removable, editable = _a.editable, __ = _a.translate, optionType = _a.optionType, menuTpl = _a.menuTpl, data = _a.data;
+        var labelText = String(option[labelField || 'label']);
+        return (React.createElement(Checkbox, { className: itemClassName, key: index, onChange: function () { return onToggle(option); }, checked: !!~selectedOptions.indexOf(option), disabled: disabled || option.disabled, inline: inline, labelClassName: labelClassName, description: option.description, optionType: optionType },
+            menuTpl
+                ? render("checkboxes/".concat(index), menuTpl, {
+                    data: createObject(data, option)
+                })
+                : labelText,
+            removable && hasAbility(option, 'removable') ? (React.createElement("a", { "data-tooltip": __('Select.clear'), "data-position": "left" },
+                React.createElement(Icon, { icon: "minus", className: "icon", onClick: function (e) { return _this.handleDeleteClick(e, option); } }))) : null,
+            editable && hasAbility(option, 'editable') ? (React.createElement("a", { "data-tooltip": "\u7F16\u8F91", "data-position": "left" },
+                React.createElement(Icon, { icon: "pencil", className: "icon", onClick: function (e) { return _this.handleEditClick(e, option); } }))) : null));
+    };
+    CheckboxesControl.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, className = _a.className, disabled = _a.disabled, placeholder = _a.placeholder, options = _a.options, inline = _a.inline, columnsCount = _a.columnsCount, selectedOptions = _a.selectedOptions; _a.onToggle; var onToggleAll = _a.onToggleAll, checkAll = _a.checkAll, cx = _a.classnames, itemClassName = _a.itemClassName, labelClassName = _a.labelClassName, creatable = _a.creatable, addApi = _a.addApi, createBtnLabel = _a.createBtnLabel, __ = _a.translate, optionType = _a.optionType;
+        var body = [];
+        if (options && options.length) {
+            body = options.map(function (option, key) { return _this.renderItem(option, key); });
+        }
+        if (checkAll && body.length && optionType === 'default') {
+            body.unshift(React.createElement(Checkbox, { key: "checkall", className: itemClassName, onChange: onToggleAll, checked: !!selectedOptions.length, partial: !!(selectedOptions.length &&
+                    selectedOptions.length !== options.length), disabled: disabled, inline: inline, labelClassName: labelClassName }, __('Checkboxes.selectAll')));
+        }
+        body = columnsSplit(body, cx, columnsCount);
+        return (React.createElement("div", { className: cx("CheckboxesControl", className), ref: "checkboxRef" },
+            body && body.length ? (body) : (React.createElement("span", { className: "Form-placeholder" }, __(placeholder))),
+            (creatable || addApi) && !disabled ? (React.createElement("a", { className: cx('Checkboxes-addBtn'), onClick: this.handleAddClick },
+                React.createElement(Icon, { icon: "plus", className: "icon" }),
+                __(createBtnLabel))) : null));
+    };
+    CheckboxesControl.defaultProps = {
+        columnsCount: 1,
+        multiple: true,
+        placeholder: 'placeholder.noOption',
+        creatable: false,
+        inline: true,
+        createBtnLabel: 'Select.createLabel',
+        optionType: 'default'
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], CheckboxesControl.prototype, "handleAddClick", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Event, Object]),
+        __metadata("design:returntype", void 0)
+    ], CheckboxesControl.prototype, "handleEditClick", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Event, Object]),
+        __metadata("design:returntype", void 0)
+    ], CheckboxesControl.prototype, "handleDeleteClick", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], CheckboxesControl.prototype, "updateBorderStyle", null);
+    return CheckboxesControl;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(CheckboxesControlRenderer, _super);
+    function CheckboxesControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CheckboxesControlRenderer = __decorate([
+        OptionsControl({
+            type: 'checkboxes',
+            sizeMutable: false
+        })
+    ], CheckboxesControlRenderer);
+    return CheckboxesControlRenderer;
+})(CheckboxesControl));
+
+export { CheckboxesControl as default };

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

@@ -0,0 +1,251 @@
+/// <reference types="lodash" />
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import { ActionObject } from 'amis-core';
+import { IComboStore } from 'amis-core';
+import Sortable from 'sortablejs';
+import { FormBaseControlSchema, SchemaApi, SchemaClassName, SchemaObject, SchemaTpl } from '../../Schema';
+import { ListenerAction } from 'amis-core';
+export declare type ComboCondition = {
+    test: string;
+    items: Array<ComboSubControl>;
+    label: string;
+    scaffold?: any;
+    mode?: string;
+};
+export declare type ComboSubControl = SchemaObject & {
+    /**
+     * 是否唯一, 只有在 combo 里面才有用
+     */
+    unique?: boolean;
+    /**
+     * 列类名，可以用来修改这类宽度。
+     */
+    columnClassName?: SchemaClassName;
+};
+/**
+ * Combo 组合输入框类型
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/combo
+ */
+export interface ComboControlSchema extends FormBaseControlSchema {
+    /**
+     * 指定为组合输入框类型
+     */
+    type: 'combo';
+    /**
+     * 单组表单项初始值。默认为 `{}`
+     *
+     * @default {}
+     */
+    scaffold?: any;
+    /**
+     * 是否含有边框
+     */
+    noBorder?: boolean;
+    /**
+     * 确认删除时的提示
+     */
+    deleteConfirmText?: string;
+    /**
+     * 删除时调用的api
+     */
+    deleteApi?: SchemaApi;
+    /**
+     * 是否可切换条件，配合`conditions`使用
+     */
+    typeSwitchable?: boolean;
+    /**
+     * 符合某类条件后才渲染的schema
+     */
+    conditions?: Array<ComboCondition>;
+    /**
+     * 内部单组表单项的类名
+     */
+    formClassName?: SchemaClassName;
+    /**
+     * 新增按钮CSS类名
+     */
+    addButtonClassName?: SchemaClassName;
+    /**
+     * 新增按钮文字
+     * @default 新增
+     */
+    addButtonText?: string;
+    /**
+     * 是否可新增
+     */
+    addable?: boolean;
+    /**
+     * 数组输入框的子项
+     */
+    items?: Array<ComboSubControl>;
+    /**
+     * 是否可拖拽排序
+     */
+    draggable?: boolean;
+    /**
+     * 可拖拽排序的提示信息。
+     *
+     * @default 可拖拽排序
+     */
+    draggableTip?: string;
+    /**
+     * 是否将结果扁平化(去掉name),只有当controls的length为1且multiple为true的时候才有效
+     */
+    flat?: boolean;
+    /**
+     * 当扁平化开启并且joinValues为true时，用什么分隔符
+     *
+     * @deprecated
+     */
+    delimiter?: string;
+    /**
+     * 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用array的方式
+     * @deprecated
+     */
+    joinValues?: boolean;
+    /**
+     * 限制最大个数
+     */
+    maxLength?: number;
+    /**
+     * 限制最小个数
+     */
+    minLength?: number;
+    /**
+     * 是否多行模式，默认一行展示完
+     */
+    multiLine?: boolean;
+    /**
+     * 是否可多选
+     */
+    multiple?: boolean;
+    /**
+     * 是否可删除
+     */
+    removable?: boolean;
+    /**
+     * 子表单的模式。
+     */
+    subFormMode?: 'normal' | 'horizontal' | 'inline';
+    /**
+     * 没有成员时显示。
+     * @default empty
+     */
+    placeholder?: string;
+    /**
+     * 是否可以访问父级数据，正常 combo 已经关联到数组成员，是不能访问父级数据的。
+     */
+    canAccessSuperData?: boolean;
+    /**
+     * 采用 Tabs 展示方式？
+     */
+    tabsMode?: boolean;
+    /**
+     * Tabs 的展示模式。
+     */
+    tabsStyle?: '' | 'line' | 'card' | 'radio';
+    /**
+     * 选项卡标题的生成模板。
+     */
+    tabsLabelTpl?: SchemaTpl;
+    /**
+     * 数据比较多，比较卡时，可以试试开启。
+     */
+    lazyLoad?: boolean;
+    /**
+     * 严格模式，为了性能默认不开的。
+     */
+    strictMode?: boolean;
+    /**
+     * 配置同步字段。只有 `strictMode` 为 `false` 时有效。
+     * 如果 Combo 层级比较深，底层的获取外层的数据可能不同步。
+     * 但是给 combo 配置这个属性就能同步下来。输入格式：`["os"]`
+     */
+    syncFields?: string[];
+    /**
+     * 允许为空，如果子表单项里面配置验证器，且又是单条模式。可以允许用户选择清空（不填）。
+     */
+    nullable?: boolean;
+    /**
+     * 提示信息
+     */
+    messages?: {
+        /**
+         * 验证错误提示
+         */
+        validateFailed?: string;
+        /**
+         * 最小值验证错误提示
+         */
+        minLengthValidateFailed?: string;
+        /**
+         * 最大值验证错误提示
+         */
+        maxLengthValidateFailed?: string;
+    };
+}
+export declare type ComboRendererEvent = 'add' | 'delete' | 'tabsChange';
+export interface ComboProps extends FormControlProps, Omit<ComboControlSchema, 'type' | 'className' | 'descriptionClassName' | 'inputClassName'> {
+    store: IComboStore;
+    changeImmediately?: boolean;
+}
+export default class ComboControl extends React.Component<ComboProps> {
+    static defaultProps: Pick<ComboProps, 'minLength' | 'maxLength' | 'multiple' | 'multiLine' | 'addButtonClassName' | 'formClassName' | 'subFormMode' | 'draggableTip' | 'addButtonText' | 'canAccessSuperData' | 'addIcon' | 'dragIcon' | 'deleteIcon' | 'tabsMode' | 'tabsStyle' | 'placeholder' | 'itemClassName' | 'itemsWrapperClassName'>;
+    static propsList: Array<string>;
+    subForms: Array<any>;
+    subFormDefaultValues: Array<{
+        index: number;
+        values: any;
+        setted: boolean;
+    }>;
+    keys: Array<string>;
+    dragTip?: HTMLElement;
+    sortable?: Sortable;
+    defaultValue?: any;
+    toDispose: Array<Function>;
+    id: string;
+    constructor(props: ComboProps);
+    componentDidUpdate(prevProps: ComboProps): void;
+    componentWillUnmount(): void;
+    doAction(action: ListenerAction, args: any): void;
+    getValueAsArray(props?: Readonly<ComboProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): any;
+    addItemWith(condition: ComboCondition): void;
+    addItem(): Promise<void>;
+    deleteItem(key: number): Promise<void>;
+    handleChange(values: any, diff: any, { index }: any): void;
+    handleSingleFormChange(values: object): void;
+    handleFormInit(values: any, { index }: any): void;
+    handleSingleFormInit(values: any): void;
+    handleAction(action: ActionObject): any;
+    validate(): any;
+    flush(): void;
+    dragTipRef(ref: any): void;
+    initDragging(): void;
+    destroyDragging(): void;
+    refsMap: {
+        [propName: number]: any;
+    };
+    makeFormRef: ((index: number) => (ref: any) => void) & import("lodash").MemoizedFunction;
+    formRef(ref: any, index?: number): void;
+    memoizedFormatValue: ((strictMode: boolean, syncFields: Array<string> | void, value: any, index: number, data: any) => object) & import("lodash").MemoizedFunction;
+    formatValue(value: any, index?: number): object;
+    pickCondition(value: any): ComboCondition | null;
+    handleComboTypeChange(index: number, selection: any): void;
+    handleTabSelect(key: number): Promise<void>;
+    setNull(e: React.MouseEvent): void;
+    renderPlaceholder(): JSX.Element;
+    renderTabsMode(): JSX.Element;
+    renderDelBtn(value: any, index: number): JSX.Element | null;
+    renderAddBtn(): JSX.Element;
+    renderMultipe(): JSX.Element;
+    renderSingle(): JSX.Element;
+    render(): JSX.Element | null;
+}
+export declare class ComboControlRenderer extends ComboControl {
+    setData(value: any, index?: number): void;
+}
+export declare class KVControlRenderer extends ComboControl {
+}