fineui/src/case/button/switch.js

import { AbsoluteLayout, shortcut, i18nText } from "@/core";
import { TextButton, Label, BasicButton } from "@/base";

@shortcut()
export class Switch extends BasicButton {
    static xtype = "bi.switch";
    static EVENT_CHANGE = "EVENT_CHANGE";

    constants = {
        CIRCLE_SIZE: 12,
    };

    props = {
        extraCls: "bi-switch",
        attributes: {
            tabIndex: 1,
        },
        height: 20,
        width: 44,
        showTip: false,
    };

    render() {
        const o = this.options,
            c = this.constants;
        const tgap = (o.height - c.CIRCLE_SIZE) / 2;

        return {
            type: AbsoluteLayout.xtype,
            ref: _ref => {
                this.layout = _ref;
            },
            items: [
                {
                    el: {
                        type: TextButton.xtype,
                        cls: "circle-button",
                    },
                    width: 12,
                    height: 12,
                    top: tgap,
                    left: o.selected ? 28 : 4,
                },
                {
                    type: Label.xtype,
                    text: i18nText("BI-Basic_Simple_Open"),
                    cls: "content-tip",
                    left: 8,
                    top: tgap - 2,
                    invisible: !(o.showTip && o.selected),
                    ref: _ref => {
                        this.openTip = _ref;
                    },
                },
                {
                    type: Label.xtype,
                    text: i18nText("BI-Basic_Simple_Close"),
                    cls: "content-tip",
                    right: 8,
                    top: tgap - 2,
                    invisible: !(o.showTip && !o.selected),
                    ref: _ref => {
                        this.closeTip = _ref;
                    },
                }
            ],
        };
    }

    _setEnable(enable) {
        super._setEnable(...arguments);
        if (enable === true) {
            this.element.attr("tabIndex", 1);
        } else if (enable === false) {
            this.element.removeAttr("tabIndex");
        }
    }

    setSelected(v) {
        super.setSelected(...arguments);
        this.layout.attr("items")[0].left = v ? 28 : 4;
        this.layout.resize();
        this.options.showTip && this.openTip.setVisible(v);
        this.options.showTip && this.closeTip.setVisible(!v);
    }

    doClick() {
        super.doClick(...arguments);
        this.fireEvent(Switch.EVENT_CHANGE, this.isSelected());
    }
}