UNPKG

@dr.pogodin/react-utils

Version:

Collection of generic ReactJS components and utils

14 lines 2.2 kB
// 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