@tolokoban/ui
Version:
React components with theme
66 lines • 7.08 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 const ViewInputMultiText = React.memo(MemoInputMultiText);
function MemoInputMultiText(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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXRNdWx0aVRleHQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdmlldy9JbnB1dE11bHRpVGV4dC9JbnB1dE11bHRpVGV4dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRS9CLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUM3QyxPQUFPLEVBRUgsY0FBYyxHQUNqQixNQUFNLGlDQUFpQyxDQUFDO0FBQ3pDLE9BQU8sRUFFSCxhQUFhLEdBQ2hCLE1BQU0sZ0NBQWdDLENBQUM7QUFDeEMsT0FBTyxFQUFtQixVQUFVLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUUxRSxPQUFPLE1BQU0sTUFBTSw2QkFBNkIsQ0FBQztBQUVqRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBc0JyQyxNQUFNLENBQUMsTUFBTSxrQkFBa0IsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLENBQUM7QUFFakUsU0FBUyxrQkFBa0IsQ0FBQyxLQUEwQjtJQUNsRCxNQUFNLEVBQ0YsS0FBSyxFQUNMLEtBQUssRUFDTCxRQUFRLEVBQ1IsWUFBWSxFQUNaLFVBQVUsR0FBRyxDQUFDLElBQVksRUFBRSxRQUFpQixFQUFFLEVBQUUsQ0FDN0MsUUFBUSxDQUFDLENBQUMsQ0FBQyxzQkFBSSxJQUFJLEdBQUssQ0FBQyxDQUFDLENBQUMseUJBQU8sSUFBSSxHQUFRLEdBQ3JELEdBQUcsS0FBSyxDQUFDO0lBQ1YsTUFBTSxDQUFDLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxDQUFDLEdBQUcsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2hELE1BQU0sS0FBSyxpREFDSixjQUFjLENBQUMsS0FBSyxDQUFDLEdBQ3JCLGFBQWEsQ0FBQyxLQUFLLENBQUMsR0FDcEIsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUN2QixDQUFD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