@digigov/form 2.0.0-e7d30530 → 2.0.0-eaf330f5

package/src/inputs/ImageInput/index.tsx

@@ -1,5 +1,4 @@
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { UseFormReturn } from 'react-hook-form';
+import React, { useState, useCallback } from 'react';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import { Button, ButtonGroup } from '@digigov/ui/form/Button';
 import { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';
@@ -8,7 +7,7 @@ import { Hint } from '@digigov/ui/typography/Hint';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 import { Base } from '@digigov/ui/utils/Base';
 export interface ImageProps {
-  src: string;
+  src?: any;
 }
 
 export interface Limit {
@@ -22,18 +21,6 @@ export interface Limit {
 export const Image: React.FC<ImageProps> = React.memo(function Image({ src }) {
   return <Base as="img" src={src} className="ds-image--ratio" />;
 });
-
-interface ImageInputDefaultValue {
-  filename: string;
-  src: string;
-}
-
-const blobToFileList = (blob: Blob, fileName: string): FileList => {
-  const file = new File([blob], fileName, { type: 'image/jpeg' });
-  const dataTransfer = new DataTransfer();
-  dataTransfer.items.add(file);
-  return dataTransfer.files;
-};
 export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra?: {
     className?: string;
@@ -42,40 +29,25 @@ export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
     limit?: Limit;
   };
   reset: (values?: any) => void;
-  resetField: UseFormReturn['resetField'];
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  defaultValue?: ImageInputDefaultValue | null;
-  value: any;
 }
 
 export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
-  function ImageInput(
-    { name, disabled, onChange, resetField, defaultValue, value, ...props },
-    ref: any
-  ) {
-    const imageRef = useRef(ref?.current);
+  function ImageInput({ name, disabled, onChange, reset, ...props }, ref: any) {
     const { t } = useTranslation();
-    const currentValue: ImageInputDefaultValue | null =
-      defaultValue || value || null;
-    const [selectedImage, setSelectedImage] = useState<
-      File | ImageInputDefaultValue | null
-    >(currentValue);
-    const [imageUrl, setImageUrl] = useState<string | null>(
-      currentValue?.src || null
-    );
-
+    const [selectedImage, setSelectedImage] = useState<File | null>(null);
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
     const handleImageChange = useCallback(
       (e: React.ChangeEvent<HTMLInputElement>) => {
         e.preventDefault();
         const target = e.target as HTMLInputElement;
         const selectedFile = target.files?.[0];
+
         if (selectedFile) {
           setSelectedImage(selectedFile);
           setImageUrl(URL.createObjectURL(selectedFile));
         }
-        onChange(
-          target.files as unknown as React.ChangeEvent<HTMLInputElement>
-        );
+        onChange(e);
       },
       [selectedImage]
     );
@@ -83,79 +55,55 @@ export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
     const handleDeleteImage = useCallback(
       (event) => {
         event.preventDefault();
-        resetField(name);
+        reset({ [name]: '' });
         setSelectedImage(null);
-        setImageUrl(null);
+        setImageUrl('');
       },
       [selectedImage]
     );
 
-    useEffect(() => {
-      // This is to fill the input with the default value (image)
-      if (defaultValue?.src && imageRef.current) {
-        fetch(defaultValue?.src)
-          .then((response) => response.blob())
-          .then((blob) => {
-            const fileList = blobToFileList(blob, defaultValue.filename);
-            imageRef.current.files = fileList;
-            const fileChangeEvent = new Event('change', { bubbles: true });
-            imageRef.current.dispatchEvent(fileChangeEvent);
-            return;
-          })
-          .catch((error) => console.error('Error fetching image:', error));
-      }
-    }, [defaultValue, imageRef]);
-
     return (
-      <FileUploadContainer>
-        {selectedImage !== null ? (
+      <>
+        <FileUploadContainer>
+          {selectedImage !== null ? (
+            <>
+              <Paragraph>
+                <Base as="b">{t('upload.image')}:</Base>{' '}
+                {`${selectedImage?.name}`}
+              </Paragraph>
+            </>
+          ) : (
+            <Hint className="ds-dashed--border">{t('upload.no_image')}</Hint>
+          )}
           <>
-            <Paragraph>
-              <Base as="b">{t('upload.image')}:</Base>{' '}
-              <em>
-                {`${(selectedImage as File)?.name || (selectedImage as ImageInputDefaultValue)?.filename}`}
-              </em>
-            </Paragraph>
-          </>
-        ) : (
-          <Hint className="ds-dashed--border">{t('upload.no_image')}</Hint>
-        )}
-        {imageUrl !== null && selectedImage !== null && (
-          <Image src={imageUrl} />
-        )}
-        {!disabled && (
-          <ButtonGroup marginTop={2}>
-            <FileUpload
-              ref={imageRef}
-              hasFiles={selectedImage !== null}
-              name={name}
-              id={name}
-              disabled={disabled}
-              accept="image/*"
-              onChange={handleImageChange}
-              {...{
-                ...(props as any),
-                required: undefined,
-                Field: undefined,
-                type: 'file',
-              }}
-            >
-              {selectedImage
-                ? t('upload.change_image')
-                : t('upload.choose_image')}
-            </FileUpload>
-            {selectedImage !== null && (
-              <Button
-                color="warning"
-                variant="link"
-                onClick={handleDeleteImage}
+            {selectedImage !== null && <Image src={imageUrl} />}
+            <ButtonGroup marginTop={2}>
+              {selectedImage !== null && (
+                <Button variant="link" onClick={handleDeleteImage}>
+                  {t('upload.reset_file')}
+                </Button>
+              )}
+              <FileUpload
+                ref={ref}
+                hasFiles={selectedImage !== null}
+                name={name}
+                id={name}
+                disabled={disabled}
+                accept="image/*"
+                onChange={handleImageChange}
+                {...{
+                  ...props,
+                  required: undefined,
+                  Field: undefined,
+                  type: 'file',
+                }}
               >
-                {t('upload.reset_file')}
-              </Button>
-            )}
-          </ButtonGroup>
-        )}
-      </FileUploadContainer>
+                {t('upload.choose_image')}
+              </FileUpload>
+            </ButtonGroup>
+          </>
+        </FileUploadContainer>
+      </>
     );
   }
 );

package/src/inputs/Input/Input.stories.js

@@ -1,10 +1,7 @@
 import Input from '@digigov/form/inputs/Input';
-import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/Input',
   component: Input,
-  tags: ['autodocs'],
-  markdown: doc,
   displayName: 'Input',
 };
 export { String } from '@digigov/form/inputs/Input/__stories__/String';
@@ -17,6 +14,5 @@ export { MobilePhone } from '@digigov/form/inputs/Input/__stories__/MobilePhone'
 export { AFM } from '@digigov/form/inputs/Input/__stories__/AFM';
 export { AMKA } from '@digigov/form/inputs/Input/__stories__/AMKA';
 export { IBAN } from '@digigov/form/inputs/Input/__stories__/IBAN';
-export { Email } from '@digigov/form/inputs/Input/__stories__/Email';
 export { PostalCode } from '@digigov/form/inputs/Input/__stories__/PostalCode';
 export { TextWithLimit } from '@digigov/form/inputs/Input/__stories__/TextWithLimit';

package/src/inputs/Input/__stories__/AFM.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const AFM = (_: any) => (
+export const AFM = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/Boolean.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Boolean = (_: any) => (
+export const Boolean = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/IBAN.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const IBAN = (_: any) => (
+export const IBAN = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/Integer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Integer = (_: any) => {
+export const Integer = () => {
   return (
     <FormBuilder
       onSubmit={(data) => {

package/src/inputs/Input/__stories__/LandlineNumber.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const LandlineNumber = (_: any) => (
+export const LandlineNumber = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/MobilePhone.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const MobilePhone = (_: any) => (
+export const MobilePhone = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/PhoneNumber.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const PhoneNumber = (_: any) => (
+export const PhoneNumber = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/PostalCode.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const PostalCode = (_: any) => (
+export const PostalCode = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/String.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const String = (_: any) => (
+export const String = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/StringWithTrimValidation.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const StringWithTrimValidation = (_: any) => (
+export const StringWithTrimValidation = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/TextWithLimit.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form';
 
-export const TextWithLimit = (_: any) => (
+export const TextWithLimit = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/index.test.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { AFM } from '@digigov/form/inputs/Input/__stories__/AFM';
-import { AMKA } from '@digigov/form/inputs/Input/__stories__/AMKA';
 import { Boolean } from '@digigov/form/inputs/Input/__stories__/Boolean';
-import { Email } from '@digigov/form/inputs/Input/__stories__/Email';
 import { IBAN } from '@digigov/form/inputs/Input/__stories__/IBAN';
 import { Integer } from '@digigov/form/inputs/Input/__stories__/Integer';
 import { LandlineNumber } from '@digigov/form/inputs/Input/__stories__/LandlineNumber';
@@ -22,15 +20,9 @@ test('renders the All Input variants', async ({ mount, page }) => {
     <TestVariant title="AFM">
       <AFM />
     </TestVariant>
-    <TestVariant title="AMKA">
-      <AMKA />
-    </TestVariant>
     <TestVariant title="Boolean">
       <Boolean />
     </TestVariant>
-    <TestVariant title="Email">
-      <Email />
-    </TestVariant>
     <TestVariant title="IBAN">
       <IBAN />
     </TestVariant>