@tolokoban/ui
Version:
React components with theme
31 lines • 3.27 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Theme, styleColor } from "./../../theme/index.js";
import Styles from "./Chip.module.css";
/**
* @see https://material.io/components/chips#input-chips
*/
const SIZES = {
XXS: 25,
XS: 50,
S: 70,
M: 80,
L: 100,
XL: 200,
XXL: 400,
};
export function ViewChip(props) {
const { thumbnail, label, removable, tag, outline, size = "M", onClick, onRemove, } = props;
const handleClick = () => {
if (onClick)
onClick(tag);
};
const handleRemove = (evt) => {
if (!onRemove)
return;
evt.preventDefault();
evt.stopPropagation();
onRemove(tag);
};
return (_jsxs("button", { className: Theme.classNames.join(props.className, Styles.main, outline && Styles.outline), style: Object.assign(Object.assign({}, styleColor(props)), { fontSize: `${SIZES[size]}%` }), onClick: handleClick, children: [thumbnail && _jsx("div", { className: Styles.thumbnail, children: thumbnail }), _jsx("div", { className: Styles.label, children: label }), removable === true && (_jsx("svg", { viewBox: "0 0 24 24", onClick: handleRemove, children: _jsx("path", { fill: "currentColor", d: "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" }) }))] }));
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy92aWV3L0NoaXAvQ2hpcC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUVBLE9BQU8sRUFBbUIsS0FBSyxFQUFFLFVBQVUsRUFBRSxNQUFNLFNBQVMsQ0FBQTtBQUU1RCxPQUFPLE1BQU0sTUFBTSxtQkFBbUIsQ0FBQTtBQUV0Qzs7R0FFRztBQUVILE1BQU0sS0FBSyxHQUEyQjtJQUNsQyxHQUFHLEVBQUUsRUFBRTtJQUNQLEVBQUUsRUFBRSxFQUFFO0lBQ04sQ0FBQyxFQUFFLEVBQUU7SUFDTCxDQUFDLEVBQUUsRUFBRTtJQUNMLENBQUMsRUFBRSxHQUFHO0lBQ04sRUFBRSxFQUFFLEdBQUc7SUFDUCxHQUFHLEVBQUUsR0FBRztDQUNYLENBQUE7QUFrQkQsTUFBTSxVQUFVLFFBQVEsQ0FBYyxLQUF1QjtJQUN6RCxNQUFNLEVBQ0YsU0FBUyxFQUNULEtBQUssRUFDTCxTQUFTLEVBQ1QsR0FBRyxFQUNILE9BQU8sRUFDUCxJQUFJLEdBQUcsR0FBRyxFQUNWLE9BQU8sRUFDUCxRQUFRLEdBQ1gsR0FBRyxLQUFLLENBQUE7SUFDVCxNQUFNLFdBQVcsR0FBRyxHQUFHLEVBQUU7UUFDckIsSUFBSSxPQUFPO1lBQUUsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFBO0lBQzdCLENBQUMsQ0FBQTtJQUNELE1BQU0sWUFBWSxHQUEyQyxDQUFDLEdBQUcsRUFBRSxFQUFFO1FBQ2pFLElBQUksQ0FBQyxRQUFRO1lBQUUsT0FBTTtRQUNyQixHQUFHLENBQUMsY0FBYyxFQUFFLENBQUE7UUFDcEIsR0FBRyxDQUFDLGVBQWUsRUFBRSxDQUFBO1FBQ3JCLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQTtJQUNqQixDQUFDLENBQUE7SUFDRCxPQUFPLENBQ0gsa0JBQ0ksU0FBUyxFQUFFLEtBQUssQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUM1QixLQUFLLENBQUMsU0FBUyxFQUNmLE1BQU0sQ0FBQyxJQUFJLEVBQ1gsT0FBTyxJQUFJLE1BQU0sQ0FBQyxPQUFPLENBQzVCLEVBQ0QsS0FBSyxrQ0FDRSxVQUFVLENBQUMsS0FBSyxDQUFDLEtBQ3BCLFFBQVEsRUFBRSxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxLQUUvQixPQUFPLEVBQUUsV0FBVyxhQUVuQixTQUFTLElBQUksY0FBSyxTQUFTLEVBQUUsTUFBTSxDQUFDLFNBQVMsWUFBRyxTQUFTLEdBQU8sRUFDakUsY0FBSyxTQUFTLEVBQUUsTUFBTSxDQUFDLEtBQUssWUFBRyxLQUFLLEdBQU8sRUFDMUMsU0FBUyxLQUFLLElBQUksSUFBSSxDQUNuQixjQUFLLE9BQU8sRUFBQyxXQUFXLEVBQUMsT0FBTyxFQUFFLFlBQVksWUFDMUMsZUFDSSxJQUFJLEVBQUMsY0FBYyxFQUNuQixDQUFDLEVBQUMsME1BQTBNLEdBQzlNLEdBQ0EsQ0FDVCxJQUNJLENBQ1osQ0FBQTtBQUNMLENBQUMifQ==