@symply.io/basic-components 1.0.0-alpha.4 → 1.0.0-alpha.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7,5 +7,6 @@ export interface PhoneInputProps {
|
|
|
7
7
|
endAdornment?: InputProps["endAdornment"];
|
|
8
8
|
onChange: (val: string) => void;
|
|
9
9
|
}
|
|
10
|
+
export declare function phoneFormat(str: string): string;
|
|
10
11
|
declare function PhoneInput(props: TextInputProps & PhoneInputProps): JSX.Element;
|
|
11
12
|
export default PhoneInput;
|
|
@@ -26,19 +26,34 @@ import Typography from "@mui/material/Typography";
|
|
|
26
26
|
import InputAdornment from "@mui/material/InputAdornment";
|
|
27
27
|
import TextField from "@mui/material/TextField";
|
|
28
28
|
import useInteractions from "./useInteractions";
|
|
29
|
+
export function phoneFormat(str) {
|
|
30
|
+
var digits = (str.match(/\d+/g) || []).join("");
|
|
31
|
+
var chars = digits.split("");
|
|
32
|
+
return chars.reduce(function (prev, curr, index) {
|
|
33
|
+
if (index === 3) {
|
|
34
|
+
return "".concat(prev, ") ").concat(curr);
|
|
35
|
+
}
|
|
36
|
+
else if (index === 6) {
|
|
37
|
+
return "".concat(prev, "-").concat(curr);
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
return "".concat(prev).concat(curr);
|
|
41
|
+
}
|
|
42
|
+
}, "(");
|
|
43
|
+
}
|
|
29
44
|
function PhoneInput(props) {
|
|
30
45
|
var value = props.value, endAdornment = props.endAdornment, onChange = props.onChange, rest = __rest(props, ["value", "endAdornment", "onChange"]);
|
|
31
|
-
var
|
|
46
|
+
var addMask = useInteractions({ value: value }).addMask;
|
|
32
47
|
var rifm = useRifm({
|
|
33
48
|
mask: true,
|
|
34
49
|
value: String(value),
|
|
35
50
|
onChange: onChange,
|
|
36
51
|
replace: addMask,
|
|
37
|
-
format: phoneFormat
|
|
52
|
+
format: phoneFormat
|
|
38
53
|
});
|
|
39
54
|
return (_jsx(TextField, __assign({ value: rifm.value, InputProps: {
|
|
40
55
|
startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ variant: "body2" }, { children: "+1" }), void 0) }), void 0)),
|
|
41
|
-
endAdornment: endAdornment
|
|
56
|
+
endAdornment: endAdornment
|
|
42
57
|
}, onChange: rifm.onChange }, rest), void 0));
|
|
43
58
|
}
|
|
44
59
|
export default PhoneInput;
|
|
@@ -1,19 +1,6 @@
|
|
|
1
1
|
import { useCallback, useMemo } from "react";
|
|
2
2
|
function useInteractions(props) {
|
|
3
3
|
var value = props.value;
|
|
4
|
-
var phoneFormat = useCallback(function (str) {
|
|
5
|
-
var digits = (str.match(/\d+/g) || []).join("");
|
|
6
|
-
var chars = digits.split("");
|
|
7
|
-
return chars.reduce(function (prev, curr, index) {
|
|
8
|
-
if (index === 3) {
|
|
9
|
-
return "".concat(prev, ") ").concat(curr);
|
|
10
|
-
}
|
|
11
|
-
if (index === 6) {
|
|
12
|
-
return "".concat(prev, "-").concat(curr);
|
|
13
|
-
}
|
|
14
|
-
return "".concat(prev).concat(curr);
|
|
15
|
-
}, "(");
|
|
16
|
-
}, []);
|
|
17
4
|
var addMask = useCallback(function (str) {
|
|
18
5
|
var digits = (str.match(/\d+/g) || []).join("");
|
|
19
6
|
var areaCode = digits.slice(0, 3).padEnd(3, "_");
|
|
@@ -25,6 +12,6 @@ function useInteractions(props) {
|
|
|
25
12
|
var digitsArr = String(value).match(/\d/g);
|
|
26
13
|
return digitsArr ? digitsArr.length : 0;
|
|
27
14
|
}, [value]);
|
|
28
|
-
return { valLength: valLength, addMask: addMask
|
|
15
|
+
return { valLength: valLength, addMask: addMask };
|
|
29
16
|
}
|
|
30
17
|
export default useInteractions;
|
package/README.md
CHANGED