Skip to content

Commit 889c3ab

Browse files
felixmoshfelixmosh
committed
fix: handle radio group props properly, closes #138 
1 parent 2364fed commit 889c3ab

File tree

5 files changed

+250
-64
lines changed

5 files changed

+250
-64
lines changed

‎example/App.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,19 @@ const tabs = {
2222
};
2323

2424
export default class App extends React.Component {
25-
state = { selectedTab: 'Form' };
25+
state = {
26+
selectedTab:
27+
new URLSearchParams(window.location.search).get('tab') || 'Form',
28+
};
2629

27-
handleChangeTab = (e, { name }) => {
28-
this.setState({ selectedTab: name });
30+
handleChangeTab = (_e, { name }) => {
31+
this.setState({ selectedTab: name }, () =>
32+
history.pushState(
33+
null,
34+
'',
35+
'?' + new URLSearchParams({ tab: name }).toString()
36+
)
37+
);
2938
};
3039

3140
render() {

‎example/InputExamples.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
Divider,
99
Message,
1010
} from 'semantic-ui-react';
11-
import { Input } from '../src';
11+
import { Input, Form } from '../src';
1212

1313
const styles = {
1414
root: {
@@ -102,11 +102,7 @@ export default class InputExamples extends React.Component {
102102

103103
return (
104104
<Container style={styles.root}>
105-
<Formsy
106-
noValidate
107-
onValidSubmit={this.onValidSubmit}
108-
ref={this.formRef}
109-
>
105+
<Form onValidSubmit={this.onValidSubmit} ref={this.formRef}>
110106
<Segment>
111107
<h5> Input With Error Label </h5>
112108
{inputWithLabel}
@@ -140,7 +136,7 @@ export default class InputExamples extends React.Component {
140136
content="Reset"
141137
color="black"
142138
/>
143-
</Formsy>
139+
</Form>
144140
{!!this.state.result && (
145141
<Message>
146142
<pre>{this.state.result}</pre>

‎example/RadioGroupExamples.tsx‎

Lines changed: 68 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import * as React from 'react';
21
import Formsy from 'formsy-react';
2+
import * as React from 'react';
33
import {
44
Container,
55
Button,
@@ -9,7 +9,7 @@ import {
99
Checkbox,
1010
Message,
1111
} from 'semantic-ui-react';
12-
import { RadioGroup } from '../src';
12+
import { RadioGroup, Form } from '../src';
1313

1414
const styles = {
1515
root: {
@@ -20,11 +20,6 @@ const styles = {
2020
display: 'flex',
2121
marginBottom: 18,
2222
},
23-
24-
radio: {
25-
marginLeft: 4,
26-
marginRight: 12,
27-
},
2823
};
2924

3025
export default class RadioGroupExamples extends React.Component {
@@ -39,6 +34,23 @@ export default class RadioGroupExamples extends React.Component {
3934
const errorLabel = <Label color="red" pointing="left" />;
4035

4136
const radioGroup = (
37+
<RadioGroup
38+
name="radioGroup"
39+
required
40+
label="Label"
41+
validationErrors={{
42+
isDefaultRequiredValue: 'Please select one of these',
43+
}}
44+
errorLabel={errorLabel}
45+
style={styles.radioGroup}
46+
>
47+
<Radio label="one" value="one" />
48+
<Radio label="two" value="two" />
49+
<Radio label="three" value="three" />
50+
</RadioGroup>
51+
);
52+
53+
const disabledRadioGroup = (
4254
<RadioGroup
4355
name="radioGroup"
4456
required
@@ -48,9 +60,9 @@ export default class RadioGroupExamples extends React.Component {
4860
errorLabel={errorLabel}
4961
style={styles.radioGroup}
5062
>
51-
<Radio label="one" value="one" style={styles.radio} />
52-
<Radio label="two" value="two" style={styles.radio} />
53-
<Radio label="three" value="three" style={styles.radio} />
63+
<Radio label="one" value="one" />
64+
<Radio label="two" value="two" />
65+
<Radio label="three" value="three" />
5466
</RadioGroup>
5567
);
5668

@@ -64,9 +76,9 @@ export default class RadioGroupExamples extends React.Component {
6476
errorLabel={errorLabel}
6577
style={styles.radioGroup}
6678
>
67-
<Checkbox label="one" value="one" style={styles.radio} />
68-
<Checkbox label="two" value="two" style={styles.radio} />
69-
<Checkbox label="three" value="three" style={styles.radio} />
79+
<Checkbox label="one" value="one" />
80+
<Checkbox label="two" value="two" />
81+
<Checkbox label="three" value="three" />
7082
</RadioGroup>
7183
);
7284

@@ -81,10 +93,10 @@ export default class RadioGroupExamples extends React.Component {
8193
errorLabel={errorLabel}
8294
style={styles.radioGroup}
8395
>
84-
<Checkbox label="one" value="one" style={styles.radio} />
85-
<Radio toggle label="two" value="two" style={styles.radio} />
86-
<Radio slider label="three" value="three" style={styles.radio} />
87-
<Radio label="four" value="four" style={styles.radio} />
96+
<Checkbox label="one" value="one" />
97+
<Radio toggle label="two" value="two" />
98+
<Radio slider label="three" value="three" />
99+
<Radio label="four" value="four" />
88100
</RadioGroup>
89101
);
90102

@@ -99,22 +111,52 @@ export default class RadioGroupExamples extends React.Component {
99111
errorLabel={errorLabel}
100112
style={styles.radioGroup}
101113
>
102-
<Checkbox label="one" value="one" style={styles.radio} />
103-
<Checkbox label="two" value="two" style={styles.radio} />
104-
<Checkbox label="three" value="three" style={styles.radio} />
114+
<Checkbox label="one" value="one" />
115+
<Checkbox label="two" value="two" />
116+
<Checkbox label="three" value="three" />
105117
</RadioGroup>
106118
);
107119

108120
return (
109121
<Container style={styles.root}>
110-
<Formsy
111-
noValidate={true}
112-
onValidSubmit={this.onValidSubmit}
113-
ref={this.formRef}
114-
>
122+
<Form onValidSubmit={this.onValidSubmit} ref={this.formRef}>
115123
<Segment>
116124
<h5> RadioGroup </h5>
117125
{radioGroup}
126+
127+
<h5>Grouped</h5>
128+
<RadioGroup
129+
name="radioGroup"
130+
required
131+
inline={false}
132+
label="Label"
133+
validationErrors={{
134+
isDefaultRequiredValue: 'Please select one of these',
135+
}}
136+
errorLabel={errorLabel}
137+
style={styles.radioGroup}
138+
>
139+
<Radio label="one" value="one" />
140+
<Radio label="two" value="two" />
141+
<Radio label="three" value="three" />
142+
</RadioGroup>
143+
144+
<h5>Disabled</h5>
145+
<RadioGroup
146+
name="radioGroup"
147+
required
148+
disabled={true}
149+
label="Label"
150+
validationErrors={{
151+
isDefaultRequiredValue: 'Please select one of these',
152+
}}
153+
errorLabel={errorLabel}
154+
style={styles.radioGroup}
155+
>
156+
<Radio label="one" value="one" />
157+
<Radio label="two" value="two" />
158+
<Radio label="three" value="three" />
159+
</RadioGroup>
118160
</Segment>
119161

120162
<Segment>
@@ -143,7 +185,7 @@ export default class RadioGroupExamples extends React.Component {
143185
content="Reset"
144186
color="black"
145187
/>
146-
</Formsy>
188+
</Form>
147189
{!!this.state.result && (
148190
<Message>
149191
<pre>{this.state.result}</pre>

‎src/FormsyRadioGroup.tsx‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,19 @@ import {
66
StrictFormFieldProps,
77
StrictRadioProps,
88
} from 'semantic-ui-react';
9+
import { StrictFormGroupProps } from 'semantic-ui-react/dist/commonjs/collections/Form/FormGroup';
910
import { CheckboxProps } from 'semantic-ui-react/dist/commonjs/modules/Checkbox/Checkbox';
10-
import { filterSuirElementProps } from './utils';
1111

1212
type RadioGroupValueType = RadioProps['value'];
1313

1414
export interface IFormsyRadioGroupProps
1515
extends FormsyInjectedProps<RadioGroupValueType>,
1616
Pick<
1717
StrictFormFieldProps,
18-
'as' | 'className' | 'error' | 'width' | 'inline' | 'disabled'
18+
'as' | 'className' | 'error' | 'width' | 'disabled'
1919
>,
20-
Omit<StrictRadioProps, 'error' | 'value' | 'name'> {
20+
Omit<StrictRadioProps, 'error' | 'value' | 'name'>,
21+
Pick<StrictFormGroupProps, 'inline' | 'unstackable'> {
2122
id?: string;
2223
inputClassName?: string;
2324
passRequiredToField?: boolean;
@@ -57,38 +58,64 @@ class FormsyRadioGroup extends Component<IFormsyRadioGroupProps> {
5758
required,
5859
formRadioGroup,
5960
children,
61+
name,
6062
value,
6163
errorLabel,
6264
isValid,
6365
isPristine,
6466
errorMessage,
6567
passRequiredToField,
6668
disabled,
69+
className,
70+
unstackable,
71+
inline = true,
72+
width,
6773
} = this.props;
6874

6975
const error = !isPristine && !isValid;
70-
const formFieldProps = {
76+
const formGroupProps = {
77+
as,
78+
className,
79+
unstackable,
80+
inline,
81+
grouped: !inline,
82+
};
83+
const labelProps = {
7184
required: required && passRequiredToField,
7285
error: !disabled && error,
7386
label,
87+
disabled,
88+
};
89+
90+
const fieldProps = {
91+
disabled,
92+
width,
93+
error: !disabled && error,
7494
};
7595

7696
return (
77-
<Form.Group as={as} {...filterSuirElementProps(this.props)}>
78-
{label && <Form.Field {...formFieldProps} />}
97+
<Form.Group {...formGroupProps}>
98+
{label && <Form.Field {...labelProps} />}
7999
{Children.map(children, (radio: any) => {
80100
if (!radio) {
81101
return null;
82102
}
83103

84104
const props: RadioProps = {
105+
name,
85106
checked: value === radio.props.value,
86107
onChange: this.handleChange,
108+
disabled,
87109
};
110+
88111
if (formRadioGroup) {
89112
props.error = error;
90113
}
91-
return <Form.Field> {cloneElement(radio, { ...props })} </Form.Field>;
114+
return (
115+
<Form.Field {...fieldProps}>
116+
{cloneElement(radio, { ...props })}
117+
</Form.Field>
118+
);
92119
})}
93120
{error && errorLabel && cloneElement(errorLabel, {}, errorMessage)}
94121
</Form.Group>

0 commit comments

Comments
 (0)