Merge pull request #97 from mxdi9i7/peter/radio-bugfix

Radio bugfixes
mxdi9i7 · Jan 2, 2021 · f94b17e · f94b17e
2 parents af6212a + 58bed29
commit f94b17e
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 74 deletions.
diff --git a/.github/CONTRIBUTION.md → CONTRIBUTION.md b/.github/CONTRIBUTION.md → CONTRIBUTION.md
diff --git a/src/components/Radio/index.stories.tsx b/src/components/Radio/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Radio from '.';
 
 import '../../styles/stories.scss';
@@ -13,65 +13,116 @@ const FormContainer = ({ children }) => {
   return <div style={{ width: '140px' }}>{children}</div>;
 };
 
-export const BasicUsage = () => (
-  <div className='storybook__container'>
-    <FormContainer>
-      <Radio />
-    </FormContainer>
-  </div>
-);
-
-export const RadioDisabled = () => (
-  <div className='storybook__container'>
-    <FormContainer>
-      <Radio disabled />
-    </FormContainer>
-  </div>
-);
-
-export const LabelDisabled = () => (
-  <div className='storybook__container'>
-    <FormContainer>
-      <Radio labelDisabled />
-    </FormContainer>
-  </div>
-);
-
-export const RadioColor = () => (
-  <div className='storybook__container'>
-    <FormContainer>
-      <Radio checkedColor='rgb(7, 193, 96)' />
-    </FormContainer>
-  </div>
-);
-
-export const OnChange = () => (
-  <div className='storybook__container'>
-    <FormContainer>
-      <Radio onChange={(v) => alert(v)} />
-    </FormContainer>
-  </div>
-);
-export const OnClick = () => (
-  <div className='storybook__container'>
-    <FormContainer>
-      <Radio onClick={() => alert('clicked')} />
-    </FormContainer>
-  </div>
-);
-
-export const RadioCell = () => (
-  <>
-    <div className='storybook__container grey'>
-      <Cell radio={{ label: 'Radio Cell' }} />
+export const BasicUsage = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div className='storybook__container'>
+      <FormContainer>
+        <Radio checked={checked} onClick={() => setChecked(!checked)} />
+      </FormContainer>
     </div>
-  </>
-);
+  );
+};
+
+export const RadioDisabled = () => {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <div className='storybook__container'>
+      <FormContainer>
+        <Radio
+          disabled
+          checked={checked}
+          onClick={() => setChecked(!checked)}
+        />
+      </FormContainer>
+    </div>
+  );
+};
+
+export const LabelDisabled = () => {
+  const [checked, setChecked] = useState(false);
 
-export const RadioCellRTL = () => (
-  <>
-    <div className='storybook__container grey'>
-      <Cell radio={{ label: 'Radio Cell', rtl: true }} />
+  return (
+    <div className='storybook__container'>
+      <FormContainer>
+        <Radio
+          labelDisabled
+          checked={checked}
+          onClick={() => setChecked(!checked)}
+        />
+      </FormContainer>
     </div>
-  </>
-);
+  );
+};
+
+export const RadioColor = () => {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <div className='storybook__container'>
+      <FormContainer>
+        <Radio
+          checkedColor='rgb(7, 193, 96)'
+          checked={checked}
+          onClick={() => setChecked(!checked)}
+        />
+      </FormContainer>
+    </div>
+  );
+};
+
+export const OnClick = () => {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <div className='storybook__container'>
+      <FormContainer>
+        <Radio
+          checked={checked}
+          onClick={() => {
+            setChecked(!checked);
+            alert(checked);
+          }}
+        />
+      </FormContainer>
+    </div>
+  );
+};
+
+export const RadioCell = () => {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <>
+      <div className='storybook__container grey'>
+        <Cell
+          radio={{
+            label: 'Radio Cell',
+            checked,
+            onClick: () => setChecked(!checked)
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+export const RadioCellRTL = () => {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <>
+      <div className='storybook__container grey'>
+        <Cell
+          radio={{
+            label: 'Radio Cell',
+            rtl: true,
+            checked,
+            onClick: () => setChecked(!checked)
+          }}
+        />
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Radio/index.tsx b/src/components/Radio/index.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, useEffect, useState } from 'react';
+import React, { MouseEvent } from 'react';
 
 import classnames from '../../utils/classNames';
 import Icon from '../Icons';
@@ -15,31 +15,23 @@ const Radio = ({
   labelDisabled,
   checkedColor,
   onClick,
-  onChange,
   rtl,
   label = 'radio button'
 }: IProps) => {
-  const [isChecked, setChecked] = useState(checked);
   const handleClick = (event: MouseEvent): void => {
     if (!labelDisabled) {
-      setChecked(!isChecked);
       onClick && onClick(event);
     }
   };
 
   const handleRadioClick = (event: MouseEvent): void => {
     if (labelDisabled) {
-      setChecked(!isChecked);
       onClick && onClick(event);
     }
   };
 
-  useEffect(() => {
-    onChange && onChange(isChecked);
-  }, [isChecked]);
-
-  const iconName = isChecked ? 'checked' : 'circle';
-  const iconColor = disabled ? '#c8c9cc' : isChecked ? checkedColor : '#000';
+  const iconName = checked ? 'checked' : 'circle';
+  const iconColor = disabled ? '#c8c9cc' : checked ? checkedColor : '#000';
 
   // TODO: Add form related inputs here when working on form element
   return (

diff --git a/src/components/Radio/types.ts b/src/components/Radio/types.ts
@@ -1,12 +1,11 @@
 export interface IProps {
   name?: string;
   disabled?: boolean;
-  checked?: boolean;
+  checked: boolean;
   labelDisabled?: boolean;
   rtl?: boolean;
   iconSize?: string;
   checkedColor?: string;
-  onClick?: Function;
-  onChange?: Function;
+  onClick: Function;
   label?: string;
 }