fineui/src/case/list/list.select.js

import {
    shortcut,
    Widget,
    extend,
    emptyFn,
    Controller,
    createWidget,
    Events,
    isNotNull,
    isEmptyString,
    isEmptyArray,
    Direction,
    get,
    LogicFactory,
    each,
    pixFormat
} from "@/core";
import { ButtonGroup } from "@/base";
import { MultiSelectBar } from "../toolbar/toolbar.multiselect";
import { ListPane } from "../layer/pane.list";

/* eslint-disable no-mixed-spaces-and-tabs */

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

    static EVENT_CHANGE = "EVENT_CHANGE";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-select-list",
            direction: Direction.Top, // toolbar的位置
            logic: {
                dynamic: true,
            },
            items: [],
            itemsCreator: emptyFn,
            hasNext: emptyFn,
            onLoaded: emptyFn,
            toolbar: {
                type: MultiSelectBar.xtype,
                iconWrapperWidth: 36,
            },
            el: {
                type: ListPane.xtype,
            },
        });
    }

    _init() {
        super._init(...arguments);
        const o = this.options;

        // 全选
        this.toolbar = createWidget(o.toolbar);
        this.allSelected = false;
        this.toolbar.on(Controller.EVENT_CHANGE, (...args) => {
            const [type, value, obj] = args;
            this.allSelected = this.toolbar.isSelected();
            if (type === Events.CLICK) {
                this.setAllSelected(this.allSelected);
                this.fireEvent(SelectList.EVENT_CHANGE, value, obj);
            }
            this.fireEvent(Controller.EVENT_CHANGE, ...args);
        });

        this.list = createWidget(o.el, {
            type: ListPane.xtype,
            items: o.items,
            itemsCreator: (op, callback) => {
                op.times === 1 && this.toolbar.setVisible(false);
                o.itemsCreator(op, (items, keywords, context, ...args) => {
                    callback(items, keywords, context, ...args);
                    if (op.times === 1) {
                        const tipText = get(context, "tipText", "");
                        const visible = isEmptyString(tipText) && items && items.length > 0;
                        this.toolbar.setVisible(visible);
                        this.toolbar.setEnable(this.isEnabled() && visible);
                    }
                    this._checkAllSelected();
                });
            },
            onLoaded: o.onLoaded,
            hasNext: o.hasNext,
        });

        this.list.on(Controller.EVENT_CHANGE, (...args) => {
            const [type, value, obj] = args;
            if (type === Events.CLICK) {
                this._checkAllSelected();
                this.fireEvent(SelectList.EVENT_CHANGE, value, obj);
            }
            this.fireEvent(Controller.EVENT_CHANGE, ...args);
        });

        createWidget(
            extend(
                {
                    element: this,
                },
                LogicFactory.createLogic(
                    LogicFactory.createLogicTypeByDirection(o.direction),
                    extend(
                        {
                            scrolly: true,
                        },
                        o.logic,
                        {
                            items: LogicFactory.createLogicItemsByDirection(o.direction, this.toolbar, this.list),
                        }
                    )
                )
            )
        );

        if (o.items.length <= 0) {
            this.toolbar.setVisible(false);
            this.toolbar.setEnable(false);
        }
        if (isNotNull(o.value)) {
            this.setValue(o.value);
        }
    }

    _checkAllSelected() {
        const selectLength = this.list.getValue().length;
        const notSelectLength = this.getAllLeaves().length - selectLength;
        const hasNext = this.list.hasNext();
        const isAlreadyAllSelected = this.toolbar.isSelected();
        let isHalf = selectLength > 0 && notSelectLength > 0;
        let allSelected = selectLength > 0 && notSelectLength <= 0 && (!hasNext || isAlreadyAllSelected);

        if (this.isAllSelected() === false) {
            hasNext && (isHalf = selectLength > 0);
            if (!isAlreadyAllSelected && notSelectLength === 0 && !hasNext) {
                allSelected = true;
            }
        } else {
            hasNext && (isHalf = notSelectLength > 0);
            if (!isAlreadyAllSelected && notSelectLength === 0) {
                allSelected = true;
            }
        }

        this.toolbar.setHalfSelected(isHalf);
        !isHalf && this.toolbar.setSelected(allSelected);
    }

    setAllSelected(v) {
        if (this.list.setAllSelected) {
            this.list.setAllSelected(v);
        } else {
            each(this.getAllButtons(), (i, btn) => {
                (btn.setSelected || btn.setAllSelected).apply(btn, [v]);
            });
        }
        this.allSelected = !!v;
        this.toolbar.setSelected(v);
        this.toolbar.setHalfSelected(false);
    }

    setToolBarVisible(b) {
        this.toolbar.setVisible(b);
    }

    isAllSelected() {
        return this.allSelected;
        // return this.toolbar.isSelected();
    }

    hasPrev() {
        return this.list.hasPrev();
    }

    hasNext() {
        return this.list.hasNext();
    }

    prependItems(items) {
        this.list.prependItems(...arguments);
    }

    addItems(items) {
        this.list.addItems(...arguments);
    }

    setValue(data) {
        const selectAll = data.type === ButtonGroup.CHOOSE_TYPE_ALL;
        this.setAllSelected(selectAll);
        this.list[selectAll ? "setNotSelectedValue" : "setValue"](data.value);
        this._checkAllSelected();
    }

    getValue() {
        if (this.isAllSelected() === false) {
            return {
                type: ButtonGroup.CHOOSE_TYPE_MULTI,
                value: this.list.getValue(),
                assist: this.list.getNotSelectedValue(),
            };
        }

        return {
            type: ButtonGroup.CHOOSE_TYPE_ALL,
            value: this.list.getNotSelectedValue(),
            assist: this.list.getValue(),
        };
    }

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

    populate(items) {
        this.toolbar.setVisible(!isEmptyArray(items));
        this.toolbar.setEnable(this.isEnabled() && !isEmptyArray(items));
        this.list.populate(...arguments);
        this._checkAllSelected();
    }

    _setEnable(enable) {
        super._setEnable(...arguments);
        this.toolbar.setEnable(enable);
    }

    resetHeight(h) {
        const toolHeight = (this.toolbar.element.outerHeight() || 25) * (this.toolbar.isVisible() ? 1 : 0);
        this.list.resetHeight
            ? this.list.resetHeight(h - toolHeight)
            : this.list.element.css({ "max-height": pixFormat(h - toolHeight) });
    }

    setNotSelectedValue() {
        this.list.setNotSelectedValue(...arguments);
        this._checkAllSelected();
    }

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

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

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

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

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

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

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

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