Skip to content

Commit b2aa07f

Browse files
coding-my-passioncoding-my-passion
authored
fix: Blur event validates time in the TimePicker input (#966)
1 parent e7efaeb commit b2aa07f

File tree

2 files changed

+96
-35
lines changed

2 files changed

+96
-35
lines changed

‎src/TimePicker/TimePicker.test.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,67 @@ describe('<TimePicker />', () => {
270270
expect(wrapper.state('value')).toEqual('');
271271
});
272272

273+
test('check for onBlur of text input with initial value', () => {
274+
// check valid input with 12 Hour Clock
275+
let wrapper = mount(<TimePicker format12Hours value='10:10:10 pm' />);
276+
wrapper
277+
.find('input[type="text"]')
278+
.at(0)
279+
.simulate('blur');
280+
expect(wrapper.state('value')).toEqual('10:10:10 pm');
281+
// check invalid input with 12 Hour Clock
282+
wrapper = mount(<TimePicker format12Hours value='13:10:10 pm' />);
283+
wrapper
284+
.find('input[type="text"]')
285+
.at(0)
286+
.simulate('blur');
287+
expect(wrapper.state('value')).toEqual('');
288+
// check valid input with 24 Hour Clock
289+
wrapper = mount(<TimePicker value='23:10:10' />);
290+
wrapper
291+
.find('input[type="text"]')
292+
.at(0)
293+
.simulate('blur');
294+
expect(wrapper.state('value')).toEqual('23:10:10');
295+
// check invalid input with 24 Hour Clock
296+
wrapper = mount(<TimePicker value='25:10:10' />);
297+
wrapper
298+
.find('input[type="text"]')
299+
.at(0)
300+
.simulate('blur');
301+
expect(wrapper.state('value')).toEqual('');
302+
// check valid input with 12 Hour Clock with Hours and Minutes
303+
wrapper = mount(<TimePicker format12Hours showSecond={false}
304+
value='10:10 am' />);
305+
wrapper
306+
.find('input[type="text"]')
307+
.at(0)
308+
.simulate('blur');
309+
expect(wrapper.state('value')).toEqual('10:10 am');
310+
// check invalid input with 12 Hour Clock with Hours and Minutes
311+
wrapper = mount(<TimePicker format12Hours showSecond={false}
312+
value='13:10 an' />);
313+
wrapper
314+
.find('input[type="text"]')
315+
.at(0)
316+
.simulate('blur');
317+
expect(wrapper.state('value')).toEqual('');
318+
// check valid input with 24 Hour Clock with Hours and Minutes
319+
wrapper = mount(<TimePicker showSecond={false} value='23:10' />);
320+
wrapper
321+
.find('input[type="text"]')
322+
.at(0)
323+
.simulate('blur');
324+
expect(wrapper.state('value')).toEqual('23:10');
325+
// check invalid input with 24 Hour Clock with Hours and Minutes
326+
wrapper = mount(<TimePicker showSecond={false} value='24:10' />);
327+
wrapper
328+
.find('input[type="text"]')
329+
.at(0)
330+
.simulate('blur');
331+
expect(wrapper.state('value')).toEqual('');
332+
});
333+
273334
test('check for initial value', () => {
274335
let wrapper = mount(timepickerWithInitialValue);
275336
expect(wrapper.state('value')).toEqual('10:30:34 pm');

‎src/TimePicker/_TimePickerItem.js‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -60,48 +60,49 @@ class TimePickerItem extends Component {
6060
event.stopPropagation();
6161
this.setState({ value: event.target.value });
6262
var aux = event.target.value;
63-
this.onInputValidation(aux);
63+
this.onInputValidation(aux, event);
6464
this.props.updateValue(aux);
6565
};
66-
67-
onInputValidation = value => {
66+
onInputValidation = (value, event) => {
6867
const { showHour, showMinute, showSecond, format12Hours } = this.props;
69-
70-
if (showHour && showMinute && showSecond && format12Hours) {
68+
if (format12Hours && showHour && showMinute && showSecond) {
7169
//validate hh:mm:ss am/pm format
72-
let regex = new RegExp(
73-
'((1[0-2]|0?[0-9]):([0-5][0-9]):([0-5][0-9]) ([AaPp][Mm]))'
74-
);
75-
this.inputCheck(regex, value);
76-
} else if (
77-
(format12Hours && showHour && showMinute) ||
78-
(format12Hours && showMinute & showSecond)
79-
) {
80-
//validate hh:mm and mm:ss am
81-
let regex = new RegExp('((1[0-2]|0?[0-9]):([0-5][0-9]) ([AaPp][Mm]))');
82-
this.inputCheck(regex, value);
83-
} else if (
84-
(!format12Hours && showHour && showMinute && showSecond) ||
85-
(!format12Hours && showHour && showMinute) ||
86-
(!format12Hours && showMinute & showSecond)
87-
) {
88-
//validate hh:mm and mm:ss
89-
let regex = new RegExp('(1[0-2]|0?[0-9]):([0-5][0-9])');
90-
this.inputCheck(regex, value);
70+
let regex = new RegExp('^(1[0-2]|0?[1-9]):([0-5]?[0-9]):([0-5]?[0-9]) ([AaPp][Mm])$');
71+
return this.inputCheck(regex, value, event);
72+
} else if (!format12Hours && showHour && showMinute && showSecond) {
73+
//validate hh:mm:ss format
74+
let regex = new RegExp('^(2[0-3]|[01]?[0-9]):([0-5]?[0-9]):([0-5]?[0-9])$');
75+
return this.inputCheck(regex, value, event);
76+
} else if (format12Hours && showHour && showMinute) {
77+
//validate hh:mm am
78+
let regex = new RegExp('^(1[0-2]|0?[1-9]):([0-5]?[0-9]) ([AaPp][Mm])$');
79+
return this.inputCheck(regex, value, event);
80+
} else if (!format12Hours && showHour && showMinute) {
81+
//validate hh:mm
82+
let regex = new RegExp('^(2[0-3]|[01]?[0-9]):([0-5]?[0-9])$');
83+
return this.inputCheck(regex, value, event);
84+
} else if (format12Hours && showMinute && showSecond) {
85+
//validate mm:ss am
86+
let regex = new RegExp('^([0-5]?[0-9]):([0-5]?[0-9]) ([AaPp][Mm])$');
87+
return this.inputCheck(regex, value, event);
88+
} else if (!format12Hours && showMinute && showSecond) {
89+
//validate mm:ss
90+
let regex = new RegExp('^([0-5]?[0-9]):([0-5]?[0-9])$');
91+
return this.inputCheck(regex, value, event);
9192
}
92-
// else if (showHour && showMinute && showSecond && !format12Hours) {
93-
// //validate hh:mm:ss
94-
// let regex = new RegExp('(1[0-2]|0?[0-9]):([0-5][0-9]):([0-5][0-9])');
95-
// this.inputCheck(regex, value);
96-
// }
9793
};
98-
99-
inputCheck = (regex, value) => {
94+
inputCheck = (regex, value, event) => {
10095
if (regex.test(value) && value.length === this.state.length) {
96+
if (event.type === 'blur') {
97+
return true;
98+
}
10199
this.setState({ isValid: true, style: VALID });
102100
//send time value to Time Component
103101
this.updateTime(value);
104102
} else {
103+
if (event.type === 'blur') {
104+
return false;
105+
}
105106
this.setState({ isValid: false, style: INVALID });
106107
}
107108
};
@@ -200,16 +201,15 @@ class TimePickerItem extends Component {
200201
this.props.onChange(time);
201202
}
202203
};
203-
204-
onBlur = () => {
205-
const { isValid } = this.state;
204+
onBlur = (event) => {
206205
//if the input is not the correct format then it will be cleared
207-
if (!isValid) {
206+
if (!this.onInputValidation(event.target.value, event)) {
208207
this.props.updateValue('');
209208
}
210209
//reset to initial style
211210
this.setState({ style: VALID });
212211
};
212+
213213
render() {
214214
const { disableStyles, disabled, inputProps, buttonProps, onClick } = this.props;
215215
return (

0 commit comments

Comments
 (0)