@bloom-housing/ui-components 12.2.1 → 12.3.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/Field.d.ts +1 -1
- package/dist/src/forms/Field.stories.d.ts +1 -0
- package/dist/src/forms/Field.stories.js +4 -0
- package/dist/src/forms/Field.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/forms/DateField.stories.tsx +19 -10
- package/src/forms/DateField.tsx +25 -4
- package/src/forms/Field.stories.tsx +14 -0
- package/src/forms/Field.tsx +1 -1
|
@@ -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"}
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { UseFormMethods, RegisterOptions } from "react-hook-form";
|
|
3
3
|
export interface FieldProps {
|
|
4
4
|
error?: boolean;
|
|
5
|
-
errorMessage?: string;
|
|
5
|
+
errorMessage?: string | JSX.Element;
|
|
6
6
|
className?: string;
|
|
7
7
|
controlClassName?: string;
|
|
8
8
|
caps?: boolean;
|
|
@@ -5,6 +5,7 @@ declare const _default: {
|
|
|
5
5
|
export default _default;
|
|
6
6
|
export declare const FieldDefault: () => JSX.Element;
|
|
7
7
|
export declare const TextFieldError: () => JSX.Element;
|
|
8
|
+
export declare const TextFieldErrorElement: () => JSX.Element;
|
|
8
9
|
export declare const CurrencyField: () => JSX.Element;
|
|
9
10
|
export declare const CurrencyFieldError: () => JSX.Element;
|
|
10
11
|
export declare const checkboxDefault: () => JSX.Element;
|
|
@@ -13,6 +13,10 @@ export var TextFieldError = function () {
|
|
|
13
13
|
var register = useForm({ mode: "onChange" }).register;
|
|
14
14
|
return (React.createElement(Field, { register: register, name: "Test Input", label: "Custom label", type: "text", error: true, errorMessage: "Custom error message" }));
|
|
15
15
|
};
|
|
16
|
+
export var TextFieldErrorElement = function () {
|
|
17
|
+
var register = useForm({ mode: "onChange" }).register;
|
|
18
|
+
return (React.createElement(Field, { register: register, name: "Test Input", label: "Custom label", type: "text", error: true, errorMessage: React.createElement("div", { className: "font-bold italic" }, "Custom error message as element") }));
|
|
19
|
+
};
|
|
16
20
|
export var CurrencyField = function () {
|
|
17
21
|
var _a = useForm({ mode: "onChange" }), register = _a.register, getValues = _a.getValues, setValue = _a.setValue;
|
|
18
22
|
return (React.createElement(Field, { register: register, name: "Test Input", className: "custom-class", controlClassName: "custom-control-class", describedBy: "Test Input", label: "Test Input Custom", type: "currency", getValues: getValues, setValue: setValue, prepend: "$" }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.stories.js","sourceRoot":"","sources":["../../../src/forms/Field.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,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,YAAY,GAAG;IAClB,IAAA,QAAQ,GAAK,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,oBAAC,KAAK,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,cAAc,GAAI,CAAA;AACjF,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG;IACpB,IAAA,QAAQ,GAAK,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,cAAc,EACrB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,IAAI,EACX,YAAY,EAAE,sBAAsB,GACpC,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,aAAa,GAAG;IACrB,IAAA,KAAoC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAA/D,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAkC,CAAA;IACvE,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,SAAS,EAAE,cAAc,EACzB,gBAAgB,EAAE,sBAAsB,EACxC,WAAW,EAAE,YAAY,EACzB,KAAK,EAAE,mBAAmB,EAC1B,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,GACZ,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG;IAC1B,IAAA,KAAoC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAA/D,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAkC,CAAA;IACvE,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,IAAI,EACX,YAAY,EAAE,sBAAsB,EACpC,SAAS,EAAE,cAAc,EACzB,gBAAgB,EAAE,sBAAsB,EACxC,WAAW,EAAE,YAAY,EACzB,KAAK,EAAE,mBAAmB,EAC1B,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,GACZ,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,eAAe,GAAG;IACvB,IAAA,KAAoC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAA/D,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAkC,CAAA;IACvE,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,WAAW,EAAE,YAAY,EACzB,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,UAAU,GAChB,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,gBAAgB,GAAG;IACxB,IAAA,KAAoC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAA/D,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAkC,CAAA;IACvE,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,WAAW,EAAE,YAAY,EACzB,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,UAAU,EAChB,QAAQ,SACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,YAAY,GAAG;IACpB,IAAA,KAAoC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAA/D,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAkC,CAAA;IACvE,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,WAAW,EAAE,YAAY,EACzB,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,OAAO,GACb,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,aAAa,GAAG;IACrB,IAAA,KAAoC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAA/D,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAkC,CAAA;IACvE,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,WAAW,EAAE,YAAY,EACzB,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,OAAO,EACb,QAAQ,SACR,CACH,CAAA;AACH,CAAC,CAAA"}
|
|
1
|
+
{"version":3,"file":"Field.stories.js","sourceRoot":"","sources":["../../../src/forms/Field.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,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,YAAY,GAAG;IAClB,IAAA,QAAQ,GAAK,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,oBAAC,KAAK,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,cAAc,GAAI,CAAA;AACjF,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG;IACpB,IAAA,QAAQ,GAAK,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,cAAc,EACrB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,IAAI,EACX,YAAY,EAAE,sBAAsB,GACpC,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,qBAAqB,GAAG;IAC3B,IAAA,QAAQ,GAAK,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,cAAc,EACrB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,IAAI,EACX,YAAY,EAAE,6BAAK,SAAS,EAAC,kBAAkB,sCAAsC,GACrF,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,aAAa,GAAG;IACrB,IAAA,KAAoC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAA/D,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAkC,CAAA;IACvE,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,SAAS,EAAE,cAAc,EACzB,gBAAgB,EAAE,sBAAsB,EACxC,WAAW,EAAE,YAAY,EACzB,KAAK,EAAE,mBAAmB,EAC1B,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,GACZ,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG;IAC1B,IAAA,KAAoC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAA/D,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAkC,CAAA;IACvE,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,IAAI,EACX,YAAY,EAAE,sBAAsB,EACpC,SAAS,EAAE,cAAc,EACzB,gBAAgB,EAAE,sBAAsB,EACxC,WAAW,EAAE,YAAY,EACzB,KAAK,EAAE,mBAAmB,EAC1B,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,GACZ,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,eAAe,GAAG;IACvB,IAAA,KAAoC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAA/D,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAkC,CAAA;IACvE,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,WAAW,EAAE,YAAY,EACzB,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,UAAU,GAChB,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,gBAAgB,GAAG;IACxB,IAAA,KAAoC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAA/D,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAkC,CAAA;IACvE,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,WAAW,EAAE,YAAY,EACzB,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,UAAU,EAChB,QAAQ,SACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,YAAY,GAAG;IACpB,IAAA,KAAoC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAA/D,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAkC,CAAA;IACvE,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,WAAW,EAAE,YAAY,EACzB,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,OAAO,GACb,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,aAAa,GAAG;IACrB,IAAA,KAAoC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAA/D,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAkC,CAAA;IACvE,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,WAAW,EAAE,YAAY,EACzB,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,OAAO,EACb,QAAQ,SACR,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.3.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
|
|
|
@@ -70,6 +75,11 @@ const DateField = (props: DateFieldProps) => {
|
|
|
70
75
|
}}
|
|
71
76
|
inputProps={{ maxLength: 2 }}
|
|
72
77
|
register={register}
|
|
78
|
+
onChange={(e) => {
|
|
79
|
+
if (!props.setValue) return
|
|
80
|
+
|
|
81
|
+
props.setValue(getFieldName("month"), maskNumber(e.target.value))
|
|
82
|
+
}}
|
|
73
83
|
dataTestId={props.dataTestId ? `${props.dataTestId}-month` : undefined}
|
|
74
84
|
/>
|
|
75
85
|
<Field
|
|
@@ -91,6 +101,11 @@ const DateField = (props: DateFieldProps) => {
|
|
|
91
101
|
}}
|
|
92
102
|
inputProps={{ maxLength: 2 }}
|
|
93
103
|
register={register}
|
|
104
|
+
onChange={(e) => {
|
|
105
|
+
if (!props.setValue) return
|
|
106
|
+
|
|
107
|
+
props.setValue(getFieldName("day"), maskNumber(e.target.value))
|
|
108
|
+
}}
|
|
94
109
|
dataTestId={props.dataTestId ? `${props.dataTestId}-day` : undefined}
|
|
95
110
|
/>
|
|
96
111
|
<Field
|
|
@@ -105,15 +120,21 @@ const DateField = (props: DateFieldProps) => {
|
|
|
105
120
|
required: props.required,
|
|
106
121
|
validate: {
|
|
107
122
|
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
123
|
if (!props.required && !value?.length) return true
|
|
111
|
-
|
|
124
|
+
|
|
125
|
+
const numVal = parseInt(value)
|
|
126
|
+
if (isNaN(numVal)) return false
|
|
127
|
+
return !(numVal < 1900 || numVal > dayjs().year() + 10)
|
|
112
128
|
},
|
|
113
129
|
},
|
|
114
130
|
}}
|
|
115
131
|
inputProps={{ maxLength: 4 }}
|
|
116
132
|
register={register}
|
|
133
|
+
onChange={(e) => {
|
|
134
|
+
if (!props.setValue) return
|
|
135
|
+
|
|
136
|
+
props.setValue(getFieldName("year"), maskNumber(e.target.value))
|
|
137
|
+
}}
|
|
117
138
|
dataTestId={props.dataTestId ? `${props.dataTestId}-year` : undefined}
|
|
118
139
|
/>
|
|
119
140
|
</div>
|
|
@@ -121,7 +142,7 @@ const DateField = (props: DateFieldProps) => {
|
|
|
121
142
|
|
|
122
143
|
{(error?.month || error?.day || error?.year) && (
|
|
123
144
|
<div className="field error">
|
|
124
|
-
<span id={`${id}-error`} className="error-message">
|
|
145
|
+
<span id={`${id || "date-field"}-error`} className="error-message">
|
|
125
146
|
{errorMessage ? errorMessage : props.strings?.dateError ?? t("errors.dateError")}
|
|
126
147
|
</span>
|
|
127
148
|
</div>
|
|
@@ -26,6 +26,20 @@ export const TextFieldError = () => {
|
|
|
26
26
|
)
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
+
export const TextFieldErrorElement = () => {
|
|
30
|
+
const { register } = useForm({ mode: "onChange" })
|
|
31
|
+
return (
|
|
32
|
+
<Field
|
|
33
|
+
register={register}
|
|
34
|
+
name={"Test Input"}
|
|
35
|
+
label={"Custom label"}
|
|
36
|
+
type={"text"}
|
|
37
|
+
error={true}
|
|
38
|
+
errorMessage={<div className="font-bold italic">Custom error message as element</div>}
|
|
39
|
+
/>
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
|
|
29
43
|
export const CurrencyField = () => {
|
|
30
44
|
const { register, getValues, setValue } = useForm({ mode: "onChange" })
|
|
31
45
|
return (
|
package/src/forms/Field.tsx
CHANGED