Added onClick event to Circle component

unosquare · Apr 20, 2023 · 5f1b362 · 5f1b362
1 parent aeacf97
commit 5f1b362
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/sample/index.tsx b/sample/index.tsx
@@ -130,6 +130,7 @@ const Application = () => {
     const [value, setValue] = React.useState(false);
     const [openMenu, setOpenMenu] = React.useState(false);
     const [data, setData] = React.useState(defaultData);
+    const [circleValue, setCircleValue] = React.useState(1234);
 
     const toggle = () => {
         setValue(!value);
@@ -146,6 +147,8 @@ const Application = () => {
         setOpenMenu(!openMenu);
     };
 
+    const CircleClicked = () => setCircleValue(circleValue + 1);
+
     return (
         <ThemeProvider theme={baseTheme}>
             <NavBar>
@@ -162,11 +165,16 @@ const Application = () => {
             </NavBar>
             <BasicToolbar>
                 <span>This is a toolbar</span>
-                <DropdownMenu options={options} value={currentOption} label='Options' onOptionClicked={handleOptionChange} />
+                <DropdownMenu
+                    options={options}
+                    value={currentOption}
+                    label='Options'
+                    onOptionClicked={handleOptionChange}
+                />
             </BasicToolbar>
             <AppContainer rows={5} columns={3} hasToolbar>
                 <Card column={1} row={1} direction={Directions.ROW} justify={FlexValues.START} fit>
-                    <Circle value={123456} />
+                    <Circle value={circleValue} onClick={CircleClicked} />
                     <Title>
                         <h2>TOTAL</h2>
                         <h3>Rows</h3>

diff --git a/src/Circle/index.tsx b/src/Circle/index.tsx
@@ -7,6 +7,7 @@ export interface CircleSettings {
     color?: Colors;
     value?: string | number;
     subValue?: string | number;
+    onClick?: () => void;
 }
 
 const calculateSize = (size: SizeValues) => {
@@ -107,8 +108,8 @@ const Label = ({ size, value }: any) => {
     return <span>{value}</span>;
 };
 
-export const Circle = ({ value, subValue, color = Colors.BLUE, size = SizeValues.LARGE }: CircleSettings) => (
-    <StyledCircle color={color} size={size}>
+export const Circle = ({ value, subValue, color = Colors.BLUE, size = SizeValues.LARGE, onClick }: CircleSettings) => (
+    <StyledCircle color={color} size={size} onClick={onClick}>
         <Label size={size} value={value} />
         {size === SizeValues.LARGE && subValue && <span>{subValue}</span>}
     </StyledCircle>