Skip to content

Commit d9fa0c3

Browse files
max-eliamax-elia
authored
Add RadioGroupControl in React Vanilla
Adds RadioGroupControl for enums and oneOf enums in the React Vanilla renderer set.
1 parent 157c5a0 commit d9fa0c3

File tree

6 files changed

+259
-125
lines changed

6 files changed

+259
-125
lines changed

‎packages/vanilla/src/controls/OneOfRadioGroupControl.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
The MIT License
3+
4+
Copyright (c) 2018-2021 EclipseSource Munich
5+
https://github.com/eclipsesource/jsonforms
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in
15+
all copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23+
THE SOFTWARE.
24+
*/
25+
import React from 'react';
26+
import {
27+
and,
28+
ControlProps,
29+
isOneOfEnumControl,
30+
optionIs,
31+
RankedTester,
32+
rankWith,
33+
} from '@jsonforms/core';
34+
import { withVanillaControlProps } from '../util';
35+
import { VanillaRendererProps } from '../index';
36+
import { withJsonFormsOneOfEnumProps } from '@jsonforms/react';
37+
import { RadioGroup } from './RadioGroup';
38+
39+
export const OneOfRadioGroupControl = (props: ControlProps & VanillaRendererProps) => {
40+
return <RadioGroup {...props} />;
41+
};
42+
43+
export const oneOfRadioGroupControlTester: RankedTester = rankWith(
44+
3,
45+
and(isOneOfEnumControl, optionIs('format', 'radio'))
46+
);
47+
48+
export default withVanillaControlProps(withJsonFormsOneOfEnumProps(OneOfRadioGroupControl));

‎packages/vanilla/src/controls/RadioGroup.tsx

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/*
2+
The MIT License
3+
4+
Copyright (c) 2017-2021 EclipseSource Munich
5+
https://github.com/eclipsesource/jsonforms
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in
15+
all copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23+
THE SOFTWARE.
24+
*/
25+
import React from 'react';
26+
import {
27+
computeLabel,
28+
ControlProps,
29+
ControlState,
30+
isDescriptionHidden,
31+
OwnPropsOfEnum
32+
} from '@jsonforms/core';
33+
import { Control } from '@jsonforms/react';
34+
import { VanillaRendererProps } from '../index';
35+
import merge from 'lodash/merge';
36+
37+
export class RadioGroup extends Control<
38+
ControlProps & VanillaRendererProps & OwnPropsOfEnum,
39+
ControlState
40+
> {
41+
render() {
42+
const {
43+
classNames,
44+
id,
45+
label,
46+
options,
47+
required,
48+
description,
49+
errors,
50+
data,
51+
uischema,
52+
visible,
53+
config
54+
} = this.props;
55+
const isValid = errors.length === 0;
56+
const divClassNames = `validation ${isValid ? classNames.description : 'validation_error'
57+
}`;
58+
const groupStyle: { [x: string]: any } = {
59+
display: 'flex',
60+
flexDirection: 'row'
61+
};
62+
63+
const appliedUiSchemaOptions = merge({}, config, uischema.options);
64+
const showDescription = !isDescriptionHidden(
65+
visible,
66+
description,
67+
this.state.isFocused,
68+
appliedUiSchemaOptions.showUnfocusedDescription
69+
);
70+
71+
return (
72+
<div
73+
className={classNames.wrapper}
74+
hidden={!visible}
75+
onFocus={this.onFocus}
76+
onBlur={this.onBlur}
77+
>
78+
<label htmlFor={id} className={classNames.label}>
79+
{computeLabel(
80+
label,
81+
required,
82+
appliedUiSchemaOptions.hideRequiredAsterisk
83+
)}
84+
</label>
85+
86+
<div style={groupStyle}>
87+
{options.map(option => (
88+
<div key={option.label}>
89+
<input
90+
type='radio'
91+
value={option.value}
92+
id={option.value}
93+
name={id}
94+
checked={data === option.value}
95+
onChange={ev => this.handleChange(ev.currentTarget.value)}
96+
/>
97+
<label htmlFor={option.value}>{option.label}</label>
98+
</div>
99+
))}
100+
</div>
101+
<div className={divClassNames}>
102+
{!isValid ? errors : showDescription ? description : null}
103+
</div>
104+
</div>
105+
);
106+
}
107+
}

‎packages/vanilla/src/controls/RadioGroupControl.tsx

