Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 71x 71x 71x 249x 249x 249x 498x 91x 72x 72x 19x 19x 249x | import React from "react";
import { Button, ButtonProps } from "./Button";
export type ComplexButtonProps = ButtonProps & {
/** fire action on click with previous click count */
onClick?: (prevClickCount: number) => void;
/** fire a second action with a different count */
onClick2?: (prevClickCount2: number) => void;
};
const white = { style: { color: "white" } };
const leftPad = { style: { paddingLeft: "10px", ...white.style } };
/**
* Two buttons which show individual click counts
*/
export const ClickCount = ({
onClick,
onClick2,
...rest
}: ComplexButtonProps) => {
const [clickCount, setClickCount] = React.useState(0);
const [clickCount2, setClickCount2] = React.useState(0);
const handleClick =
(isCount = true) =>
() => {
// send in previous click
if (isCount) {
onClick?.(clickCount);
setClickCount(clickCount + 1);
} else {
onClick2?.(clickCount2);
setClickCount2(clickCount2 + 1);
}
};
return (
<div data-cy="click-container">
<span data-cy="count" {...white}>
Count is {clickCount}
</span>
<span {...leftPad}>
<Button onClick={handleClick()} {...rest} />
</span>
<span data-cy="count-2" {...leftPad}>
Count 2 is {clickCount2}
</span>
<span {...leftPad}>
<Button dataCy={"button-2"} onClick={handleClick(false)} {...rest} />
</span>
</div>
);
};
|