@dr.pogodin/react-utils
Version:
Collection of generic ReactJS components and utils
14 lines • 2.2 kB
JavaScript
// The <Button> component implements a standard button / button-like link.
import themed from"@dr.pogodin/react-themes";import Link from"../Link.js";const defaultTheme={"context":"_0S7CYa","ad":"YFXz0-","hoc":"BElFuo","button":"hXiBOw","active":"biX-UA","disabled":"_-6CH9q"};import{jsx as _jsx}from"react/jsx-runtime";export const BaseButton=({active,children,disabled,enforceA,onClick,onKeyDown:onKeyDownProp,onKeyUp,onMouseDown,onMouseUp,onPointerDown,onPointerUp,openNewTab,replace,testId,theme,to})=>{let className=theme.button;if(active&&theme.active)className+=` ${theme.active}`;if(disabled){if(theme.disabled)className+=` ${theme.disabled}`;return/*#__PURE__*/_jsx("div",{className:className,"data-testid":process.env.NODE_ENV==="production"?undefined:testId,children:children})}let onKeyDown=onKeyDownProp;if(!onKeyDown&&onClick){onKeyDown=e=>{if(e.key==="Enter")onClick(e)}}if(to){return/*#__PURE__*/_jsx(Link,{className:className,"data-testid":process.env.NODE_ENV==="production"?undefined:testId,enforceA:enforceA,onClick:onClick// TODO: For now, the `onKeyDown` handler is not passed to the <Link>,
// as <Link> component does not call it anyway, presumably due to
// the inner implementation details. We should look into supporting it:
// https://github.com/birdofpreyru/react-utils/issues/444
// onKeyDown={onKeyDown}
,onKeyUp:onKeyUp,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onPointerDown:onPointerDown,onPointerUp:onPointerUp,openNewTab:openNewTab,replace:replace,to:to,children:children})}return/*#__PURE__*/_jsx("div",{className:className,"data-testid":process.env.NODE_ENV==="production"?undefined:testId,onClick:onClick,onKeyDown:onKeyDown,onKeyUp:onKeyUp,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onPointerDown:onPointerDown,onPointerUp:onPointerUp,role:"button",tabIndex:0,children:children})};/**
* Button component theme: a map of CSS
* class names to append to button elements:
* @prop {string} [active] to the root element of active button.
* @prop {string} [button] to the root element of any button.
* @prop {string} [disabled] to the root element of disabled button.
*/export default themed(BaseButton,"Button",defaultTheme);
//# sourceMappingURL=index.js.map