From 30c335b0c0de4a99bfc38477b44f775eefccfe4f Mon Sep 17 00:00:00 2001 From: coder966 Date: Sat, 2 Nov 2024 14:34:45 +0300 Subject: [PATCH 1/7] storybook: added a story for field name --- stories/Form.RruForm.stories.tsx | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/stories/Form.RruForm.stories.tsx b/stories/Form.RruForm.stories.tsx index 5102ab5..8f2f14c 100644 --- a/stories/Form.RruForm.stories.tsx +++ b/stories/Form.RruForm.stories.tsx @@ -27,8 +27,8 @@ import { RruMultiSelectInput, RruRadioInput, RruSelectInput, - RruTextInput, RruTextareaInput, + RruTextInput, useRruForm, } from '../src/index'; import animalsOptions from './data/animalsOptions'; @@ -533,3 +533,27 @@ export const SetValueProgrammaticallyAllTypes = (args) => { ); }; + +export const ValidateFieldNames = (args) => { + const rruFormContext = useRruForm(); + + const onSubmit = (form) => { + action('submitting the form')(form); + }; + + return ( + + + + + + + + + + ); +}; From d94e667e2df71c4a0ccc14690eeb38895df2795a Mon Sep 17 00:00:00 2001 From: coder966 Date: Sat, 2 Nov 2024 14:35:40 +0300 Subject: [PATCH 2/7] RruForm: fixed console error message regarding field name containing digit --- src/form/hooks/useField.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/form/hooks/useField.ts b/src/form/hooks/useField.ts index ab375c5..7446286 100644 --- a/src/form/hooks/useField.ts +++ b/src/form/hooks/useField.ts @@ -29,7 +29,7 @@ export const useField = (name: string, onProgrammaticValue?: (serializedValue: a const [isTouched, setIsTouched] = useState(false); const watchResult = useWatch({ name: name }); - if (name && name.split('.').filter((p) => /\d+/.test(p)).length > 0) { + if (name && name.split('.').filter((p) => /^\d+$/.test(p)).length > 0) { console.error( `Field name "${name}" cannot include a numeric part. Try to prefix the numeric part with some string.` ); From c92a7d23b215c3e7500287eb0d597b022385a145 Mon Sep 17 00:00:00 2001 From: coder966 Date: Sat, 2 Nov 2024 14:37:38 +0300 Subject: [PATCH 3/7] RruForm: feat: only validate field name on registering --- src/form/hooks/useField.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/form/hooks/useField.ts b/src/form/hooks/useField.ts index 7446286..9707364 100644 --- a/src/form/hooks/useField.ts +++ b/src/form/hooks/useField.ts @@ -29,12 +29,6 @@ export const useField = (name: string, onProgrammaticValue?: (serializedValue: a const [isTouched, setIsTouched] = useState(false); const watchResult = useWatch({ name: name }); - if (name && name.split('.').filter((p) => /^\d+$/.test(p)).length > 0) { - console.error( - `Field name "${name}" cannot include a numeric part. Try to prefix the numeric part with some string.` - ); - } - useEffect(() => { if (isRegistered.current && onProgrammaticValue) { onProgrammaticValue(watchResult); @@ -47,6 +41,12 @@ export const useField = (name: string, onProgrammaticValue?: (serializedValue: a return; } + if (name && name.split('.').filter((p) => /^\d+$/.test(p)).length > 0) { + console.error( + `Field name "${name}" cannot include a numeric part. Try to prefix the numeric part with some string.` + ); + } + const initialValue = formContext.formState.defaultValues ? resolveObjectAttribute(name, formContext.formState.defaultValues) : undefined; From c44e201242b215482aaaada60b4dc7ef7e39e8b7 Mon Sep 17 00:00:00 2001 From: coder966 Date: Sat, 2 Nov 2024 14:39:38 +0300 Subject: [PATCH 4/7] RruForm: feat: jsdoc --- src/form/hooks/useField.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/form/hooks/useField.ts b/src/form/hooks/useField.ts index 9707364..1242e2b 100644 --- a/src/form/hooks/useField.ts +++ b/src/form/hooks/useField.ts @@ -19,6 +19,7 @@ import { useFormContext, useFormState, useWatch } from 'react-hook-form'; import { resolveObjectAttribute } from '../../utils/utils'; /** + * @param name field name * @param onProgrammaticValue Should check if the provided serialized value does not * match the current deserialized value before updating the formContext, otherwise you would end up in an infinite re-render */ From a49a5c7f19a2d002de762325da558c3b551b01e2 Mon Sep 17 00:00:00 2001 From: coder966 Date: Sun, 27 Apr 2025 23:10:47 +0300 Subject: [PATCH 5/7] RruDateTimeInput: fix validation would trigger even before touching the field --- src/form/RruDateTimeInput/RruDateTimeInput.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/form/RruDateTimeInput/RruDateTimeInput.tsx b/src/form/RruDateTimeInput/RruDateTimeInput.tsx index 7f051cd..6a7e678 100644 --- a/src/form/RruDateTimeInput/RruDateTimeInput.tsx +++ b/src/form/RruDateTimeInput/RruDateTimeInput.tsx @@ -50,7 +50,7 @@ const RruDateTimeInput: FC = (props) => { const popupRef = useDetectClickOutside({ onTriggered: (e) => { if (e.target != inputRef.current) { - closePopup(); + setIsPopupShown(false); } }, }); @@ -79,11 +79,6 @@ const RruDateTimeInput: FC = (props) => { } }; - const closePopup = () => { - setIsPopupShown(false); - field.onBlur(); - }; - const previousMonth = () => { if (month === 1) { setYear(year - 1); @@ -107,7 +102,8 @@ const RruDateTimeInput: FC = (props) => { return; } else { setIntlDate(date); - closePopup(); + setIsPopupShown(false); + field.onBlur(); } }; @@ -168,7 +164,7 @@ const RruDateTimeInput: FC = (props) => { onIntegerInputChange(matches[6], 0, 59, setMinute); onIntegerInputChange(matches[7], 0, 59, setSecond); } - }else{ + } else { setYear(today.getYear(getCalendarType())); setMonth(today.getMonth(getCalendarType())); } From 00fa4d8b621c17e270134b3f8654e296f7f6d8bd Mon Sep 17 00:00:00 2001 From: coder966 Date: Sun, 27 Apr 2025 23:19:59 +0300 Subject: [PATCH 6/7] v2.4.2 changelog --- CHANGELOG.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3edf5ea..5bf2987 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,16 @@ Pre-release versions will not be mentioned here. +## [2.4.2] - 2025-04-27 + +### Fixed + +- `RruDateTimeInput`: Fixed validation would trigger even before touching the field. + +## Other + +- Internal enhancements. + ## [2.4.1] - 2024-11-02 ### Fixed From 7391c54281e2034429ba35d8e85e3a9ee315713e Mon Sep 17 00:00:00 2001 From: coder966 Date: Sun, 27 Apr 2025 23:20:02 +0300 Subject: [PATCH 7/7] v2.4.2 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 642d7d7..f9c42ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-rich-ui", - "version": "2.4.1", + "version": "2.4.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "react-rich-ui", - "version": "2.4.1", + "version": "2.4.2", "license": "Apache-2.0", "dependencies": { "@hookform/resolvers": "^2.9.11", diff --git a/package.json b/package.json index 91ad62f..1e4fe92 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-rich-ui", - "version": "2.4.1", + "version": "2.4.2", "description": "React UI framework with lots of built-in UI components (forms, data table, steps wizards, etc...)", "keywords": [ "React",