added isDirty flag

Author: GrabowskiM

packages/components/src/formControls/InputText/InputText.stories.ts

@@ -19,6 +19,15 @@ const meta: Meta<typeof FormControlInputTextStateful> = {
         value: {
             control: 'text',
         },
+        onChange: {
+            control: false,
+        },
+        onValidate: {
+            control: false,
+        },
+        input: {
+            control: false,
+        },
     },
     args: {
         id: 'default-input',
@@ -79,4 +88,4 @@ export const Number: Story = {
             type: 'number',
         },
     },
-};
+};

packages/components/src/formControls/InputText/InputText.test.stories.ts

@@ -83,4 +83,4 @@ export const Required: Story = {
             await expect(input).toHaveAttribute('aria-invalid', 'true');
         });
     },
-};
+};

packages/components/src/formControls/InputText/InputText.tsx

@@ -1,14 +1,11 @@
-import React, { useContext, useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 
+import { useInitValidators, useValidateInput } from './InputText.utils';
 import BaseFormControl from '@ids-internal/partials/BaseFormControl';
 import InputText from '../../inputs/InputText';
-import IsEmptyStringValidator from '@ibexa/ids-core/validators/IsEmptyStringValidator';
-import { TranslatorContext } from '@ids-context/Translator';
-import { validateInput } from '@ids-internal/shared/validators';
 import withStateValue from '@ids-internal/hoc/withStateValue';
 
-import { FormControlInputTextProps } from './InputText.types';
-import { ValidationResult } from '@ibexa/ids-core/types/validation';
+import { FormControlInputTextProps, ValueType } from './InputText.types';
 
 const FormControlInputText = ({
     helperText,
@@ -22,21 +19,9 @@ const FormControlInputText = ({
     onValidate = () => undefined,
     value = '',
 }: FormControlInputTextProps) => {
-    const translator = useContext(TranslatorContext);
     const required = input.required ?? false;
-    const validators = useMemo(() => {
-        const validatorsList = [];
-
-        if (required) {
-            validatorsList.push(new IsEmptyStringValidator(translator));
-        }
-
-        return validatorsList;
-    }, [required, translator]);
-    const { isValid, messages } = useMemo<ValidationResult>(
-        () => validateInput<string | number>(value, validators),
-        [value, validators],
-    );
+    const validators = useInitValidators({ required });
+    const { isValid, messages } = useValidateInput({ validators, value });
     const helperTextProps = {
         children: isValid ? helperText : messages.join(', '),
         type: isValid ? ('default' as const) : ('error' as const),
@@ -71,4 +56,4 @@ const FormControlInputText = ({
 
 export default FormControlInputText;
 
-export const FormControlInputTextStateful = withStateValue<string | number>(FormControlInputText);
+export const FormControlInputTextStateful = withStateValue<ValueType>(FormControlInputText);

packages/components/src/formControls/InputText/InputText.types.ts

@@ -15,4 +15,8 @@ export interface FormControlInputTextProps extends BaseComponentAttributes {
     onChange?: BasicInputTextProps['onChange'];
     onValidate?: (isValid: boolean, messages: string[]) => void;
     value?: BasicInputTextProps['value'];
-}
+}
+
+export type OnChangeArgsType = Parameters<NonNullable<FormControlInputTextProps['onChange']>>;
+
+export type ValueType = NonNullable<FormControlInputTextProps['value']>;

packages/components/src/formControls/InputText/InputText.utils.ts

@@ -0,0 +1,45 @@
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+
+import BaseValidator from '@ibexa/ids-core/validators/BaseValidator';
+import IsEmptyStringValidator from '@ibexa/ids-core/validators/IsEmptyStringValidator';
+import { TranslatorContext } from '@ids-context/Translator';
+import { ValidationResult } from '@ibexa/ids-core/types/validation';
+import { validateInput } from '@ids-internal/shared/validators';
+
+import { ValueType } from './InputText.types';
+
+export const useInitValidators = ({ required }: { required: boolean }) => {
+    const translator = useContext(TranslatorContext);
+    const validators = useMemo(() => {
+        const validatorsList: BaseValidator<ValueType>[] = [];
+
+        if (required) {
+            validatorsList.push(new IsEmptyStringValidator(translator));
+        }
+
+        return validatorsList;
+    }, [required, translator]);
+
+    return validators;
+};
+
+export const useValidateInput = ({ validators, value }: { validators: BaseValidator<ValueType>[]; value: ValueType }): ValidationResult => {
+    const initialValue = useRef(value);
+    const [isDirty, setIsDirty] = useState(false);
+
+    useEffect(() => {
+        if (initialValue.current !== value) {
+            setIsDirty(true);
+        }
+
+        initialValue.current = value;
+    }, [value]);
+
+    return useMemo(() => {
+        if (!isDirty) {
+            return { isValid: true, messages: [] };
+        }
+
+        return validateInput<ValueType>(value, validators);
+    }, [initialValue.current, value, validators]);
+};

packages/components/src/formControls/InputText/index.ts

@@ -3,4 +3,4 @@ import { FormControlInputTextProps } from './InputText.types';
 
 export default FormControlInputText;
 export { FormControlInputTextStateful };
-export type { FormControlInputTextProps };
+export type { FormControlInputTextProps };