amis 2.0.0-rc.9 → 2.0.0

package/esm/renderers/Form/TreeSelect.js

@@ -0,0 +1,376 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __awaiter, __generator, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { createObject, isEffectiveApi, normalizeOptions, getTreeAncestors, isMobile, Overlay, PopOver, autobind, OptionsControl } from 'amis-core';
+import { Tree, ResultBox, Spinner, PopUp } from 'amis-ui';
+import { matchSorter } from 'match-sorter';
+import debouce from 'lodash/debounce';
+import find from 'lodash/find';
+import { findDOMNode } from 'react-dom';
+
+var TreeSelectControl = /** @class */ (function (_super) {
+    __extends(TreeSelectControl, _super);
+    function TreeSelectControl(props) {
+        var _this = _super.call(this, props) || this;
+        _this.container = React.createRef();
+        _this.input = React.createRef();
+        _this.cache = {};
+        _this.targetRef = function (ref) {
+            return (_this.target = ref ? findDOMNode(ref) : null);
+        };
+        _this.state = {
+            inputValue: '',
+            isOpened: false
+        };
+        _this.open = _this.open.bind(_this);
+        _this.close = _this.close.bind(_this);
+        _this.handleChange = _this.handleChange.bind(_this);
+        _this.clearValue = _this.clearValue.bind(_this);
+        _this.handleFocus = _this.handleFocus.bind(_this);
+        _this.handleBlur = _this.handleBlur.bind(_this);
+        _this.handleKeyPress = _this.handleKeyPress.bind(_this);
+        _this.handleInputChange = _this.handleInputChange.bind(_this);
+        _this.handleInputKeyDown = _this.handleInputKeyDown.bind(_this);
+        _this.loadRemote = debouce(_this.loadRemote.bind(_this), 250, {
+            trailing: true,
+            leading: false
+        });
+        return _this;
+    }
+    TreeSelectControl.prototype.componentDidMount = function () {
+        this.loadRemote('');
+    };
+    TreeSelectControl.prototype.open = function (fn) {
+        if (this.props.disabled) {
+            return;
+        }
+        this.setState({
+            isOpened: true
+        }, fn);
+    };
+    TreeSelectControl.prototype.close = function () {
+        var _this = this;
+        this.setState({
+            isOpened: false,
+            inputValue: this.props.multiple ? this.state.inputValue : ''
+        }, function () { return _this.loadRemote(_this.state.inputValue); });
+    };
+    TreeSelectControl.prototype.handleFocus = function (e) {
+        var _a = this.props, dispatchEvent = _a.dispatchEvent, value = _a.value, data = _a.data;
+        dispatchEvent('focus', createObject(data, {
+            value: value
+        }));
+    };
+    TreeSelectControl.prototype.handleBlur = function (e) {
+        var _a = this.props, dispatchEvent = _a.dispatchEvent, value = _a.value, data = _a.data;
+        dispatchEvent('blur', createObject(data, {
+            value: value
+        }));
+    };
+    TreeSelectControl.prototype.handleKeyPress = function (e) {
+        if (e.key === ' ') {
+            this.handleOutClick(e);
+            e.preventDefault();
+        }
+    };
+    TreeSelectControl.prototype.validate = function () {
+        var _a = this.props, value = _a.value, minLength = _a.minLength, maxLength = _a.maxLength, delimiter = _a.delimiter, __ = _a.translate;
+        var curValue = Array.isArray(value)
+            ? value
+            : (value ? String(value) : '').split(delimiter || ',');
+        if (minLength && curValue.length < minLength) {
+            return __('已选择数量低于设定的最小个数${minLength}，请选择更多的选项。', { minLength: minLength });
+        }
+        else if (maxLength && curValue.length > maxLength) {
+            return __('已选择数量超出设定的最大个数{{maxLength}}，请取消选择超出的选项。', { maxLength: maxLength });
+        }
+    };
+    TreeSelectControl.prototype.removeItem = function (index, e) {
+        var _a = this.props, selectedOptions = _a.selectedOptions, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter, valueField = _a.valueField, onChange = _a.onChange, disabled = _a.disabled;
+        e && e.stopPropagation();
+        if (disabled) {
+            return;
+        }
+        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 = items.map(function (item) { return item[valueField || 'value']; });
+        }
+        onChange(value);
+    };
+    TreeSelectControl.prototype.handleChange = function (value) {
+        var _this = this;
+        var multiple = this.props.multiple;
+        if (!multiple) {
+            this.close();
+        }
+        multiple || !this.state.inputValue
+            ? this.resultChangeEvent(value)
+            : this.setState({
+                inputValue: ''
+            }, function () { return _this.resultChangeEvent(value); });
+    };
+    TreeSelectControl.prototype.handleInputChange = function (value) {
+        var _this = this;
+        var _a = this.props, autoComplete = _a.autoComplete, data = _a.data;
+        this.setState({
+            inputValue: value
+        }, isEffectiveApi(autoComplete, data)
+            ? function () { return _this.loadRemote(_this.state.inputValue); }
+            : undefined);
+    };
+    TreeSelectControl.prototype.handleInputKeyDown = function (event) {
+        var inputValue = this.state.inputValue;
+        var _a = this.props, multiple = _a.multiple, selectedOptions = _a.selectedOptions;
+        if (event.key === 'Backspace' &&
+            !inputValue &&
+            selectedOptions.length &&
+            multiple) {
+            this.removeItem(selectedOptions.length - 1);
+        }
+    };
+    TreeSelectControl.prototype.clearValue = function () {
+        var _a = this.props, onChange = _a.onChange, resetValue = _a.resetValue;
+        onChange(typeof resetValue === 'undefined' ? '' : resetValue);
+    };
+    TreeSelectControl.prototype.filterOptions = function (options, keywords) {
+        var _this = this;
+        var _a = this.props, labelField = _a.labelField, valueField = _a.valueField;
+        return options.map(function (option) {
+            option = __assign({}, option);
+            option.visible = !!matchSorter([option], keywords, {
+                keys: [labelField || 'label', valueField || 'value']
+            }).length;
+            if (!option.visible && option.children) {
+                option.children = _this.filterOptions(option.children, keywords);
+                var visibleCount = option.children.filter(function (item) { return item.visible; }).length;
+                option.visible = !!visibleCount;
+            }
+            option.visible && (option.collapsed = false);
+            return option;
+        });
+    };
+    TreeSelectControl.prototype.loadRemote = function (input) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, autoComplete, env, data, setOptions, setLoading, options, combinedOptions, ret, options, combinedOptions;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, autoComplete = _a.autoComplete, env = _a.env, data = _a.data, setOptions = _a.setOptions, setLoading = _a.setLoading;
+                        if (!isEffectiveApi(autoComplete, data)) {
+                            return [2 /*return*/];
+                        }
+                        else if (!env || !env.fetcher) {
+                            throw new Error('fetcher is required');
+                        }
+                        if (this.cache[input] || ~input.indexOf("'") /*中文没输完 233*/) {
+                            options = this.cache[input] || [];
+                            combinedOptions = this.mergeOptions(options);
+                            setOptions(combinedOptions);
+                            return [2 /*return*/, Promise.resolve({
+                                    options: combinedOptions
+                                })];
+                        }
+                        setLoading(true);
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, , 3, 4]);
+                        return [4 /*yield*/, env.fetcher(autoComplete, __assign(__assign({}, data), { term: input, value: input }))];
+                    case 2:
+                        ret = _b.sent();
+                        options = (ret.data && ret.data.options) || ret.data || [];
+                        this.cache[input] = options;
+                        combinedOptions = this.mergeOptions(options);
+                        setOptions(combinedOptions);
+                        return [2 /*return*/, {
+                                options: combinedOptions
+                            }];
+                    case 3:
+                        setLoading(false);
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    TreeSelectControl.prototype.mergeOptions = function (options) {
+        var selectedOptions = this.props.selectedOptions;
+        var combinedOptions = normalizeOptions(options).concat();
+        if (Array.isArray(selectedOptions) && selectedOptions.length) {
+            selectedOptions.forEach(function (option) {
+                if (!find(combinedOptions, function (item) { return item.value == option.value; })) {
+                    combinedOptions.push(__assign(__assign({}, option), { visible: false }));
+                }
+            });
+        }
+        return combinedOptions;
+    };
+    TreeSelectControl.prototype.reload = function () {
+        var reload = this.props.reloadOptions;
+        reload && reload();
+    };
+    TreeSelectControl.prototype.handleOutClick = function (e) {
+        e.defaultPrevented ||
+            this.setState({
+                isOpened: true
+            });
+    };
+    TreeSelectControl.prototype.handleResultChange = function (value) {
+        var _a = this.props, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter, valueField = _a.valueField, multiple = _a.multiple;
+        var newValue = Array.isArray(value) ? value.concat() : [];
+        if (!multiple && !newValue.length) {
+            this.resultChangeEvent('');
+            return;
+        }
+        if (joinValues || extractValue) {
+            newValue = value.map(function (item) { return item[valueField || 'value']; });
+        }
+        if (joinValues) {
+            newValue = newValue.join(delimiter || ',');
+        }
+        this.resultChangeEvent(newValue);
+    };
+    TreeSelectControl.prototype.doAction = function (action, data, throwErrors) {
+        if (action.actionType && ['clear', 'reset'].includes(action.actionType)) {
+            this.clearValue();
+        }
+    };
+    TreeSelectControl.prototype.resultChangeEvent = function (value) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, onChange, dispatchEvent, data, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, onChange = _a.onChange, dispatchEvent = _a.dispatchEvent, data = _a.data;
+                        return [4 /*yield*/, dispatchEvent('change', createObject(data, {
+                                value: value
+                            }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        onChange && onChange(value);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    TreeSelectControl.prototype.renderItem = function (item) {
+        var _a = this.props, labelField = _a.labelField, options = _a.options, hideNodePathLabel = _a.hideNodePathLabel;
+        if (hideNodePathLabel) {
+            return item[labelField || 'label'];
+        }
+        // 将所有祖先节点也展现出来
+        var ancestors = getTreeAncestors(options, item, true);
+        return "".concat(ancestors
+            ? ancestors.map(function (item) { return "".concat(item[labelField || 'label']); }).join(' / ')
+            : item[labelField || 'label']);
+    };
+    TreeSelectControl.prototype.domRef = function (ref) {
+        this.treeRef = ref;
+    };
+    TreeSelectControl.prototype.renderOuter = function () {
+        var _a = this.props, value = _a.value, enableNodePath = _a.enableNodePath, _b = _a.pathSeparator, pathSeparator = _b === void 0 ? '/' : _b, disabled = _a.disabled, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter; _a.placeholder; var options = _a.options, multiple = _a.multiple, valueField = _a.valueField, initiallyOpen = _a.initiallyOpen, unfoldedLevel = _a.unfoldedLevel, withChildren = _a.withChildren, rootLabel = _a.rootLabel, cascade = _a.cascade, rootValue = _a.rootValue, showIcon = _a.showIcon, showRadio = _a.showRadio; _a.popOverContainer; var onlyChildren = _a.onlyChildren, onlyLeaf = _a.onlyLeaf, ns = _a.classPrefix, optionsPlaceholder = _a.optionsPlaceholder, searchable = _a.searchable, autoComplete = _a.autoComplete, maxLength = _a.maxLength, minLength = _a.minLength, labelField = _a.labelField, nodePath = _a.nodePath, onAdd = _a.onAdd, creatable = _a.creatable, createTip = _a.createTip, addControls = _a.addControls, onEdit = _a.onEdit, editable = _a.editable, editTip = _a.editTip, editControls = _a.editControls, removable = _a.removable, removeTip = _a.removeTip, onDelete = _a.onDelete, rootCreatable = _a.rootCreatable, rootCreateTip = _a.rootCreateTip, __ = _a.translate, deferLoad = _a.deferLoad, expandTreeOptions = _a.expandTreeOptions, selfDisabledAffectChildren = _a.selfDisabledAffectChildren, showOutline = _a.showOutline, autoCheckChildren = _a.autoCheckChildren;
+        var filtedOptions = !isEffectiveApi(autoComplete) && searchable && this.state.inputValue
+            ? this.filterOptions(options, this.state.inputValue)
+            : options;
+        return (React.createElement(Tree, { classPrefix: ns, onRef: this.domRef, onlyChildren: onlyChildren, onlyLeaf: onlyLeaf, labelField: labelField, valueField: valueField, disabled: disabled, onChange: this.handleChange, joinValues: joinValues, extractValue: extractValue, delimiter: delimiter, placeholder: __(optionsPlaceholder), options: filtedOptions, highlightTxt: this.state.inputValue, multiple: multiple, initiallyOpen: initiallyOpen, unfoldedLevel: unfoldedLevel, withChildren: withChildren, autoCheckChildren: autoCheckChildren, rootLabel: __(rootLabel), rootValue: rootValue, showIcon: showIcon, showRadio: showRadio, showOutline: showOutline, cascade: cascade, foldedField: "collapsed", hideRoot: true, value: value || '', nodePath: nodePath, enableNodePath: enableNodePath, pathSeparator: pathSeparator, maxLength: maxLength, minLength: minLength, onAdd: onAdd, creatable: creatable, createTip: createTip, rootCreatable: rootCreatable, rootCreateTip: rootCreateTip, onEdit: onEdit, editable: editable, editTip: editTip, removable: removable, removeTip: removeTip, onDelete: onDelete, bultinCUD: !addControls && !editControls, onDeferLoad: deferLoad, onExpandTree: expandTreeOptions, selfDisabledAffectChildren: selfDisabledAffectChildren }));
+    };
+    TreeSelectControl.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, className = _a.className, disabled = _a.disabled, inline = _a.inline, loading = _a.loading, multiple = _a.multiple; _a.value; var clearable = _a.clearable, ns = _a.classPrefix, cx = _a.classnames, searchable = _a.searchable, autoComplete = _a.autoComplete, selectedOptions = _a.selectedOptions, placeholder = _a.placeholder, popOverContainer = _a.popOverContainer, useMobileUI = _a.useMobileUI, __ = _a.translate, env = _a.env;
+        var isOpened = this.state.isOpened;
+        var mobileUI = useMobileUI && isMobile();
+        return (React.createElement("div", { ref: this.container, className: cx("TreeSelectControl", className) },
+            React.createElement(ResultBox, { disabled: disabled, ref: this.targetRef, placeholder: __(placeholder || 'placeholder.empty'), className: cx("TreeSelect", {
+                    'TreeSelect--inline': inline,
+                    'TreeSelect--single': !multiple,
+                    'TreeSelect--multi': multiple,
+                    'TreeSelect--searchable': searchable || isEffectiveApi(autoComplete),
+                    'is-opened': this.state.isOpened,
+                    'is-disabled': disabled
+                }), result: multiple
+                    ? selectedOptions
+                    : selectedOptions.length
+                        ? this.renderItem(selectedOptions[0])
+                        : '', onResultClick: this.handleOutClick, value: this.state.inputValue, onChange: this.handleInputChange, onResultChange: this.handleResultChange, itemRender: this.renderItem, onKeyPress: this.handleKeyPress, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleInputKeyDown, clearable: clearable, allowInput: searchable || isEffectiveApi(autoComplete), inputPlaceholder: '' }, loading ? React.createElement(Spinner, { size: "sm" }) : undefined),
+            !mobileUI && isOpened ? (React.createElement(Overlay, { container: popOverContainer || (function () { return _this.container.current; }), target: function () { return _this.target; }, show: true },
+                React.createElement(PopOver, { classPrefix: ns, className: "".concat(ns, "TreeSelect-popover"), style: {
+                        minWidth: this.target ? this.target.offsetWidth : undefined
+                    }, onHide: this.close, overlay: true }, this.renderOuter()))) : null,
+            mobileUI ? (React.createElement(PopUp, { container: env && env.getModalContainer ? env.getModalContainer : undefined, className: cx("".concat(ns, "TreeSelect-popup")), isShow: isOpened, onHide: this.close }, this.renderOuter())) : null));
+    };
+    TreeSelectControl.defaultProps = {
+        placeholder: 'Select.placeholder',
+        optionsPlaceholder: 'placeholder.noData',
+        multiple: false,
+        clearable: true,
+        rootLabel: 'Tree.root',
+        rootValue: '',
+        showIcon: true,
+        joinValues: true,
+        extractValue: false,
+        delimiter: ',',
+        resetValue: '',
+        hideNodePathLabel: false,
+        enableNodePath: false,
+        pathSeparator: '/',
+        selfDisabledAffectChildren: true
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelectControl.prototype, "handleOutClick", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelectControl.prototype, "handleResultChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", Promise)
+    ], TreeSelectControl.prototype, "resultChangeEvent", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelectControl.prototype, "renderItem", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelectControl.prototype, "domRef", null);
+    return TreeSelectControl;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(TreeSelectControlRenderer, _super);
+    function TreeSelectControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TreeSelectControlRenderer = __decorate([
+        OptionsControl({
+            type: 'tree-select'
+        })
+    ], TreeSelectControlRenderer);
+    return TreeSelectControlRenderer;
+})(TreeSelectControl));
+
+export { TreeSelectControl as default };

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import { FormBaseControlSchema } from '../../Schema';
+/**
+ * UUID 功能性组件
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/uuid
+ */
+export interface UUIDControlSchema extends FormBaseControlSchema {
+    type: 'uuid';
+    /**
+     * 长度，默认 uuid 的长度是 36，如果不需要那么长，可以设置这个来缩短
+     */
+    length?: number;
+}
+export default class UUIDControl extends React.Component<FormControlProps, any> {
+    constructor(props: FormControlProps);
+    componentDidUpdate(props: FormControlProps): void;
+    setValue(): void;
+    render(): null;
+}
+export declare class UUIDControlRenderer extends UUIDControl {
+}

