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

import { LoadingBar, ButtonGroup, Loader } from "@/base";
import {
    shortcut,
    Widget,
    extend,
    emptyFn,
    VerticalLayout,
    createWidget,
    Controller,
    Events,
    isEmpty,
    nextTick,
    bind,
    isNumber,
    isObject,
    isFunction,
    makeObject,
    isArray,
    each,
    Element
} from "@/core";

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

    static EVENT_CHANGE = "EVENT_CHANGE";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-multi-select-inner-loader",

            direction: "top",
            isDefaultInit: true, // 是否默认初始化数据
            logic: {
                dynamic: true,
                scrolly: true,
            },

            // 下面是button_group的属性
            el: {
                type: ButtonGroup.xtype,
                chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
                behaviors: {
                    redmark() {
                        return true;
                    },
                },
                layouts: [
                    {
                        type: VerticalLayout.xtype,
                    }
                ],
            },

            items: [],
            itemsCreator: emptyFn,
            onLoaded: emptyFn,

            // 下面是分页信息
            count: false,
            prev: false,
            next: {},
            hasPrev: emptyFn,
            hasNext: emptyFn,
        });
    }

    _nextLoad() {
        const self = this,
            o = this.options;
        this.next.setLoading();
        if (this.cachItems && this.cachItems.length > 0) {
            this.next.setLoaded();
            const items = this._composeItems(this.cachItems.slice(0, 100));
            this.cachItems = this.cachItems.slice(100);
            this.addItems(items);

            return;
        }
        o.itemsCreator.apply(this, [
            { times: ++this.times },
            function () {
                self.next.setLoaded();
                self.addItems(...arguments);
            }
        ]);
    }

    render() {
        const self = this,
            o = this.options;
        if (o.itemsCreator === false) {
            o.next = false;
        }
        this.button_group = createWidget(o.el, {
            type: ButtonGroup.xtype,
            chooseType: 0,
            items: o.items,
            behaviors: {},
            layouts: [
                {
                    type: VerticalLayout.xtype,
                }
            ],
            value: o.value,
        });
        this.button_group.on(Controller.EVENT_CHANGE, function (type, value, obj) {
            if (type === Events.CLICK) {
                const node = self.cachGroup.getNodeByValue(value);
                if (node) {
                    node.setSelected(obj.isSelected());
                }
            }
            self.fireEvent(Controller.EVENT_CHANGE, arguments);
            if (type === Events.CLICK) {
                self.fireEvent(Loader.EVENT_CHANGE, obj);
            }
        });

        const renderEngine = Widget._renderEngine;
        Widget.registerRenderEngine(Element.renderEngine);
        this.cachGroup = createWidget(o.el, {
            type: ButtonGroup.xtype,
            root: true,
            chooseType: 0,
            items: o.items,
            behaviors: {},
            layouts: [
                {
                    type: VerticalLayout.xtype,
                }
            ],
            value: o.value,
        });
        Widget.registerRenderEngine(renderEngine);

        if (o.next !== false) {
            this.next = createWidget(
                extend(
                    {
                        type: LoadingBar.xtype,
                    },
                    o.next
                )
            );
            this.next.on(Controller.EVENT_CHANGE, type => {
                if (type === Events.CLICK) {
                    self._nextLoad();
                }
            });
        }

        createWidget({
            type: VerticalLayout.xtype,
            element: this,
            items: [this.button_group, this.next],
        });

        o.isDefaultInit &&
            isEmpty(o.items) &&
            nextTick(
                bind(function () {
                    o.isDefaultInit && isEmpty(o.items) && this._populate();
                }, this)
            );
    }

    hasNext() {
        const o = this.options;
        if (isNumber(o.count)) {
            return this.count < o.count;
        }
        if (this.cachItems && this.cachItems.length > 0) {
            return true;
        }

        return !!o.hasNext.apply(this, [
            {
                times: this.times,
                count: this.count,
            }
        ]);
    }

    addItems(items) {
        this.count += items.length;
        if (isObject(this.next)) {
            if (this.hasNext()) {
                this.options.items = this.options.items.concat(items);
                this.next.setLoaded();
            } else {
                this.next.setEnd();
            }
        }
        //  cacheGroup渲染的是全量的,如果这次加载更多add的items是从cacheItems里面拿的,那不用再add了
        if (this.cachItems.length > 0) {
            this.button_group.addItems(...arguments);
            return;
        }
        const renderEngine = Widget._renderEngine;
        Widget.registerRenderEngine(Element.renderEngine);
        this.cachGroup.addItems(...arguments);
        Widget.registerRenderEngine(renderEngine);
        this.button_group.addItems(...arguments);
    }

    _composeItems(items) {
        const cacheValue = this.cachGroup.getValue();
        return items.map(item => {
            return {
                ...item,
                selected: cacheValue.includes(item.value || item.id)
            };
        });
    }

    _populate(items) {
        const self = this,
            o = this.options;
        if (arguments.length === 0 && isFunction(o.itemsCreator)) {
            o.itemsCreator.apply(this, [
                { times: 1 },
                function (items, keyword) {
                    if (arguments.length === 0) {
                        throw new Error("object already registered");
                    }
                    self.populate(...arguments);
                    o.onLoaded();
                }
            ]);

            return false;
        }
        this.options.items = (items || []).slice(0, 100 + ((items || []).length % 100));
        this.times = 1;
        this.count = 0;
        this.count += items.length;

        return true;
    }

    populate(items, keyword) {
        if (this._populate(...arguments)) {
            this.cachItems = [];
            const firstItemsCount = 100 + (items.length % 100);
            if (items.length > firstItemsCount) {
                this.cachItems = items.slice(firstItemsCount);
            }
            const renderEngine = Widget._renderEngine;
            Widget.registerRenderEngine(Element.renderEngine);
            this.cachGroup.populate.call(this.cachGroup, items, keyword);
            Widget.registerRenderEngine(renderEngine);
            this.button_group.populate.call(this.button_group, items.slice(0, firstItemsCount), keyword);

            //  hasNext依赖的是cacheItems计算,所以从_populate挪到populate里面
            if (isObject(this.next)) {
                if (this.hasNext()) {
                    this.next.setLoaded();
                } else {
                    this.next.invisible();
                }
            }
        }
    }

    setNotSelectedValue() {
        this.button_group.setNotSelectedValue(...arguments);
        this.cachGroup.setNotSelectedValue(...arguments);
    }

    getNotSelectedValue() {
        return this.cachGroup.getNotSelectedValue();
    }

    setAllSelected(v) {
        this.button_group.setAllSelected(v);
        this.cachGroup.setAllSelected(v);
    }

    setValue(value) {
        const map = makeObject(isArray(value) ? value : [value]);
        this.cachGroup.setValueMap.call(this.cachGroup, map);
        this.button_group.setValueMap.call(this.button_group, map);
    }

    getValue() {
        return this.cachGroup.getValue(...arguments);
    }

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

    getAllLeaves() {
        return this.cachGroup.getAllLeaves();
    }

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

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

    getIndexByValue(value) {
        return this.button_group.getIndexByValue(value);
    }

    getNodeById(id) {
        return this.button_group.getNodeById(id);
    }

    getNodeByValue(value) {
        return this.button_group.getNodeByValue(value);
    }

    empty() {
        this.button_group.empty();
        this.cachGroup.empty();
        each([this.prev, this.next], (i, ob) => {
            ob && ob.setVisible(false);
        });
    }
}