Lines changed: 13 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
The MIT License
33
4-
Copyright (c) 2017-2019 EclipseSource Munich
4+
Copyright (c) 2017-2021 EclipseSource Munich
55
https://github.com/eclipsesource/jsonforms
66
77
Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -24,91 +24,21 @@
2424
*/
2525
import React from 'react';
2626
import {
27-
computeLabel,
27+
and,
2828
ControlProps,
29-
ControlState,
30-
isDescriptionHidden,
29+
isEnumControl,
30+
optionIs, RankedTester, rankWith
3131
} from '@jsonforms/core';
32-
import { Control, withJsonFormsControlProps } from '@jsonforms/react';
32+
import { withJsonFormsEnumProps } from '@jsonforms/react';
33+
import { RadioGroup } from './RadioGroup';
3334
import { withVanillaControlProps } from '../util';
3435
import { VanillaRendererProps } from '../index';
35-
import merge from 'lodash/merge';
36+
export const RadioGroupControl = (props: ControlProps & VanillaRendererProps) => {
37+
return <RadioGroup {...props} />;
38+
};
3639

37-
export class RadioGroupControl extends Control<
38-
ControlProps & VanillaRendererProps,
39-
ControlState
40-
> {
41-
render() {
42-
const {
43-
classNames,
44-
id,
45-
label,
46-
required,
47-
description,
48-
errors,
49-
data,
50-
schema,
51-
uischema,
52-
visible,
53-
config
54-
} = this.props;
55-
const isValid = errors.length === 0;
56-
const divClassNames = `validation ${
57-
isValid ? classNames.description : 'validation_error'
58-
}`;
59-
const groupStyle: { [x: string]: any } = {
60-
display: 'flex',
61-
flexDirection: 'row'
62-
};
63-
64-
const appliedUiSchemaOptions = merge({}, config, uischema.options);
65-
const showDescription = !isDescriptionHidden(
66-
visible,
67-
description,
68-
this.state.isFocused,
69-
appliedUiSchemaOptions.showUnfocusedDescription
70-
);
71-
72-
const options = schema.enum;
73-
74-
return (
75-
<div
76-
className={classNames.wrapper}
77-
hidden={!visible}
78-
onFocus={this.onFocus}
79-
onBlur={this.onBlur}
80-
>
81-
<label htmlFor={id} className={classNames.label}>
82-
{computeLabel(
83-
label,
84-
required,
85-
appliedUiSchemaOptions.hideRequiredAsterisk
86-
)}
87-
</label>
88-
89-
<div style={groupStyle}>
90-
{options.map(optionValue => (
91-
<div key={optionValue}>
92-
<input
93-
type='radio'
94-
value={optionValue}
95-
id={optionValue}
96-
name={id}
97-
checked={data === optionValue}
98-
onChange={ev => this.handleChange(ev.currentTarget.value)}
99-
/>
100-
<label htmlFor={optionValue}>{optionValue}</label>
101-
</div>
102-
))}
103-
</div>
104-
<div className={divClassNames}>
105-
{!isValid ? errors : showDescription ? description : null}
106-
</div>
107-
</div>
108-
);
109-
}
110-
}
111-
112-
export default withVanillaControlProps(
113-
withJsonFormsControlProps(RadioGroupControl)
40+
export const radioGroupControlTester: RankedTester = rankWith(
41+
3,
42+
and(isEnumControl, optionIs('format', 'radio'))
11443
);
44+
export default withVanillaControlProps(withJsonFormsEnumProps(RadioGroupControl));

‎packages/vanilla/src/controls/index.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,13 @@
2323
THE SOFTWARE.
2424
*/
2525
import InputControl, { inputControlTester } from './InputControl';
26-
export { InputControl, inputControlTester };
26+
import RadioGroupControl, { radioGroupControlTester } from './RadioGroupControl';
27+
import OneOfRadioGroupControl, { oneOfRadioGroupControlTester } from './OneOfRadioGroupControl';
28+
export {
29+
InputControl,
30+
inputControlTester,
31+
RadioGroupControl,
32+
radioGroupControlTester,
33+
OneOfRadioGroupControl,
34+
oneOfRadioGroupControlTester
35+
};

‎packages/vanilla/src/index.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ import {
4646
timeCellTester
4747
} from './cells';
4848

49-
import { InputControl, inputControlTester } from './controls';
49+
import { InputControl, inputControlTester, RadioGroupControl, radioGroupControlTester, OneOfRadioGroupControl, oneOfRadioGroupControlTester, } from './controls';
5050

5151
import {
5252
ArrayControl,
@@ -110,6 +110,8 @@ export * from './styles';
110110

111111
export const vanillaRenderers: { tester: RankedTester; renderer: any }[] = [
112112
{ tester: inputControlTester, renderer: InputControl },
113+
{ tester: radioGroupControlTester, renderer: RadioGroupControl },
114+
{ tester: oneOfRadioGroupControlTester, renderer: OneOfRadioGroupControl },
113115
{ tester: arrayControlTester, renderer: ArrayControl },
114116
{ tester: labelRendererTester, renderer: LabelRenderer },
115117
{ tester: categorizationTester, renderer: Categorization },

0 commit comments

Comments
 (0)