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

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import { OptionsControlProps } from 'amis-core';
+import { SchemaNode, ActionObject, PlainObject } from 'amis-core';
+import { FormOptionsSchema, SchemaTpl } from '../../Schema';
+/**
+ * Picker
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/picker
+ */
+export interface PickerControlSchema extends FormOptionsSchema {
+    type: 'picker';
+    /**
+     * 可用来生成选中的值的描述文字
+     */
+    labelTpl?: SchemaTpl;
+    /**
+     * 建议用 labelTpl
+     * 选中一个字段名用来作为值的描述文字
+     */
+    labelField?: string;
+    /**
+     * 选一个可以用来作为值的字段。
+     */
+    valueField?: string;
+    /**
+     * 弹窗选择框详情。
+     */
+    pickerSchema?: any;
+    /**
+     * 弹窗模式，dialog 或者 drawer
+     */
+    modalMode?: 'dialog' | 'drawer';
+    /**
+     * 内嵌模式，也就是说不弹框了。
+     */
+    embed?: boolean;
+}
+export interface PickerProps extends OptionsControlProps {
+    modalMode: 'dialog' | 'drawer';
+    pickerSchema: PlainObject;
+    labelField: string;
+}
+export interface PickerState {
+    isOpened: boolean;
+    isFocused: boolean;
+    schema: SchemaNode;
+}
+export default class PickerControl extends React.PureComponent<PickerProps, any> {
+    static propsList: Array<string>;
+    static defaultProps: Partial<PickerProps>;
+    state: PickerState;
+    input: React.RefObject<HTMLInputElement>;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PickerProps): void;
+    fetchOptions(): void;
+    buildSchema(props: PickerProps): {
+        labelTpl: any;
+        type: string;
+        pickerMode: boolean;
+        syncLocation: boolean;
+        api: string | import("amis-core").BaseApiObject | null | undefined;
+        source: string | import("amis-core").BaseApiObject | null | undefined;
+        keepItemSelectionOnPageChange: boolean;
+        valueField: any;
+        labelField: string;
+        bulkActions: any;
+        checkOnItemClick: boolean;
+    };
+    crud: any;
+    crudRef(ref: any): void;
+    reload(): void;
+    open(): void;
+    close(): void;
+    handleModalConfirm(values: Array<any>, action: ActionObject, ctx: any, components: Array<any>): void;
+    handleChange(items: Array<any>): Promise<void>;
+    removeItem(index: number): void;
+    handleKeyDown(e: React.KeyboardEvent): void;
+    handleFocus(): void;
+    handleBlur(): void;
+    handleClick(): void;
+    clearValue(): void;
+    renderValues(): JSX.Element;
+    renderBody({ popOverContainer }?: any): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class PickerControlRenderer extends PickerControl {
+}

package/esm/renderers/Form/Picker.js

