@tolokoban/ui
Version:
React components with theme
58 lines • 5.38 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import { Theme } from "../../theme/index.js";
import { styleChild } from "../../theme/styles/child.js";
import { styleDimension, } from "../../theme/styles/dimension.js";
import { stylePosition, } from "../../theme/styles/position.js";
import Styles from "./InputColor.module.css";
import { ViewLabel } from "../Label/index.js";
const SIZES = {
XS: "75%",
S: "100%",
M: "150%",
L: "200%",
XL: "300%",
};
export function ViewInputColor(props) {
const ref = React.useRef(null);
const refEditorOpen = React.useRef(false);
const { value, onChange, size = "M" } = props;
console.log("<ViewInputColor />", value);
const style = Object.assign(Object.assign(Object.assign(Object.assign({}, styleDimension(props)), stylePosition(props)), styleChild(props)), { fontSize: SIZES[size], backgroundColor: value });
const handleChange = React.useCallback((evt) => {
evt.stopPropagation();
evt.preventDefault();
if (!refEditorOpen.current)
return;
const newColor = evt.target.value;
console.log("🚀 [InputColor] newColor = ", newColor); // @FIXME: Remove this line written on 2024-11-01 at 10:20
onChange === null || onChange === void 0 ? void 0 : onChange(newColor);
refEditorOpen.current = false;
}, [onChange]);
const handleClick = () => {
const input = ref.current;
if (!input)
return;
refEditorOpen.current = true;
input.click();
};
return (_jsx(ViewLabel, { value: props.label, children: _jsx("button", { className: Theme.classNames.join(props.className, Styles.InputColor), style: style, onClick: handleClick, children: _jsx("input", { ref: ref, type: "color", value: sanitizeColor(value), onChange: handleChange }) }) }));
}
/**
* Input cannot deal with short colors (#cd9, for instance).
* We will produce only colors with 7 characters.
*/
function sanitizeColor(value) {
if (!value.startsWith("#"))
return value;
if (value.length === 7)
return value;
let color = "#";
for (const digit of value) {
if (digit !== "#") {
color = `${color}${digit}${digit}`;
}
}
return color;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXRDb2xvci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy92aWV3L0lucHV0Q29sb3IvSW5wdXRDb2xvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUM1QyxPQUFPLEVBQW1CLFVBQVUsRUFBRSxNQUFNLDZCQUE2QixDQUFBO0FBQ3pFLE9BQU8sRUFFSCxjQUFjLEdBQ2pCLE1BQU0saUNBQWlDLENBQUE7QUFDeEMsT0FBTyxFQUVILGFBQWEsR0FDaEIsTUFBTSxnQ0FBZ0MsQ0FBQTtBQUd2QyxPQUFPLE1BQU0sTUFBTSx5QkFBeUIsQ0FBQTtBQUM1QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sVUFBVSxDQUFBO0FBRXBDLE1BQU0sS0FBSyxHQUFHO0lBQ1YsRUFBRSxFQUFFLEtBQUs7SUFDVCxDQUFDLEVBQUUsTUFBTTtJQUNULENBQUMsRUFBRSxNQUFNO0lBQ1QsQ0FBQyxFQUFFLE1BQU07SUFDVCxFQUFFLEVBQUUsTUFBTTtDQUNiLENBQUE7QUFhRCxNQUFNLFVBQVUsY0FBYyxDQUFDLEtBQXNCO0lBQ2pELE1BQU0sR0FBRyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQTBCLElBQUksQ0FBQyxDQUFBO0lBQ3ZELE1BQU0sYUFBYSxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUE7SUFDekMsTUFBTSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsSUFBSSxHQUFHLEdBQUcsRUFBRSxHQUFHLEtBQUssQ0FBQTtJQUM3QyxPQUFPLENBQUMsR0FBRyxDQUFDLG9CQUFvQixFQUFFLEtBQUssQ0FBQyxDQUFBO0lBQ3hDLE1BQU0sS0FBSywrREFDSixjQUFjLENBQUMsS0FBSyxDQUFDLEdBQ3JCLGFBQWEsQ0FBQyxLQUFLLENBQUMsR0FDcEIsVUFBVSxDQUFDLEtBQUssQ0FBQyxLQUNwQixRQUFRLEVBQUUsS0FBSyxDQUFDLElBQUksQ0FBQyxFQUNyQixlQUFlLEVBQUUsS0FBSyxHQUN6QixDQUFBO0lBQ0QsTUFBTSxZQUFZLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FDbEMsQ0FBQyxHQUF3QyxFQUFFLEVBQUU7UUFDekMsR0FBRyxDQUFDLGVBQWUsRUFBRSxDQUFBO1FBQ3JCLEdBQUcsQ0FBQyxjQUFjLEVBQUUsQ0FBQTtRQUNwQixJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU87WUFBRSxPQUFNO1FBRWxDLE1BQU0sUUFBUSxHQUFHLEdBQUcsQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFBO1FBQ2pDLE9BQU8sQ0FBQyxHQUFHLENBQUMsNkJBQTZCLEVBQUUsUUFBUSxDQUFDLENBQUEsQ0FBQywwREFBMEQ7UUFDL0csUUFBUSxhQUFSLFFBQVEsdUJBQVIsUUFBUSxDQUFHLFFBQVEsQ0FBQyxDQUFBO1FBQ3BCLGFBQWEsQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFBO0lBQ2pDLENBQUMsRUFDRCxDQUFDLFFBQVEsQ0FBQyxDQUNiLENBQUE7SUFDRCxNQUFNLFdBQVcsR0FBRyxHQUFHLEVBQUU7UUFDckIsTUFBTSxLQUFLLEdBQUcsR0FBRyxDQUFDLE9BQU8sQ0FBQTtRQUN6QixJQUFJLENBQUMsS0FBSztZQUFFLE9BQU07UUFFbEIsYUFBYSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUE7UUFDNUIsS0FBSyxDQUFDLEtBQUssRUFBRSxDQUFBO0lBQ2pCLENBQUMsQ0FBQTtJQUNELE9BQU8sQ0FDSCxLQUFDLFNBQVMsSUFBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLEtBQUssWUFDekIsaUJBQ0ksU0FBUyxFQUFFLEtBQUssQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUM1QixLQUFLLENBQUMsU0FBUyxFQUNmLE1BQU0sQ0FBQyxVQUFVLENBQ3BCLEVBQ0QsS0FBSyxFQUFFLEtBQUssRUFDWixPQUFPLEVBQUUsV0FBVyxZQUVwQixnQkFDSSxHQUFHLEVBQUUsR0FBRyxFQUNSLElBQUksRUFBQyxPQUFPLEVBQ1osS0FBSyxFQUFFLGFBQWEsQ0FBQyxLQUFLLENBQUMsRUFDM0IsUUFBUSxFQUFFLFlBQVksR0FDeEIsR0FDRyxHQUNELENBQ2YsQ0FBQTtBQUNMLENBQUM7QUFFRDs7O0dBR0c7QUFDSCxTQUFTLGFBQWEsQ0FBQyxLQUFhO0lBQ2hDLElBQUksQ0FBQyxLQUFLLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQztRQUFFLE9BQU8sS0FBSyxDQUFBO0lBQ3hDLElBQUksS0FBSyxDQUFDLE1BQU0sS0FBSyxDQUFDO1FBQUUsT0FBTyxLQUFLLENBQUE7SUFFcEMsSUFBSSxLQUFLLEdBQUcsR0FBRyxDQUFBO0lBQ2YsS0FBSyxNQUFNLEtBQUssSUFBSSxLQUFLLEVBQUUsQ0FBQztRQUN4QixJQUFJLEtBQUssS0FBSyxHQUFHLEVBQUUsQ0FBQztZQUNoQixLQUFLLEdBQUcsR0FBRyxLQUFLLEdBQUcsS0FBSyxHQUFHLEtBQUssRUFBRSxDQUFBO1FBQ3RDLENBQUM7SUFDTCxDQUFDO0lBQ0QsT0FBTyxLQUFLLENBQUE7QUFDaEIsQ0FBQyJ9