diff --git a/src/Burger.tsx b/src/Burger.tsx index f30deb4..2635c12 100644 --- a/src/Burger.tsx +++ b/src/Burger.tsx @@ -18,6 +18,7 @@ export const Burger = (({ size = 32, toggle, toggled, + disabled = false }) => { const [toggledInternal, toggleInternal] = useState(false) @@ -42,7 +43,7 @@ export const Burger = (({ const time = Math.max(0, duration) const burgerStyles: CSSProperties = { - cursor: 'pointer', + cursor: disabled ? 'not-allowed' : 'pointer', height: `${area}px`, position: 'relative', transition: `${time}s ${easing}`, diff --git a/src/Cross.tsx b/src/Cross.tsx index e9c18d8..83bb5ee 100644 --- a/src/Cross.tsx +++ b/src/Cross.tsx @@ -9,8 +9,8 @@ export const Cross = ((props) => ( aria-label={o.label} aria-expanded={o.isToggled} data-testid="cross" - onClick={o.handler} - onKeyUp={(e) => e.key === 'Enter' && o.handler()} + onClick={props.disabled ? undefined : o.handler} + onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()} role="button" style={o.burgerStyles} tabIndex={0} diff --git a/src/Divide.tsx b/src/Divide.tsx index 596e254..10cfac1 100644 --- a/src/Divide.tsx +++ b/src/Divide.tsx @@ -9,8 +9,8 @@ export const Divide = ((props) => ( aria-label={o.label} aria-expanded={o.isToggled} data-testid="divide" - onClick={o.handler} - onKeyUp={(e) => e.key === 'Enter' && o.handler()} + onClick={props.disabled ? undefined : o.handler} + onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()} role="button" style={o.burgerStyles} tabIndex={0} diff --git a/src/Fade.tsx b/src/Fade.tsx index d273b8f..2358cd3 100644 --- a/src/Fade.tsx +++ b/src/Fade.tsx @@ -9,8 +9,8 @@ export const Fade = ((props) => ( aria-label={o.label} aria-expanded={o.isToggled} data-testid="fade" - onClick={o.handler} - onKeyUp={(e) => e.key === 'Enter' && o.handler()} + onClick={props.disabled ? undefined : o.handler} + onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()} role="button" style={o.burgerStyles} tabIndex={0} diff --git a/src/Pivot.tsx b/src/Pivot.tsx index 481b600..0de1c94 100644 --- a/src/Pivot.tsx +++ b/src/Pivot.tsx @@ -9,8 +9,8 @@ export const Pivot = ((props) => ( aria-label={o.label} aria-expanded={o.isToggled} data-testid="pivot" - onClick={o.handler} - onKeyUp={(e) => e.key === 'Enter' && o.handler()} + onClick={props.disabled ? undefined : o.handler} + onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()} role="button" style={{ ...o.burgerStyles, diff --git a/src/Rotate.tsx b/src/Rotate.tsx index 45bebbe..02bcc0d 100644 --- a/src/Rotate.tsx +++ b/src/Rotate.tsx @@ -9,8 +9,8 @@ export const Rotate = ((props) => ( aria-label={o.label} aria-expanded={o.isToggled} data-testid="rotate" - onClick={o.handler} - onKeyUp={(e) => e.key === 'Enter' && o.handler()} + onClick={props.disabled ? undefined : o.handler} + onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()} role="button" style={{ ...o.burgerStyles, diff --git a/src/Slant.tsx b/src/Slant.tsx index 417dbb2..6b41b80 100644 --- a/src/Slant.tsx +++ b/src/Slant.tsx @@ -9,8 +9,8 @@ export const Slant = ((props) => ( aria-label={o.label} aria-expanded={o.isToggled} data-testid="slant" - onClick={o.handler} - onKeyUp={(e) => e.key === 'Enter' && o.handler()} + onClick={props.disabled ? undefined : o.handler} + onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()} role="button" style={{ ...o.burgerStyles, diff --git a/src/Sling.tsx b/src/Sling.tsx index c1179d8..9715ea9 100644 --- a/src/Sling.tsx +++ b/src/Sling.tsx @@ -9,8 +9,8 @@ export const Sling = ((props) => ( aria-label={o.label} aria-expanded={o.isToggled} data-testid="sling" - onClick={o.handler} - onKeyUp={(e) => e.key === 'Enter' && o.handler()} + onClick={props.disabled ? undefined : o.handler} + onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()} role="button" style={{ ...o.burgerStyles, diff --git a/src/Spin.tsx b/src/Spin.tsx index a8b3336..d4d2ba0 100644 --- a/src/Spin.tsx +++ b/src/Spin.tsx @@ -9,8 +9,8 @@ export const Spin = ((props) => ( aria-label={o.label} aria-expanded={o.isToggled} data-testid="spin" - onClick={o.handler} - onKeyUp={(e) => e.key === 'Enter' && o.handler()} + onClick={props.disabled ? undefined : o.handler} + onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()} role="button" style={{ ...o.burgerStyles, diff --git a/src/Spiral.tsx b/src/Spiral.tsx index df4e39a..cf5fe53 100644 --- a/src/Spiral.tsx +++ b/src/Spiral.tsx @@ -9,8 +9,8 @@ export const Spiral = ((props) => ( aria-label={o.label} aria-expanded={o.isToggled} data-testid="spiral" - onClick={o.handler} - onKeyUp={(e) => e.key === 'Enter' && o.handler()} + onClick={props.disabled ? undefined : o.handler} + onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()} role="button" style={{ ...o.burgerStyles, diff --git a/src/Squash.tsx b/src/Squash.tsx index 6657b48..0bf0dfb 100644 --- a/src/Squash.tsx +++ b/src/Squash.tsx @@ -9,8 +9,8 @@ export const Squash = ((props) => ( aria-label={o.label} aria-expanded={o.isToggled} data-testid="squash" - onClick={o.handler} - onKeyUp={(e) => e.key === 'Enter' && o.handler()} + onClick={props.disabled ? undefined : o.handler} + onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()} role="button" style={o.burgerStyles} tabIndex={0} diff --git a/src/Squeeze.tsx b/src/Squeeze.tsx index f12f2ad..6be9d3a 100644 --- a/src/Squeeze.tsx +++ b/src/Squeeze.tsx @@ -9,8 +9,8 @@ export const Squeeze = ((props) => ( aria-label={o.label} aria-expanded={o.isToggled} data-testid="squeeze" - onClick={o.handler} - onKeyUp={(e) => e.key === 'Enter' && o.handler()} + onClick={props.disabled ? undefined : o.handler} + onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()} role="button" style={o.burgerStyles} tabIndex={0} diff --git a/src/Tilt.tsx b/src/Tilt.tsx index 53c3ade..d80d2d3 100644 --- a/src/Tilt.tsx +++ b/src/Tilt.tsx @@ -9,8 +9,8 @@ export const Tilt = ((props) => ( aria-label={o.label} aria-expanded={o.isToggled} data-testid="tilt" - onClick={o.handler} - onKeyUp={(e) => e.key === 'Enter' && o.handler()} + onClick={props.disabled ? undefined : o.handler} + onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()} role="button" style={{ ...o.burgerStyles, diff --git a/src/Turn.tsx b/src/Turn.tsx index 76589b9..c342406 100644 --- a/src/Turn.tsx +++ b/src/Turn.tsx @@ -9,8 +9,8 @@ export const Turn = ((props) => ( aria-label={o.label} aria-expanded={o.isToggled} data-testid="turn" - onClick={o.handler} - onKeyUp={(e) => e.key === 'Enter' && o.handler()} + onClick={props.disabled ? undefined : o.handler} + onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()} role="button" style={o.burgerStyles} tabIndex={0} diff --git a/src/Twirl.tsx b/src/Twirl.tsx index 8c9cebe..0e3a93f 100644 --- a/src/Twirl.tsx +++ b/src/Twirl.tsx @@ -9,8 +9,8 @@ export const Twirl = ((props) => ( aria-label={o.label} aria-expanded={o.isToggled} data-testid="twirl" - onClick={o.handler} - onKeyUp={(e) => e.key === 'Enter' && o.handler()} + onClick={props.disabled ? undefined : o.handler} + onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()} role="button" style={{ ...o.burgerStyles, diff --git a/src/index.ts b/src/index.ts index 6fccc3a..42d8748 100644 --- a/src/index.ts +++ b/src/index.ts @@ -44,6 +44,8 @@ export interface CommonBurgerProps { toggle?: Dispatch> /** A way to provide your own state value. Can be used together with a state action (the `toggle` prop). */ toggled?: boolean; + /** Specifies if the hamburger should be disabled. */ + disabled?: boolean; } export interface RenderOptions {