@mrshmllw/smores-react 12.10.0 → 12.10.1
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
1
|
+
import React, { forwardRef, useRef } from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
import { Fieldset } from '../fields/Fieldset';
|
|
@@ -15,30 +15,51 @@ import { InputValidationError } from '../utils/dateOfBirth/schema';
|
|
|
15
15
|
*/
|
|
16
16
|
export const TextDateOfBirthInput = forwardRef(function TextDateOfBirthInput({ onChange, value, label, assistiveText, hookformError, showCompleted = false, dataTestId, }, ref) {
|
|
17
17
|
const inputValidationErrorValues = Object.values(InputValidationError);
|
|
18
|
+
const monthRef = useRef(null);
|
|
19
|
+
const yearRef = useRef(null);
|
|
20
|
+
const filterNonNumeric = (value) => value.replace(/[^0-9]/g, '');
|
|
21
|
+
const handleDayChange = (day) => {
|
|
22
|
+
const numericValue = filterNonNumeric(day);
|
|
23
|
+
if (numericValue.length > 2)
|
|
24
|
+
return;
|
|
25
|
+
onChange({
|
|
26
|
+
...value,
|
|
27
|
+
day: numericValue,
|
|
28
|
+
});
|
|
29
|
+
if (numericValue.length === 2) {
|
|
30
|
+
monthRef.current?.focus();
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const handleMonthChange = (month) => {
|
|
34
|
+
const numericValue = filterNonNumeric(month);
|
|
35
|
+
if (numericValue.length > 2)
|
|
36
|
+
return;
|
|
37
|
+
onChange({
|
|
38
|
+
...value,
|
|
39
|
+
month: numericValue,
|
|
40
|
+
});
|
|
41
|
+
if (numericValue.length === 2) {
|
|
42
|
+
yearRef.current?.focus();
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
const handleYearChange = (year) => {
|
|
46
|
+
const numericValue = filterNonNumeric(year);
|
|
47
|
+
if (numericValue.length > 4)
|
|
48
|
+
return;
|
|
49
|
+
onChange({
|
|
50
|
+
...value,
|
|
51
|
+
year: numericValue,
|
|
52
|
+
});
|
|
53
|
+
};
|
|
18
54
|
return (React.createElement(Fieldset, { label: label, assistiveText: assistiveText, completed: showCompleted && Boolean(value.day && value.month && value.year), error: Boolean(hookformError), errorMsg: hookformError?.message, "data-testid": dataTestId },
|
|
19
55
|
React.createElement(Box, { flex: true, gap: "16px" },
|
|
20
|
-
React.createElement(SetWidthTextInput, { ref: ref, label: "day", autoCompleteAttr: "bday-day", inputModeAttr: "numeric", "$width": 60, value: value.day || '', placeholder: "", onChange: (day)
|
|
21
|
-
onChange({
|
|
22
|
-
...value,
|
|
23
|
-
day,
|
|
24
|
-
});
|
|
25
|
-
}, error: Boolean(hookformError?.type?.includes('day') ||
|
|
56
|
+
React.createElement(SetWidthTextInput, { ref: ref, label: "day", autoCompleteAttr: "bday-day", inputModeAttr: "numeric", "$width": 60, value: value.day || '', placeholder: "", onChange: handleDayChange, error: Boolean(hookformError?.type?.includes('day') ||
|
|
26
57
|
(hookformError?.type &&
|
|
27
58
|
inputValidationErrorValues.includes(hookformError.type))) }),
|
|
28
|
-
React.createElement(SetWidthTextInput, { label: "month", autoCompleteAttr: "bday-month", inputModeAttr: "numeric", "$width": 60, value: value.month || '', placeholder: "", onChange: (month)
|
|
29
|
-
onChange({
|
|
30
|
-
...value,
|
|
31
|
-
month,
|
|
32
|
-
});
|
|
33
|
-
}, error: Boolean(hookformError?.type?.includes('month') ||
|
|
59
|
+
React.createElement(SetWidthTextInput, { ref: monthRef, label: "month", autoCompleteAttr: "bday-month", inputModeAttr: "numeric", "$width": 60, value: value.month || '', placeholder: "", onChange: handleMonthChange, error: Boolean(hookformError?.type?.includes('month') ||
|
|
34
60
|
(hookformError?.type &&
|
|
35
61
|
inputValidationErrorValues.includes(hookformError.type))) }),
|
|
36
|
-
React.createElement(SetWidthTextInput, { label: "year", autoCompleteAttr: "bday-year", inputModeAttr: "numeric", "$width": 80, value: value.year || '', placeholder: "", onChange: (year)
|
|
37
|
-
onChange({
|
|
38
|
-
...value,
|
|
39
|
-
year,
|
|
40
|
-
});
|
|
41
|
-
}, error: Boolean(hookformError?.type?.includes('year') ||
|
|
62
|
+
React.createElement(SetWidthTextInput, { ref: yearRef, label: "year", autoCompleteAttr: "bday-year", inputModeAttr: "numeric", "$width": 80, value: value.year || '', placeholder: "", onChange: handleYearChange, error: Boolean(hookformError?.type?.includes('year') ||
|
|
42
63
|
(hookformError?.type &&
|
|
43
64
|
inputValidationErrorValues.includes(hookformError.type))) }))));
|
|
44
65
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextDateOfBirthInput.js","sourceRoot":"","sources":["../../src/TextDateOfBirthInput/TextDateOfBirthInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"TextDateOfBirthInput.js","sourceRoot":"","sources":["../../src/TextDateOfBirthInput/TextDateOfBirthInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useRef } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Fieldset, FieldsetProps } from '../fields/Fieldset'\nimport { TextInput } from '../TextInput'\nimport { InputValidationError } from '../utils/dateOfBirth/schema'\n\nexport type DateObject = {\n day?: string | null\n month?: string | null\n year?: string | null\n}\n\nexport type TextDateOfBirthInputProps = {\n value: DateObject\n onChange: (value: DateObject) => void\n showCompleted?: boolean\n hookformError?: {\n type: string\n message?: string\n }\n dataTestId?: string\n} & Pick<FieldsetProps, 'label' | 'assistiveText'>\n\n/**\n * Renders a set of input fields to collect a date of birth as separate day, month,\n * and year fields.\n *\n * ### Date of birth input validations\n * - All fields are present and correctly formatted.\n * - The age is at least 17 years old.\n * - The year is not before 1900.\n */\nexport const TextDateOfBirthInput = forwardRef<\n HTMLInputElement,\n TextDateOfBirthInputProps\n>(function TextDateOfBirthInput(\n {\n onChange,\n value,\n label,\n assistiveText,\n hookformError,\n showCompleted = false,\n dataTestId,\n },\n ref,\n) {\n const inputValidationErrorValues = Object.values(InputValidationError)\n const monthRef = useRef<HTMLInputElement>(null)\n const yearRef = useRef<HTMLInputElement>(null)\n\n const filterNonNumeric = (value: string) => value.replace(/[^0-9]/g, '')\n\n const handleDayChange = (day: string) => {\n const numericValue = filterNonNumeric(day)\n\n if (numericValue.length > 2) return\n\n onChange({\n ...value,\n day: numericValue,\n })\n if (numericValue.length === 2) {\n monthRef.current?.focus()\n }\n }\n\n const handleMonthChange = (month: string) => {\n const numericValue = filterNonNumeric(month)\n\n if (numericValue.length > 2) return\n\n onChange({\n ...value,\n month: numericValue,\n })\n if (numericValue.length === 2) {\n yearRef.current?.focus()\n }\n }\n\n const handleYearChange = (year: string) => {\n const numericValue = filterNonNumeric(year)\n\n if (numericValue.length > 4) return\n\n onChange({\n ...value,\n year: numericValue,\n })\n }\n\n return (\n <Fieldset\n label={label}\n assistiveText={assistiveText}\n completed={\n showCompleted && Boolean(value.day && value.month && value.year)\n }\n error={Boolean(hookformError)}\n errorMsg={hookformError?.message}\n data-testid={dataTestId}\n >\n <Box flex gap=\"16px\">\n <SetWidthTextInput\n ref={ref}\n label=\"day\"\n autoCompleteAttr=\"bday-day\"\n inputModeAttr=\"numeric\"\n $width={60}\n value={value.day || ''}\n placeholder=\"\"\n onChange={handleDayChange}\n error={Boolean(\n hookformError?.type?.includes('day') ||\n (hookformError?.type &&\n inputValidationErrorValues.includes(\n hookformError.type as InputValidationError,\n )),\n )}\n />\n <SetWidthTextInput\n ref={monthRef}\n label=\"month\"\n autoCompleteAttr=\"bday-month\"\n inputModeAttr=\"numeric\"\n $width={60}\n value={value.month || ''}\n placeholder=\"\"\n onChange={handleMonthChange}\n error={Boolean(\n hookformError?.type?.includes('month') ||\n (hookformError?.type &&\n inputValidationErrorValues.includes(\n hookformError.type as InputValidationError,\n )),\n )}\n />\n <SetWidthTextInput\n ref={yearRef}\n label=\"year\"\n autoCompleteAttr=\"bday-year\"\n inputModeAttr=\"numeric\"\n $width={80}\n value={value.year || ''}\n placeholder=\"\"\n onChange={handleYearChange}\n error={Boolean(\n hookformError?.type?.includes('year') ||\n (hookformError?.type &&\n inputValidationErrorValues.includes(\n hookformError.type as InputValidationError,\n )),\n )}\n />\n </Box>\n </Fieldset>\n )\n})\n\nconst SetWidthTextInput = styled(TextInput)<{ $width: number }>`\n width: ${({ $width }) => `${$width}px`};\n`\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "12.10.
|
|
3
|
+
"version": "12.10.1",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"@testing-library/react": "^16.3.0",
|
|
52
52
|
"@types/body-scroll-lock": "^3.1.0",
|
|
53
53
|
"@types/dompurify": "^3.2.0",
|
|
54
|
-
"@types/node": "^
|
|
54
|
+
"@types/node": "^24.0.3",
|
|
55
55
|
"@types/react": "^19.1.8",
|
|
56
56
|
"@types/react-dom": "^19.1.6",
|
|
57
57
|
"@typescript-eslint/eslint-plugin": "^8.34.1",
|