Skip to content

Commit f94b17e

Browse files
mxdi9i7mxdi9i7
authored
Merge pull request #97 from mxdi9i7/peter/radio-bugfix
Radio bugfixes
2 parents af6212a + 58bed29 commit f94b17e

File tree

4 files changed

+116
-74
lines changed

4 files changed

+116
-74
lines changed

‎.github/CONTRIBUTION.md‎ renamed to ‎CONTRIBUTION.md‎

File renamed without changes.

‎src/components/Radio/index.stories.tsx‎

Lines changed: 111 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import Radio from '.';
33

44
import '../../styles/stories.scss';
@@ -13,65 +13,116 @@ const FormContainer = ({ children }) => {
1313
return <div style={{ width: '140px' }}>{children}</div>;
1414
};
1515

16-
export const BasicUsage = () => (
17-
<div className='storybook__container'>
18-
<FormContainer>
19-
<Radio />
20-
</FormContainer>
21-
</div>
22-
);
23-
24-
export const RadioDisabled = () => (
25-
<div className='storybook__container'>
26-
<FormContainer>
27-
<Radio disabled />
28-
</FormContainer>
29-
</div>
30-
);
31-
32-
export const LabelDisabled = () => (
33-
<div className='storybook__container'>
34-
<FormContainer>
35-
<Radio labelDisabled />
36-
</FormContainer>
37-
</div>
38-
);
39-
40-
export const RadioColor = () => (
41-
<div className='storybook__container'>
42-
<FormContainer>
43-
<Radio checkedColor='rgb(7, 193, 96)' />
44-
</FormContainer>
45-
</div>
46-
);
47-
48-
export const OnChange = () => (
49-
<div className='storybook__container'>
50-
<FormContainer>
51-
<Radio onChange={(v) => alert(v)} />
52-
</FormContainer>
53-
</div>
54-
);
55-
export const OnClick = () => (
56-
<div className='storybook__container'>
57-
<FormContainer>
58-
<Radio onClick={() => alert('clicked')} />
59-
</FormContainer>
60-
</div>
61-
);
62-
63-
export const RadioCell = () => (
64-
<>
65-
<div className='storybook__container grey'>
66-
<Cell radio={{ label: 'Radio Cell' }} />
16+
export const BasicUsage = () => {
17+
const [checked, setChecked] = useState(false);
18+
return (
19+
<div className='storybook__container'>
20+
<FormContainer>
21+
<Radio checked={checked} onClick={() => setChecked(!checked)} />
22+
</FormContainer>
6723
</div>
68-
</>
69-
);
24+
);
25+
};
26+
27+
export const RadioDisabled = () => {
28+
const [checked, setChecked] = useState(false);
29+
30+
return (
31+
<div className='storybook__container'>
32+
<FormContainer>
33+
<Radio
34+
disabled
35+
checked={checked}
36+
onClick={() => setChecked(!checked)}
37+
/>
38+
</FormContainer>
39+
</div>
40+
);
41+
};
42+
43+
export const LabelDisabled = () => {
44+
const [checked, setChecked] = useState(false);
7045

71-
export const RadioCellRTL = () => (
72-
<>
73-
<div className='storybook__container grey'>
74-
<Cell radio={{ label: 'Radio Cell', rtl: true }} />
46+
return (
47+
<div className='storybook__container'>
48+
<FormContainer>
49+
<Radio
50+
labelDisabled
51+
checked={checked}
52+
onClick={() => setChecked(!checked)}
53+
/>
54+
</FormContainer>
7555
</div>
76-
</>
77-
);
56+
);
57+
};
58+
59+
export const RadioColor = () => {
60+
const [checked, setChecked] = useState(false);
61+
62+
return (
63+
<div className='storybook__container'>
64+
<FormContainer>
65+
<Radio
66+
checkedColor='rgb(7, 193, 96)'
67+
checked={checked}
68+
onClick={() => setChecked(!checked)}
69+
/>
70+
</FormContainer>
71+
</div>
72+
);
73+
};
74+
75+
export const OnClick = () => {
76+
const [checked, setChecked] = useState(false);
77+
78+
return (
79+
<div className='storybook__container'>
80+
<FormContainer>
81+
<Radio
82+
checked={checked}
83+
onClick={() => {
84+
setChecked(!checked);
85+
alert(checked);
86+
}}
87+
/>
88+
</FormContainer>
89+
</div>
90+
);
91+
};
92+
93+
export const RadioCell = () => {
94+
const [checked, setChecked] = useState(false);
95+
96+
return (
97+
<>
98+
<div className='storybook__container grey'>
99+
<Cell
100+
radio={{
101+
label: 'Radio Cell',
102+
checked,
103+
onClick: () => setChecked(!checked)
104+
}}
105+
/>
106+
</div>
107+
</>
108+
);
109+
};
110+
111+
export const RadioCellRTL = () => {
112+
const [checked, setChecked] = useState(false);
113+
114+
return (
115+
<>
116+
<div className='storybook__container grey'>
117+
<Cell
118+
radio={{
119+
label: 'Radio Cell',
120+
rtl: true,
121+
checked,
122+
onClick: () => setChecked(!checked)
123+
}}
124+
/>
125+
</div>
126+
</>
127+
);
128+
};

‎src/components/Radio/index.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { MouseEvent, useEffect, useState } from 'react';
1+
import React, { MouseEvent } from 'react';
22

33
import classnames from '../../utils/classNames';
44
import Icon from '../Icons';
@@ -15,31 +15,23 @@ const Radio = ({
1515
labelDisabled,
1616
checkedColor,
1717
onClick,
18-
onChange,
1918
rtl,
2019
label = 'radio button'
2120
}: IProps) => {
22-
const [isChecked, setChecked] = useState(checked);
2321
const handleClick = (event: MouseEvent): void => {
2422
if (!labelDisabled) {
25-
setChecked(!isChecked);
2623
onClick && onClick(event);
2724
}
2825
};
2926

3027
const handleRadioClick = (event: MouseEvent): void => {
3128
if (labelDisabled) {
32-
setChecked(!isChecked);
3329
onClick && onClick(event);
3430
}
3531
};
3632

37-
useEffect(() => {
38-
onChange && onChange(isChecked);
39-
}, [isChecked]);
40-
41-
const iconName = isChecked ? 'checked' : 'circle';
42-
const iconColor = disabled ? '#c8c9cc' : isChecked ? checkedColor : '#000';
33+
const iconName = checked ? 'checked' : 'circle';
34+
const iconColor = disabled ? '#c8c9cc' : checked ? checkedColor : '#000';
4335

4436
// TODO: Add form related inputs here when working on form element
4537
return (

‎src/components/Radio/types.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
export interface IProps {
22
name?: string;
33
disabled?: boolean;
4-
checked?: boolean;
4+
checked: boolean;
55
labelDisabled?: boolean;
66
rtl?: boolean;
77
iconSize?: string;
88
checkedColor?: string;
9-
onClick?: Function;
10-
onChange?: Function;
9+
onClick: Function;
1110
label?: string;
1211
}

0 commit comments

Comments
 (0)