@tolokoban/ui
Version:
React components with theme
64 lines • 6.89 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Theme } from "../../theme/index.js";
import { styleDimension, } from "../../theme/styles/dimension.js";
import { stylePosition, } from "../../theme/styles/position.js";
import { styleChild } from "../../theme/styles/child.js";
import Styles from "./InputMultiText.module.css";
import { ViewLabel } from "../Label/index.js";
export function ViewInputMultiText(props) {
const { value, label, onChange, onLangChange, renderLang = (item, selected) => selected ? _jsx("b", { children: item }) : _jsx("span", { children: item }), } = props;
const [keys, itemKey, itemVal] = useLang(props);
const style = Object.assign(Object.assign(Object.assign({}, styleDimension(props)), stylePosition(props)), styleChild(props));
const handleChange = (evt) => {
const text = evt.target.value;
onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, value), { [itemKey]: text }));
};
return (_jsx(ViewLabel, { value: label, fullwidth: props.fullwidth, children: _jsxs("div", { className: Theme.classNames.join(props.className, Styles.InputMultiText), style: style, children: [_jsx("input", { value: itemVal, onChange: handleChange }), _jsx("div", { children: keys.map((key) => (_jsx("button", { onClick: () => onLangChange(key), style: {
background: `var(--theme-color-${key === itemKey ? "primary-6" : "primary-3"})`,
color: `var(--theme-color-on-${key === itemKey ? "primary-6" : "primary-3"})`,
}, children: renderLang(key, key === itemKey) }, key))) })] }) }));
}
function useLang({ value, onChange = () => {
/* Empty function */
}, lang, onLangChange, }) {
var _a;
const keys = Object.keys(value);
React.useEffect(() => {
if (keys.length === 0)
onChange({
[navigator.language]: "",
});
}, [value, onChange, keys.length]);
const key = findBestKey(keys, lang);
React.useEffect(() => {
if (key && key !== lang) {
onLangChange(key);
}
}, [key, onLangChange, lang]);
return [keys, key !== null && key !== void 0 ? key : "", (_a = value[key !== null && key !== void 0 ? key : ""]) !== null && _a !== void 0 ? _a : ""];
}
/**
* if `keys` is empty, return `null`.
* If `lang` is in `keys`, return it.
* Otherwise, find the first key that starts
* like `lang`.
* If nothing has been found, return the first
* element in `keys`.
*/
function findBestKey(keys, lang) {
if (keys.length === 0)
return undefined;
if (keys.includes(lang))
return lang;
for (const key of keys) {
if (key.startsWith(lang))
return key;
}
for (const key of keys) {
if (key.toLowerCase().startsWith(lang.toLowerCase()))
return key;
}
return keys[0];
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXRNdWx0aVRleHQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdmlldy9JbnB1dE11bHRpVGV4dC9JbnB1dE11bHRpVGV4dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUM1QyxPQUFPLEVBRUgsY0FBYyxHQUNqQixNQUFNLGlDQUFpQyxDQUFBO0FBQ3hDLE9BQU8sRUFFSCxhQUFhLEdBQ2hCLE1BQU0sZ0NBQWdDLENBQUE7QUFDdkMsT0FBTyxFQUFtQixVQUFVLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQTtBQUV6RSxPQUFPLE1BQU0sTUFBTSw2QkFBNkIsQ0FBQTtBQUVoRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sVUFBVSxDQUFBO0FBcUJwQyxNQUFNLFVBQVUsa0JBQWtCLENBQUMsS0FBMEI7SUFDekQsTUFBTSxFQUNGLEtBQUssRUFDTCxLQUFLLEVBQ0wsUUFBUSxFQUNSLFlBQVksRUFDWixVQUFVLEdBQUcsQ0FBQyxJQUFZLEVBQUUsUUFBaUIsRUFBRSxFQUFFLENBQzdDLFFBQVEsQ0FBQyxDQUFDLENBQUMsc0JBQUksSUFBSSxHQUFLLENBQUMsQ0FBQyxDQUFDLHlCQUFPLElBQUksR0FBUSxHQUNyRCxHQUFHLEtBQUssQ0FBQTtJQUNULE1BQU0sQ0FBQyxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sQ0FBQyxHQUFHLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUMvQyxNQUFNLEtBQUssaURBQ0osY0FBYyxDQUFDLEtBQUssQ0FBQyxHQUNyQixhQUFhLENBQUMsS0FBSyxDQUFDLEdBQ3BCLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FDdkIsQ0FBQTtJQUNELE1BQU0sWUFBWSxHQUFHLENBQUMsR0FBd0MsRUFBRSxFQUFFO1FBQzlELE1BQU0sSUFBSSxHQUFHLEdB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