amis-rev-ui 6.13.0

package/esm/components/UserTabSelect.js

@@ -0,0 +1,227 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __values, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { resolveVariableAndFilter, autobind, themeable, localeable } from 'amis-rev-core';
+import ResultBox from './ResultBox.js';
+import UserSelect from './UserSelect.js';
+import PopUp from './PopUp.js';
+import { Icon } from './icons.js';
+import ThemedTabs, { Tab } from './Tabs.js';
+
+/**
+ * @file 移动端人员、部门、角色、岗位选择
+ * @author fex
+ */
+var UserTabSelect = /** @class */ (function (_super) {
+    __extends(UserTabSelect, _super);
+    function UserTabSelect(props) {
+        var _this = _super.call(this, props) || this;
+        _this.unmounted = false;
+        _this.state = {
+            isOpened: false,
+            isSelectOpened: false,
+            inputValue: '',
+            options: [],
+            breadList: [],
+            searchList: [],
+            selection: props.selection ? props.selection : [],
+            isSearch: false,
+            searchLoading: false,
+            isEdit: false,
+            activeKey: 0
+        };
+        return _this;
+    }
+    UserTabSelect.prototype.componentDidMount = function () { };
+    UserTabSelect.prototype.componentDidUpdate = function (prevProps) { };
+    UserTabSelect.prototype.componentWillUnmount = function () {
+        this.unmounted = true;
+    };
+    UserTabSelect.prototype.onClose = function () {
+        this.setState({
+            isOpened: false,
+            isSearch: false,
+            inputValue: '',
+            searchList: [],
+            searchLoading: false,
+            activeKey: 0,
+            selection: []
+        });
+    };
+    UserTabSelect.prototype.onOpen = function () {
+        var _a = this.props.selection, selection = _a === void 0 ? [] : _a;
+        this.setState({
+            isOpened: true,
+            selection: selection.slice()
+        });
+    };
+    UserTabSelect.prototype.handleSubmit = function () {
+        var onChange = this.props.onChange;
+        onChange(this.state.selection);
+        this.onClose();
+    };
+    UserTabSelect.prototype.handleSelectChange = function (option, isReplace, isDelete) {
+        var _a = this.props, multiple = _a.multiple, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b;
+        var selection = this.state.selection.slice();
+        var selectionVals = selection.map(function (option) { return option[valueField]; });
+        if (isDelete) {
+            selection = selection.filter(function (item) { return item[valueField] !== option[valueField]; });
+        }
+        else if (isReplace && Array.isArray(option)) {
+            selection = option.slice();
+        }
+        else if (!Array.isArray(option)) {
+            var pos = selectionVals.indexOf(option[valueField]);
+            if (pos !== -1) {
+                selection.splice(pos, 1);
+            }
+            else {
+                if (multiple) {
+                    selection.push(option);
+                }
+                else {
+                    selection = [option];
+                }
+            }
+        }
+        this.setState({
+            selection: selection
+        });
+        return false;
+    };
+    UserTabSelect.prototype.handleImmediateChange = function (option) {
+        var onChange = this.props.onChange;
+        if (Array.isArray(option)) {
+            this.setState({
+                selection: option
+            });
+            onChange(option);
+        }
+    };
+    UserTabSelect.prototype.handleTabChange = function (key) {
+        this.setState({
+            activeKey: key
+        });
+    };
+    UserTabSelect.prototype.getResult = function () {
+        var e_1, _a, e_2, _b;
+        var _c = this.props, selection = _c.selection, tabOptions = _c.tabOptions, _d = _c.valueField, valueField = _d === void 0 ? 'value' : _d, _e = _c.labelField, labelField = _e === void 0 ? 'label' : _e;
+        var _selection = (selection === null || selection === void 0 ? void 0 : selection.slice()) || [];
+        if (tabOptions) {
+            try {
+                for (var tabOptions_1 = __values(tabOptions), tabOptions_1_1 = tabOptions_1.next(); !tabOptions_1_1.done; tabOptions_1_1 = tabOptions_1.next()) {
+                    var item = tabOptions_1_1.value;
+                    var _loop_1 = function (item2) {
+                        var res = _selection.find(function (item) { return item[valueField] === item2[valueField]; });
+                        if (res) {
+                            res[labelField] = item2[labelField];
+                        }
+                    };
+                    try {
+                        for (var _f = (e_2 = void 0, __values(item.options)), _g = _f.next(); !_g.done; _g = _f.next()) {
+                            var item2 = _g.value;
+                            _loop_1(item2);
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (tabOptions_1_1 && !tabOptions_1_1.done && (_a = tabOptions_1.return)) _a.call(tabOptions_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        }
+        return _selection;
+    };
+    UserTabSelect.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, cx = _a.classnames, __ = _a.translate, _b = _a.placeholder, placeholder = _b === void 0 ? '请选择' : _b, tabOptions = _a.tabOptions, onSearch = _a.onSearch, deferLoad = _a.deferLoad, data = _a.data, disabled = _a.disabled, displayFields = _a.displayFields, mobileUI = _a.mobileUI;
+        var _c = this.state, activeKey = _c.activeKey, isOpened = _c.isOpened;
+        return (React__default.createElement("div", { className: cx('UserTabSelect') },
+            React__default.createElement(ResultBox, { className: cx('UserTabSelect-input', isOpened ? 'is-active' : ''), allowInput: false, result: this.getResult(), onResultChange: this.handleImmediateChange, onResultClick: this.onOpen, placeholder: placeholder, mobileUI: mobileUI, disabled: disabled }),
+            React__default.createElement(PopUp, { isShow: isOpened, className: cx("UserTabSelect-popup"), onHide: this.onClose, showClose: false },
+                React__default.createElement("div", { className: cx('UserTabSelect-wrap') },
+                    React__default.createElement("div", { className: cx('UserSelect-navbar') },
+                        React__default.createElement("span", { className: "left-arrow-box", onClick: this.onClose },
+                            React__default.createElement(Icon, { icon: "left-arrow", className: "icon" })),
+                        React__default.createElement("div", { className: cx('UserSelect-navbar-title') }, "\u4EBA\u5458\u9009\u62E9")),
+                    React__default.createElement(ThemedTabs, { mode: "tiled", className: cx('UserTabSelect-tabs'), onSelect: this.handleTabChange, activeKey: activeKey }, tabOptions === null || tabOptions === void 0 ? void 0 : tabOptions.map(function (item, index) {
+                        return (React__default.createElement(Tab, __assign({}, _this.props, { eventKey: index, key: index, title: item.title, className: "TabsTransfer-tab" }),
+                            React__default.createElement(UserSelect, __assign({ isTab: true, selection: _this.state.selection, showResultBox: false }, item, { options: typeof item.options === 'string' && data
+                                    ? resolveVariableAndFilter(item.options, data, '| raw')
+                                    : item.options, multiple: true, controlled: true, displayFields: displayFields, onChange: _this.handleSelectChange, onSearch: function (input, cancelExecutor) {
+                                    return item.searchable && onSearch
+                                        ? onSearch(input, cancelExecutor, {
+                                            searchApi: item.searchApi,
+                                            searchParam: item.searchParam,
+                                            searchTerm: item.searchTerm
+                                        })
+                                        : undefined;
+                                }, deferLoad: function (data, isRef, param) {
+                                    return deferLoad(data, isRef, __assign({ deferApi: item.deferApi }, (param || {})));
+                                } }))));
+                    })),
+                    React__default.createElement("div", { className: cx('UserTabSelect-footer') },
+                        React__default.createElement("button", { type: "button", className: cx('Button Button--md Button--primary'), onClick: this.handleSubmit }, __('UserSelect.sure')))))));
+    };
+    UserTabSelect.defaultProps = {};
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], UserTabSelect.prototype, "onClose", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], UserTabSelect.prototype, "onOpen", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], UserTabSelect.prototype, "handleSubmit", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Boolean, Boolean]),
+        __metadata("design:returntype", void 0)
+    ], UserTabSelect.prototype, "handleSelectChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], UserTabSelect.prototype, "handleImmediateChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number]),
+        __metadata("design:returntype", void 0)
+    ], UserTabSelect.prototype, "handleTabChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], UserTabSelect.prototype, "getResult", null);
+    return UserTabSelect;
+}(React__default.Component));
+var UserTabSelect$1 = themeable(localeable(UserTabSelect));
+
+export { UserTabSelect, UserTabSelect$1 as default };

