Skip to content

Commit a4d362a

Browse files
rvsiarvsia
authored
Merge pull request #114 from data-driven-forms/add-default-props-radio-group
fix(Radio): Added default prop options to radio buttons.
2 parents af14ff2 + 854cdb0 commit a4d362a

File tree

8 files changed

+520
-340
lines changed

8 files changed

+520
-340
lines changed

‎packages/mui-component-mapper/src/form-fields/form-fields.js

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import MuiSelect from './select-field';
1717
import { MuiPickersUtilsProvider, TimePicker, DatePicker } from 'material-ui-pickers';
1818
import MomentUtils from '@date-io/moment';
1919

20+
import RadioGroup from './radio';
21+
2022
import './form-fields.scss';
2123
const selectValue = option => option.sort((a, b) => a.label.localeCompare(b.label, 'en', { sensitivity: 'base' })).map(item => item.value);
2224

@@ -81,30 +83,13 @@ const selectComponent = ({
8183
/>
8284
),
8385
[componentTypes.RADIO]: () => (
84-
<div className="mui-ddform-radio-group">
85-
<FormControl component="fieldset">
86-
<FormLabel component="legend">{ label }</FormLabel>
87-
{ options.map(option => (
88-
<FieldProvider
89-
formOptions={ formOptions }
90-
key={ `${input.name}-${option.value}` }
91-
name={ input.name }
92-
value={ option.value }
93-
type="radio"
94-
render={ ({ input, formOptions }) => (
95-
<FormControlLabel
96-
value="female"
97-
control={ <MuiRadio
98-
{ ...input }
99-
disabled={ isDisabled }
100-
onChange={ () => input.onChange(option.value) }/> }
101-
label={ option.label }
102-
/>
103-
) }
104-
/>
105-
)) }
106-
</FormControl>
107-
</div>
86+
<RadioGroup
87+
FieldProvider={ FieldProvider }
88+
options={ options }
89+
isDisabled={ isDisabled }
90+
input={ input }
91+
label={ label }
92+
/>
10893
),
10994
[componentTypes.SELECT_COMPONENT]: () => (
11095
<MuiSelect

‎packages/mui-component-mapper/src/form-fields/radio.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import Radio from '@material-ui/core/Radio';
4+
import FormControlLabel from '@material-ui/core/FormControlLabel';
5+
import FormControl from '@material-ui/core/FormControl';
6+
import FormLabel from '@material-ui/core/FormLabel';
7+
8+
const RadioGroup = ({ FieldProvider, options, isDisabled, input, label }) => (
9+
<div className="mui-ddform-radio-group">
10+
<FormControl component="fieldset">
11+
<FormLabel component="legend">{ label }</FormLabel>
12+
{ options.map(option => (
13+
<FieldProvider
14+
key={ `${input.name}-${option.value}` }
15+
name={ input.name }
16+
value={ option.value }
17+
type="radio"
18+
render={ ({ input }) => (
19+
<FormControlLabel
20+
control={ <Radio
21+
{ ...input }
22+
disabled={ isDisabled }
23+
onChange={ () => input.onChange(option.value) }/> }
24+
label={ option.label }
25+
/>
26+
) }
27+
/>
28+
)) }
29+
</FormControl>
30+
</div>
31+
);
32+
33+
RadioGroup.propTypes = {
34+
FieldProvider: PropTypes.oneOfType([ PropTypes.node, PropTypes.func ]),
35+
options: PropTypes.arrayOf(PropTypes.shape({
36+
value: PropTypes.any,
37+
label: PropTypes.node,
38+
})),
39+
label: PropTypes.node.isRequired,
40+
isDisabled: PropTypes.bool,
41+
input: PropTypes.shape({
42+
name: PropTypes.string.isRequired,
43+
onChange: PropTypes.func.isRequired,
44+
}),
45+
};
46+
47+
RadioGroup.defaultProps = {
48+
options: [],
49+
};
50+
51+
export default RadioGroup;

‎packages/pf3-component-mapper/src/form-fields/form-fields.js

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { FormControl, HelpBlock, Checkbox, Radio as PfRadio, FormGroup, ControlLabel } from 'patternfly-react';
3+
import { FormControl, HelpBlock, Checkbox, FormGroup, ControlLabel } from 'patternfly-react';
44
import { componentTypes } from '@data-driven-forms/react-form-renderer';
55
import { validationError } from './helpers';
66
import MultipleChoiceList from './multiple-choice-list';
77
import RequiredLabel from './required-label';
88
import Switch from './switch-field';
99
import { DateTimePicker } from './date-time-picker/date-time-picker';
1010
import Select from './select';
11+
import RagioGroup from './radio';
1112

1213
const selectComponent = ({
1314
componentType,
@@ -33,17 +34,15 @@ const selectComponent = ({
3334
[componentTypes.TEXTAREA_FIELD]: () =>
3435
<FormControl { ...input } disabled={ isDisabled } readOnly={ isReadOnly } { ...rest } componentClass="textarea" placeholder={ placeholder }/>,
3536
[componentTypes.CHECKBOX]: () => <Checkbox { ...input } disabled={ isDisabled || isReadOnly }>{ label }</Checkbox>,
36-
[componentTypes.RADIO]: () => options.map(option => (
37-
<FieldProvider
38-
key={ `${input.name}-${option.value}` }
39-
name={ input.name }
40-
value={ option.value }
41-
type="radio"
42-
formOptions={ formOptions }
43-
render={ ({ input }) => (
44-
<PfRadio { ...input } onChange={ () => { input.onChange(option.value); } } disabled={ isDisabled || isReadOnly }>{ option.label }</PfRadio>) }
37+
[componentTypes.RADIO]: () => (
38+
<RagioGroup
39+
options={ options }
40+
FieldProvider={ FieldProvider }
41+
isDisabled={ isDisabled }
42+
isReadOnly={ isReadOnly }
43+
input={ input }
4544
/>
46-
)),
45+
),
4746
[componentTypes.SELECT_COMPONENT]: () => <div>
4847
<Select
4948
loadOptions={ loadOptions }

‎packages/pf3-component-mapper/src/form-fields/radio.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { Radio } from 'patternfly-react';
4+
5+
const RadioGroup = ({ FieldProvider, options, isDisabled, isReadOnly, input }) => options.map(option => (
6+
<FieldProvider
7+
key={ `${input.name}-${option.value}` }
8+
name={ input.name }
9+
value={ option.value }
10+
type="radio"
11+
render={ ({ input }) => (
12+
<Radio { ...input } onChange={ () => { input.onChange(option.value); } } disabled={ isDisabled || isReadOnly }>{ option.label }</Radio>) }
13+
/>
14+
));
15+
16+
RadioGroup.propTypes = {
17+
FieldProvider: PropTypes.oneOfType([ PropTypes.node, PropTypes.func ]),
18+
options: PropTypes.arrayOf(PropTypes.shape({
19+
value: PropTypes.any,
20+
label: PropTypes.node,
21+
})),
22+
isDisabled: PropTypes.bool,
23+
isReadOnly: PropTypes.bool,
24+
input: PropTypes.shape({
25+
name: PropTypes.string.isRequired,
26+
}),
27+
};
28+
29+
RadioGroup.defaultProps = {
30+
options: [],
31+
};
32+
33+
export default RadioGroup;

‎packages/pf3-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap

Lines changed: 74 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -121,66 +121,87 @@ exports[`FormFields <Radio /> should render correctly 1`] = `
121121
<div
122122
className="form-group"
123123
>
124-
<MockFieldProvider
125-
key="radio-1"
126-
name="radio"
127-
render={[Function]}
128-
type="radio"
129-
value={1}
124+
<RadioGroup
125+
FieldProvider={[Function]}
126+
input={
127+
Object {
128+
"name": "radio",
129+
}
130+
}
131+
options={
132+
Array [
133+
Object {
134+
"label": "option 1",
135+
"value": 1,
136+
},
137+
Object {
138+
"label": "option 2",
139+
"value": 2,
140+
},
141+
]
142+
}
130143
>
131-
<Radio
132-
bsClass="radio"
133-
disabled={false}
134-
inline={false}
135-
onChange={[Function]}
136-
title=""
144+
<MockFieldProvider
145+
key="radio-1"
146+
name="radio"
147+
render={[Function]}
148+
type="radio"
149+
value={1}
137150
>
138-
<div
139-
className="radio"
151+
<Radio
152+
bsClass="radio"
153+
disabled={false}
154+
inline={false}
155+
onChange={[Function]}
156+
title=""
140157
>
141-
<label
142-
title=""
158+
<div
159+
className="radio"
143160
>
144-
<input
145-
disabled={false}
146-
onChange={[Function]}
147-
type="radio"
148-
/>
149-
option 1
150-
</label>
151-
</div>
152-
</Radio>
153-
</MockFieldProvider>
154-
<MockFieldProvider
155-
key="radio-2"
156-
name="radio"
157-
render={[Function]}
158-
type="radio"
159-
value={2}
160-
>
161-
<Radio
162-
bsClass="radio"
163-
disabled={false}
164-
inline={false}
165-
onChange={[Function]}
166-
title=""
161+
<label
162+
title=""
163+
>
164+
<input
165+
disabled={false}
166+
onChange={[Function]}
167+
type="radio"
168+
/>
169+
option 1
170+
</label>
171+
</div>
172+
</Radio>
173+
</MockFieldProvider>
174+
<MockFieldProvider
175+
key="radio-2"
176+
name="radio"
177+
render={[Function]}
178+
type="radio"
179+
value={2}
167180
>
168-
<div
169-
className="radio"
181+
<Radio
182+
bsClass="radio"
183+
disabled={false}
184+
inline={false}
185+
onChange={[Function]}
186+
title=""
170187
>
171-
<label
172-
title=""
188+
<div
189+
className="radio"
173190
>
174-
<input
175-
disabled={false}
176-
onChange={[Function]}
177-
type="radio"
178-
/>
179-
option 2
180-
</label>
181-
</div>
182-
</Radio>
183-
</MockFieldProvider>
191+
<label
192+
title=""
193+
>
194+
<input
195+
disabled={false}
196+
onChange={[Function]}
197+
type="radio"
198+
/>
199+
option 2
200+
</label>
201+
</div>
202+
</Radio>
203+
</MockFieldProvider>
204+
</RadioGroup>
184205
</div>
185206
</FormGroup>
186207
</FieldInterface>

‎packages/pf4-component-mapper/src/form-fields/form-fields.js

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
33
import MultipleChoiceList from './multiple-choice-list';
44
import {
55
TextInput,
6-
Radio,
76
Checkbox,
87
TextArea,
98
FormGroup,
@@ -14,6 +13,7 @@ import {
1413
} from '@patternfly/react-core';
1514
import { componentTypes } from '@data-driven-forms/react-form-renderer';
1615
import Select from './select/select';
16+
import RadioGroup from './radio';
1717

1818
const selectComponent = ({
1919
componentType,
@@ -50,24 +50,15 @@ const selectComponent = ({
5050
{ ...rest }
5151
isDisabled={ isDisabled || isReadOnly }
5252
/>,
53-
[componentTypes.RADIO]: () => options.map(option => (
54-
<FieldProvider
53+
[componentTypes.RADIO]: () => (
54+
<RadioGroup
55+
options={ options }
56+
FieldProvider={ FieldProvider }
57+
isDisabled={ isDisabled }
58+
isReadOnly={ isReadOnly }
59+
input={ input }
5560
{ ...rest }
56-
key={ `${input.name}-${option.value}` }
57-
name={ input.name }
58-
value={ option.value }
59-
type="radio"
60-
render={ ({ input }) => (
61-
<Radio
62-
{ ...input }
63-
isChecked={ input.checked }
64-
label={ option.label }
65-
id={ `${input.name}-${option.value}` }
66-
aria-label={ option.label }
67-
isDisabled={ isDisabled || isReadOnly }
68-
onChange={ () => input.onChange(option.value) } />) }
69-
/>
70-
)),
61+
/>),
7162
[componentTypes.SWITCH]: () => {
7263
const { isValid, ...newRest } = rest;
7364
return <Switch

0 commit comments

Comments
 (0)