package/esm/renderers/Form/UUID.js

@@ -0,0 +1,52 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate } from 'tslib';
+import React from 'react';
+import { uuidv4, FormItem } from 'amis-core';
+
+var UUIDControl = /** @class */ (function (_super) {
+    __extends(UUIDControl, _super);
+    function UUIDControl(props) {
+        var _this = _super.call(this, props) || this;
+        if (!props.value) {
+            _this.setValue();
+        }
+        return _this;
+    }
+    UUIDControl.prototype.componentDidUpdate = function (props) {
+        if (!props.value) {
+            this.setValue();
+        }
+    };
+    UUIDControl.prototype.setValue = function () {
+        var props = this.props;
+        var uuid = uuidv4();
+        if (props.length) {
+            uuid = uuid.substring(0, props.length);
+        }
+        props.onChange(uuid);
+    };
+    UUIDControl.prototype.render = function () {
+        return null;
+    };
+    return UUIDControl;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(UUIDControlRenderer, _super);
+    function UUIDControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    UUIDControlRenderer = __decorate([
+        FormItem({
+            type: 'uuid',
+            wrap: false,
+            sizeMutable: false
+        })
+    ], UUIDControlRenderer);
+    return UUIDControlRenderer;
+})(UUIDControl));
+
+export { UUIDControl as default };

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { OptionsControlProps, Option } from 'amis-core';
+import { PlainObject } from 'amis-core';
+import { FormOptionsSchema } from '../../Schema';
+/**
+ * UserSelect 移动端人员选择。
+ */
+export interface UserSelectControlSchema extends FormOptionsSchema {
+    type: 'users-select';
+}
+export interface UserSelectProps extends OptionsControlProps {
+    /**
+     * 部门可选
+     */
+    isDep?: boolean;
+    /**
+     * 人员可选
+     */
+    isRef?: boolean;
+    /**
+     *
+     */
+    showNav?: boolean;
+    /**
+     * 导航头标题
+     */
+    navTitle?: string;
+    /**
+     * 选项卡模式
+     */
+    tabMode?: boolean;
+    tabOptions?: Array<any>;
+    /**
+     * 搜索字段
+     */
+    searchTerm?: string;
+    /**
+     * 搜索携带的额外参数
+     */
+    searchParam?: PlainObject;
+}
+export default class UserSelectControl extends React.Component<UserSelectProps, any> {
+    static defaultProps: Partial<UserSelectProps>;
+    input?: HTMLInputElement;
+    unHook: Function;
+    lazyloadRemote: Function;
+    constructor(props: UserSelectProps);
+    componentWillUnmount(): void;
+    onSearch(input: string, cancelExecutor: Function, param?: PlainObject): Promise<any>;
+    deferLoad(data?: Object, isRef?: boolean, param?: PlainObject): Promise<any>;
+    changeValue(value: Option | Array<Option> | string | void): Promise<void>;
+    render(): JSX.Element;
+}
+export declare class UserSelectControlRenderer extends UserSelectControl {
+}