Skip to content

Commit 9cf01d2

Browse files
greg-a-smithgreg-a-smith
authored
fix: One component per file for TimePicker (#437)
* Rename file * Rename temp * Restore original * Changes to refactor TimePicker into separate source files * Remove script file * Exported shared constant
1 parent c181c17 commit 9cf01d2

File tree

4 files changed

+271
-260
lines changed

4 files changed

+271
-260
lines changed

‎src/TimePicker/TimePicker.js‎

Lines changed: 5 additions & 258 deletions
Original file line numberDiff line numberDiff line change
@@ -2,265 +2,9 @@ import { Popover } from '../Popover/Popover';
22
import PropTypes from 'prop-types';
33
import { Time } from '../Time/Time';
44
import React, { Component } from 'react';
5+
import TimePickerItem, { CLOCK } from './_TimePickerItem';
56

6-
const CLOCK = ['am', 'pm'];
7-
const INVALID = 'is-invalid';
8-
const VALID = 'fd-input';
9-
class TimePickerItem extends Component {
10-
constructor(props) {
11-
super(props);
12-
var length = this.setLength(props);
13-
this.state = {
14-
value: this.props.value,
15-
inputId: this.props.id && this.props.id + '-input',
16-
buttonID: this.props.id && this.props.id + '-button',
17-
style: 'fd-input',
18-
isValid: false,
19-
length: length
20-
};
21-
}
22-
23-
setLength = props => {
24-
var length = 0;
25-
if (
26-
props.format12Hours &&
27-
props.showHour &&
28-
props.showMinute &&
29-
props.showSecond
30-
) {
31-
//format hh:mm:ss am
32-
length = 11;
33-
} else if (
34-
!props.format12Hours &&
35-
props.showHour &&
36-
props.showMinute &&
37-
props.showSecond
38-
) {
39-
//format hh:mm:ss
40-
length = 8;
41-
} else if (
42-
(!props.format12Hours && props.showHour && props.showMinute) ||
43-
(!props.format12Hours && props.showMinute && props.showSecond)
44-
) {
45-
//format hh:mm
46-
length = 5;
47-
} else if (
48-
(props.format12Hours && props.showHour && props.showMinute) ||
49-
(props.format12Hours && props.showMinute && props.showSecond)
50-
) {
51-
//format hh:mm am
52-
length = 8;
53-
}
54-
return length;
55-
};
56-
57-
onChange = event => {
58-
this.setState({ value: event.target.value });
59-
var aux = event.target.value;
60-
this.onInputValidation(aux);
61-
this.props.updateValue(aux);
62-
};
63-
64-
onInputValidation = value => {
65-
const { showHour, showMinute, showSecond, format12Hours } = this.props;
66-
67-
if (showHour && showMinute && showSecond && format12Hours) {
68-
//validate hh:mm:ss am/pm format
69-
let regex = new RegExp(
70-
'((1[0-2]|0?[0-9]):([0-5][0-9]):([0-5][0-9]) ([AaPp][Mm]))'
71-
);
72-
this.inputCheck(regex, value);
73-
} else if (
74-
(format12Hours && showHour && showMinute) ||
75-
(format12Hours && showMinute & showSecond)
76-
) {
77-
//validate hh:mm and mm:ss am
78-
let regex = new RegExp('((1[0-2]|0?[0-9]):([0-5][0-9]) ([AaPp][Mm]))');
79-
this.inputCheck(regex, value);
80-
} else if (
81-
(!format12Hours && showHour && showMinute && showSecond) ||
82-
(!format12Hours && showHour && showMinute) ||
83-
(!format12Hours && showMinute & showSecond)
84-
) {
85-
//validate hh:mm and mm:ss
86-
let regex = new RegExp('(1[0-2]|0?[0-9]):([0-5][0-9])');
87-
this.inputCheck(regex, value);
88-
}
89-
// else if (showHour && showMinute && showSecond && !format12Hours) {
90-
// //validate hh:mm:ss
91-
// let regex = new RegExp('(1[0-2]|0?[0-9]):([0-5][0-9]):([0-5][0-9])');
92-
// this.inputCheck(regex, value);
93-
// }
94-
};
95-
96-
inputCheck = (regex, value) => {
97-
if (regex.test(value) && value.length === this.state.length) {
98-
this.setState({ isValid: true, style: VALID });
99-
//send time value to Time Component
100-
this.updateTime(value);
101-
} else {
102-
this.setState({ isValid: false, style: INVALID });
103-
}
104-
};
105-
106-
updateTime = value => {
107-
const { length } = this.state;
108-
const { showHour, showMinute, showSecond, format12Hours } = this.props;
109-
if (length === 11) {
110-
// this means the time forma is hh:mm:ss am convert string into corresponding
111-
// time format
112-
let timeValues = value.split(' ');
113-
if (timeValues.length === 2) {
114-
let timeValue = timeValues[0].split(':');
115-
let time = {
116-
hour: timeValue[0],
117-
minute: timeValue[1],
118-
second: timeValue[2],
119-
meridiem: CLOCK.indexOf(timeValues[1])
120-
};
121-
this.props.onChange(time);
122-
}
123-
} else if (length === 5) {
124-
//format hh:mm or mm:ss
125-
if (showHour && showMinute && !showSecond) {
126-
this.updateTimeHHMM(value);
127-
} else if (!showHour && showMinute && showSecond) {
128-
this.updateTimeMMSS(value);
129-
}
130-
} else if (length === 8) {
131-
if (format12Hours) {
132-
if (showHour && showMinute && !showSecond) {
133-
//hh:mm am
134-
this.updateTimeHHMMAM(value);
135-
} else if (!showHour && showMinute && showSecond) {
136-
//hh:mm am
137-
this.updateTimeMMSSAM(value);
138-
}
139-
} else {
140-
//hh:mm:ss
141-
this.updateTimeHHMMSS(value);
142-
}
143-
}
144-
};
145-
updateTimeHHMMSS = value => {
146-
let timeValues = value.split(':');
147-
if (timeValues.length === 3) {
148-
let time = {
149-
hour: timeValues[0],
150-
minute: timeValues[1],
151-
second: timeValues[2]
152-
};
153-
this.props.onChange(time);
154-
}
155-
};
156-
updateTimeHHMM = value => {
157-
let timeValues = value.split(':');
158-
if (timeValues.length === 2) {
159-
let time = {
160-
hour: timeValues[0],
161-
minute: timeValues[1]
162-
};
163-
this.props.onChange(time);
164-
}
165-
};
166-
updateTimeMMSS = value => {
167-
let timeValues = value.split(':');
168-
if (timeValues.length === 2) {
169-
let time = {
170-
minute: timeValues[0],
171-
second: timeValues[1]
172-
};
173-
this.props.onChange(time);
174-
}
175-
};
176-
updateTimeHHMMAM = value => {
177-
let timeValues = value.split(' ');
178-
if (timeValues.length === 2) {
179-
let timeValue = timeValues[0].split(':');
180-
let time = {
181-
hour: timeValue[0],
182-
minute: timeValue[1],
183-
meridiem: CLOCK.indexOf(timeValues[1])
184-
};
185-
this.props.onChange(time);
186-
}
187-
};
188-
updateTimeMMSSAM = value => {
189-
let timeValues = value.split(' ');
190-
if (timeValues.length === 2) {
191-
let timeValue = timeValues[0].split(':');
192-
let time = {
193-
minute: timeValue[0],
194-
second: timeValue[1],
195-
meridiem: CLOCK.indexOf(timeValues[1])
196-
};
197-
this.props.onChange(time);
198-
}
199-
};
200-
201-
onBlur = () => {
202-
const { isValid } = this.state;
203-
//if the input is not the correct format then it will be cleared
204-
if (!isValid) {
205-
this.props.updateValue('');
206-
}
207-
//reset to initial style
208-
this.setState({ style: VALID });
209-
};
210-
render() {
211-
const { disabled, inputProps, buttonProps } = this.props;
212-
return (
213-
<div className='fd-popover__control'>
214-
<div className='fd-input-group fd-input-group--after'>
215-
<input
216-
{...inputProps}
217-
className={this.state.style}
218-
id={this.state.inputId}
219-
onBlur={this.onBlur}
220-
onChange={this.onChange}
221-
onFocus={this.onFocus}
222-
placeholder={this.props.placeholder}
223-
readOnly={disabled}
224-
type='text'
225-
value={this.props.value} />
226-
<span className='fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button '>
227-
<button
228-
{...buttonProps}
229-
aria-controls='rthHR811'
230-
aria-expanded='false'
231-
aria-haspopup='true'
232-
className='fd-button--light fd-button--compact sap-icon--fob-watch fd-popover__control'
233-
disabled={disabled}
234-
id={this.state.buttonID} />
235-
</span>
236-
</div>
237-
</div>
238-
);
239-
}
240-
}
241-
TimePickerItem.displayName = 'TimePickerItem';
242-
243-
TimePickerItem.propTypes = {
244-
buttonID: PropTypes.string,
245-
buttonProps: PropTypes.object,
246-
disabled: PropTypes.bool,
247-
format12Hours: PropTypes.bool,
248-
id: PropTypes.string,
249-
inputId: PropTypes.string,
250-
inputProps: PropTypes.object,
251-
isValid: PropTypes.bool,
252-
length: PropTypes.number,
253-
placeholder: PropTypes.string,
254-
showHour: PropTypes.bool,
255-
showMinute: PropTypes.bool,
256-
showSecond: PropTypes.bool,
257-
style: PropTypes.string,
258-
updateValue: PropTypes.func,
259-
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
260-
onChange: PropTypes.func
261-
};
262-
263-
export class TimePicker extends React.Component {
7+
class TimePicker extends Component {
2648
constructor(props) {
2659
super(props);
26610
const { time } = this.props;
@@ -405,6 +149,7 @@ export class TimePicker extends React.Component {
405149
);
406150
}
407151
}
152+
408153
TimePicker.displayName = 'TimePicker';
409154

410155
TimePicker.propTypes = {
@@ -436,3 +181,5 @@ TimePicker.propDescriptions = {
436181
timeProps: 'Additional props to be spread to the `Time` component.',
437182
value: 'Initial time value for the input.'
438183
};
184+
185+
export default TimePicker;

‎src/TimePicker/TimePicker.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { mount } from 'enzyme';
22
import React from 'react';
33
import renderer from 'react-test-renderer';
4-
import { TimePicker } from './TimePicker';
4+
import TimePicker from './TimePicker';
55

66
describe('<TimePicker />', () => {
77
const defaultTimePicker = <TimePicker id='myTime' />;

0 commit comments

Comments
 (0)