fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js

import { Label } from "@/base";
import {
    VerticalLayout,
    VerticalAdaptLayout,
    Layout,
    shortcut,
    Widget,
    extend,
    isEmptyObject,
    createItems,
    isNull,
    isNumeric,
    map,
    isEmptyString,
    range,
    DOM,
    i18nText
} from "@/core";
import { SimpleColorPickerEditor } from "./editor.colorpicker.simple";
import { ColorPickerEditor } from "./editor.colorpicker";
import { SmallTextEditor } from "@/widget/editor/editor.text.small.js";
import { TextEditor } from "@/widget/editor/editor.text";

const RGB_WIDTH = 32,
    HEX_WIDTH = 70,
    HEX_PREFIX_POSITION = 1;

/**
 * @author windy
 * @version 2.0
 * Created by windy on 2020/11/10
 */
@shortcut()
export class SimpleHexColorPickerEditor extends Widget {
    static xtype = "bi.simple_hex_color_picker_editor";

    static EVENT_CHANGE = "EVENT_CHANGE";

    props = {
        baseCls: "bi-color-picker-editor",
        height: 36,
    };

    render() {
        const RGB = createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
            type: Label.xtype,
            cls: "color-picker-editor-label",
            height: 20,
        });

        const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
        const Ws = map(range(0, 3), () => {
            return {
                type: SmallTextEditor.xtype,
                cls: "color-picker-editor-input bi-border-radius",
                validationChecker: checker,
                errorText: i18nText("BI-Color_Picker_Error_Text"),
                allowBlank: true,
                value: 255,
                width: RGB_WIDTH,
                height: 24,
                listeners: [
                    {
                        eventName: TextEditor.EVENT_CHANGE,
                        action: () => {
                            this._checkEditors();
                            if (this.R.isValid() && this.G.isValid() && this.B.isValid()) {
                                this.colorShow.element.css("background-color", this.getValue());
                                this.fireEvent(SimpleColorPickerEditor.EVENT_CHANGE);
                            }
                        },
                    }
                ],
            };
        });

        return {
            type: VerticalLayout.xtype,
            tgap: 10,
            items: [
                {
                    el: {
                        type: VerticalAdaptLayout.xtype,
                        rgap: 5,
                        columnSize: [22, 10, "fill", 12, RGB_WIDTH, 12, RGB_WIDTH, 12, RGB_WIDTH],
                        items: [
                            {
                                el: {
                                    type: Layout.xtype,
                                    cls: "color-picker-editor-display bi-card bi-border",
                                    height: 22,
                                    width: 22,
                                    ref: _ref => {
                                        this.colorShow = _ref;
                                    },
                                },
                                width: 18,
                            },
                            {
                                type: Label.xtype,
                                text: "#",
                                width: 10,
                            },
                            {
                                type: SmallTextEditor.xtype,
                                ref: _ref => {
                                    this.hexEditor = _ref;
                                },
                                cls: "color-picker-editor-input bi-border-radius",
                                validationChecker: this._hexChecker,
                                allowBlank: true,
                                errorText: i18nText("BI-Color_Picker_Error_Text_Hex"),
                                width: HEX_WIDTH,
                                height: 24,
                                listeners: [
                                    {
                                        eventName: "EVENT_CHANGE",
                                        action: () => {
                                            this._checkHexEditor();
                                            if (
                                                checker(this.storeValue.r) &&
                                                checker(this.storeValue.g) &&
                                                checker(this.storeValue.b)
                                            ) {
                                                this.colorShow.element.css("background-color", this.getValue());
                                                this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
                                            }
                                        },
                                    }
                                ],
                            },
                            RGB[0],
                            {
                                el: extend(Ws[0], {
                                    ref: _ref => {
                                        this.R = _ref;
                                    },
                                }),
                                width: RGB_WIDTH,
                            },
                            RGB[1],
                            {
                                el: extend(Ws[1], {
                                    ref: _ref => {
                                        this.G = _ref;
                                    },
                                }),
                                width: RGB_WIDTH,
                            },
                            RGB[2],
                            {
                                el: extend(Ws[2], {
                                    ref: _ref => {
                                        this.B = _ref;
                                    },
                                }),
                                rgap: -5,
                                width: RGB_WIDTH,
                            }
                        ],
                    },
                }
            ],
        };
    }

    _hexChecker(v) {
        return /^[0-9a-fA-F]{6}$/.test(v);
    }

    _checkEditors() {
        if (isEmptyString(this.R.getValue())) {
            this.R.setValue(0);
        }
        if (isEmptyString(this.G.getValue())) {
            this.G.setValue(0);
        }
        if (isEmptyString(this.B.getValue())) {
            this.B.setValue(0);
        }
        this.hexEditor.setValue(this.getValue().slice(HEX_PREFIX_POSITION));
    }

    _checkHexEditor() {
        if (isEmptyString(this.hexEditor.getValue())) {
            this.hexEditor.setValue("000000");
        }
        const json = DOM.rgb2json(DOM.hex2rgb(`#${this.hexEditor.getValue()}`));
        this.storeValue = {
            r: json.r || 0,
            g: json.g || 0,
            b: json.b || 0,
        };
        this.R.setValue(this.storeValue.r);
        this.G.setValue(this.storeValue.g);
        this.B.setValue(this.storeValue.b);
    }

    setValue(color) {
        this.colorShow.element.css({ "background-color": color });
        const json = DOM.rgb2json(DOM.hex2rgb(color));
        this.R.setValue(isNull(json.r) ? "" : json.r);
        this.G.setValue(isNull(json.g) ? "" : json.g);
        this.B.setValue(isNull(json.b) ? "" : json.b);
        this.hexEditor.setValue(isEmptyObject(json) ? "" : color.slice(HEX_PREFIX_POSITION));
    }

    getValue() {
        return DOM.rgb2hex(
            DOM.json2rgb({
                r: this.R.getValue(),
                g: this.G.getValue(),
                b: this.B.getValue(),
            })
        );
    }
}