@bloom-housing/ui-components 12.2.2 → 12.4.0
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/src/forms/DateField.d.ts +2 -0
- package/dist/src/forms/DateField.js +24 -9
- package/dist/src/forms/DateField.js.map +1 -1
- package/dist/src/forms/DateField.stories.js +6 -2
- package/dist/src/forms/DateField.stories.js.map +1 -1
- package/dist/src/forms/TimeField.d.ts +2 -1
- package/dist/src/forms/TimeField.js +26 -13
- package/dist/src/forms/TimeField.js.map +1 -1
- package/dist/src/forms/TimeField.stories.js +2 -2
- package/dist/src/forms/TimeField.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/forms/DateField.stories.tsx +19 -10
- package/src/forms/DateField.tsx +27 -4
- package/src/forms/TimeField.stories.tsx +2 -1
- package/src/forms/TimeField.tsx +28 -10
|
@@ -18,6 +18,7 @@ export interface DateFieldProps {
|
|
|
18
18
|
readerOnly?: boolean;
|
|
19
19
|
register: UseFormMethods["register"];
|
|
20
20
|
required?: boolean;
|
|
21
|
+
setValue?: UseFormMethods["setValue"];
|
|
21
22
|
watch: UseFormMethods["watch"];
|
|
22
23
|
dataTestId?: string;
|
|
23
24
|
strings?: {
|
|
@@ -30,5 +31,6 @@ export interface DateFieldProps {
|
|
|
30
31
|
yearPlaceholder?: string;
|
|
31
32
|
};
|
|
32
33
|
}
|
|
34
|
+
export declare const maskNumber: (value: string) => string | undefined;
|
|
33
35
|
declare const DateField: (props: DateFieldProps) => JSX.Element;
|
|
34
36
|
export { DateField as default, DateField };
|
|
@@ -2,6 +2,10 @@ import React from "react";
|
|
|
2
2
|
import { t } from "../helpers/translator";
|
|
3
3
|
import { Field } from "./Field";
|
|
4
4
|
import dayjs from "dayjs";
|
|
5
|
+
export var maskNumber = function (value) {
|
|
6
|
+
var _a;
|
|
7
|
+
return (_a = value.match(/\d+/g)) === null || _a === void 0 ? void 0 : _a.join("");
|
|
8
|
+
};
|
|
5
9
|
var DateField = function (props) {
|
|
6
10
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
7
11
|
var defaultDate = props.defaultDate, error = props.error, register = props.register, name = props.name, id = props.id, errorMessage = props.errorMessage;
|
|
@@ -24,7 +28,11 @@ var DateField = function (props) {
|
|
|
24
28
|
return parseInt(value) > 0 && parseInt(value) <= 12;
|
|
25
29
|
},
|
|
26
30
|
},
|
|
27
|
-
}, inputProps: { maxLength: 2 }, register: register,
|
|
31
|
+
}, inputProps: { maxLength: 2 }, register: register, onChange: function (e) {
|
|
32
|
+
if (!props.setValue)
|
|
33
|
+
return;
|
|
34
|
+
props.setValue(getFieldName("month"), maskNumber(e.target.value));
|
|
35
|
+
}, dataTestId: props.dataTestId ? "".concat(props.dataTestId, "-month") : undefined }),
|
|
28
36
|
React.createElement(Field, { name: getFieldName("day"), label: (_g = (_f = props.strings) === null || _f === void 0 ? void 0 : _f.day) !== null && _g !== void 0 ? _g : t("t.day"), disabled: props.disabled, readerOnly: true, placeholder: (_j = (_h = props.strings) === null || _h === void 0 ? void 0 : _h.dayPlaceholder) !== null && _j !== void 0 ? _j : t("account.settings.placeholders.day"), defaultValue: (_k = defaultDate === null || defaultDate === void 0 ? void 0 : defaultDate.day) !== null && _k !== void 0 ? _k : "", error: (error === null || error === void 0 ? void 0 : error.day) !== undefined, validation: {
|
|
29
37
|
required: props.required,
|
|
30
38
|
validate: {
|
|
@@ -34,24 +42,31 @@ var DateField = function (props) {
|
|
|
34
42
|
return parseInt(value) > 0 && parseInt(value) <= 31;
|
|
35
43
|
},
|
|
36
44
|
},
|
|
37
|
-
}, inputProps: { maxLength: 2 }, register: register,
|
|
45
|
+
}, inputProps: { maxLength: 2 }, register: register, onChange: function (e) {
|
|
46
|
+
if (!props.setValue)
|
|
47
|
+
return;
|
|
48
|
+
props.setValue(getFieldName("day"), maskNumber(e.target.value));
|
|
49
|
+
}, dataTestId: props.dataTestId ? "".concat(props.dataTestId, "-day") : undefined }),
|
|
38
50
|
React.createElement(Field, { name: getFieldName("year"), label: (_m = (_l = props.strings) === null || _l === void 0 ? void 0 : _l.year) !== null && _m !== void 0 ? _m : t("t.year"), disabled: props.disabled, readerOnly: true, placeholder: (_p = (_o = props.strings) === null || _o === void 0 ? void 0 : _o.yearPlaceholder) !== null && _p !== void 0 ? _p : t("account.settings.placeholders.year"), defaultValue: (_q = defaultDate === null || defaultDate === void 0 ? void 0 : defaultDate.year) !== null && _q !== void 0 ? _q : "", error: (error === null || error === void 0 ? void 0 : error.year) !== undefined, validation: {
|
|
39
51
|
required: props.required,
|
|
40
52
|
validate: {
|
|
41
53
|
yearRange: function (value) {
|
|
42
|
-
if (props.required && value && parseInt(value) < 1900)
|
|
43
|
-
return false;
|
|
44
|
-
if (props.required && value && parseInt(value) > dayjs().year() + 10)
|
|
45
|
-
return false;
|
|
46
54
|
if (!props.required && !(value === null || value === void 0 ? void 0 : value.length))
|
|
47
55
|
return true;
|
|
48
|
-
|
|
56
|
+
var numVal = parseInt(value);
|
|
57
|
+
if (isNaN(numVal))
|
|
58
|
+
return false;
|
|
59
|
+
return !(numVal < 1900 || numVal > dayjs().year() + 10);
|
|
49
60
|
},
|
|
50
61
|
},
|
|
51
|
-
}, inputProps: { maxLength: 4 }, register: register,
|
|
62
|
+
}, inputProps: { maxLength: 4 }, register: register, onChange: function (e) {
|
|
63
|
+
if (!props.setValue)
|
|
64
|
+
return;
|
|
65
|
+
props.setValue(getFieldName("year"), maskNumber(e.target.value));
|
|
66
|
+
}, dataTestId: props.dataTestId ? "".concat(props.dataTestId, "-year") : undefined })),
|
|
52
67
|
props.note && React.createElement("p", { className: "field-note mb-2 mt-4" }, props.note),
|
|
53
68
|
((error === null || error === void 0 ? void 0 : error.month) || (error === null || error === void 0 ? void 0 : error.day) || (error === null || error === void 0 ? void 0 : error.year)) && (React.createElement("div", { className: "field error" },
|
|
54
|
-
React.createElement("span", { id: "".concat(id, "-error"), className: "error-message" }, errorMessage ? errorMessage : (_s = (_r = props.strings) === null || _r === void 0 ? void 0 : _r.dateError) !== null && _s !== void 0 ? _s : t("errors.dateError"))))));
|
|
69
|
+
React.createElement("span", { id: "".concat(id || "date-field", "-error"), className: "error-message" }, errorMessage ? errorMessage : (_s = (_r = props.strings) === null || _r === void 0 ? void 0 : _r.dateError) !== null && _s !== void 0 ? _s : t("errors.dateError"))))));
|
|
55
70
|
};
|
|
56
71
|
export { DateField as default, DateField };
|
|
57
72
|
//# sourceMappingURL=DateField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../src/forms/DateField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,CAAC,EAAE,MAAM,uBAAuB,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../src/forms/DateField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,7 +6,11 @@ export default {
|
|
|
6
6
|
decorators: [function (storyFn) { return React.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
|
|
7
7
|
};
|
|
8
8
|
export var Default = function () {
|
|
9
|
-
var _a = useForm(
|
|
10
|
-
|
|
9
|
+
var _a = useForm(), register = _a.register, watch = _a.watch, errors = _a.errors, setValue = _a.setValue, handleSubmit = _a.handleSubmit;
|
|
10
|
+
var onSubmit = function (data) { };
|
|
11
|
+
return (React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
|
|
12
|
+
React.createElement(DateField, { id: "appDueDate", name: "appDueDate", label: "Application Due Date", register: register, required: true, setValue: setValue, watch: watch, error: errors === null || errors === void 0 ? void 0 : errors.appDueDate }),
|
|
13
|
+
React.createElement("br", null),
|
|
14
|
+
React.createElement("button", { type: "submit", className: "button" }, "Submit")));
|
|
11
15
|
};
|
|
12
16
|
//# sourceMappingURL=DateField.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateField.stories.js","sourceRoot":"","sources":["../../../src/forms/DateField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEzC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;CACnF,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG;IACf,IAAA,
|
|
1
|
+
{"version":3,"file":"DateField.stories.js","sourceRoot":"","sources":["../../../src/forms/DateField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEzC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;CACnF,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG;IACf,IAAA,KAAsD,OAAO,EAAE,EAA7D,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,QAAQ,cAAA,EAAE,YAAY,kBAAc,CAAA;IAErE,IAAM,QAAQ,GAAG,UAAC,IAAS,IAAM,CAAC,CAAA;IAElC,OAAO,CACL,8BAAM,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC;QACpC,oBAAC,SAAS,IACR,EAAE,EAAC,YAAY,EACf,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,sBAAsB,EAC5B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,GACzB;QACF,+BAAM;QACN,gCAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,QAAQ,aAE/B,CACJ,CACR,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -17,6 +17,7 @@ export type TimeFieldProps = {
|
|
|
17
17
|
readerOnly?: boolean;
|
|
18
18
|
register: UseFormMethods["register"];
|
|
19
19
|
required?: boolean;
|
|
20
|
+
setValue?: UseFormMethods["setValue"];
|
|
20
21
|
watch: UseFormMethods["watch"];
|
|
21
22
|
seconds?: boolean;
|
|
22
23
|
dataTestId?: string;
|
|
@@ -35,5 +36,5 @@ export declare const formatDateToTimeField: (date: Date) => {
|
|
|
35
36
|
seconds: string;
|
|
36
37
|
period: string;
|
|
37
38
|
};
|
|
38
|
-
declare const TimeField: ({ required, error, register, watch, name, id, label, labelClass, readerOnly, seconds, defaultValues, disabled, dataTestId, strings, }: TimeFieldProps) => JSX.Element;
|
|
39
|
+
declare const TimeField: ({ required, error, register, setValue, watch, name, id, label, labelClass, readerOnly, seconds, defaultValues, disabled, dataTestId, strings, }: TimeFieldProps) => JSX.Element;
|
|
39
40
|
export { TimeField as default, TimeField };
|
|
@@ -4,6 +4,7 @@ import { t } from "../helpers/translator";
|
|
|
4
4
|
import { ErrorMessage } from "../notifications/ErrorMessage";
|
|
5
5
|
import { Field } from "./Field";
|
|
6
6
|
import { Select } from "../forms/Select";
|
|
7
|
+
import { maskNumber } from "./DateField";
|
|
7
8
|
export var formatDateToTimeField = function (date) {
|
|
8
9
|
var dateObj = dayjs(date);
|
|
9
10
|
return {
|
|
@@ -15,15 +16,15 @@ export var formatDateToTimeField = function (date) {
|
|
|
15
16
|
};
|
|
16
17
|
var TimeField = function (_a) {
|
|
17
18
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18
|
-
var _l = _a.required, required = _l === void 0 ? false : _l, error = _a.error, register = _a.register, watch = _a.watch, name = _a.name,
|
|
19
|
-
var
|
|
19
|
+
var _l = _a.required, required = _l === void 0 ? false : _l, error = _a.error, register = _a.register, setValue = _a.setValue, watch = _a.watch, name = _a.name, _m = _a.id, id = _m === void 0 ? "time" : _m, label = _a.label, labelClass = _a.labelClass, readerOnly = _a.readerOnly, seconds = _a.seconds, defaultValues = _a.defaultValues, disabled = _a.disabled, dataTestId = _a.dataTestId, strings = _a.strings;
|
|
20
|
+
var getFieldName = function (baseName) {
|
|
20
21
|
return [name, baseName].filter(function (item) { return item; }).join(".");
|
|
21
22
|
};
|
|
22
23
|
// it prevents partial fill, all fields should be filled or nothing
|
|
23
|
-
var
|
|
24
|
-
var hoursField = watch(
|
|
25
|
-
var minutesField = watch(
|
|
26
|
-
var secondsField = watch(
|
|
24
|
+
var _o = useState(false), innerRequiredRule = _o[0], setInnerRequiredRule = _o[1];
|
|
25
|
+
var hoursField = watch(getFieldName("hours"));
|
|
26
|
+
var minutesField = watch(getFieldName("minutes"));
|
|
27
|
+
var secondsField = watch(getFieldName("seconds"));
|
|
27
28
|
useEffect(function () {
|
|
28
29
|
var someFieldsFilled = hoursField || minutesField || secondsField;
|
|
29
30
|
setInnerRequiredRule(someFieldsFilled);
|
|
@@ -34,7 +35,7 @@ var TimeField = function (_a) {
|
|
|
34
35
|
return (React.createElement("fieldset", { id: id },
|
|
35
36
|
React.createElement("legend", { className: labelClasses.join(" ") }, label),
|
|
36
37
|
React.createElement("div", { className: "field-group--date" },
|
|
37
|
-
React.createElement(Field, { name:
|
|
38
|
+
React.createElement(Field, { name: getFieldName("hours"), label: (_b = strings === null || strings === void 0 ? void 0 : strings.hour) !== null && _b !== void 0 ? _b : t("t.hour"), defaultValue: (_c = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.hours) !== null && _c !== void 0 ? _c : "", readerOnly: true, placeholder: "HH", error: error, validation: {
|
|
38
39
|
required: required || innerRequiredRule,
|
|
39
40
|
validate: {
|
|
40
41
|
hourRange: function (value) {
|
|
@@ -43,8 +44,12 @@ var TimeField = function (_a) {
|
|
|
43
44
|
return parseInt(value) > 0 && parseInt(value) <= 12;
|
|
44
45
|
},
|
|
45
46
|
},
|
|
46
|
-
}, inputProps: { maxLength: 2 }, register: register,
|
|
47
|
-
|
|
47
|
+
}, inputProps: { maxLength: 2 }, register: register, onChange: function (e) {
|
|
48
|
+
if (!setValue)
|
|
49
|
+
return;
|
|
50
|
+
setValue(getFieldName("hours"), maskNumber(e.target.value));
|
|
51
|
+
}, describedBy: "".concat(id, "-error"), disabled: disabled, dataTestId: dataTestId ? "".concat(dataTestId, "-hours") : undefined }),
|
|
52
|
+
React.createElement(Field, { name: getFieldName("minutes"), label: (_d = strings === null || strings === void 0 ? void 0 : strings.minutes) !== null && _d !== void 0 ? _d : t("t.minutes"), defaultValue: (_e = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.minutes) !== null && _e !== void 0 ? _e : "", readerOnly: true, placeholder: (_f = strings === null || strings === void 0 ? void 0 : strings.minutesPlaceholder) !== null && _f !== void 0 ? _f : t("account.settings.placeholders.month"), error: error, validation: {
|
|
48
53
|
required: required || innerRequiredRule,
|
|
49
54
|
validate: {
|
|
50
55
|
minutesRange: function (value) {
|
|
@@ -53,8 +58,12 @@ var TimeField = function (_a) {
|
|
|
53
58
|
return parseInt(value) >= 0 && parseInt(value) <= 59;
|
|
54
59
|
},
|
|
55
60
|
},
|
|
56
|
-
}, inputProps: { maxLength: 2 }, register: register,
|
|
57
|
-
|
|
61
|
+
}, inputProps: { maxLength: 2 }, register: register, onChange: function (e) {
|
|
62
|
+
if (!setValue)
|
|
63
|
+
return;
|
|
64
|
+
setValue(getFieldName("minutes"), maskNumber(e.target.value));
|
|
65
|
+
}, describedBy: "".concat(id, "-error"), disabled: disabled, dataTestId: dataTestId ? "".concat(dataTestId, "-minutes") : undefined }),
|
|
66
|
+
seconds && (React.createElement(Field, { label: (_g = strings === null || strings === void 0 ? void 0 : strings.seconds) !== null && _g !== void 0 ? _g : t("t.seconds"), defaultValue: (_h = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.seconds) !== null && _h !== void 0 ? _h : "", name: getFieldName("seconds"), readerOnly: true, placeholder: "SS", error: error, validation: {
|
|
58
67
|
required: required || innerRequiredRule,
|
|
59
68
|
validate: {
|
|
60
69
|
secondsRange: function (value) {
|
|
@@ -63,8 +72,12 @@ var TimeField = function (_a) {
|
|
|
63
72
|
return parseInt(value) >= 0 && parseInt(value) <= 59;
|
|
64
73
|
},
|
|
65
74
|
},
|
|
66
|
-
}, inputProps: { maxLength: 2 }, register: register,
|
|
67
|
-
|
|
75
|
+
}, inputProps: { maxLength: 2 }, register: register, onChange: function (e) {
|
|
76
|
+
if (!setValue)
|
|
77
|
+
return;
|
|
78
|
+
setValue(getFieldName("seconds"), maskNumber(e.target.value));
|
|
79
|
+
}, describedBy: "".concat(id, "-error"), disabled: disabled, dataTestId: dataTestId ? "".concat(dataTestId, "-seconds") : undefined })),
|
|
80
|
+
React.createElement(Select, { name: getFieldName("period"), id: getFieldName("period"), labelClassName: "sr-only", label: (_j = strings === null || strings === void 0 ? void 0 : strings.time) !== null && _j !== void 0 ? _j : t("t.time"), register: register, options: ["am", "pm"], keyPrefix: "t", defaultValue: (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.period) || "", error: error, describedBy: "".concat(id, "-error"), disabled: disabled, dataTestId: dataTestId ? "".concat(dataTestId, "-period") : undefined })),
|
|
68
81
|
React.createElement("div", { id: "".concat(id, "-error"), className: "field error" },
|
|
69
82
|
React.createElement(ErrorMessage, { id: "time-field-error", error: error }, (_k = strings === null || strings === void 0 ? void 0 : strings.timeError) !== null && _k !== void 0 ? _k : t("errors.timeError")))));
|
|
70
83
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeField.js","sourceRoot":"","sources":["../../../src/forms/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,CAAC,EAAE,MAAM,uBAAuB,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAoCxC,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,IAAU;IAC9C,IAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA;IAE3B,OAAO;QACL,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC;QAC3B,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC;QAC7B,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC;QAC7B,MAAM,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;KACtD,CAAA;AACH,CAAC,CAAA;AAED,IAAM,SAAS,GAAG,UAAC,
|
|
1
|
+
{"version":3,"file":"TimeField.js","sourceRoot":"","sources":["../../../src/forms/TimeField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,7 +6,7 @@ export default {
|
|
|
6
6
|
decorators: [function (storyFn) { return React.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
|
|
7
7
|
};
|
|
8
8
|
export var Default = function () {
|
|
9
|
-
var _a = useForm({ mode: "onChange" }), register = _a.register, watch = _a.watch, errors = _a.errors;
|
|
10
|
-
return (React.createElement(TimeField, { id: "time", label: "Time", name: "time", required: true, register: register, watch: watch, error: !!(errors === null || errors === void 0 ? void 0 : errors.time) }));
|
|
9
|
+
var _a = useForm({ mode: "onChange" }), register = _a.register, setValue = _a.setValue, watch = _a.watch, errors = _a.errors;
|
|
10
|
+
return (React.createElement(TimeField, { id: "time", label: "Time", name: "time", required: true, register: register, setValue: setValue, watch: watch, error: !!(errors === null || errors === void 0 ? void 0 : errors.time) }));
|
|
11
11
|
};
|
|
12
12
|
//# sourceMappingURL=TimeField.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeField.stories.js","sourceRoot":"","sources":["../../../src/forms/TimeField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;CACnF,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG;IACf,IAAA,
|
|
1
|
+
{"version":3,"file":"TimeField.stories.js","sourceRoot":"","sources":["../../../src/forms/TimeField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;CACnF,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG;IACf,IAAA,KAAwC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAnE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAkC,CAAA;IAE3E,OAAO,CACL,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAA,GACrB,CACH,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bloom-housing/ui-components",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.4.0",
|
|
4
4
|
"author": "Sean Albert <sean.albert@exygy.com>",
|
|
5
5
|
"description": "Shared user interface components for Bloom affordable housing system",
|
|
6
6
|
"homepage": "https://github.com/bloom-housing/ui-components",
|
|
@@ -8,17 +8,26 @@ export default {
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
export const Default = () => {
|
|
11
|
-
const { register, watch, errors } = useForm(
|
|
11
|
+
const { register, watch, errors, setValue, handleSubmit } = useForm()
|
|
12
|
+
|
|
13
|
+
const onSubmit = (data: any) => {}
|
|
12
14
|
|
|
13
15
|
return (
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
<form onSubmit={handleSubmit(onSubmit)}>
|
|
17
|
+
<DateField
|
|
18
|
+
id="appDueDate"
|
|
19
|
+
name="appDueDate"
|
|
20
|
+
label="Application Due Date"
|
|
21
|
+
register={register}
|
|
22
|
+
required={true}
|
|
23
|
+
setValue={setValue}
|
|
24
|
+
watch={watch}
|
|
25
|
+
error={errors?.appDueDate}
|
|
26
|
+
/>
|
|
27
|
+
<br />
|
|
28
|
+
<button type="submit" className="button">
|
|
29
|
+
Submit
|
|
30
|
+
</button>
|
|
31
|
+
</form>
|
|
23
32
|
)
|
|
24
33
|
}
|
package/src/forms/DateField.tsx
CHANGED
|
@@ -23,6 +23,7 @@ export interface DateFieldProps {
|
|
|
23
23
|
readerOnly?: boolean
|
|
24
24
|
register: UseFormMethods["register"]
|
|
25
25
|
required?: boolean
|
|
26
|
+
setValue?: UseFormMethods["setValue"]
|
|
26
27
|
watch: UseFormMethods["watch"]
|
|
27
28
|
dataTestId?: string
|
|
28
29
|
strings?: {
|
|
@@ -36,6 +37,10 @@ export interface DateFieldProps {
|
|
|
36
37
|
}
|
|
37
38
|
}
|
|
38
39
|
|
|
40
|
+
export const maskNumber = (value: string) => {
|
|
41
|
+
return value.match(/\d+/g)?.join("")
|
|
42
|
+
}
|
|
43
|
+
|
|
39
44
|
const DateField = (props: DateFieldProps) => {
|
|
40
45
|
const { defaultDate, error, register, name, id, errorMessage } = props
|
|
41
46
|
|
|
@@ -64,12 +69,18 @@ const DateField = (props: DateFieldProps) => {
|
|
|
64
69
|
validate: {
|
|
65
70
|
monthRange: (value: string) => {
|
|
66
71
|
if (!props.required && !value?.length) return true
|
|
72
|
+
|
|
67
73
|
return parseInt(value) > 0 && parseInt(value) <= 12
|
|
68
74
|
},
|
|
69
75
|
},
|
|
70
76
|
}}
|
|
71
77
|
inputProps={{ maxLength: 2 }}
|
|
72
78
|
register={register}
|
|
79
|
+
onChange={(e) => {
|
|
80
|
+
if (!props.setValue) return
|
|
81
|
+
|
|
82
|
+
props.setValue(getFieldName("month"), maskNumber(e.target.value))
|
|
83
|
+
}}
|
|
73
84
|
dataTestId={props.dataTestId ? `${props.dataTestId}-month` : undefined}
|
|
74
85
|
/>
|
|
75
86
|
<Field
|
|
@@ -85,12 +96,18 @@ const DateField = (props: DateFieldProps) => {
|
|
|
85
96
|
validate: {
|
|
86
97
|
dayRange: (value: string) => {
|
|
87
98
|
if (!props.required && !value?.length) return true
|
|
99
|
+
|
|
88
100
|
return parseInt(value) > 0 && parseInt(value) <= 31
|
|
89
101
|
},
|
|
90
102
|
},
|
|
91
103
|
}}
|
|
92
104
|
inputProps={{ maxLength: 2 }}
|
|
93
105
|
register={register}
|
|
106
|
+
onChange={(e) => {
|
|
107
|
+
if (!props.setValue) return
|
|
108
|
+
|
|
109
|
+
props.setValue(getFieldName("day"), maskNumber(e.target.value))
|
|
110
|
+
}}
|
|
94
111
|
dataTestId={props.dataTestId ? `${props.dataTestId}-day` : undefined}
|
|
95
112
|
/>
|
|
96
113
|
<Field
|
|
@@ -105,15 +122,21 @@ const DateField = (props: DateFieldProps) => {
|
|
|
105
122
|
required: props.required,
|
|
106
123
|
validate: {
|
|
107
124
|
yearRange: (value: string) => {
|
|
108
|
-
if (props.required && value && parseInt(value) < 1900) return false
|
|
109
|
-
if (props.required && value && parseInt(value) > dayjs().year() + 10) return false
|
|
110
125
|
if (!props.required && !value?.length) return true
|
|
111
|
-
|
|
126
|
+
|
|
127
|
+
const numVal = parseInt(value)
|
|
128
|
+
if (isNaN(numVal)) return false
|
|
129
|
+
return !(numVal < 1900 || numVal > dayjs().year() + 10)
|
|
112
130
|
},
|
|
113
131
|
},
|
|
114
132
|
}}
|
|
115
133
|
inputProps={{ maxLength: 4 }}
|
|
116
134
|
register={register}
|
|
135
|
+
onChange={(e) => {
|
|
136
|
+
if (!props.setValue) return
|
|
137
|
+
|
|
138
|
+
props.setValue(getFieldName("year"), maskNumber(e.target.value))
|
|
139
|
+
}}
|
|
117
140
|
dataTestId={props.dataTestId ? `${props.dataTestId}-year` : undefined}
|
|
118
141
|
/>
|
|
119
142
|
</div>
|
|
@@ -121,7 +144,7 @@ const DateField = (props: DateFieldProps) => {
|
|
|
121
144
|
|
|
122
145
|
{(error?.month || error?.day || error?.year) && (
|
|
123
146
|
<div className="field error">
|
|
124
|
-
<span id={`${id}-error`} className="error-message">
|
|
147
|
+
<span id={`${id || "date-field"}-error`} className="error-message">
|
|
125
148
|
{errorMessage ? errorMessage : props.strings?.dateError ?? t("errors.dateError")}
|
|
126
149
|
</span>
|
|
127
150
|
</div>
|
|
@@ -8,7 +8,7 @@ export default {
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
export const Default = () => {
|
|
11
|
-
const { register, watch, errors } = useForm({ mode: "onChange" })
|
|
11
|
+
const { register, setValue, watch, errors } = useForm({ mode: "onChange" })
|
|
12
12
|
|
|
13
13
|
return (
|
|
14
14
|
<TimeField
|
|
@@ -17,6 +17,7 @@ export const Default = () => {
|
|
|
17
17
|
name="time"
|
|
18
18
|
required={true}
|
|
19
19
|
register={register}
|
|
20
|
+
setValue={setValue}
|
|
20
21
|
watch={watch}
|
|
21
22
|
error={!!errors?.time}
|
|
22
23
|
/>
|
package/src/forms/TimeField.tsx
CHANGED
|
@@ -5,6 +5,7 @@ import { ErrorMessage } from "../notifications/ErrorMessage"
|
|
|
5
5
|
import { Field } from "./Field"
|
|
6
6
|
import { Select } from "../forms/Select"
|
|
7
7
|
import { UseFormMethods } from "react-hook-form"
|
|
8
|
+
import { maskNumber } from "./DateField"
|
|
8
9
|
|
|
9
10
|
export type TimeFieldPeriod = "am" | "pm"
|
|
10
11
|
|
|
@@ -26,6 +27,7 @@ export type TimeFieldProps = {
|
|
|
26
27
|
readerOnly?: boolean
|
|
27
28
|
register: UseFormMethods["register"]
|
|
28
29
|
required?: boolean
|
|
30
|
+
setValue?: UseFormMethods["setValue"]
|
|
29
31
|
watch: UseFormMethods["watch"]
|
|
30
32
|
seconds?: boolean
|
|
31
33
|
dataTestId?: string
|
|
@@ -54,9 +56,10 @@ const TimeField = ({
|
|
|
54
56
|
required = false,
|
|
55
57
|
error,
|
|
56
58
|
register,
|
|
59
|
+
setValue,
|
|
57
60
|
watch,
|
|
58
61
|
name,
|
|
59
|
-
id,
|
|
62
|
+
id = "time",
|
|
60
63
|
label,
|
|
61
64
|
labelClass,
|
|
62
65
|
readerOnly,
|
|
@@ -66,16 +69,16 @@ const TimeField = ({
|
|
|
66
69
|
dataTestId,
|
|
67
70
|
strings,
|
|
68
71
|
}: TimeFieldProps) => {
|
|
69
|
-
const
|
|
72
|
+
const getFieldName = (baseName: string) => {
|
|
70
73
|
return [name, baseName].filter((item) => item).join(".")
|
|
71
74
|
}
|
|
72
75
|
|
|
73
76
|
// it prevents partial fill, all fields should be filled or nothing
|
|
74
77
|
const [innerRequiredRule, setInnerRequiredRule] = useState(false)
|
|
75
78
|
|
|
76
|
-
const hoursField = watch(
|
|
77
|
-
const minutesField = watch(
|
|
78
|
-
const secondsField = watch(
|
|
79
|
+
const hoursField = watch(getFieldName("hours"))
|
|
80
|
+
const minutesField = watch(getFieldName("minutes"))
|
|
81
|
+
const secondsField = watch(getFieldName("seconds"))
|
|
79
82
|
|
|
80
83
|
useEffect(() => {
|
|
81
84
|
const someFieldsFilled = hoursField || minutesField || secondsField
|
|
@@ -90,7 +93,7 @@ const TimeField = ({
|
|
|
90
93
|
<legend className={labelClasses.join(" ")}>{label}</legend>
|
|
91
94
|
<div className="field-group--date">
|
|
92
95
|
<Field
|
|
93
|
-
name={
|
|
96
|
+
name={getFieldName("hours")}
|
|
94
97
|
label={strings?.hour ?? t("t.hour")}
|
|
95
98
|
defaultValue={defaultValues?.hours ?? ""}
|
|
96
99
|
readerOnly={true}
|
|
@@ -108,13 +111,18 @@ const TimeField = ({
|
|
|
108
111
|
}}
|
|
109
112
|
inputProps={{ maxLength: 2 }}
|
|
110
113
|
register={register}
|
|
114
|
+
onChange={(e) => {
|
|
115
|
+
if (!setValue) return
|
|
116
|
+
|
|
117
|
+
setValue(getFieldName("hours"), maskNumber(e.target.value))
|
|
118
|
+
}}
|
|
111
119
|
describedBy={`${id}-error`}
|
|
112
120
|
disabled={disabled}
|
|
113
121
|
dataTestId={dataTestId ? `${dataTestId}-hours` : undefined}
|
|
114
122
|
/>
|
|
115
123
|
|
|
116
124
|
<Field
|
|
117
|
-
name={
|
|
125
|
+
name={getFieldName("minutes")}
|
|
118
126
|
label={strings?.minutes ?? t("t.minutes")}
|
|
119
127
|
defaultValue={defaultValues?.minutes ?? ""}
|
|
120
128
|
readerOnly={true}
|
|
@@ -132,6 +140,11 @@ const TimeField = ({
|
|
|
132
140
|
}}
|
|
133
141
|
inputProps={{ maxLength: 2 }}
|
|
134
142
|
register={register}
|
|
143
|
+
onChange={(e) => {
|
|
144
|
+
if (!setValue) return
|
|
145
|
+
|
|
146
|
+
setValue(getFieldName("minutes"), maskNumber(e.target.value))
|
|
147
|
+
}}
|
|
135
148
|
describedBy={`${id}-error`}
|
|
136
149
|
disabled={disabled}
|
|
137
150
|
dataTestId={dataTestId ? `${dataTestId}-minutes` : undefined}
|
|
@@ -141,7 +154,7 @@ const TimeField = ({
|
|
|
141
154
|
<Field
|
|
142
155
|
label={strings?.seconds ?? t("t.seconds")}
|
|
143
156
|
defaultValue={defaultValues?.seconds ?? ""}
|
|
144
|
-
name={
|
|
157
|
+
name={getFieldName("seconds")}
|
|
145
158
|
readerOnly={true}
|
|
146
159
|
placeholder="SS"
|
|
147
160
|
error={error}
|
|
@@ -157,6 +170,11 @@ const TimeField = ({
|
|
|
157
170
|
}}
|
|
158
171
|
inputProps={{ maxLength: 2 }}
|
|
159
172
|
register={register}
|
|
173
|
+
onChange={(e) => {
|
|
174
|
+
if (!setValue) return
|
|
175
|
+
|
|
176
|
+
setValue(getFieldName("seconds"), maskNumber(e.target.value))
|
|
177
|
+
}}
|
|
160
178
|
describedBy={`${id}-error`}
|
|
161
179
|
disabled={disabled}
|
|
162
180
|
dataTestId={dataTestId ? `${dataTestId}-seconds` : undefined}
|
|
@@ -164,8 +182,8 @@ const TimeField = ({
|
|
|
164
182
|
)}
|
|
165
183
|
|
|
166
184
|
<Select
|
|
167
|
-
name={
|
|
168
|
-
id={
|
|
185
|
+
name={getFieldName("period")}
|
|
186
|
+
id={getFieldName("period")}
|
|
169
187
|
labelClassName="sr-only"
|
|
170
188
|
label={strings?.time ?? t("t.time")}
|
|
171
189
|
register={register}
|