Skip to content

Commit

Permalink
fix: Blur event validates time in the TimePicker input (#966)
Browse files Browse the repository at this point in the history
  • Loading branch information
@coding-my-passion
coding-my-passion authored Apr 21, 2020
1 parent e7efaeb commit b2aa07f
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 35 deletions.
61 changes: 61 additions & 0 deletions src/TimePicker/TimePicker.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,67 @@ describe('<TimePicker />', () => {
expect(wrapper.state('value')).toEqual('');
});

test('check for onBlur of text input with initial value', () => {
// check valid input with 12 Hour Clock
let wrapper = mount(<TimePicker format12Hours value='10:10:10 pm' />);
wrapper
.find('input[type="text"]')
.at(0)
.simulate('blur');
expect(wrapper.state('value')).toEqual('10:10:10 pm');
// check invalid input with 12 Hour Clock
wrapper = mount(<TimePicker format12Hours value='13:10:10 pm' />);
wrapper
.find('input[type="text"]')
.at(0)
.simulate('blur');
expect(wrapper.state('value')).toEqual('');
// check valid input with 24 Hour Clock
wrapper = mount(<TimePicker value='23:10:10' />);
wrapper
.find('input[type="text"]')
.at(0)
.simulate('blur');
expect(wrapper.state('value')).toEqual('23:10:10');
// check invalid input with 24 Hour Clock
wrapper = mount(<TimePicker value='25:10:10' />);
wrapper
.find('input[type="text"]')
.at(0)
.simulate('blur');
expect(wrapper.state('value')).toEqual('');
// check valid input with 12 Hour Clock with Hours and Minutes
wrapper = mount(<TimePicker format12Hours showSecond={false}
value='10:10 am' />);
wrapper
.find('input[type="text"]')
.at(0)
.simulate('blur');
expect(wrapper.state('value')).toEqual('10:10 am');
// check invalid input with 12 Hour Clock with Hours and Minutes
wrapper = mount(<TimePicker format12Hours showSecond={false}
value='13:10 an' />);
wrapper
.find('input[type="text"]')
.at(0)
.simulate('blur');
expect(wrapper.state('value')).toEqual('');
// check valid input with 24 Hour Clock with Hours and Minutes
wrapper = mount(<TimePicker showSecond={false} value='23:10' />);
wrapper
.find('input[type="text"]')
.at(0)
.simulate('blur');
expect(wrapper.state('value')).toEqual('23:10');
// check invalid input with 24 Hour Clock with Hours and Minutes
wrapper = mount(<TimePicker showSecond={false} value='24:10' />);
wrapper
.find('input[type="text"]')
.at(0)
.simulate('blur');
expect(wrapper.state('value')).toEqual('');
});

test('check for initial value', () => {
let wrapper = mount(timepickerWithInitialValue);
expect(wrapper.state('value')).toEqual('10:30:34 pm');
Expand Down
70 changes: 35 additions & 35 deletions src/TimePicker/_TimePickerItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,48 +60,49 @@ class TimePickerItem extends Component {
event.stopPropagation();
this.setState({ value: event.target.value });
var aux = event.target.value;
this.onInputValidation(aux);
this.onInputValidation(aux, event);
this.props.updateValue(aux);
};

onInputValidation = value => {
onInputValidation = (value, event) => {
const { showHour, showMinute, showSecond, format12Hours } = this.props;

if (showHour && showMinute && showSecond && format12Hours) {
if (format12Hours && showHour && showMinute && showSecond) {
//validate hh:mm:ss am/pm format
let regex = new RegExp(
'((1[0-2]|0?[0-9]):([0-5][0-9]):([0-5][0-9]) ([AaPp][Mm]))'
);
this.inputCheck(regex, value);
} else if (
(format12Hours && showHour && showMinute) ||
(format12Hours && showMinute & showSecond)
) {
//validate hh:mm and mm:ss am
let regex = new RegExp('((1[0-2]|0?[0-9]):([0-5][0-9]) ([AaPp][Mm]))');
this.inputCheck(regex, value);
} else if (
(!format12Hours && showHour && showMinute && showSecond) ||
(!format12Hours && showHour && showMinute) ||
(!format12Hours && showMinute & showSecond)
) {
//validate hh:mm and mm:ss
let regex = new RegExp('(1[0-2]|0?[0-9]):([0-5][0-9])');
this.inputCheck(regex, value);
let regex = new RegExp('^(1[0-2]|0?[1-9]):([0-5]?[0-9]):([0-5]?[0-9]) ([AaPp][Mm])$');
return this.inputCheck(regex, value, event);
} else if (!format12Hours && showHour && showMinute && showSecond) {
//validate hh:mm:ss format
let regex = new RegExp('^(2[0-3]|[01]?[0-9]):([0-5]?[0-9]):([0-5]?[0-9])$');
return this.inputCheck(regex, value, event);
} else if (format12Hours && showHour && showMinute) {
//validate hh:mm am
let regex = new RegExp('^(1[0-2]|0?[1-9]):([0-5]?[0-9]) ([AaPp][Mm])$');
return this.inputCheck(regex, value, event);
} else if (!format12Hours && showHour && showMinute) {
//validate hh:mm
let regex = new RegExp('^(2[0-3]|[01]?[0-9]):([0-5]?[0-9])$');
return this.inputCheck(regex, value, event);
} else if (format12Hours && showMinute && showSecond) {
//validate mm:ss am
let regex = new RegExp('^([0-5]?[0-9]):([0-5]?[0-9]) ([AaPp][Mm])$');
return this.inputCheck(regex, value, event);
} else if (!format12Hours && showMinute && showSecond) {
//validate mm:ss
let regex = new RegExp('^([0-5]?[0-9]):([0-5]?[0-9])$');
return this.inputCheck(regex, value, event);
}
// else if (showHour && showMinute && showSecond && !format12Hours) {
// //validate hh:mm:ss
// let regex = new RegExp('(1[0-2]|0?[0-9]):([0-5][0-9]):([0-5][0-9])');
// this.inputCheck(regex, value);
// }
};

inputCheck = (regex, value) => {
inputCheck = (regex, value, event) => {
if (regex.test(value) && value.length === this.state.length) {
if (event.type === 'blur') {
return true;
}
this.setState({ isValid: true, style: VALID });
//send time value to Time Component
this.updateTime(value);
} else {
if (event.type === 'blur') {
return false;
}
this.setState({ isValid: false, style: INVALID });
}
};
Expand Down Expand Up @@ -200,16 +201,15 @@ class TimePickerItem extends Component {
this.props.onChange(time);
}
};

onBlur = () => {
const { isValid } = this.state;
onBlur = (event) => {
//if the input is not the correct format then it will be cleared
if (!isValid) {
if (!this.onInputValidation(event.target.value, event)) {
this.props.updateValue('');
}
//reset to initial style
this.setState({ style: VALID });
};

render() {
const { disableStyles, disabled, inputProps, buttonProps, onClick } = this.props;
return (
Expand Down

0 comments on commit b2aa07f

Please sign in to comment.