package/esm/components/VerificationCode.js

@@ -0,0 +1,172 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __assign, __rest, __read, __spreadArray } from 'tslib';
+import React__default, { useMemo, useEffect, useRef, useState } from 'react';
+import { themeable } from 'amis-rev-core';
+import Input from './Input.js';
+import isEqualWith from 'lodash/isEqualWith';
+
+var defaultLength = 6;
+function isExist(obj) {
+    return obj || obj === 0;
+}
+var Backspace = {
+    key: 'Backspace',
+    code: 8
+};
+function isUndefined(obj) {
+    return obj === undefined;
+}
+function usePrevious(value) {
+    var ref = useRef();
+    useEffect(function () {
+        ref.current = value;
+    });
+    return ref.current;
+}
+function useMergeValue(defaultStateValue, props) {
+    var value = (props || {}).value;
+    var firstRenderRef = useRef(true);
+    var prevPropsValue = usePrevious(value);
+    var _a = __read(useState(!isUndefined(value) ? value : defaultStateValue), 2), stateValue = _a[0], setStateValue = _a[1];
+    useEffect(function () {
+        if (firstRenderRef.current) {
+            firstRenderRef.current = false;
+            return;
+        }
+        if (value === undefined && prevPropsValue !== value) {
+            setStateValue(value);
+        }
+    }, [value]);
+    var mergedValue = isUndefined(value) ? stateValue : value;
+    return [mergedValue, setStateValue, stateValue];
+}
+function useVerificationCode(props) {
+    var _a = __read(useMergeValue('', props), 2), value = _a[0], setValue = _a[1];
+    var length = props.length
+        ? +props.length > 0
+            ? +props.length
+            : defaultLength
+        : defaultLength;
+    var filledValue = useMemo(function () {
+        var newVal = value ? String(value).split('') : [];
+        return new Array(length).fill('').map(function (_, index) {
+            return isExist(newVal[index]) ? String(newVal[index]) : '';
+        });
+    }, [value, length]);
+    var focusFirstEmptyInput = function () {
+        var _a, _b, _c;
+        var nodeList = ((_a = props.getInputRefList) === null || _a === void 0 ? void 0 : _a.call(props)) || [];
+        // 焦点的元素
+        if ((nodeList === null || nodeList === void 0 ? void 0 : nodeList.indexOf(document.activeElement)) === -1) {
+            return;
+        }
+        var index = filledValue.findIndex(function (x) { return !x; });
+        if (index > -1) {
+            var realIndex = Math.min(index, nodeList.length - 1);
+            (_c = (_b = nodeList[realIndex]) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+        }
+    };
+    useEffect(function () {
+        var _a, _b, _c;
+        focusFirstEmptyInput();
+        if (filledValue.length === length && filledValue.every(function (item) { return !!item; })) {
+            var nodeList = ((_a = props.getInputRefList) === null || _a === void 0 ? void 0 : _a.call(props)) || [];
+            (_c = (_b = nodeList[nodeList.length - 1]) === null || _b === void 0 ? void 0 : _b.blur) === null || _c === void 0 ? void 0 : _c.call(_b);
+        }
+    }, [JSON.stringify(filledValue)]);
+    var tryUpdateValue = function (newVal) {
+        var _a, _b;
+        if (!isEqualWith(newVal, value)) {
+            setValue(newVal);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newVal);
+            if (newVal.length === length) {
+                (_b = props.onFinish) === null || _b === void 0 ? void 0 : _b.call(props, newVal);
+            }
+        }
+    };
+    var handlePaste = function (e, index) {
+        e.preventDefault();
+        var clipboardData = e.clipboardData;
+        var text = clipboardData.getData('text');
+        if (text) {
+            tryUpdateValue(filledValue.slice(0, index).concat(text.split('')).join(''));
+        }
+    };
+    return {
+        value: value,
+        filledValue: filledValue,
+        setValue: tryUpdateValue,
+        getInputProps: function (index) {
+            var indexVal = String(filledValue[index]);
+            return {
+                key: index,
+                value: indexVal,
+                onClick: function (e) {
+                    e.preventDefault();
+                    if (!filledValue[index]) {
+                        focusFirstEmptyInput();
+                    }
+                },
+                onKeyDown: function (e) {
+                    var keyCode = e.key;
+                    if (keyCode === Backspace.key) {
+                        if (filledValue[index + 1]) {
+                            e.preventDefault();
+                            return;
+                        }
+                        var _index = index;
+                        if (!filledValue[index]) {
+                            _index -= 1;
+                        }
+                        var newVal = __spreadArray([], __read(filledValue), false);
+                        newVal[_index] = '';
+                        tryUpdateValue(newVal.join(''));
+                    }
+                },
+                onChange: function (v) {
+                    var char = (v === null || v === void 0 ? void 0 : v.trim()) || '';
+                    var newVal = __spreadArray([], __read(filledValue), false);
+                    newVal[index] = char.replace(indexVal, '').split('').pop() || '';
+                    tryUpdateValue(newVal.join(''));
+                },
+                onPaste: function (e) {
+                    handlePaste(e, index);
+                }
+            };
+        }
+    };
+}
+function VerificationCodeComponent(baseProps) {
+    var props = __assign({ length: defaultLength }, baseProps);
+    var separator = props.separator, length = props.length, masked = props.masked, disabled = props.disabled, readOnly = props.readOnly, cx = props.classnames, onChange = props.onChange, onFinish = props.onFinish, propsValue = props.value, style = props.style;
+    var focusEleRefList = React__default.useRef([]);
+    var _a = useVerificationCode({
+        value: propsValue,
+        length: length,
+        getInputRefList: function () { return focusEleRefList.current; },
+        onChange: onChange,
+        onFinish: onFinish
+    }), filledValue = _a.filledValue, getInputProps = _a.getInputProps;
+    return (React__default.createElement("div", { className: cx('Verification-code'), style: style }, filledValue.map(function (v, index) {
+        var _a = getInputProps(index), InputChange = _a.onChange, onClick = _a.onClick, onPaste = _a.onPaste, onKeyDown = _a.onKeyDown, restInputProps = __rest(_a, ["onChange", "onClick", "onPaste", "onKeyDown"]);
+        return (React__default.createElement(React__default.Fragment, { key: index },
+            React__default.createElement(Input, __assign({ disabled: disabled, readOnly: readOnly, ref: function (node) {
+                    return (focusEleRefList.current[index] = node);
+                }, className: cx({
+                    'is-disabled': !!disabled
+                }) }, restInputProps, { onClick: !readOnly ? onClick : undefined, onPaste: !readOnly ? onPaste : undefined, onKeyDown: !readOnly ? onKeyDown : undefined, onChange: !readOnly
+                    ? function (e) {
+                        var inputValue = (e.target.value || '').trim();
+                        InputChange(inputValue);
+                    }
+                    : undefined, type: masked ? 'password' : 'text' })), separator === null || separator === void 0 ? void 0 :
+            separator({ index: index, character: v })));
+    })));
+}
+var VerificationCode = themeable(VerificationCodeComponent);
+
+export { Backspace, VerificationCodeComponent, VerificationCode as default, isExist, isUndefined, useMergeValue, usePrevious, useVerificationCode };