@@ -0,0 +1,361 @@
+/**
+ * amis v2.0.0-rc.16
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __awaiter, __generator, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { anyChanged, isApiOutdated, createObject, isPureVariable, resolveVariableAndFilter, isEffectiveApi, filter, getVariable, noop, autobind, OptionsControl } from 'amis-core';
+import cx from 'classnames';
+import find from 'lodash/find';
+import findIndex from 'lodash/findIndex';
+import { Html, Icon } from 'amis-ui';
+
+var PickerControl = /** @class */ (function (_super) {
+    __extends(PickerControl, _super);
+    function PickerControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            isOpened: false,
+            schema: _this.buildSchema(_this.props),
+            isFocused: false
+        };
+        _this.input = React.createRef();
+        return _this;
+    }
+    PickerControl.prototype.componentDidMount = function () {
+        this.fetchOptions();
+    };
+    PickerControl.prototype.componentDidUpdate = function (prevProps) {
+        var props = this.props;
+        if (anyChanged(['pickerSchema', 'multiple', 'source'], prevProps, props)) {
+            this.setState({
+                schema: this.buildSchema(props)
+            });
+        }
+        else if (JSON.stringify(props.value) !== JSON.stringify(prevProps.value)) {
+            this.fetchOptions();
+        }
+        else if (isApiOutdated(prevProps.source, props.source, prevProps.data, props.data)) {
+            this.fetchOptions();
+        }
+    };
+    PickerControl.prototype.fetchOptions = function () {
+        var _a = this.props, value = _a.value, formItem = _a.formItem, valueField = _a.valueField, labelField = _a.labelField, source = _a.source, data = _a.data;
+        var selectedOptions;
+        if (!source ||
+            !formItem ||
+            (valueField || 'value') === (labelField || 'label') ||
+            ((selectedOptions = formItem.getSelectedOptions(value)) &&
+                (!selectedOptions.length ||
+                    selectedOptions[0][valueField || 'value'] !==
+                        selectedOptions[0][labelField || 'label']))) {
+            return;
+        }
+        var ctx = createObject(data, {
+            value: value,
+            op: 'loadOptions'
+        });
+        if (isPureVariable(source)) {
+            formItem.setOptions(resolveVariableAndFilter(source, data, '| raw'));
+        }
+        else if (isEffectiveApi(source, ctx)) {
+            formItem.loadOptions(source, ctx, {
+                autoAppend: true
+            });
+        }
+    };
+    PickerControl.prototype.buildSchema = function (props) {
+        var _a, _b;
+        var isScopeData = isPureVariable(props.source);
+        return __assign(__assign({ checkOnItemClick: true }, props.pickerSchema), { labelTpl: (_b = (_a = props.pickerSchema) === null || _a === void 0 ? void 0 : _a.labelTpl) !== null && _b !== void 0 ? _b : props.labelTpl, type: 'crud', pickerMode: true, syncLocation: false, api: isScopeData ? null : props.source, source: isScopeData ? props.source : null, keepItemSelectionOnPageChange: true, valueField: props.valueField, labelField: props.labelField, 
+            // 不支持批量操作，会乱套
+            bulkActions: props.multiple
+                ? props.pickerSchema.bulkActions
+                : [] });
+    };
+    PickerControl.prototype.crudRef = function (ref) {
+        while (ref && ref.getWrappedInstance) {
+            ref = ref.getWrappedInstance();
+        }
+        this.crud = ref;
+    };
+    PickerControl.prototype.reload = function () {
+        if (this.crud) {
+            this.crud.search();
+        }
+        else {
+            var reload = this.props.reloadOptions;
+            reload && reload();
+        }
+    };
+    PickerControl.prototype.open = function () {
+        this.setState({
+            isOpened: true
+        });
+    };
+    PickerControl.prototype.close = function () {
+        this.setState({
+            isOpened: false
+        });
+    };
+    PickerControl.prototype.handleModalConfirm = function (values, action, ctx, components) {
+        var idx = findIndex(components, function (item) { return item.props.type === 'crud'; });
+        this.handleChange(values[idx].items);
+        this.close();
+    };
+    PickerControl.prototype.handleChange = function (items) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, joinValues, valueField, delimiter, extractValue, multiple, options, data, dispatchEvent, setOptions, onChange, value, additionalOptions, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, joinValues = _a.joinValues, valueField = _a.valueField, delimiter = _a.delimiter, extractValue = _a.extractValue, multiple = _a.multiple, options = _a.options, data = _a.data, dispatchEvent = _a.dispatchEvent, setOptions = _a.setOptions, onChange = _a.onChange;
+                        value = items;
+                        if (joinValues) {
+                            value = items
+                                .map(function (item) { return item[valueField || 'value']; })
+                                .join(delimiter || ',');
+                        }
+                        else if (extractValue) {
+                            value = multiple
+                                ? items.map(function (item) { return item[valueField || 'value']; })
+                                : (items[0] && items[0][valueField || 'value']) || '';
+                        }
+                        else {
+                            value = multiple ? items : items[0];
+                        }
+                        additionalOptions = [];
+                        items.forEach(function (item) {
+                            if (!find(options, function (option) { return item[valueField || 'value'] == option[valueField || 'value']; })) {
+                                additionalOptions.push(item);
+                            }
+                        });
+                        additionalOptions.length && setOptions(options.concat(additionalOptions));
+                        return [4 /*yield*/, dispatchEvent('change', createObject(data, { value: value, option: items[0] }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        onChange(value);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PickerControl.prototype.removeItem = function (index) {
+        var _a = this.props, selectedOptions = _a.selectedOptions, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter, valueField = _a.valueField, onChange = _a.onChange, multiple = _a.multiple;
+        var items = selectedOptions.concat();
+        items.splice(index, 1);
+        var value = items;
+        if (joinValues) {
+            value = items
+                .map(function (item) { return item[valueField || 'value']; })
+                .join(delimiter || ',');
+        }
+        else if (extractValue) {
+            value = multiple
+                ? items.map(function (item) { return item[valueField || 'value']; })
+                : (items[0] && items[0][valueField || 'value']) || '';
+        }
+        else {
+            value = multiple ? items : items[0];
+        }
+        onChange(value);
+    };
+    PickerControl.prototype.handleKeyDown = function (e) {
+        var selectedOptions = this.props.selectedOptions;
+        if (e.key === ' ') {
+            this.open();
+            e.preventDefault();
+        }
+        else if (selectedOptions.length && e.key == 'Backspace') {
+            this.removeItem(selectedOptions.length - 1);
+        }
+    };
+    PickerControl.prototype.handleFocus = function () {
+        this.setState({
+            isFocused: true
+        });
+    };
+    PickerControl.prototype.handleBlur = function () {
+        this.setState({
+            isFocused: false
+        });
+    };
+    PickerControl.prototype.handleClick = function () {
+        this.input.current && this.input.current.focus();
+    };
+    PickerControl.prototype.clearValue = function () {
+        var _a = this.props, onChange = _a.onChange, resetValue = _a.resetValue;
+        onChange(resetValue !== void 0 ? resetValue : '');
+    };
+    PickerControl.prototype.renderValues = function () {
+        var _this = this;
+        var _a = this.props, ns = _a.classPrefix, selectedOptions = _a.selectedOptions, labelField = _a.labelField, labelTpl = _a.labelTpl, __ = _a.translate, disabled = _a.disabled;
+        return (React.createElement("div", { className: "".concat(ns, "Picker-values") }, selectedOptions.map(function (item, index) { return (React.createElement("div", { key: index, className: cx("".concat(ns, "Picker-value"), {
+                'is-disabled': disabled
+            }) },
+            React.createElement("span", { "data-tooltip": __('delete'), "data-position": "bottom", className: "".concat(ns, "Picker-valueIcon"), onClick: _this.removeItem.bind(_this, index) }, "\u00D7"),
+            React.createElement("span", { className: "".concat(ns, "Picker-valueLabel") }, labelTpl ? (React.createElement(Html, { html: filter(labelTpl, item) })) : ("".concat(getVariable(item, labelField || 'label') ||
+                getVariable(item, 'id')))))); })));
+    };
+    PickerControl.prototype.renderBody = function (_a) {
+        var _b = _a === void 0 ? {} : _a, popOverContainer = _b.popOverContainer;
+        var _c = this.props, render = _c.render, selectedOptions = _c.selectedOptions, options = _c.options, multiple = _c.multiple, valueField = _c.valueField, embed = _c.embed, source = _c.source;
+        return render('modal-body', this.state.schema, {
+            value: selectedOptions,
+            valueField: valueField,
+            primaryField: valueField,
+            options: source ? [] : options,
+            multiple: multiple,
+            onSelect: embed ? this.handleChange : undefined,
+            ref: this.crudRef,
+            popOverContainer: popOverContainer
+        });
+    };
+    PickerControl.prototype.render = function () {
+        var _a = this.props, className = _a.className, cx = _a.classnames, disabled = _a.disabled, render = _a.render, modalMode = _a.modalMode, source = _a.source, size = _a.size; _a.env; var clearable = _a.clearable, multiple = _a.multiple, placeholder = _a.placeholder, embed = _a.embed; _a.value; var selectedOptions = _a.selectedOptions, __ = _a.translate, popOverContainer = _a.popOverContainer;
+        return (React.createElement("div", { className: cx("PickerControl", className) }, embed ? (React.createElement("div", { className: cx('Picker') }, this.renderBody({ popOverContainer: popOverContainer }))) : (React.createElement("div", { className: cx("Picker", {
+                'Picker--single': !multiple,
+                'Picker--multi': multiple,
+                'is-focused': this.state.isFocused,
+                'is-disabled': disabled
+            }) },
+            React.createElement("div", { onClick: this.handleClick, className: cx('Picker-input') },
+                !selectedOptions.length && placeholder ? (React.createElement("div", { className: cx('Picker-placeholder') }, __(placeholder))) : null,
+                React.createElement("div", { className: cx('Picker-valueWrap') },
+                    this.renderValues(),
+                    React.createElement("input", { onChange: noop, value: '', ref: this.input, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur })),
+                clearable && !disabled && selectedOptions.length ? (React.createElement("a", { onClick: this.clearValue, className: cx('Picker-clear') },
+                    React.createElement(Icon, { icon: "input-clear", className: "icon" }))) : null,
+                React.createElement("span", { onClick: this.open, className: cx('Picker-btn') },
+                    React.createElement(Icon, { icon: "window-restore", className: "icon" }))),
+            render('modal', {
+                title: __('Select.placeholder'),
+                size: size,
+                type: modalMode,
+                body: {
+                    children: this.renderBody
+                }
+            }, {
+                key: 'modal',
+                lazyRender: !!source,
+                onConfirm: this.handleModalConfirm,
+                onClose: this.close,
+                show: this.state.isOpened
+            })))));
+    };
+    PickerControl.propsList = [
+        'modalMode',
+        'pickerSchema',
+        'labelField',
+        'onChange',
+        'options',
+        'value',
+        'inline',
+        'multiple',
+        'embed',
+        'resetValue',
+        'placeholder',
+        'onQuery' // 防止 Form 的 onQuery 事件透传下去，不然会导致 table 先后触发 Form 和 Crud 的 onQuery
+    ];
+    PickerControl.defaultProps = {
+        modalMode: 'dialog',
+        multiple: false,
+        placeholder: 'Picker.placeholder',
+        labelField: 'label',
+        valueField: 'value',
+        pickerSchema: {
+            mode: 'list',
+            listItem: {
+                title: '${label|raw}'
+            }
+        },
+        embed: false
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], PickerControl.prototype, "crudRef", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], PickerControl.prototype, "open", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], PickerControl.prototype, "close", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array, Object, Object, Array]),
+        __metadata("design:returntype", void 0)
+    ], PickerControl.prototype, "handleModalConfirm", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", Promise)
+    ], PickerControl.prototype, "handleChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], PickerControl.prototype, "handleKeyDown", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], PickerControl.prototype, "handleFocus", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], PickerControl.prototype, "handleBlur", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], PickerControl.prototype, "handleClick", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], PickerControl.prototype, "clearValue", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], PickerControl.prototype, "renderBody", null);
+    return PickerControl;
+}(React.PureComponent));
+/** @class */ ((function (_super) {
+    __extends(PickerControlRenderer, _super);
+    function PickerControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PickerControlRenderer = __decorate([
+        OptionsControl({
+            type: 'picker',
+            autoLoadOptionsFromSource: false,
+            sizeMutable: false
+        })
+    ], PickerControlRenderer);
+    return PickerControlRenderer;
+})(PickerControl));
+
+export { PickerControl as default };

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { OptionsControlProps, Option } from 'amis-core';
+import { ActionObject } from 'amis-core';
+import { FormOptionsSchema } from '../../Schema';
+/**
+ * Radio 单选框。
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/radios
+ */
+export interface RadiosControlSchema extends FormOptionsSchema {
+    type: 'radios';
+    /**
+     * 每行显示多少个
+     */
+    columnsCount?: number;
+}
+export interface RadiosProps extends OptionsControlProps {
+    placeholder?: any;
+    columnsCount?: number;
+    labelField?: string;
+    /**
+     * @deprecated 和checkbox的labelClassName有冲突，请用optionClassName代替
+     */
+    labelClassName?: string;
+    /** 选项CSS类名 */
+    optionClassName?: string;
+}
+export default class RadiosControl extends React.Component<RadiosProps, any> {
+    static defaultProps: Partial<RadiosProps>;
+    doAction(action: ActionObject, data: object, throwErrors: boolean): void;
+    handleChange(option: Option): Promise<void>;
+    reload(): void;
+    render(): JSX.Element;
+}
+export declare class RadiosControlRenderer extends RadiosControl {
+    static defaultProps: {
+        multiple: boolean;
+        inline: boolean;
+    };
+}

