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

import {
    shortcut,
    Widget,
    extend,
    emptyFn,
    createWidget,
    isKey,
    map,
    contains,
    remove,
    Controller,
    VerticalLayout,
    delay,
    isNotNull,
    toPix,
    Selection,
    pushDistinct,
    SIZE_CONSANTS,
    LogicFactory,
    Direction
} from "@/core";
import { ButtonGroup, Loader } from "@/base";
import { SelectList, ListPane, MultiSelectItem } from "@/case";

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

    static EVENT_CHANGE = "EVENT_CHANGE";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-multi-select-loader",
            logic: {
                dynamic: true,
            },
            el: {
                height: 400,
            },
            valueFormatter: emptyFn,
            itemsCreator: emptyFn,
            itemHeight: SIZE_CONSANTS.LIST_ITEM_HEIGHT,
            onLoaded: emptyFn,
            itemFormatter: emptyFn,
        });
    }

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

        const self = this,
            opts = this.options;
        let hasNext = false;

        this.storeValue = opts.value || {};
        this._assertValue(this.storeValue);

        this.button_group = createWidget(
            extend(
                {
                    type: ListPane.xtype,
                    onLoaded: opts.onLoaded,
                    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) {
                        const startValue = self._startValue;
                        self.storeValue &&
                            (op = extend(op || {}, {
                                selectedValues:
                                    isKey(startValue) && self.storeValue.type === Selection.Multi
                                        ? self.storeValue.value.concat(startValue)
                                        : self.storeValue.value,
                            }));
                        opts.itemsCreator(op, ob => {
                            hasNext = ob.hasNext;
                            let firstItems = [];
                            if (op.times === 1 && self.storeValue) {
                                const json = map(self.storeValue.value, (i, v) => {
                                    const txt = opts.valueFormatter(v) || v;

                                    return {
                                        text: txt,
                                        value: v,
                                        title: txt,
                                        selected: self.storeValue.type === Selection.Multi,
                                    };
                                });
                                if (isKey(self._startValue) && !contains(self.storeValue.value, self._startValue)) {
                                    const txt = opts.valueFormatter(startValue) || startValue;
                                    json.unshift({
                                        text: txt,
                                        value: startValue,
                                        title: txt,
                                        selected: true,
                                    });
                                }
                                firstItems = self._createItems(json);
                            }
                            callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || "");
                            if (op.times === 1 && self.storeValue) {
                                isKey(startValue) &&
                                    (self.storeValue.type === Selection.All
                                        ? remove(self.storeValue.value, startValue)
                                        : pushDistinct(self.storeValue.value, startValue));
                                self.setValue(self.storeValue);
                            }
                            op.times === 1 && self._scrollToTop();
                        });
                    },
                    hasNext() {
                        return hasNext;
                    },
                    value: this.storeValue,
                },
                opts.el
            )
        );

        createWidget(extend({
            element: this,
        }, LogicFactory.createLogic(LogicFactory.createLogicTypeByDirection(Direction.Top), extend({
            scrolly: true,
            vgap: 5,
        }, opts.logic, {
            items: LogicFactory.createLogicItemsByDirection(Direction.Top, this.button_group),
        }))));

        this.button_group.on(Controller.EVENT_CHANGE, function () {
            self.fireEvent(Controller.EVENT_CHANGE, arguments);
        });
        this.button_group.on(SelectList.EVENT_CHANGE, function () {
            self.fireEvent(MultiSelectNoBarLoader.EVENT_CHANGE, arguments);
        });
    }

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

    _scrollToTop() {
        const self = this;
        delay(() => {
            self.button_group.element.scrollTop(0);
        }, 30);
    }

    _assertValue(val) {
        val || (val = {});
        val.type || (val.type = Selection.Multi);
        val.value || (val.value = []);
    }

    setStartValue(v) {
        this._startValue = v;
    }

    setValue(v) {
        this.storeValue = v || {};
        this._assertValue(this.storeValue);
        this.button_group.setValue(this.storeValue.value);
    }

    getValue() {
        return {
            type: Selection.Multi,
            value: this.button_group.getValue(),
        };
    }

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

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

    populate(items) {
        if (isNotNull(items)) {
            arguments[0] = this._createItems(items);
        }
        this.button_group.populate(...arguments);
    }

    resetHeight(h) {
        this.button_group.element.css({ "max-height": toPix(h) });
    }

    resetWidth() {}
}