ferns-ui 1.0.6 → 1.0.7
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.
- package/dist/DateTimeField.d.ts +1 -1
- package/dist/DateTimeField.js +33 -21
- package/dist/DateTimeField.js.map +1 -1
- package/dist/EmailField.js +17 -2
- package/dist/EmailField.js.map +1 -1
- package/dist/NumberField.js +5 -1
- package/dist/NumberField.js.map +1 -1
- package/dist/PhoneNumberField.js +6 -1
- package/dist/PhoneNumberField.js.map +1 -1
- package/package.json +1 -1
- package/src/DateTimeField.tsx +32 -19
- package/src/EmailField.tsx +19 -3
- package/src/NumberField.tsx +6 -1
- package/src/PhoneNumberField.tsx +7 -1
package/dist/DateTimeField.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { DateTimeFieldProps } from "./Common";
|
|
3
|
-
export declare const DateTimeField: ({ type, value, onChange, timezone: tz, ...rest }: DateTimeFieldProps) => React.ReactElement;
|
|
3
|
+
export declare const DateTimeField: ({ type, value, onChange, timezone: tz, errorText, ...rest }: DateTimeFieldProps) => React.ReactElement;
|
package/dist/DateTimeField.js
CHANGED
|
@@ -18,9 +18,19 @@ import { TextField } from "./TextField";
|
|
|
18
18
|
// TODO: allow use of keyboard to type in date/time
|
|
19
19
|
export const DateTimeField = (_a) => {
|
|
20
20
|
var _b;
|
|
21
|
-
var { type, value, onChange, timezone: tz } = _a, rest = __rest(_a, ["type", "value", "onChange", "timezone"]);
|
|
21
|
+
var { type, value, onChange, timezone: tz, errorText } = _a, rest = __rest(_a, ["type", "value", "onChange", "timezone", "errorText"]);
|
|
22
22
|
const calendar = getCalendars()[0];
|
|
23
23
|
const timezone = (_b = (tz || (calendar === null || calendar === void 0 ? void 0 : calendar.timeZone))) !== null && _b !== void 0 ? _b : "UTC"; // Fallback to UTC if timezone is undefined
|
|
24
|
+
let placeholder = "";
|
|
25
|
+
if (type === "time") {
|
|
26
|
+
placeholder = "hh:mm a";
|
|
27
|
+
}
|
|
28
|
+
else if (type === "datetime") {
|
|
29
|
+
placeholder = "mm/dd/yyyy hh:mm a";
|
|
30
|
+
}
|
|
31
|
+
else if (type === "date") {
|
|
32
|
+
placeholder = "mm/dd/yyyy";
|
|
33
|
+
}
|
|
24
34
|
const formatValue = useCallback((val) => {
|
|
25
35
|
switch (type) {
|
|
26
36
|
case "time":
|
|
@@ -76,7 +86,7 @@ export const DateTimeField = (_a) => {
|
|
|
76
86
|
const dateActionSheetRef = React.createRef();
|
|
77
87
|
const [formattedDate, setFormattedDate] = useState(value ? formatValue(value) : "");
|
|
78
88
|
const [showDate, setShowDate] = useState(false);
|
|
79
|
-
const [
|
|
89
|
+
const [localError, setLocalError] = useState("");
|
|
80
90
|
const onTextFieldChange = useCallback((inputDate) => {
|
|
81
91
|
const formattedInput = formatInputDate(inputDate);
|
|
82
92
|
const cleanedInput = formattedInput.replace(/[^0-9]/g, "");
|
|
@@ -106,46 +116,48 @@ export const DateTimeField = (_a) => {
|
|
|
106
116
|
.startOf("day")
|
|
107
117
|
.toUTC(0, { keepLocalTime: true });
|
|
108
118
|
}
|
|
119
|
+
if (!parsedDate) {
|
|
120
|
+
setLocalError("Invalid date/time. Please format as " + `${placeholder}`);
|
|
121
|
+
setFormattedDate(formattedInput);
|
|
122
|
+
onChange("");
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
109
125
|
if (parsedDate === null || parsedDate === void 0 ? void 0 : parsedDate.isValid) {
|
|
110
126
|
setFormattedDate(formatValue(parsedDate.toISO()));
|
|
111
|
-
|
|
127
|
+
setLocalError("");
|
|
112
128
|
onChange(parsedDate.toISO());
|
|
113
129
|
}
|
|
114
130
|
else if (cleanedInput.length > (type === "datetime" ? 12 : type === "time" ? 4 : 8)) {
|
|
115
|
-
|
|
131
|
+
setLocalError("Invalid date/time");
|
|
116
132
|
setFormattedDate(formattedInput);
|
|
117
133
|
onChange("");
|
|
118
134
|
}
|
|
119
135
|
else {
|
|
120
136
|
setFormattedDate(formattedInput);
|
|
121
|
-
|
|
137
|
+
setLocalError("Invalid date/time. Please format as " + `${placeholder}`);
|
|
122
138
|
}
|
|
123
|
-
}, [formatInputDate, type, timezone, formatValue, onChange]);
|
|
139
|
+
}, [formatInputDate, type, timezone, formatValue, onChange, placeholder]);
|
|
124
140
|
const onActionSheetChange = useCallback((inputDate) => {
|
|
125
141
|
onChange(inputDate);
|
|
126
142
|
setFormattedDate(formatValue(inputDate));
|
|
127
143
|
setShowDate(false);
|
|
128
|
-
|
|
144
|
+
setLocalError("");
|
|
129
145
|
}, [formatValue, onChange]);
|
|
130
|
-
let placeholder = "";
|
|
131
|
-
if (type === "time") {
|
|
132
|
-
placeholder = "hh:mm a";
|
|
133
|
-
}
|
|
134
|
-
else if (type === "datetime") {
|
|
135
|
-
placeholder = "mm/dd/yyyy hh:mm a";
|
|
136
|
-
}
|
|
137
|
-
else if (type === "date") {
|
|
138
|
-
placeholder = "mm/dd/yyyy";
|
|
139
|
-
}
|
|
140
146
|
// if the value of the overall field changes via prop from the parent,
|
|
141
147
|
// update the formattedDate to keep the value of the TextField and DateTimeActionSheet in sync
|
|
142
148
|
useEffect(() => {
|
|
143
|
-
if (value
|
|
144
|
-
|
|
149
|
+
if (value) {
|
|
150
|
+
const formatted = formatValue(value);
|
|
151
|
+
if (formattedDate !== formatted) {
|
|
152
|
+
setFormattedDate(formatted);
|
|
153
|
+
}
|
|
154
|
+
if (errorText) {
|
|
155
|
+
setLocalError(errorText);
|
|
156
|
+
}
|
|
145
157
|
}
|
|
146
|
-
}, [formatValue, formattedDate,
|
|
158
|
+
}, [value, formatValue, formattedDate, errorText]);
|
|
147
159
|
return (React.createElement(React.Fragment, null,
|
|
148
|
-
React.createElement(TextField, Object.assign({ errorText:
|
|
160
|
+
React.createElement(TextField, Object.assign({ errorText: localError, iconName: type === "time" ? "clock" : "calendar", placeholder: placeholder, type: "text", value: formattedDate, onChange: onTextFieldChange, onIconClick: () => {
|
|
149
161
|
setShowDate(true);
|
|
150
162
|
} }, rest)),
|
|
151
163
|
React.createElement(DateTimeActionSheet, { actionSheetRef: dateActionSheetRef, timezone: timezone, type: type, value: value, visible: showDate, onChange: onActionSheetChange, onDismiss: () => setShowDate(false) })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeField.js","sourceRoot":"","sources":["../src/DateTimeField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,EAAC,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAC,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAEtC,mDAAmD;AACnD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"DateTimeField.js","sourceRoot":"","sources":["../src/DateTimeField.tsx"],"names":[],"mappings":"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"}
|
package/dist/EmailField.js
CHANGED
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import React, { useCallback, useState } from "react";
|
|
12
|
+
import React, { useCallback, useEffect, useState } from "react";
|
|
13
13
|
import { TextField } from "./TextField";
|
|
14
14
|
export const EmailField = (_a) => {
|
|
15
15
|
var { errorText, iconName, placeholder, value, onChange, onBlur } = _a, rest = __rest(_a, ["errorText", "iconName", "placeholder", "value", "onChange", "onBlur"]);
|
|
@@ -25,6 +25,11 @@ export const EmailField = (_a) => {
|
|
|
25
25
|
}
|
|
26
26
|
return undefined;
|
|
27
27
|
}, []);
|
|
28
|
+
// Sync local state with incoming prop values
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
setLocalValue(value || "");
|
|
31
|
+
setError(errorText);
|
|
32
|
+
}, [value, errorText]);
|
|
28
33
|
const handleBlur = useCallback((email) => {
|
|
29
34
|
if (onBlur) {
|
|
30
35
|
onBlur(email);
|
|
@@ -47,6 +52,16 @@ export const EmailField = (_a) => {
|
|
|
47
52
|
onChange(email);
|
|
48
53
|
}
|
|
49
54
|
}, [onChange, error, validateEmail]);
|
|
50
|
-
return (React.createElement(TextField, Object.assign({ errorText: error, iconName: iconName, placeholder: placeholder, type: "email", value: localValue, onBlur: (e) =>
|
|
55
|
+
return (React.createElement(TextField, Object.assign({ errorText: error, iconName: iconName, placeholder: placeholder, type: "email", value: localValue, onBlur: (e) => {
|
|
56
|
+
handleBlur(e);
|
|
57
|
+
if (onBlur) {
|
|
58
|
+
onBlur(value || "");
|
|
59
|
+
}
|
|
60
|
+
}, onChange: (e) => {
|
|
61
|
+
handleChange(e);
|
|
62
|
+
if (onChange) {
|
|
63
|
+
onChange;
|
|
64
|
+
}
|
|
65
|
+
} }, rest)));
|
|
51
66
|
};
|
|
52
67
|
//# sourceMappingURL=EmailField.js.map
|
package/dist/EmailField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmailField.js","sourceRoot":"","sources":["../src/EmailField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAK,WAAW,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"EmailField.js","sourceRoot":"","sources":["../src/EmailField.tsx"],"names":[],"mappings":"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"}
|
package/dist/NumberField.js
CHANGED
|
@@ -9,11 +9,15 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import React, { useCallback, useState } from "react";
|
|
12
|
+
import React, { useCallback, useEffect, useState } from "react";
|
|
13
13
|
import { TextField } from "./TextField";
|
|
14
14
|
export const NumberField = (_a) => {
|
|
15
15
|
var { errorText, value: valueProp, max, min, type } = _a, rest = __rest(_a, ["errorText", "value", "max", "min", "type"]);
|
|
16
16
|
const [value, setValue] = useState(valueProp !== null && valueProp !== void 0 ? valueProp : "");
|
|
17
|
+
// Sync local state with incoming prop values
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
setValue(valueProp !== null && valueProp !== void 0 ? valueProp : "");
|
|
20
|
+
}, [valueProp]);
|
|
17
21
|
const getError = useCallback((newV) => {
|
|
18
22
|
const v = String(newV);
|
|
19
23
|
if (!v) {
|
package/dist/NumberField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../src/NumberField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAK,WAAW,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../src/NumberField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAK,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAO/B,EAAE,EAAE;QAP2B,EAChD,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,GAAG,EACH,GAAG,EACH,IAAI,OAEa,EADd,IAAI,cANyC,4CAOjD,CADQ;IAEP,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAC,CAAC;IAEpD,6CAA6C;IAC7C,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,IAAa,EAAE,EAAE;QAChB,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;QACvB,IAAI,CAAC,CAAC,EAAE,CAAC;YACP,OAAO;QACT,CAAC;QACD,MAAM,GAAG,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAC5D,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,EAAE,CAAC;YACpE,OAAO,0BAA0B,CAAC;QACpC,CAAC;aAAM,IACL,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;YACpD,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,EACjC,CAAC;YACD,OAAO,yBAAyB,CAAC;QACnC,CAAC;aAAM,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,GAAG,GAAG,EAAE,CAAC;YAC1C,OAAO,uCAAuC,GAAG,EAAE,CAAC;QACtD,CAAC;aAAM,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,GAAG,GAAG,EAAE,CAAC;YAC1C,OAAO,0CAA0C,GAAG,EAAE,CAAC;QACzD,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EACD,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CACjB,CAAC;IAEF,MAAM,KAAK,GAAG,SAAS,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE3C,gDAAgD;IAChD,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAS,EAAE,EAAE;QACZ,QAAQ,CAAC,CAAC,CAAC,CAAC;QACZ,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,CACjB,CAAC;IAEF,OAAO,oBAAC,SAAS,oBAAK,IAAI,IAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,IAAI,CAAC;AAC1F,CAAC,CAAC"}
|
package/dist/PhoneNumberField.js
CHANGED
|
@@ -10,12 +10,17 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import { AsYouType, parsePhoneNumberFromString } from "libphonenumber-js";
|
|
13
|
-
import React, { useCallback, useState } from "react";
|
|
13
|
+
import React, { useCallback, useEffect, useState } from "react";
|
|
14
14
|
import { TextField } from "./TextField";
|
|
15
15
|
export const PhoneNumberField = (_a) => {
|
|
16
16
|
var { errorText, iconName, placeholder, value, onChange, onBlur, defaultCountryCode = "US" } = _a, rest = __rest(_a, ["errorText", "iconName", "placeholder", "value", "onChange", "onBlur", "defaultCountryCode"]);
|
|
17
17
|
const [localValue, setLocalValue] = useState(value || "");
|
|
18
18
|
const [error, setError] = useState(errorText);
|
|
19
|
+
// Sync local state with incoming prop values
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
setLocalValue(value || "");
|
|
22
|
+
setError(errorText);
|
|
23
|
+
}, [value, errorText]);
|
|
19
24
|
const validatePhoneNumber = useCallback((phoneNumber) => {
|
|
20
25
|
if (phoneNumber.trim() === "") {
|
|
21
26
|
return undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneNumberField.js","sourceRoot":"","sources":["../src/PhoneNumberField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAC,SAAS,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AACxE,OAAO,KAAK,EAAE,EAAK,WAAW,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PhoneNumberField.js","sourceRoot":"","sources":["../src/PhoneNumberField.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/DateTimeField.tsx
CHANGED
|
@@ -13,11 +13,21 @@ export const DateTimeField = ({
|
|
|
13
13
|
value,
|
|
14
14
|
onChange,
|
|
15
15
|
timezone: tz,
|
|
16
|
+
errorText,
|
|
16
17
|
...rest
|
|
17
18
|
}: DateTimeFieldProps): React.ReactElement => {
|
|
18
19
|
const calendar = getCalendars()[0];
|
|
19
20
|
const timezone = (tz || calendar?.timeZone) ?? "UTC"; // Fallback to UTC if timezone is undefined
|
|
20
21
|
|
|
22
|
+
let placeholder: string = "";
|
|
23
|
+
if (type === "time") {
|
|
24
|
+
placeholder = "hh:mm a";
|
|
25
|
+
} else if (type === "datetime") {
|
|
26
|
+
placeholder = "mm/dd/yyyy hh:mm a";
|
|
27
|
+
} else if (type === "date") {
|
|
28
|
+
placeholder = "mm/dd/yyyy";
|
|
29
|
+
}
|
|
30
|
+
|
|
21
31
|
const formatValue = useCallback(
|
|
22
32
|
(val: string) => {
|
|
23
33
|
switch (type) {
|
|
@@ -82,7 +92,7 @@ export const DateTimeField = ({
|
|
|
82
92
|
const dateActionSheetRef: React.RefObject<any> = React.createRef();
|
|
83
93
|
const [formattedDate, setFormattedDate] = useState<string>(value ? formatValue(value) : "");
|
|
84
94
|
const [showDate, setShowDate] = useState(false);
|
|
85
|
-
const [
|
|
95
|
+
const [localError, setLocalError] = useState<string>("");
|
|
86
96
|
|
|
87
97
|
const onTextFieldChange = useCallback(
|
|
88
98
|
(inputDate: string) => {
|
|
@@ -114,20 +124,26 @@ export const DateTimeField = ({
|
|
|
114
124
|
.toUTC(0, {keepLocalTime: true});
|
|
115
125
|
}
|
|
116
126
|
|
|
127
|
+
if (!parsedDate) {
|
|
128
|
+
setLocalError("Invalid date/time. Please format as " + `${placeholder}`);
|
|
129
|
+
setFormattedDate(formattedInput);
|
|
130
|
+
onChange("");
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
117
133
|
if (parsedDate?.isValid) {
|
|
118
134
|
setFormattedDate(formatValue(parsedDate.toISO()));
|
|
119
|
-
|
|
135
|
+
setLocalError("");
|
|
120
136
|
onChange(parsedDate.toISO());
|
|
121
137
|
} else if (cleanedInput.length > (type === "datetime" ? 12 : type === "time" ? 4 : 8)) {
|
|
122
|
-
|
|
138
|
+
setLocalError("Invalid date/time");
|
|
123
139
|
setFormattedDate(formattedInput);
|
|
124
140
|
onChange("");
|
|
125
141
|
} else {
|
|
126
142
|
setFormattedDate(formattedInput);
|
|
127
|
-
|
|
143
|
+
setLocalError("Invalid date/time. Please format as " + `${placeholder}`);
|
|
128
144
|
}
|
|
129
145
|
},
|
|
130
|
-
[formatInputDate, type, timezone, formatValue, onChange]
|
|
146
|
+
[formatInputDate, type, timezone, formatValue, onChange, placeholder]
|
|
131
147
|
);
|
|
132
148
|
|
|
133
149
|
const onActionSheetChange = useCallback(
|
|
@@ -135,32 +151,29 @@ export const DateTimeField = ({
|
|
|
135
151
|
onChange(inputDate);
|
|
136
152
|
setFormattedDate(formatValue(inputDate));
|
|
137
153
|
setShowDate(false);
|
|
138
|
-
|
|
154
|
+
setLocalError("");
|
|
139
155
|
},
|
|
140
156
|
[formatValue, onChange]
|
|
141
157
|
);
|
|
142
158
|
|
|
143
|
-
let placeholder: string = "";
|
|
144
|
-
if (type === "time") {
|
|
145
|
-
placeholder = "hh:mm a";
|
|
146
|
-
} else if (type === "datetime") {
|
|
147
|
-
placeholder = "mm/dd/yyyy hh:mm a";
|
|
148
|
-
} else if (type === "date") {
|
|
149
|
-
placeholder = "mm/dd/yyyy";
|
|
150
|
-
}
|
|
151
|
-
|
|
152
159
|
// if the value of the overall field changes via prop from the parent,
|
|
153
160
|
// update the formattedDate to keep the value of the TextField and DateTimeActionSheet in sync
|
|
154
161
|
useEffect(() => {
|
|
155
|
-
if (value
|
|
156
|
-
|
|
162
|
+
if (value) {
|
|
163
|
+
const formatted = formatValue(value);
|
|
164
|
+
if (formattedDate !== formatted) {
|
|
165
|
+
setFormattedDate(formatted);
|
|
166
|
+
}
|
|
167
|
+
if (errorText) {
|
|
168
|
+
setLocalError(errorText);
|
|
169
|
+
}
|
|
157
170
|
}
|
|
158
|
-
}, [formatValue, formattedDate,
|
|
171
|
+
}, [value, formatValue, formattedDate, errorText]);
|
|
159
172
|
|
|
160
173
|
return (
|
|
161
174
|
<>
|
|
162
175
|
<TextField
|
|
163
|
-
errorText={
|
|
176
|
+
errorText={localError}
|
|
164
177
|
iconName={type === "time" ? "clock" : "calendar"}
|
|
165
178
|
placeholder={placeholder}
|
|
166
179
|
type="text"
|
package/src/EmailField.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {FC, useCallback, useState} from "react";
|
|
1
|
+
import React, {FC, useCallback, useEffect, useState} from "react";
|
|
2
2
|
|
|
3
3
|
import {EmailFieldProps} from "./Common";
|
|
4
4
|
import {TextField} from "./TextField";
|
|
@@ -26,6 +26,12 @@ export const EmailField: FC<EmailFieldProps> = ({
|
|
|
26
26
|
return undefined;
|
|
27
27
|
}, []);
|
|
28
28
|
|
|
29
|
+
// Sync local state with incoming prop values
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
setLocalValue(value || "");
|
|
32
|
+
setError(errorText);
|
|
33
|
+
}, [value, errorText]);
|
|
34
|
+
|
|
29
35
|
const handleBlur = useCallback(
|
|
30
36
|
(email: string) => {
|
|
31
37
|
if (onBlur) {
|
|
@@ -62,8 +68,18 @@ export const EmailField: FC<EmailFieldProps> = ({
|
|
|
62
68
|
placeholder={placeholder}
|
|
63
69
|
type="email"
|
|
64
70
|
value={localValue}
|
|
65
|
-
onBlur={(e) =>
|
|
66
|
-
|
|
71
|
+
onBlur={(e) => {
|
|
72
|
+
handleBlur(e);
|
|
73
|
+
if (onBlur) {
|
|
74
|
+
onBlur(value || "");
|
|
75
|
+
}
|
|
76
|
+
}}
|
|
77
|
+
onChange={(e) => {
|
|
78
|
+
handleChange(e);
|
|
79
|
+
if (onChange) {
|
|
80
|
+
onChange;
|
|
81
|
+
}
|
|
82
|
+
}}
|
|
67
83
|
{...rest}
|
|
68
84
|
/>
|
|
69
85
|
);
|
package/src/NumberField.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {FC, useCallback, useState} from "react";
|
|
1
|
+
import React, {FC, useCallback, useEffect, useState} from "react";
|
|
2
2
|
|
|
3
3
|
import {NumberFieldProps} from "./Common";
|
|
4
4
|
import {TextField} from "./TextField";
|
|
@@ -13,6 +13,11 @@ export const NumberField: FC<NumberFieldProps> = ({
|
|
|
13
13
|
}: NumberFieldProps) => {
|
|
14
14
|
const [value, setValue] = useState(valueProp ?? "");
|
|
15
15
|
|
|
16
|
+
// Sync local state with incoming prop values
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
setValue(valueProp ?? "");
|
|
19
|
+
}, [valueProp]);
|
|
20
|
+
|
|
16
21
|
const getError = useCallback(
|
|
17
22
|
(newV?: string) => {
|
|
18
23
|
const v = String(newV);
|
package/src/PhoneNumberField.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {AsYouType, parsePhoneNumberFromString} from "libphonenumber-js";
|
|
2
|
-
import React, {FC, useCallback, useState} from "react";
|
|
2
|
+
import React, {FC, useCallback, useEffect, useState} from "react";
|
|
3
3
|
|
|
4
4
|
import {PhoneNumberFieldProps} from "./Common";
|
|
5
5
|
import {TextField} from "./TextField";
|
|
@@ -17,6 +17,12 @@ export const PhoneNumberField: FC<PhoneNumberFieldProps> = ({
|
|
|
17
17
|
const [localValue, setLocalValue] = useState<string>(value || "");
|
|
18
18
|
const [error, setError] = useState<string | undefined>(errorText);
|
|
19
19
|
|
|
20
|
+
// Sync local state with incoming prop values
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
setLocalValue(value || "");
|
|
23
|
+
setError(errorText);
|
|
24
|
+
}, [value, errorText]);
|
|
25
|
+
|
|
20
26
|
const validatePhoneNumber = useCallback(
|
|
21
27
|
(phoneNumber: string): string | undefined => {
|
|
22
28
|
if (phoneNumber.trim() === "") {
|