fineui/packages/fineui/src/case/colorchooser/colorchooser.trigger.long.js

import { HTapeLayout, AbsoluteLayout, shortcut, extend, createWidget, i18nText } from "@/core";
import { IconChangeButton } from "../button";
import { Label, IconButton, Trigger } from "@/base";

/**
 * 选色控件
 *
 * Created by GUY on 2015/11/17.
 * @class LongColorChooserTrigger
 * @extends Trigger
 */
@shortcut()
export class LongColorChooserTrigger extends Trigger {
    static xtype = "bi.long_color_chooser_trigger";

    static EVENT_CHANGE = "EVENT_CHANGE";

    _defaultConfig(config) {
        const conf = super._defaultConfig(...arguments);

        return extend(conf, {
            baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${
                config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"
            }`,
            height: 24,
        });
    }

    _init() {
        const {height} = this.options;
        super._init(...arguments);
        this.colorContainer = createWidget({
            type: HTapeLayout.xtype,
            cls: "color-chooser-trigger-content",
            items: [
                {
                    type: IconChangeButton.xtype,
                    ref: _ref => {
                        this.changeIcon = _ref;
                    },
                    disableSelected: true,
                    iconCls: "auto-color-icon",
                    width: 24,
                    iconWidth: 16,
                    iconHeight: 16,
                },
                {
                    el: {
                        type: Label.xtype,
                        ref: _ref => {
                            this.label = _ref;
                        },
                        textAlign: "left",
                        hgap: 5,
                        height: height - 4,
                        text: i18nText("BI-Basic_Auto"),
                    },
                }
            ],
        });

        const down = createWidget({
            type: IconButton.xtype,
            disableSelected: true,
            cls: "icon-combo-down-icon trigger-triangle-font icon-size-12",
            width: 12,
            height: 8,
        });

        createWidget({
            type: AbsoluteLayout.xtype,
            element: this,
            items: [
                {
                    el: this.colorContainer,
                    left: 2,
                    right: 2,
                    top: 2,
                    bottom: 2,
                },
                {
                    el: down,
                    right: 3,
                    bottom: 3,
                }
            ],
        });
        if (this.options.value) {
            this.setValue(this.options.value);
        }
    }

    setValue(color) {
        super.setValue(...arguments);
        if (color === "") {
            this.colorContainer.element.css("background-color", "");
            this.changeIcon.setVisible(true);
            this.label.setVisible(true);
            this.changeIcon.setIcon("auto-color-icon");
            this.label.setText(i18nText("BI-Basic_Auto"));
        } else if (color === "transparent") {
            this.colorContainer.element.css("background-color", "");
            this.changeIcon.setVisible(true);
            this.label.setVisible(true);
            this.changeIcon.setIcon("trans-color-icon");
            this.label.setText(i18nText("BI-Transparent_Color"));
        } else {
            this.colorContainer.element.css({ "background-color": color });
            this.changeIcon.setVisible(false);
            this.label.setVisible(false);
        }
    }
}