"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RecycleTreeFilterDecorator = void 0;
const tslib_1 = require("tslib");
const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
const react_1 = tslib_1.__importStar(require("react"));
const icon_1 = require("../../../icon");
const input_1 = require("../../../input");
const locale_context_provider_1 = require("../../../locale-context-provider");
require("./filter.less");
const FILTER_AREA_HEIGHT = 30;
const TREE_FILTER_DELAY = 500;
const FilterInput = (props) => {
    const { localize } = react_1.default.useContext(locale_context_provider_1.LocalizeContext);
    return (react_1.default.createElement("div", { className: 'kt-recycle-tree-filter-wrapper' },
        react_1.default.createElement(input_1.Input, Object.assign({ hasClear: true, autoFocus: true, className: 'kt-recycle-tree-filter-input', size: 'small' }, props, { placeholder: props.placeholder || localize('tree.filter.placeholder'), addonBefore: react_1.default.createElement(icon_1.Icon, { className: 'kt-recycle-tree-filter-icon', icon: 'retrieval' }) }))));
};
/**
 * 将 RecycleTree 组件装饰到具备筛选功能
 * @param recycleTreeComp RecycleTree 组件
 * 将原有的 RecycleTree 拓展增加三个新的 props
 *  * @param filterEnabled @optional 筛选模式控制开关
 *  * @param filterAfterClear @optional 清空筛选 input 输入时的回调
 *  * @param filterAutoFocus @optional 是否自动聚焦
 *  * @param filterPlaceholder @optional 筛选 input 的 placeholder
 */
const RecycleTreeFilterDecorator = (recycleTreeComp) => (props) => {
    const [value, setValue] = react_1.default.useState('');
    // 引入多一个filter状态是为了在实际filter生效前不阻塞输入框值变化的过程
    const [filter, setFilter] = react_1.default.useState('');
    const { beforeFilterValueChange, filterEnabled, height, filterPlaceholder, filterAfterClear, onReady, onFilterBlur, filterAutoFocus } = props, recycleTreeProps = tslib_1.__rest(props, ["beforeFilterValueChange", "filterEnabled", "height", "filterPlaceholder", "filterAfterClear", "onReady", "onFilterBlur", "filterAutoFocus"]);
    const handleFilterChange = (0, throttle_1.default)(async (value) => {
        if (beforeFilterValueChange) {
            await beforeFilterValueChange(value);
        }
        setFilter(value);
    }, TREE_FILTER_DELAY);
    const handleFilterInputChange = (0, react_1.useCallback)((value) => {
        setValue(value);
        handleFilterChange(value);
    }, [value]);
    const filterTreeReadyHandle = (0, react_1.useCallback)((api) => {
        onReady &&
            onReady(Object.assign(Object.assign({}, api), { clearFilter: () => {
                    setFilter('');
                    setValue('');
                } }));
    }, [onReady]);
    return (react_1.default.createElement(react_1.default.Fragment, null,
        filterEnabled && (react_1.default.createElement(FilterInput, { afterClear: filterAfterClear, placeholder: filterPlaceholder, value: value, autoFocus: filterAutoFocus, onBlur: onFilterBlur, onValueChange: handleFilterInputChange })),
        react_1.default.createElement(recycleTreeComp, Object.assign(Object.assign({}, recycleTreeProps), { height: height - (filterEnabled ? FILTER_AREA_HEIGHT : 0), onReady: filterTreeReadyHandle, filter }))));
};
exports.RecycleTreeFilterDecorator = RecycleTreeFilterDecorator;
//# sourceMappingURL=index.js.map