fineui/src/widget/multiselect/search/multiselect.search.loader.js

import {
    shortcut,
    Widget,
    extend,
    emptyFn,
    deepClone,
    createWidget,
    i18nText,
    Controller,
    VerticalLayout,
    map,
    isKey,
    Func
} from "@/core";
import { ButtonGroup, Loader } from "@/base";
import { SelectList, MultiSelectBar, MultiSelectItem } from "@/case";

@shortcut()
export class MultiSelectSearchLoader extends Widget {
    static xtype = "bi.multi_select_search_loader";

    static EVENT_CHANGE = "EVENT_CHANGE";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-multi-select-search-loader",
            itemsCreator: emptyFn,
            keywordGetter: emptyFn,
            valueFormatter: emptyFn,
            itemFormatter: emptyFn,
            itemHeight: 24,
        });
    }

    _init() {
        super._init(...arguments);

        const self = this,
            opts = this.options;
        let hasNext = false;
        this.storeValue = deepClone(opts.value);
        this.button_group = createWidget({
            type: SelectList.xtype,
            toolbar: {
                type: MultiSelectBar.xtype,
                cls: "bi-list-item-active",
                iconWrapperWidth: 36,
            },
            element: this,
            logic: {
                dynamic: false,
            },
            value: opts.value,
            el: {
                tipText: i18nText("BI-No_Select"),
                el: {
                    type: Loader.xtype,
                    isDefaultInit: false,
                    logic: {
                        dynamic: true,
                        scrolly: true,
                    },
                    el: {
                        chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
                        behaviors: {
                            redmark() {
                                return true;
                            },
                        },
                        layouts: [
                            {
                                type: VerticalLayout.xtype,
                            }
                        ],
                    },
                },
            },
            itemsCreator(op, callback) {
                self.storeValue &&
                (op = extend(op || {}, {
                    selectedValues: self.storeValue.value,
                }));
                opts.itemsCreator(op, ob => {
                    const keyword = (ob.keyword = opts.keywordGetter());
                    hasNext = ob.hasNext;
                    let firstItems = [];
                    if (op.times === 1 && self.storeValue) {
                        const json = self._filterValues(self.storeValue);
                        firstItems = self._createItems(json);
                    }
                    const context = {
                        tipText: ob.tipText,
                    };
                    callback(
                        firstItems.concat(self._createItems(ob.items)),
                        keyword,
                        context
                    );
                    if (op.times === 1 && self.storeValue) {
                        self.setValue(self.storeValue);
                    }
                });
            },
            hasNext() {
                return hasNext;
            },
        });
        this.button_group.on(Controller.EVENT_CHANGE, function () {
            self.fireEvent(Controller.EVENT_CHANGE, arguments);
        });
        this.button_group.on(SelectList.EVENT_CHANGE, function () {
            self.fireEvent(MultiSelectSearchLoader.EVENT_CHANGE, arguments);
        });
    }

    _createItems(items) {
        const allSelected = this.isAllSelected();
        const itemFormatter = this.options.itemFormatter;

        return map(items, (index, item) => {
            return {
                type: MultiSelectItem.xtype,
                logic: {
                    dynamic: false,
                },
                height:
                    this.options.itemHeight ||
                    BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
                selected: allSelected,
                cls: "bi-list-item-active",
                iconWrapperWidth: 36,
                ...item,
                ...itemFormatter(item),
            };
        });
    }

    isAllSelected() {
        return this.button_group.isAllSelected();
    }

    _filterValues(src) {
        const o = this.options;
        const keyword = o.keywordGetter();
        let values = deepClone(src.value) || [];
        const newValues = map(values, (i, v) => {
            return {
                text: o.valueFormatter(v) || v,
                value: v,
            };
        });
        if (isKey(keyword)) {
            const search = Func.getSearchResult(newValues, keyword);
            values = search.match.concat(search.find);
        }

        return map(values, (i, v) => {
            return {
                text: v.text,
                title: v.text,
                value: v.value,
                selected: src.type === BI.Selection.All,
                ...o.itemFormatter(v),
            };
        });
    }

    setValue(v) {
        // 暂存的值一定是新的值，不然v改掉后，storeValue也跟着改了
        this.storeValue = deepClone(v);
        this.button_group.setValue(v);
    }

    getValue() {
        return this.button_group.getValue();
    }

    getAllButtons() {
        return this.button_group.getAllButtons();
    }

    empty() {
        this.button_group.empty();
    }

    populate(items) {
        this.button_group.populate(...arguments);
    }

    resetHeight(h) {
        this.button_group.resetHeight(h);
    }

    resetWidth(w) {
        this.button_group.resetWidth(w);
    }
}