package/esm/components/VirtualList.d.ts

@@ -0,0 +1,2 @@
+import VirtualList from './virtual-list';
+export default VirtualList;

package/esm/components/VirtualList.js

@@ -0,0 +1,7 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import VirtualList from './virtual-list/index.js';
+export { default } from './virtual-list/index.js';

package/esm/components/WithRemoteConfig.d.ts

@@ -0,0 +1,70 @@
+/**
+ * 一个可以拉取远程配置的 HOC
+ *
+ */
+import React from 'react';
+import { Instance } from 'mobx-state-tree';
+import type { RendererEnv } from 'amis-rev-core';
+import { Api, Payload } from 'amis-rev-core';
+export declare const Store: import("mobx-state-tree").IModelType<{
+    fetching: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    errorMsg: import("mobx-state-tree").IType<string | undefined, string, string>;
+    config: import("mobx-state-tree").IType<any, any, any>;
+    data: import("mobx-state-tree").IType<{} | null | undefined, {}, {}>;
+}, {
+    setComponent(c: any): void;
+    load: (env: RendererEnv, api: Api, ctx: any, config?: WithRemoteConfigSettings | undefined) => Promise<unknown>;
+    setData(data: any): void;
+    setConfig(options: any, config: WithRemoteConfigSettings, motivation?: any): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export type IStore = Instance<typeof Store>;
+export interface OutterProps {
+    env?: RendererEnv;
+    data: any;
+    source?: Api;
+    autoComplete?: Api;
+    deferApi?: Api;
+    remoteConfigRef?: (instance: {
+        loadConfig: (ctx?: any) => Promise<any> | void;
+        setConfig: (value: any) => void;
+        syncConfig: () => void;
+    } | undefined) => void;
+}
+export interface RemoteOptionsProps<T = any> {
+    config: T;
+    loading?: boolean;
+    deferLoad: (item: any) => Promise<any>;
+    updateConfig: (value: T, ctx?: any) => void;
+}
+export interface WithRemoteConfigSettings {
+    sourceField?: string;
+    /**
+     * 从接口返回数据适配到配置
+     */
+    adaptor?: (json: any, props: any) => any;
+    /**
+     * 配置格式化
+     */
+    normalizeConfig?: (config: any, origin: any, props: any, motivation?: any) => any;
+    /**
+     * 请求返回后的回调
+     */
+    afterLoad?: (ret: any, config: any, props: any) => void;
+    /**
+     * 懒加载选项相关，开始懒加载的回调
+     */
+    beforeDeferLoad?: (item: any, indexes: Array<number>, config: any, props: any) => any;
+    /**
+     * 懒加载选项相关，结束懒加载的回调
+     */
+    afterDeferLoad?: (item: any, indexes: Array<number>, reponse: Payload, config: any, props: any) => any;
+    injectedPropsFilter?: (injectedProps: {
+        config: any;
+        loading?: boolean;
+        deferLoad: (term: string) => any;
+        updateConfig: (config: any) => void;
+    }, props: any) => any;
+}
+export declare function withRemoteConfig<P = any>(config?: WithRemoteConfigSettings): <T extends React.ComponentType<React.ComponentProps<T> & RemoteOptionsProps<P>>>(ComposedComponent: T) => any & {
+    ComposedComponent: T;
+};