@tolokoban/ui
Version:
React components with theme
74 lines • 7.88 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Theme } from "../../theme/index.js";
import { classnameCommon, styleCommon, } from "../../theme/styles/common.js";
import { cssForColor, cssForColorOn, cssForGaps, } from "../../theme/styles/styles.js";
import { setDefaults } from "../../util/set-defaults.js";
import IconGear from "../icons/IconGear.js";
import Styles from "./Button.module.css";
const $ = Theme.classNames;
export function ViewButton(partialProps) {
var _a;
const props = setDefaults(partialProps, {
enabled: true,
borderRadius: ".125em",
margin: ["XS", "0"],
padding: [0, "M"],
onClick: DEFAULT_CLICK_HANDLER,
width: "auto",
height: "2em",
variant: "elevated",
thickness: 0.125,
});
const { className, children, label, enabled, variant, onClick, waiting, target, } = props;
const { color } = partialProps;
const thickness = cssForGaps(props.thickness);
const style = Object.assign({ "--custom-color-main-alpha": getMainAlphaColor(color, variant), "--custom-color-main": getMainColor(color, variant), "--custom-color-text": getTextColor(color, variant), "--custom-thickness": thickness }, styleCommon(props));
const Icon = props.icon;
const IconRight = props.iconRight;
const body = (_jsxs(_Fragment, { children: [" ", waiting && _jsx(IconGear, { animate: true }), !waiting && Icon && _jsx(Icon, {}), _jsx("div", { className: Styles.label, children: (_a = children !== null && children !== void 0 ? children : label) !== null && _a !== void 0 ? _a : "Button" }), IconRight && _jsx(IconRight, {})] }));
if (typeof onClick === "string") {
return (_jsx("a", { style: style, className: $.join(className, Styles.Button, Styles[variant], Boolean(Icon) && Styles.icon, !enabled && !waiting && Styles.disabled, classnameCommon(props)), target: target, href: onClick, children: body }));
}
return (_jsx("button", { style: style, className: $.join(className, Styles.Button, Styles[variant], Boolean(Icon) && Styles.icon, classnameCommon(props)), disabled: !enabled || waiting, type: "button", onClick: (evt) => {
if (!onClick)
return;
evt.preventDefault();
evt.stopPropagation();
onClick();
}, children: body }));
}
export function makeCustomButton(defaultProps) {
return (props) => ViewButton(Object.assign(Object.assign({}, defaultProps), props));
}
const DEFAULT_CLICK_HANDLER = () => {
console.log("Unhandled click event!");
};
function getMainColor(color, variant) {
switch (variant) {
case "text":
return "transparent";
// "elevated" | "filled" | "outlined"
default:
return cssForColor(color !== null && color !== void 0 ? color : "secondary-5");
}
}
function getMainAlphaColor(color, variant) {
switch (variant) {
case "text":
return "transparent";
// "elevated" | "filled" | "outlined"
default:
return cssForColor(color !== null && color !== void 0 ? color : "primary-5", 0.5);
}
}
function getTextColor(color, variant) {
switch (variant) {
case "text":
case "outlined":
return color ? cssForColor(color) : "currentColor";
// "elevated" | "filled"
default:
return cssForColorOn(color !== null && color !== void 0 ? color : "primary-5");
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3ZpZXcvQnV0dG9uL0J1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUNBLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxhQUFhLENBQUE7QUFDbkMsT0FBTyxFQUNILGVBQWUsRUFFZixXQUFXLEdBQ2QsTUFBTSwyQkFBMkIsQ0FBQTtBQUNsQyxPQUFPLEVBQ0gsV0FBVyxFQUNYLGFBQWEsRUFDYixVQUFVLEdBQ2IsTUFBTSw4QkFBOEIsQ0FBQTtBQUVyQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0seUJBQXlCLENBQUE7QUFDckQsT0FBTyxRQUFRLE1BQU0sbUJBQW1CLENBQUE7QUFHeEMsT0FBTyxNQUFNLE1BQU0scUJBQXFCLENBQUE7QUFFeEMsTUFBTSxDQUFDLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBQTtBQWdFMUIsTUFBTSxVQUFVLFVBQVUsQ0FBQyxZQUE2Qjs7SUFDcEQsTUFBTSxLQUFLLEdBQUcsV0FBVyxDQUFDLFlBQVksRUFBRTtRQUNwQyxPQUFPLEVBQUUsSUFBSTtRQUNiLFlBQVksRUFBRSxRQUFRO1FBQ3RCLE1BQU0sRUFBRSxDQUFDLElBQUksRUFBRSxHQUFHLENBQUM7UUFDbkIsT0FBTyxFQUFFLENBQUMsQ0FBQyxFQUFFLEdBQUcsQ0FBQztRQUNqQixPQUFPLEVBQUUscUJBQXFCO1FBQzlCLEtBQUssRUFBRSxNQUFNO1FBQ2IsTUFBTSxFQUFFLEtBQUs7UUFDYixPQUFPLEVBQUUsVUFBVTtRQUNuQixTQUFTLEVBQUUsS0FBSztLQUNuQixDQUFDLENBQUE7SUFDRixNQUFNLEVBQ0YsU0FBUyxFQUNULFFBQVEsRUFDUixLQUFLLEVBQ0wsT0FBTyxFQUNQLE9BQU8sRUFDUCxPQUFPLEVBQ1AsT0FBTyxFQUNQLE1BQU0sR0FDVCxHQUFHLEtBQUssQ0FBQTtJQUNULE1BQU0sRUFBRSxLQUFLLEVBQUUsR0FBRyxZQUFZLENBQUE7SUFD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