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

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

@@ -0,0 +1,79 @@
+/**
+ * @file filter
+ * @author fex
+ */
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import { ActionObject } from 'amis-core';
+import { FormBaseControlSchema, SchemaApi } from '../../Schema';
+/**
+ * Matrix 选择控件。适合做权限勾选。
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/matrix
+ */
+export interface MatrixControlSchema extends FormBaseControlSchema {
+    type: 'matrix-checkboxes';
+    /**
+     * 配置singleSelectMode时设置为false
+     */
+    multiple?: boolean;
+    /**
+     * 设置单选模式，multiple为false时有效
+     */
+    singleSelectMode?: boolean;
+    /**
+     * 可用来通过 API 拉取 options。
+     */
+    source?: SchemaApi;
+    columns?: Array<{
+        label: string;
+        [propName: string]: any;
+    }>;
+    rows?: Array<{
+        label: string;
+        [propName: string]: any;
+    }>;
+    /**
+     * 行标题说明
+     */
+    rowLabel?: string;
+}
+export interface Column {
+    label: string;
+    [propName: string]: any;
+}
+export interface Row {
+    label: string;
+    [propName: string]: any;
+}
+export interface ValueItem extends Column, Row {
+    checked: boolean;
+}
+export interface MatrixProps extends FormControlProps {
+    columns: Array<Column>;
+    rows: Array<Row>;
+    multiple: boolean;
+}
+export interface MatrixState {
+    columns: Array<Column>;
+    rows: Array<Row>;
+    loading: boolean;
+    error?: string;
+    singleSelectMode?: 'cell' | 'row' | 'column';
+}
+export default class MatrixCheckbox extends React.Component<MatrixProps, MatrixState> {
+    static defaultProps: Partial<MatrixProps>;
+    state: MatrixState;
+    mounted: boolean;
+    constructor(props: MatrixProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: MatrixProps): void;
+    componentWillUnmount(): void;
+    doAction(action: ActionObject, data: object, throwErrors: boolean): void;
+    initOptions(data: any): Promise<void>;
+    reload(): Promise<void>;
+    toggleItem(checked: boolean, x: number, y: number): Promise<void>;
+    renderInput(): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class MatrixRenderer extends MatrixCheckbox {
+}

package/esm/renderers/Form/MatrixCheckboxes.js

@@ -0,0 +1,266 @@
+/**
+ * amis v2.0.0-rc.15
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __awaiter, __generator, __assign, __decorate } from 'tslib';
+import React from 'react';
+import { buildApi, isValidApi, setVariable, isEffectiveApi, createObject, FormItem } from 'amis-core';
+import { Checkbox, Spinner } from 'amis-ui';
+
+/**
+ * @file filter
+ * @author fex
+ */
+var MatrixCheckbox = /** @class */ (function (_super) {
+    __extends(MatrixCheckbox, _super);
+    function MatrixCheckbox(props) {
+        var _this = _super.call(this, props) || this;
+        _this.mounted = false;
+        _this.state = {
+            columns: props.columns || [],
+            rows: props.rows || [],
+            loading: false
+        };
+        _this.toggleItem = _this.toggleItem.bind(_this);
+        _this.reload = _this.reload.bind(_this);
+        _this.initOptions = _this.initOptions.bind(_this);
+        _this.mounted = true;
+        return _this;
+    }
+    MatrixCheckbox.prototype.componentDidMount = function () {
+        var _a = this.props, formInited = _a.formInited, addHook = _a.addHook;
+        formInited || !addHook ? this.reload() : addHook(this.initOptions, 'init');
+    };
+    MatrixCheckbox.prototype.componentDidUpdate = function (prevProps) {
+        var props = this.props;
+        if (prevProps.columns !== props.columns || prevProps.rows !== props.rows) {
+            this.setState({
+                columns: props.columns || [],
+                rows: props.rows || []
+            });
+        }
+        else if (props.formInited &&
+            (props.source !== prevProps.source || prevProps.data !== props.data)) {
+            var prevApi = buildApi(prevProps.source, prevProps.data, {
+                ignoreData: true
+            });
+            var nextApi = buildApi(props.source, props.data, {
+                ignoreData: true
+            });
+            if (prevApi.url !== nextApi.url && isValidApi(nextApi.url)) {
+                this.reload();
+            }
+        }
+    };
+    MatrixCheckbox.prototype.componentWillUnmount = function () {
+        this.mounted = false;
+        var removeHook = this.props.removeHook;
+        removeHook === null || removeHook === void 0 ? void 0 : removeHook(this.initOptions, 'init');
+    };
+    MatrixCheckbox.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 === null || onChange === void 0 ? void 0 : onChange('');
+        }
+        else if (actionType === 'reset') {
+            onChange === null || onChange === void 0 ? void 0 : onChange(resetValue !== null && resetValue !== void 0 ? resetValue : '');
+        }
+    };
+    MatrixCheckbox.prototype.initOptions = function (data) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, formItem, name;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, this.reload()];
+                    case 1:
+                        _b.sent();
+                        _a = this.props, formItem = _a.formItem, name = _a.name;
+                        if (!formItem) {
+                            return [2 /*return*/];
+                        }
+                        if (formItem.value) {
+                            setVariable(data, name, formItem.value);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    MatrixCheckbox.prototype.reload = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, source, data, env, onChange, __;
+            var _this = this;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, source = _a.source, data = _a.data, env = _a.env, onChange = _a.onChange, __ = _a.translate;
+                        if (!isEffectiveApi(source, data) || this.state.loading) {
+                            return [2 /*return*/];
+                        }
+                        if (!env || !env.fetcher) {
+                            throw new Error('fetcher is required');
+                        }
+                        return [4 /*yield*/, new Promise(function (resolve, reject) {
+                                if (!_this.mounted) {
+                                    return resolve();
+                                }
+                                _this.setState({
+                                    loading: true
+                                }, function () {
+                                    if (!_this.mounted) {
+                                        return resolve();
+                                    }
+                                    env
+                                        .fetcher(source, data)
+                                        .then(function (ret) {
+                                        if (!ret.ok) {
+                                            throw new Error(ret.msg || __('fetchFailed'));
+                                        }
+                                        if (!_this.mounted) {
+                                            return resolve();
+                                        }
+                                        _this.setState({
+                                            loading: false,
+                                            rows: ret.data.rows || [],
+                                            columns: ret.data.columns || []
+                                        }, function () {
+                                            source && source.replaceData;
+                                            var value = ret.data.value;
+                                            if (value) {
+                                                value = source.replaceData
+                                                    ? value
+                                                    : mergeValue(value, _this.state.columns, _this.state.rows);
+                                                onChange(value);
+                                            }
+                                            resolve();
+                                        });
+                                    })
+                                        .catch(function (reason) {
+                                        return _this.setState({
+                                            error: reason,
+                                            loading: false
+                                        }, function () { return resolve(); });
+                                    });
+                                });
+                            })];
+                    case 1: 
+                    // todo 优化这块
+                    return [2 /*return*/, _b.sent()];
+                }
+            });
+        });
+    };
+    MatrixCheckbox.prototype.toggleItem = function (checked, x, y) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, columns, rows, _b, multiple, singleSelectMode, dispatchEvent, data, value, x2, len, y2, len, y2, len, x2, len2, rendererEvent;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _a = this.state, columns = _a.columns, rows = _a.rows;
+                        _b = this.props, multiple = _b.multiple, singleSelectMode = _b.singleSelectMode, dispatchEvent = _b.dispatchEvent, data = _b.data;
+                        value = this.props.value || buildDefaultValue(columns, rows);
+                        if (multiple) {
+                            value[x][y] = __assign(__assign({}, value[x][y]), { checked: checked });
+                        }
+                        else if (singleSelectMode === 'row') {
+                            for (x2 = 0, len = columns.length; x2 < len; x2++) {
+                                value[x2][y] = __assign(__assign({}, value[x2][y]), { checked: x === x2 ? checked : !checked });
+                            }
+                        }
+                        else if (singleSelectMode === 'column') {
+                            for (y2 = 0, len = rows.length; y2 < len; y2++) {
+                                value[x][y2] = __assign(__assign({}, value[x][y2]), { checked: y === y2 ? checked : !checked });
+                            }
+                        }
+                        else {
+                            // 只剩下 cell 了
+                            for (y2 = 0, len = rows.length; y2 < len; y2++) {
+                                for (x2 = 0, len2 = columns.length; x2 < len2; x2++) {
+                                    value[x2][y2] = __assign(__assign({}, value[x2][y2]), { checked: x === x2 && y === y2 ? checked : !checked });
+                                }
+                            }
+                        }
+                        return [4 /*yield*/, dispatchEvent('change', createObject(data, {
+                                value: value.concat()
+                            }))];
+                    case 1:
+                        rendererEvent = _c.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        this.props.onChange(value.concat());
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    MatrixCheckbox.prototype.renderInput = function () {
+        var _this = this;
+        var _a = this.state, columns = _a.columns, rows = _a.rows;
+        var _b = this.props, rowLabel = _b.rowLabel, disabled = _b.disabled, cx = _b.classnames, multiple = _b.multiple;
+        var value = this.props.value || buildDefaultValue(columns, rows);
+        return (React.createElement("div", { className: cx('Table m-b-none') },
+            React.createElement("div", { className: cx('Table-content') },
+                React.createElement("table", { className: cx('Table-table') },
+                    React.createElement("thead", null,
+                        React.createElement("tr", null,
+                            React.createElement("th", null, rowLabel),
+                            columns.map(function (column, x) { return (React.createElement("th", { key: x, className: "text-center" }, column.label)); }))),
+                    React.createElement("tbody", null, rows.map(function (row, y) { return (React.createElement("tr", { key: y },
+                        React.createElement("td", null,
+                            row.label,
+                            row.description || row.desc ? (React.createElement("span", { className: "m-l-xs text-muted text-xs" }, row.description || row.desc)) : null),
+                        columns.map(function (column, x) { return (React.createElement("td", { key: x, className: "text-center" },
+                            React.createElement(Checkbox, { type: multiple ? 'checkbox' : 'radio', disabled: disabled, checked: !!(value[x] && value[x][y] && value[x][y].checked), onChange: function (checked) {
+                                    return _this.toggleItem(checked, x, y);
+                                } }))); }))); }))))));
+    };
+    MatrixCheckbox.prototype.render = function () {
+        var _a = this.props, className = _a.className; _a.render; var cx = _a.classnames;
+        var _b = this.state, error = _b.error, loading = _b.loading;
+        return (React.createElement("div", { key: "input", className: cx('MatrixControl', className || '') },
+            error ? (React.createElement("div", { className: cx('MatrixControl-error Alert Alert--danger') }, String(error))) : (this.renderInput()),
+            React.createElement(Spinner, { size: "lg", overlay: true, key: "info", show: loading })));
+    };
+    MatrixCheckbox.defaultProps = {
+        columns: [],
+        rows: [],
+        multiple: true,
+        singleSelectMode: 'column' // multiple 为 false 时有效。
+    };
+    return MatrixCheckbox;
+}(React.Component));
+function buildDefaultValue(columns, rows) {
+    if (!Array.isArray(columns)) {
+        columns = [];
+    }
+    if (!Array.isArray(rows)) {
+        rows = [];
+    }
+    return columns.map(function (column) {
+        return rows.map(function (row) { return (__assign(__assign(__assign({}, row), column), { checked: false })); });
+    });
+}
+function mergeValue(value, columns, rows) {
+    return value.map(function (column, x) {
+        return column.map(function (item, y) { return (__assign(__assign(__assign({}, columns[x]), rows[y]), item)); });
+    });
+}
+/** @class */ ((function (_super) {
+    __extends(MatrixRenderer, _super);
+    function MatrixRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    MatrixRenderer = __decorate([
+        FormItem({
+            type: 'matrix-checkboxes',
+            strictMode: false,
+            sizeMutable: false
+        })
+    ], MatrixRenderer);
+    return MatrixRenderer;
+})(MatrixCheckbox));
+
+export { MatrixCheckbox as default };

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import { OptionsControlProps } from 'amis-core';
+import { Option, Options } from 'amis-core';
+import { ActionObject } from 'amis-core';
+import { FormOptionsSchema } from '../../Schema';
+/**
+ * Nested Select
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/nested-select
+ */
+export interface NestedSelectControlSchema extends FormOptionsSchema {
+    type: 'nested-select';
+    /**
+     * 边框模式，全边框，还是半边框，或者没边框。
+     */
+    borderMode?: 'full' | 'half' | 'none';
+    /**
+     * 弹框的 css 类
+     */
+    menuClassName?: string;
+    /**
+     * 父子之间是否完全独立。
+     */
+    cascade?: boolean;
+    /**
+     * 选父级的时候是否把子节点的值也包含在内。
+     */
+    withChildren?: boolean;
+    /**
+     * 选父级的时候，是否只把子节点的值包含在内
+     */
+    onlyChildren?: boolean;
+    /**
+     * 只允许选择叶子节点
+     */
+    onlyLeaf?: boolean;
+    /**
+     * 是否隐藏选择框中已选中节点的祖先节点的文本信息
+     */
+    hideNodePathLabel?: boolean;
+}
+export interface NestedSelectProps extends OptionsControlProps {
+    cascade?: boolean;
+    noResultsText?: string;
+    withChildren?: boolean;
+    onlyChildren?: boolean;
+    hideNodePathLabel?: boolean;
+    useMobileUI?: boolean;
+}
+export interface NestedSelectState {
+    isOpened?: boolean;
+    isFocused?: boolean;
+    inputValue?: string;
+    stack: Array<Array<Option>>;
+}
+export default class NestedSelectControl extends React.Component<NestedSelectProps, NestedSelectState> {
+    static defaultProps: Partial<NestedSelectProps>;
+    target: any;
+    input: HTMLInputElement;
+    state: NestedSelectState;
+    domRef(ref: any): void;
+    componentDidUpdate(prevProps: NestedSelectProps): void;
+    doAction(action: ActionObject, data: object, throwErrors: boolean): void;
+    dispatchEvent(eventName: string, eventData?: any): Promise<boolean>;
+    handleOutClick(e: React.MouseEvent<any>): void;
+    handleResultClear(): void;
+    close(): void;
+    removeItem(index: number, e?: React.MouseEvent<HTMLElement>): Promise<void>;
+    renderValue(option: Option, key?: any): any;
+    handleOptionClick(option: Option): Promise<void>;
+    handleCheck(option: Option | Options, index?: number): Promise<void>;
+    allChecked(options: Options): boolean;
+    partialChecked(options: Options): boolean;
+    reload(): void;
+    getValue(): any;
+    onFocus(e: any): Promise<void>;
+    onBlur(e: any): Promise<void>;
+    getTarget(): HTMLElement;
+    handleKeyPress(e: React.KeyboardEvent): void;
+    handleInputKeyDown(event: React.KeyboardEvent): void;
+    handleInputChange(inputValue: string): void;
+    handleResultChange(value: Array<Option>): Promise<void>;
+    renderOptions(): JSX.Element;
+    renderSearchResult(): JSX.Element;
+    onMouseEnter(option: Option, index: number, e: MouseEvent): void;
+    renderOuter(): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class NestedSelectControlRenderer extends NestedSelectControl {
+}
+export declare class CascaderSelectControlRenderer extends NestedSelectControl {
+}