-
Notifications
You must be signed in to change notification settings - Fork 0
/
GInput.tsx
87 lines (78 loc) · 2.46 KB
/
GInput.tsx
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
76
77
78
79
80
81
82
83
84
85
86
87
import { Box } from '@mui/material';
import { useGContext } from '../GContext';
import { KeyboardEvent, useCallback, useState } from 'react';
import useHandleChange from './useHandleChange';
import Input from './Input';
import { GInputProps } from './types';
import GButton from '../GButton';
const BUTTON_HEIGHT = `40px`;
const GInput = (props: GInputProps) => {
const { buttonVariant: defaultBV } = useGContext();
const {
className,
notify,
allowOnlyNextSymbols,
buttonCaption = 'Submit',
buttonVariant = defaultBV,
callback,
confirmOnEnter = true,
disableAfterConfirm = false,
onlyAlphabeticSymbols = false,
onlyNumbers = false,
placeholder = 'Input something 😊',
readOnly = false,
restrictWhiteSpaces = false,
sx = {},
styleButton = {},
type = '',
initValue = '',
} = props;
const [value, setValue] = useState(initValue);
const [_readOnly, set_readOnly] = useState(false);
const onClick = useCallback(() => {
callback && callback(value);
disableAfterConfirm && set_readOnly(true);
}, [callback, disableAfterConfirm, value]);
const handleKeyPress = useCallback(
(e: KeyboardEvent) => {
if (e.key === 'Enter' && confirmOnEnter) {
e.preventDefault();
onClick();
}
},
[confirmOnEnter, onClick],
);
const onChange = useHandleChange({
allowOnlyNextSymbols,
onlyAlphabeticSymbols,
onlyNumbers,
restrictWhiteSpaces,
setValue,
notify,
});
return (
<Box className={`g-input-container`} sx={{ width: 'content-box' }}>
<Input
className={`g-input ${className || ''}`}
value={value}
type={type}
placeholder={placeholder}
ro={readOnly || _readOnly}
readOnly={readOnly || _readOnly}
onChange={onChange}
sx={sx}
onKeyDown={handleKeyPress}
/>
<GButton
className={`g-input-button`}
variant={buttonVariant}
sx={{ height: BUTTON_HEIGHT, ...styleButton }}
isDisabled={readOnly || _readOnly}
onClick={onClick}
>
{buttonCaption}
</GButton>
</Box>
);
};
export default GInput;