-
Notifications
You must be signed in to change notification settings - Fork 33
/
timeInput.jsx
75 lines (59 loc) · 1.76 KB
/
timeInput.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import React, { useState, useEffect, useRef } from 'react'
import {isValid } from "./validate"
const TimeInput = ({initTime, disabled, mountFocus, onTimeChange, type, onFocusHandler, placeholder, className, name, onBlurHandler}) => {
const [time, setTime] = useState(initTime || '');
const _input = useRef(null)
useEffect(() => {
if (!disabled && mountFocus) {
setTimeout(() => {
_input.current.focus();
}, 0);
}
});
let lastVal = '';
const onChangeHandler = (val) => {
if (val == time) {
return;
}
if (isValid(val)) {
if (val.length === 2 && lastVal.length !== 3 && val.indexOf(':') === -1) {
val = val + ':';
}
if (val.length === 2 && lastVal.length === 3) {
val = val.slice(0, 1);
}
if (val.length > 5) {
return false;
}
lastVal = val;
setTime(val);
if (val.length === 5) {
onTimeChange(val);
}
}
}
const getType = () => {
if (type) {
return type;
}
return 'tel'
}
return (
<input
name={name ? name : undefined}
className={className}
type={getType()}
disabled={disabled}
placeholder={placeholder}
value={time}
onChange={(e) => onChangeHandler(e.target.value)}
onFocus={(onFocusHandler) ? (e) => onFocusHandler(e) : undefined}
onBlur={(onBlurHandler) ? (e) => onBlurHandler(e) : undefined}
ref={_input}
/>
);
}
TimeInput.defaultProps = {
placeholder: ' '
}
export default TimeInput