@tolokoban/ui
Version:
React components with theme
45 lines • 4.32 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { Theme } from "../../theme/index.js";
import { styleChild } from "../../theme/styles/child.js";
import Styles from "./FloatingButton.module.css";
const SIZES = {
XXS: 0.5,
XS: 1,
S: 1.5,
M: 2,
L: 3,
XL: 4,
XXL: 8,
};
function sizeToFontSize(value) {
var _a;
return (_a = SIZES[value]) !== null && _a !== void 0 ? _a : SIZES.M;
}
export function ViewFloatingButton(props) {
var _a;
const { color = "secondary-5", colorHover = (_a = props.color) !== null && _a !== void 0 ? _a : "secondary-6", size = "M", enabled = true, } = props;
const fontSize = sizeToFontSize(size);
const style = Object.assign(Object.assign({}, styleChild(props)), { width: `${fontSize}em`, height: `${fontSize}em` });
if (color) {
style["--custom-color-back"] = `var(--theme-color-${color})`;
style["--custom-color-text"] = `var(--theme-color-on-${color})`;
}
if (colorHover) {
style["--custom-color-hover-back"] = `var(--theme-color-${colorHover})`;
style["--custom-color-hover-text"] = `var(--theme-color-on-${colorHover})`;
}
const Icon = props.icon;
const iconProps = Object.assign(Object.assign({}, props), { size: `${fontSize * 0.75}em` });
delete iconProps.color;
delete iconProps.textColor;
// Prevent click to be emited twice.
delete iconProps.onClick;
return (_jsx("button", { className: Theme.classNames.join(props.className, Styles.FloatingButton), disabled: !enabled, type: "button", onClick: (evt) => {
if (!props.onClick)
return;
evt.preventDefault();
evt.stopPropagation();
props.onClick();
}, style: style, children: _jsx(_Fragment, { children: _jsx(Icon, Object.assign({}, iconProps)) }) }));
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxvYXRpbmdCdXR0b24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdmlldy9GbG9hdGluZ0J1dHRvbi9GbG9hdGluZ0J1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUVBLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUM1QyxPQUFPLEVBQW1CLFVBQVUsRUFBRSxNQUFNLDZCQUE2QixDQUFBO0FBSXpFLE9BQU8sTUFBTSxNQUFNLDZCQUE2QixDQUFBO0FBRWhELE1BQU0sS0FBSyxHQUEyQjtJQUNsQyxHQUFHLEVBQUUsR0FBRztJQUNSLEVBQUUsRUFBRSxDQUFDO0lBQ0wsQ0FBQyxFQUFFLEdBQUc7SUFDTixDQUFDLEVBQUUsQ0FBQztJQUNKLENBQUMsRUFBRSxDQUFDO0lBQ0osRUFBRSxFQUFFLENBQUM7SUFDTCxHQUFHLEVBQUUsQ0FBQztDQUNULENBQUE7QUFFRCxTQUFTLGNBQWMsQ0FBQyxLQUFhOztJQUNqQyxPQUFPLE1BQUEsS0FBSyxDQUFDLEtBQUssQ0FBQyxtQ0FBSSxLQUFLLENBQUMsQ0FBQyxDQUFBO0FBQ2xDLENBQUM7QUFZRCxNQUFNLFVBQVUsa0JBQWtCLENBQUMsS0FBMEI7O0lBQ3pELE1BQU0sRUFDRixLQUFLLEdBQUcsYUFBYSxFQUNyQixVQUFVLEdBQUcsTUFBQSxLQUFLLENBQUMsS0FBSyxtQ0FBSSxhQUFhLEVBQ3pDLElBQUksR0FBRyxHQUFHLEVBQ1YsT0FBTyxHQUFHLElBQUksR0FDakIsR0FBRyxLQUFLLENBQUE7SUFDVCxNQUFNLFFBQVEsR0FBRyxjQUFjLENBQUMsSUFBSSxDQUFDLENBQUE7SUFDckMsTUFBTSxLQUFLLG1DQUNKLFVBQVUsQ0FBQyxLQUFLLENBQUMsS0FDcEIsS0FBSyxFQUFFLEdBQUcsUUFBUSxJQUFJLEVBQ3RCLE1BQU0sRUFBRSxHQUFHLFFBQVEsSUFBSSxHQUMxQixDQUFBO0lBQ0QsSUFBSSxLQUFLLEVBQUUsQ0FBQztRQUNSLEtBQUssQ0FBQyxxQkFBcUIsQ0FBQyxHQUFHLHFCQUFxQixLQUFLLEdBQUcsQ0FBQTtRQUM1RCxLQUFLLENBQUMscUJBQXFCLENBQUMsR0FBRyx3QkFBd0IsS0FBSyxHQUFHLENBQUE7SUFDbkUsQ0FBQztJQUNELElBQUksVUFBVSxFQUFFLENBQUM7UUFDYixLQUFLLENBQUMsMkJBQTJCLENBQUMsR0FBRyxxQkFBcUIsVUFBVSxHQUFHLENBQUE7UUFDdkUsS0FBSyxDQUNELDJCQUEyQixDQUM5QixHQUFHLHdCQUF3QixVQUFVLEdBQUcsQ0FBQTtJQUM3QyxDQUFDO0lBQ0QsTUFBTSxJQUFJLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBQTtJQUN2QixNQUFNLFNBQVMsbUNBQVEsS0FBSyxLQUFFLElBQUksRUFBRSxHQUFHLFFBQVEsR0FBRyxJQUFJLElBQUksR0FBRSxDQUFBO0lBQzVELE9BQU8sU0FBUyxDQUFDLEtBQUssQ0FBQTtJQUN0QixPQUFPLFNBQVMsQ0FBQyxTQUFTLENBQUE7SUFDMUIsb0NBQW9DO0lBQ3BDLE9BQU8sU0FBUyxDQUFDLE9BQU8sQ0FBQTtJQUN4QixPQUFPLENBQ0gsaUJBQ0ksU0FBUyxFQUFFLEtBQUssQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUM1QixLQUFLLENBQUMsU0FBUyxFQUNmLE1BQU0sQ0FBQyxjQUFjLENBQ3hCLEVBQ0QsUUFBUSxFQUFFLENBQUMsT0FBTyxFQUNsQixJQUFJLEVBQUMsUUFBUSxFQUNiLE9BQU8sRUFBRSxDQUFDLEdBQUcsRUFBRSxFQUFFO1lBQ2IsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPO2dCQUFFLE9BQU07WUFFMUIsR0FBRyxDQUFDLGNBQWMsRUFBRSxDQUFBO1lBQ3BCLEdBQUcsQ0FBQyxlQUFlLEVBQUUsQ0FBQTtZQUNyQixLQUFLLENBQUMsT0FBTyxFQUFFLENBQUE7UUFDbkIsQ0FBQyxFQUNELEtBQUssRUFBRSxLQUFLLFlBRVosNEJBQ0ksS0FBQyxJQUFJLG9CQUFLLFNBQVMsRUFBSSxHQUN4QixHQUNFLENBQ1osQ0FBQTtBQUNMLENBQUMifQ==