Refactor/display input part 2 (#1555)

* Email - Money - Number

* Date

front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx

@@ -1,13 +1,17 @@
 import { useContext } from 'react';
 import { useRecoilState } from 'recoil';
 
+import { DateInput } from '@/ui/input/components/DateInput';
+import { Nullable } from '~/types/Nullable';
+
 import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '../contexts/EditableFieldEntityIdContext';
+import { useFieldInputEventHandlers } from '../hooks/useFieldInputEventHandlers';
 import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
 import { genericEntityFieldFamilySelector } from '../states/selectors/genericEntityFieldFamilySelector';
+import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
 import { FieldDefinition } from '../types/FieldDefinition';
 import { FieldDateMetadata } from '../types/FieldMetadata';
-import { EditableFieldEditModeDate } from '../variants/components/EditableFieldEditModeDate';
 
 export function GenericEditableDateFieldEditMode() {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
@@ -27,7 +31,21 @@ export function GenericEditableDateFieldEditMode() {
 
   const updateField = useUpdateGenericEntityField();
 
-  function handleSubmit(newDateISO: string) {
+  function handleSubmit(newDate: Nullable<Date>) {
+    if (!newDate) {
+      setFieldValue('');
+
+      if (currentEditableFieldEntityId && updateField) {
+        updateField(
+          currentEditableFieldEntityId,
+          currentEditableFieldDefinition,
+          '',
+        );
+      }
+    }
+
+    const newDateISO = newDate?.toISOString();
+
     if (newDateISO === fieldValue || !newDateISO) return;
 
     setFieldValue(newDateISO);
@@ -41,7 +59,18 @@ export function GenericEditableDateFieldEditMode() {
     }
   }
 
+  const { handleEnter, handleEscape, handleClickOutside } =
+    useFieldInputEventHandlers({
+      onSubmit: handleSubmit,
+    });
+
   return (
-    <EditableFieldEditModeDate value={fieldValue} onChange={handleSubmit} />
+    <DateInput
+      hotkeyScope={EditableFieldHotkeyScope.EditableField}
+      onClickOutside={handleClickOutside}
+      onEnter={handleEnter}
+      onEscape={handleEscape}
+      value={fieldValue ? new Date(fieldValue) : null}
+    />
   );
 }