zent/es/select-menu/SelectMenu.js

一套前端设计语言和基于React的实现

import { __assign, __extends } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import memoize from '../utils/memorize-one';
import MenuList from './MenuList';
var isStringOrNumber = function (x) {
    return typeof x === 'string' || typeof x === 'number';
};
export function caselessMatchFilterOption(searchText, item) {
    if (!searchText) {
        return true;
    }
    if (isStringOrNumber(item.searchContent)) {
        return ("" + item.searchContent)
            .toUpperCase()
            .includes(searchText.toUpperCase());
    }
    else if (isStringOrNumber(item.content)) {
        return ("" + item.content).toUpperCase().includes(searchText.toUpperCase());
    }
    else if (isStringOrNumber(item.value)) {
        return ("" + item.value).toUpperCase().includes(searchText.toUpperCase());
    }
    return false;
}
var SelectMenu = (function (_super) {
    __extends(SelectMenu, _super);
    function SelectMenu() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.refMenuItemList = createRef();
        _this.wrapWithIdx = function (items, parentIndexes) {
            if (items === void 0) { items = []; }
            if (parentIndexes === void 0) { parentIndexes = []; }
            return items.map(function (item, idx) { return (__assign(__assign({}, item), { idx: idx, parentIndexes: parentIndexes, items: item.items
                    ? _this.wrapWithIdx(item.items, parentIndexes.concat([idx]))
                    : undefined })); });
        };
        _this.wrapWithNullOption = function (items, nullOptionContent) {
            if (items === void 0) { items = []; }
            return [
                {
                    content: nullOptionContent,
                    value: null,
                    idx: -1,
                    parentIndexes: [],
                },
            ].concat(items);
        };
        _this.wrapWithValueCallback = function (items) {
            if (items === void 0) { items = []; }
            return items.map(function (item) { return (__assign(__assign(__assign({ active: function (value) { return value === _this.props.value; } }, item), (item.value !== undefined
                ? {
                    onClick: function (e) {
                        _this.props.onSelect && _this.props.onSelect(item.value, item);
                        item.onClick && item.onClick(e);
                    },
                }
                : {})), { items: _this.wrapWithValueCallback(item.items) })); });
        };
        _this.transformItems = memoize(function (items, nullOption, nullOptionContent) {
            var wrappedItems = _this.wrapWithIdx(items);
            if (nullOption) {
                wrappedItems = _this.wrapWithNullOption(wrappedItems, nullOptionContent);
            }
            wrappedItems = _this.wrapWithValueCallback(wrappedItems);
            return wrappedItems;
        });
        _this.moveFocusIndexDown = function () {
            var menuList = _this.refMenuItemList.current;
            if (menuList) {
                return menuList.moveFocusIndexDown();
            }
        };
        _this.moveFocusIndexUp = function () {
            var menuList = _this.refMenuItemList.current;
            if (menuList) {
                return menuList.moveFocusIndexUp();
            }
        };
        _this.selectCurrentFocusIndex = function (e) {
            var menuList = _this.refMenuItemList.current;
            if (menuList) {
                return menuList.selectCurrentFocusIndex(e);
            }
        };
        return _this;
    }
    SelectMenu.prototype.render = function () {
        var _a = this.props, filterOption = _a.filterOption, searchText = _a.searchText, rawItems = _a.items, nullOption = _a.nullOption, nullOptionContent = _a.nullOptionContent;
        var items = this.transformItems(rawItems, nullOption, nullOptionContent);
        var filteredItems = items || [];
        if (typeof filterOption === 'function') {
            filteredItems = (items || []).filter(function (item) {
                return filterOption(searchText, item);
            });
        }
        return (_jsx(MenuList, { ref: this.refMenuItemList, items: filteredItems, onRequestClose: this.props.onRequestClose }, void 0));
    };
    SelectMenu.defaultProps = {
        filterOption: caselessMatchFilterOption,
        nullOption: false,
    };
    SelectMenu.caselessMatchFilterOption = caselessMatchFilterOption;
    return SelectMenu;
}(Component));
export { SelectMenu };