@tolokoban/ui
Version:
React components with theme
30 lines • 3.81 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useChangeableValue } from "../../hooks/changeable-value.js";
import { ViewLabel } from "../Label/index.js";
import { ViewTouchable } from "../Touchable/index.js";
import { Theme, classnameCommon, styleColor, styleCommon, } from "./../../theme/index.js";
import Styles from "./OptionsMultiple.module.css";
const $ = Theme.classNames;
export function ViewOptionsMultiple(props) {
const { label, children } = props;
const [values, setValues] = useChangeableValue(props);
const toggle = (value) => {
const index = values.indexOf(value);
if (index < 0) {
setValues([...values, value]);
}
else {
setValues(values.filter((item) => item !== value));
}
};
return (_jsx(ViewLabel, { value: label, children: _jsx("div", { className: $.join(Styles.OptionsMultiple, props.className, classnameCommon(props)), style: Object.assign(Object.assign({}, styleCommon(props)), styleColor(props)), children: children.map((child) => {
const key = child.key;
const selected = values.includes(key);
return (_jsx(ViewTouchable, { className: $.join(Styles.button, selected ? Styles.selected : Styles.unselected), style: styleColor({
color: selected
? props.colorSelection
: props.color,
}), onClick: () => toggle(key), children: child }, key));
}) }) }));
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3B0aW9uc011bHRpcGxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3ZpZXcvT3B0aW9uc011bHRpcGxlL09wdGlvbnNNdWx0aXBsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUVBLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFBO0FBRXBFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sdUJBQXVCLENBQUE7QUFDckQsT0FBTyxFQUVILEtBQUssRUFDTCxlQUFlLEVBQ2YsVUFBVSxFQUNWLFdBQVcsR0FDZCxNQUFNLFNBQVMsQ0FBQTtBQUVoQixPQUFPLE1BQU0sTUFBTSw4QkFBOEIsQ0FBQTtBQWlCakQsTUFBTSxDQUFDLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBQTtBQUUxQixNQUFNLFVBQVUsbUJBQW1CLENBQy9CLEtBQWtDO0lBRWxDLE1BQU0sRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLEdBQUcsS0FBSyxDQUFBO0lBQ2pDLE1BQU0sQ0FBQyxNQUFNLEVBQUUsU0FBUyxDQUFDLEdBQUcsa0JBQWtCLENBQUMsS0FBSyxDQUFDLENBQUE7SUFDckQsTUFBTSxNQUFNLEdBQUcsQ0FBQyxLQUFRLEVBQUUsRUFBRTtRQUN4QixNQUFNLEtBQUssR0FBRyxNQUFNLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFBO1FBQ25DLElBQUksS0FBSyxHQUFHLENBQUMsRUFBRSxDQUFDO1lBQ1osU0FBUyxDQUFDLENBQUMsR0FBRyxNQUFNLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQTtRQUNqQyxDQUFDO2FBQU0sQ0FBQztZQUNKLFNBQVMsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLEtBQUssS0FBSyxDQUFDLENBQUMsQ0FBQTtRQUN0RCxDQUFDO0lBQ0wsQ0FBQyxDQUFBO0lBQ0QsT0FBTyxDQUNILEtBQUMsU0FBUyxJQUFDLEtBQUssRUFBRSxLQUFLLFlBQ25CLGNBQ0ksU0FBUyxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQ2IsTUFBTSxDQUFDLGVBQWUsRUFDdEIsS0FBSyxDQUFDLFNBQVMsRUFDZixlQUFlLENBQUMsS0FBSyxDQUFDLENBQ3pCLEVBQ0QsS0FBSyxrQ0FBTyxXQUFXLENBQUMsS0FBSyxDQUFDLEdBQUssVUFBVSxDQUFDLEtBQUssQ0FBQyxhQUVuRCxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7Z0JBQ3BCLE1BQU0sR0FBRyxHQUFHLEtBQUssQ0FBQyxHQUFRLENBQUE7Z0JBQzFCLE1BQU0sUUFBUSxHQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUE7Z0JBQ3JDLE9BQU8sQ0FDSCxLQUFDLGFBQWEsSUFDVixTQUFTLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FDYixNQUFNLENBQUMsTUFBTSxFQUNiLFFBQVEsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FDakQsRUFFRCxLQUFLLEVBQUUsVUFBVSxDQUFDO3dCQUNkLEtBQUssRUFBRSxRQUFROzRCQUNYLENBQUMsQ0FBQyxLQUFLLENBQUMsY0FBYzs0QkFDdEIsQ0FBQyxDQUFDLEtBQUssQ0FBQyxLQUFLO3FCQUNwQixDQUFDLEVBQ0YsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsWUFFekIsS0FBSyxJQVJELEdBQUcsQ0FTSSxDQUNuQixDQUFBO1lBQ0wsQ0FBQyxDQUFDLEdBQ0EsR0FDRSxDQUNmLENBQUE7QUFDTCxDQUFDIn0=