Skip to content
This repository was archived by the owner on Jun 1, 2020. It is now read-only.

Commit 0791d3a

Browse files
agustin107agustin107
committed
Add require mark
Improve some widgets Resolves #8
1 parent 85025bf commit 0791d3a

File tree

9 files changed

+168
-101
lines changed

9 files changed

+168
-101
lines changed

‎src/CheckboxWidget/CheckboxWidget.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,20 @@ const CheckboxWidget = (props: WidgetProps) => {
1616
label,
1717
autofocus,
1818
onChange,
19+
onBlur,
20+
onFocus,
1921
} = props;
2022

23+
const _onChange = ({}, checked: boolean) => onChange(checked);
24+
const _onBlur = ({
25+
target: { value },
26+
}: React.FocusEvent<HTMLButtonElement>) => onBlur(id, value);
27+
const _onFocus = ({
28+
target: { value },
29+
}: React.FocusEvent<HTMLButtonElement>) => onFocus(id, value);
30+
2131
return (
22-
<FormControl>
32+
<FormControl fullWidth={true} required={required}>
2333
<FormControlLabel
2434
control={
2535
<Checkbox
@@ -28,7 +38,9 @@ const CheckboxWidget = (props: WidgetProps) => {
2838
required={required}
2939
disabled={disabled || readonly}
3040
autoFocus={autofocus}
31-
onChange={event => onChange(event.target.checked)}
41+
onChange={_onChange}
42+
onBlur={_onBlur}
43+
onFocus={_onFocus}
3244
/>
3345
}
3446
label={label}

‎src/CheckboxesWidget/CheckboxesWidget.tsx

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { WidgetProps } from 'react-jsonschema-form';
1111
const selectValue = (value: any, selected: any, all: any) => {
1212
const at = all.indexOf(value);
1313
const updated = selected.slice(0, at).concat(value, selected.slice(at));
14+
1415
// As inserting values at predefined index positions doesn't work with empty
1516
// arrays, we need to reorder the updated selection to match the initial order
1617
return updated.sort((a: any, b: any) => all.indexOf(a) > all.indexOf(b));
@@ -20,20 +21,41 @@ const deselectValue = (value: any, selected: any) => {
2021
return selected.filter((v: any) => v !== value);
2122
};
2223

23-
const CheckboxesWidget = (props: WidgetProps) => {
24-
const {
25-
schema,
26-
label,
27-
id,
28-
disabled,
29-
options,
30-
value,
31-
autofocus,
32-
readonly,
33-
onChange,
34-
required,
35-
} = props;
24+
const CheckboxesWidget = ({
25+
schema,
26+
label,
27+
id,
28+
disabled,
29+
options,
30+
value,
31+
autofocus,
32+
readonly,
33+
required,
34+
onChange,
35+
onBlur,
36+
onFocus,
37+
}: WidgetProps) => {
3638
const { enumOptions, enumDisabled, inline } = options;
39+
40+
const _onChange = (option: any) => ({
41+
target: { checked },
42+
}: React.ChangeEvent<HTMLInputElement>) => {
43+
const all = (enumOptions as any).map(({ value }: any) => value);
44+
45+
if (checked) {
46+
onChange(selectValue(option.value, value, all));
47+
} else {
48+
onChange(deselectValue(option.value, value));
49+
}
50+
};
51+
52+
const _onBlur = ({
53+
target: { value },
54+
}: React.FocusEvent<HTMLButtonElement>) => onBlur(id, value);
55+
const _onFocus = ({
56+
target: { value },
57+
}: React.FocusEvent<HTMLButtonElement>) => onFocus(id, value);
58+
3759
return (
3860
<FormControl fullWidth={true} required={required}>
3961
<FormLabel htmlFor={id}>{label || schema.title}</FormLabel>
@@ -48,14 +70,9 @@ const CheckboxesWidget = (props: WidgetProps) => {
4870
checked={checked}
4971
disabled={disabled || itemDisabled || readonly}
5072
autoFocus={autofocus && index === 0}
51-
onChange={event => {
52-
const all = (enumOptions as any).map(({ value }: any) => value);
53-
if (event.target.checked) {
54-
onChange(selectValue(option.value, value, all));
55-
} else {
56-
onChange(deselectValue(option.value, value));
57-
}
58-
}}
73+
onChange={_onChange(option)}
74+
onBlur={_onBlur}
75+
onFocus={_onFocus}
5976
/>
6077
);
6178
return inline ? (

‎src/PasswordWidget/PasswordWidget.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22

3+
import FormControl from '@material-ui/core/FormControl';
34
import Input from '@material-ui/core/Input';
45
import InputLabel from '@material-ui/core/InputLabel';
56

@@ -17,6 +18,7 @@ const PasswordWidget = ({
1718
onChange,
1819
options,
1920
autofocus,
21+
schema,
2022
}: WidgetProps) => {
2123
const _onChange = ({
2224
target: { value },
@@ -29,8 +31,12 @@ const PasswordWidget = ({
2931
}: React.FocusEvent<HTMLInputElement>) => onFocus(id, value);
3032

3133
return (
32-
<>
33-
<InputLabel>{label}</InputLabel>
34+
<FormControl
35+
fullWidth={true}
36+
//error={!!rawErrors}
37+
required={required}
38+
>
39+
<InputLabel>{label || schema.title}</InputLabel>
3440
<Input
3541
autoFocus={autofocus}
3642
required={required}
@@ -41,7 +47,7 @@ const PasswordWidget = ({
4147
onBlur={_onBlur}
4248
onChange={_onChange}
4349
/>
44-
</>
50+
</FormControl>
4551
);
4652
};
4753

‎src/RadioWidget/RadioWidget.tsx

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,55 @@
11
import React from 'react';
22

3-
import Radio from '@material-ui/core/Radio';
4-
import RadioGroup from '@material-ui/core/RadioGroup';
53
import FormControl from '@material-ui/core/FormControl';
64
import FormControlLabel from '@material-ui/core/FormControlLabel';
75
import FormLabel from '@material-ui/core/FormLabel';
6+
import Radio from '@material-ui/core/Radio';
7+
import RadioGroup from '@material-ui/core/RadioGroup';
88

99
import { WidgetProps } from 'react-jsonschema-form';
1010

11-
const RadioWidget = (props: WidgetProps) => {
12-
const {
13-
id,
14-
schema,
15-
options,
16-
value,
17-
required,
18-
disabled,
19-
readonly,
20-
label,
21-
onChange,
22-
} = props;
23-
11+
const RadioWidget = ({
12+
id,
13+
schema,
14+
options,
15+
value,
16+
required,
17+
disabled,
18+
readonly,
19+
label,
20+
onChange,
21+
onBlur,
22+
onFocus,
23+
}: WidgetProps) => {
2424
// Generating a unique field name to identify this set of radio buttons
2525
const name = Math.random().toString();
2626
const { enumOptions, enumDisabled } = options;
27-
const _onChange = ({ }: any, value: any) =>
27+
28+
const _onChange = ({}, value: any) =>
2829
onChange(schema.type == 'boolean' ? value !== 'false' : value);
29-
// checked={checked} has been moved above name={name}, As mentioned in #349;
30-
// this is a temporary fix for radio button rendering bug in React, facebook/react#7630.
30+
const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
31+
onBlur(id, value);
32+
const _onFocus = ({
33+
target: { value },
34+
}: React.FocusEvent<HTMLInputElement>) => onFocus(id, value);
35+
3136
const row = options ? options.inline : false;
3237

3338
return (
34-
<FormControl
35-
fullWidth={true}
36-
required={required}
37-
style={{ paddingLeft: '16px' }}
38-
>
39+
<FormControl fullWidth={true} required={required}>
3940
<FormLabel htmlFor={id}>{label || schema.title}</FormLabel>
4041
<RadioGroup
4142
name={name}
42-
className="field-radio-group"
4343
value={`${value}`}
44-
onChange={_onChange}
4544
row={row as boolean}
45+
onChange={_onChange}
46+
onBlur={_onBlur}
47+
onFocus={_onFocus}
4648
>
4749
{(enumOptions as any).map((option: any, i: number) => {
4850
const itemDisabled =
4951
enumDisabled && (enumDisabled as any).indexOf(option.value) != -1;
52+
5053
const radio = (
5154
<FormControlLabel
5255
control={<Radio color="primary" key={i} />}
@@ -56,6 +59,7 @@ const RadioWidget = (props: WidgetProps) => {
5659
disabled={disabled || itemDisabled || readonly}
5760
/>
5861
);
62+
5963
return radio;
6064
})}
6165
</RadioGroup>

‎src/RangeWidget/RangeWidget.tsx

Lines changed: 41 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,55 @@
11
import React from 'react';
22

3-
import Slider from '@material-ui/core/Slider';
3+
import FormControl from '@material-ui/core/FormControl';
44
import Grid from '@material-ui/core/Grid';
5-
import Typography from '@material-ui/core/Typography';
5+
import Slider from '@material-ui/core/Slider';
6+
import FormLabel from '@material-ui/core/FormLabel';
67

78
import { rangeSpec } from 'react-jsonschema-form/lib/utils';
89
import { WidgetProps } from 'react-jsonschema-form';
910

10-
const RangeWidget = (props: WidgetProps) => {
11-
const {
12-
value,
13-
//readonly,
14-
//disabled,
15-
//autofocus,
16-
//onBlur,
17-
//onFocus,
18-
options,
19-
schema,
20-
//formContext,
21-
//registry,
22-
//rawErrors,
23-
label,
24-
id,
25-
} = props;
26-
11+
const RangeWidget = ({
12+
value,
13+
readonly,
14+
disabled,
15+
onBlur,
16+
onFocus,
17+
options,
18+
schema,
19+
//formContext,
20+
//registry,
21+
//rawErrors,
22+
onChange,
23+
required,
24+
label,
25+
id,
26+
}: WidgetProps) => {
2727
let sliderProps = { value, label, id, ...rangeSpec(schema) };
2828

29-
const _onChange = ({}, value: any) => {
30-
return props.onChange(value === '' ? options.emptyValue : value);
31-
};
29+
const _onChange = ({}, value: any) =>
30+
onChange(value === '' ? options.emptyValue : value);
31+
const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
32+
onBlur(id, value);
33+
const _onFocus = ({
34+
target: { value },
35+
}: React.FocusEvent<HTMLInputElement>) => onFocus(id, value);
3236

3337
return (
34-
<Grid container alignItems="flex-end">
35-
<Grid item xs>
36-
<Typography id="discrete-slider-custom" gutterBottom={true}>
37-
{label}
38-
</Typography>
39-
<Slider {...sliderProps} onChange={_onChange} />
40-
</Grid>
38+
<Grid container={true} alignItems="flex-end">
39+
<FormControl
40+
fullWidth={true}
41+
//error={!!rawErrors}
42+
required={required}
43+
>
44+
<FormLabel id={id}>{label}</FormLabel>
45+
<Slider
46+
{...sliderProps}
47+
disabled={disabled || readonly}
48+
onChange={_onChange}
49+
onBlur={_onBlur}
50+
onFocus={_onFocus}
51+
/>
52+
</FormControl>
4153
</Grid>
4254
);
4355
};

‎src/TextWidget/TextWidget.tsx

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22

3+
import FormControl from '@material-ui/core/FormControl';
34
import Input from '@material-ui/core/Input';
45
import InputLabel from '@material-ui/core/InputLabel';
56

@@ -17,31 +18,25 @@ const TextWidget = ({
1718
onFocus,
1819
autofocus,
1920
options,
21+
schema,
2022
}: WidgetProps) => {
2123
const _onChange = ({
2224
target: { value },
23-
}: React.ChangeEvent<HTMLInputElement>) => {
24-
let inputValue: any = value;
25-
26-
if (!inputValue) {
27-
if (options.emptyValue === undefined) {
28-
inputValue = undefined;
29-
} else {
30-
inputValue = options.emptyValue;
31-
}
32-
}
33-
34-
onChange(inputValue);
35-
};
25+
}: React.ChangeEvent<HTMLInputElement>) =>
26+
onChange(value === '' ? options.emptyValue : value);
3627
const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
3728
onBlur(id, value);
3829
const _onFocus = ({
3930
target: { value },
4031
}: React.FocusEvent<HTMLInputElement>) => onFocus(id, value);
4132

4233
return (
43-
<>
44-
<InputLabel>{label}</InputLabel>
34+
<FormControl
35+
fullWidth={true}
36+
//error={!!rawErrors}
37+
required={required}
38+
>
39+
<InputLabel>{label || schema.title}</InputLabel>
4540
<Input
4641
id={id}
4742
autoFocus={autofocus}
@@ -53,7 +48,7 @@ const TextWidget = ({
5348
onBlur={_onBlur}
5449
onFocus={_onFocus}
5550
/>
56-
</>
51+
</FormControl>
5752
);
5853
};
5954

0 commit comments

Comments
 (0)