fineui/packages/fineui/src/case/pager/pager.direction.js

import { AbsoluteLayout, HorizontalLayout, shortcut, Widget, extend, emptyFn, createWidget, i18nText } from "@/core";
import { Label, Pager, IconButton } from "@/base";

/**
 * 显示页码的分页控件
 *
 * Created by GUY on 2016/6/30.
 * @class DirectionPager
 * @extends Widget
 */

@shortcut()
export class DirectionPager extends Widget {
    static EVENT_CHANGE = "EVENT_CHANGE";
    static xtype = "bi.direction_pager";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-direction-pager",
            height: 24,
            horizontal: {
                pages: false, // 总页数
                curr: 1, // 初始化当前页， pages为数字时可用

                hasPrev: emptyFn,
                hasNext: emptyFn,
                firstPage: 1,
                lastPage: emptyFn,
            },
            vertical: {
                pages: false, // 总页数
                curr: 1, // 初始化当前页， pages为数字时可用

                hasPrev: emptyFn,
                hasNext: emptyFn,
                firstPage: 1,
                lastPage: emptyFn,
            },
        });
    }
    _init() {
        super._init(...arguments);

        this.ITEM_GAP = 2;
        this.ITEM_WIDTH = this.options.height - 2 * this.ITEM_GAP;
        this.MIDDLE_GAP = 16;

        this._createVPager();
        this._createHPager();
        this.layout = createWidget({
            type: AbsoluteLayout.xtype,
            scrollable: false,
            element: this,
            items: [
                {
                    el: this.vpager,
                    top: this.ITEM_GAP,
                    right: this.ITEM_WIDTH * 3 + this.MIDDLE_GAP,
                },
                {
                    el: this.vlabel,
                    top: this.ITEM_GAP,
                    right: this.ITEM_WIDTH * 4 + this.MIDDLE_GAP,
                },
                {
                    el: this.hpager,
                    top: this.ITEM_GAP,
                    right: 0,
                },
                {
                    el: this.hlabel,
                    top: this.ITEM_GAP,
                    right: this.ITEM_WIDTH,
                }
            ],
        });
    }

    _createVPager() {
        const v = this.options.vertical;
        this.vlabel = createWidget({
            type: Label.xtype,
            width: this.ITEM_WIDTH,
            height: this.ITEM_WIDTH,
            value: v.curr,
            title: v.curr,
            invisible: true,
        });
        this.vpager = createWidget({
            type: Pager.xtype,
            width: this.ITEM_WIDTH * 3,
            layouts: [
                {
                    type: HorizontalLayout.xtype,
                    scrollx: false,
                    rgap: this.ITEM_WIDTH,
                }
            ],
            invisible: true,

            dynamicShow: false,
            pages: v.pages,
            curr: v.curr,
            groups: 0,

            first: false,
            last: false,
            prev: {
                type: IconButton.xtype,
                value: "prev",
                title: i18nText("BI-Up_Page"),
                warningTitle: i18nText("BI-Current_Is_First_Page"),
                height: this.ITEM_WIDTH - 2,
                width: this.ITEM_WIDTH - 2,
                cls: "bi-border bi-border-radius direction-pager-prev column-pre-page-h-font bi-list-item-select2",
            },
            next: {
                type: IconButton.xtype,
                value: "next",
                title: i18nText("BI-Down_Page"),
                warningTitle: i18nText("BI-Current_Is_Last_Page"),
                height: this.ITEM_WIDTH - 2,
                width: this.ITEM_WIDTH - 2,
                cls: "bi-border bi-border-radius direction-pager-next column-next-page-h-font bi-list-item-select2",
            },

            hasPrev: v.hasPrev,
            hasNext: v.hasNext,
            firstPage: v.firstPage,
            lastPage: v.lastPage,
        });

        this.vpager.on(Pager.EVENT_CHANGE, () => {
            this.fireEvent(DirectionPager.EVENT_CHANGE);
        });
        this.vpager.on(Pager.EVENT_AFTER_POPULATE, () => {
            this.vlabel.setValue(this.vpager.getCurrentPage());
            this.vlabel.setTitle(this.vpager.getCurrentPage());
        });
    }
    _createHPager() {
        const h = this.options.horizontal;
        this.hlabel = createWidget({
            type: Label.xtype,
            width: this.ITEM_WIDTH,
            height: this.ITEM_WIDTH,
            value: h.curr,
            title: h.curr,
            invisible: true,
        });
        this.hpager = createWidget({
            type: Pager.xtype,
            width: this.ITEM_WIDTH * 3,
            layouts: [
                {
                    type: HorizontalLayout.xtype,
                    scrollx: false,
                    rgap: this.ITEM_WIDTH,
                }
            ],
            invisible: true,

            dynamicShow: false,
            pages: h.pages,
            curr: h.curr,
            groups: 0,

            first: false,
            last: false,
            prev: {
                type: IconButton.xtype,
                value: "prev",
                title: i18nText("BI-Left_Page"),
                warningTitle: i18nText("BI-Current_Is_First_Page"),
                height: this.ITEM_WIDTH - 2,
                width: this.ITEM_WIDTH - 2,
                cls: "bi-border bi-border-radius direction-pager-prev row-pre-page-h-font bi-list-item-select2",
            },
            next: {
                type: IconButton.xtype,
                value: "next",
                title: i18nText("BI-Right_Page"),
                warningTitle: i18nText("BI-Current_Is_Last_Page"),
                height: this.ITEM_WIDTH - 2,
                width: this.ITEM_WIDTH - 2,
                cls: "bi-border bi-border-radius direction-pager-next row-next-page-h-font bi-list-item-select2",
            },

            hasPrev: h.hasPrev,
            hasNext: h.hasNext,
            firstPage: h.firstPage,
            lastPage: h.lastPage,
        });

        this.hpager.on(Pager.EVENT_CHANGE, () => {
            this.fireEvent(DirectionPager.EVENT_CHANGE);
        });
        this.hpager.on(Pager.EVENT_AFTER_POPULATE, () => {
            this.hlabel.setValue(this.hpager.getCurrentPage());
            this.hlabel.setTitle(this.hpager.getCurrentPage());
        });
    }

    getVPage() {
        return this.vpager.getCurrentPage();
    }

    getHPage() {
        return this.hpager.getCurrentPage();
    }

    setVPage(v) {
        this.vpager.setValue(v);
        this.vlabel.setValue(v);
        this.vlabel.setTitle(v);
    }

    setHPage(v) {
        this.hpager.setValue(v);
        this.hlabel.setValue(v);
        this.hlabel.setTitle(v);
    }

    hasVNext() {
        return this.vpager.hasNext();
    }

    hasHNext() {
        return this.hpager.hasNext();
    }

    hasVPrev() {
        return this.vpager.hasPrev();
    }

    hasHPrev() {
        return this.hpager.hasPrev();
    }

    setHPagerVisible(b) {
        this.hpager.setVisible(b);
        this.hlabel.setVisible(b);
    }

    setVPagerVisible(b) {
        this.vpager.setVisible(b);
        this.vlabel.setVisible(b);
    }

    populate() {
        this.vpager.populate();
        this.hpager.populate();
        let vShow = false,
            hShow = false;
        if (!this.hasHNext() && !this.hasHPrev()) {
            this.setHPagerVisible(false);
        } else {
            this.setHPagerVisible(true);
            hShow = true;
        }
        if (!this.hasVNext() && !this.hasVPrev()) {
            this.setVPagerVisible(false);
        } else {
            this.setVPagerVisible(true);
            vShow = true;
        }
        this.setVisible(hShow || vShow);
        const num = [this.ITEM_WIDTH * 3 + this.MIDDLE_GAP, this.ITEM_WIDTH * 4 + this.MIDDLE_GAP, 0, this.ITEM_WIDTH];
        const items = this.layout.attr("items");

        if (vShow === true && hShow === true) {
            items[0].right = num[0];
            items[1].right = num[1];
            items[2].right = num[2];
            items[3].right = num[3];
        } else if (vShow === true) {
            items[0].right = num[2];
            items[1].right = num[3];
        } else if (hShow === true) {
            items[2].right = num[2];
            items[3].right = num[3];
        }
        this.layout.attr("items", items);
        this.layout.resize();
    }

    clear() {
        this.vpager.attr("curr", 1);
        this.hpager.attr("curr", 1);
    }
}