package/esm/renderers/Form/Radios.js

@@ -0,0 +1,91 @@
+/**
+ * amis v2.0.0-rc.16
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __awaiter, __generator, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import cx from 'classnames';
+import { Radios } from 'amis-ui';
+import { createObject, autobind, OptionsControl } from 'amis-core';
+
+var RadiosControl = /** @class */ (function (_super) {
+    __extends(RadiosControl, _super);
+    function RadiosControl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RadiosControl.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 : '');
+        }
+    };
+    RadiosControl.prototype.handleChange = function (option) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, joinValues, extractValue, valueField, onChange, dispatchEvent, options, data, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, joinValues = _a.joinValues, extractValue = _a.extractValue, valueField = _a.valueField, onChange = _a.onChange, dispatchEvent = _a.dispatchEvent, options = _a.options, data = _a.data;
+                        if (option && (joinValues || extractValue)) {
+                            option = option[valueField || 'value'];
+                        }
+                        return [4 /*yield*/, dispatchEvent('change', createObject(data, {
+                                value: option,
+                                options: options
+                            }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        onChange && onChange(option);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    RadiosControl.prototype.reload = function () {
+        var reload = this.props.reloadOptions;
+        reload && reload();
+    };
+    RadiosControl.prototype.render = function () {
+        var _a = this.props, className = _a.className, ns = _a.classPrefix, value = _a.value; _a.onChange; var disabled = _a.disabled, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter, placeholder = _a.placeholder, options = _a.options, _b = _a.inline, inline = _b === void 0 ? true : _b, formMode = _a.formMode, columnsCount = _a.columnsCount, classPrefix = _a.classPrefix, itemClassName = _a.itemClassName, labelClassName = _a.labelClassName, optionClassName = _a.optionClassName, labelField = _a.labelField, valueField = _a.valueField, __ = _a.translate, optionType = _a.optionType, level = _a.level;
+        return (React.createElement(Radios, { inline: inline || formMode === 'inline', className: cx("".concat(ns, "RadiosControl"), className), value: typeof value === 'undefined' || value === null ? '' : value, disabled: disabled, onChange: this.handleChange, joinValues: joinValues, extractValue: extractValue, delimiter: delimiter, 
+            /** 兼容一下错误的用法 */
+            labelClassName: optionClassName !== null && optionClassName !== void 0 ? optionClassName : labelClassName, labelField: labelField, valueField: valueField, placeholder: __(placeholder), options: options, columnsCount: columnsCount, classPrefix: classPrefix, itemClassName: itemClassName, optionType: optionType, level: level }));
+    };
+    RadiosControl.defaultProps = {
+        columnsCount: 1
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", Promise)
+    ], RadiosControl.prototype, "handleChange", null);
+    return RadiosControl;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(RadiosControlRenderer, _super);
+    function RadiosControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RadiosControlRenderer.defaultProps = {
+        multiple: false,
+        inline: true
+    };
+    RadiosControlRenderer = __decorate([
+        OptionsControl({
+            type: 'radios',
+            sizeMutable: false
+        })
+    ], RadiosControlRenderer);
+    return RadiosControlRenderer;
+})(RadiosControl));
+
+export { RadiosControl as default };