Refactor/inplace input (#541)

* wip

* Changed all other components

* Removed console log

* Console.log

* lint

* Removed internal state

* Fix

* Lint

front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldDate.tsx

@@ -0,0 +1,26 @@
+import { BoardCardEditableField } from '@/ui/board-card-field/components/BoardCardEditableField';
+import { InplaceInputDateDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputDateDisplayMode';
+
+import { BoardCardEditableFieldDateEditMode } from './BoardCardEditableFieldDateEditMode';
+
+type OwnProps = {
+  value: Date;
+  onChange: (newValue: Date) => void;
+  editModeHorizontalAlign?: 'left' | 'right';
+};
+
+export function BoardCardEditableFieldDate({
+  value,
+  onChange,
+  editModeHorizontalAlign,
+}: OwnProps) {
+  return (
+    <BoardCardEditableField
+      editModeHorizontalAlign={editModeHorizontalAlign}
+      editModeContent={
+        <BoardCardEditableFieldDateEditMode value={value} onChange={onChange} />
+      }
+      nonEditModeContent={<InplaceInputDateDisplayMode value={value} />}
+    ></BoardCardEditableField>
+  );
+}

front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldDateEditMode.tsx

@@ -0,0 +1,21 @@
+import { useBoardCardField } from '@/ui/board-card-field/hooks/useBoardCardField';
+import { InplaceInputDateEditMode } from '@/ui/inplace-inputs/components/InplaceInputDateEditMode';
+
+type OwnProps = {
+  value: Date;
+  onChange: (newValue: Date) => void;
+};
+
+export function BoardCardEditableFieldDateEditMode({
+  value,
+  onChange,
+}: OwnProps) {
+  const { closeBoardCardField } = useBoardCardField();
+
+  function handleDateChange(newDate: Date) {
+    onChange(newDate);
+    closeBoardCardField();
+  }
+
+  return <InplaceInputDateEditMode value={value} onChange={handleDateChange} />;
+}

front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldText.tsx

@@ -0,0 +1,38 @@
+import { ChangeEvent } from 'react';
+
+import { BoardCardEditableField } from '@/ui/board-card-field/components/BoardCardEditableField';
+import { InplaceInputTextDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputTextDisplayMode';
+import { InplaceInputTextEditMode } from '@/ui/inplace-inputs/components/InplaceInputTextEditMode';
+
+type OwnProps = {
+  placeholder?: string;
+  value: string;
+  onChange: (newValue: string) => void;
+  editModeHorizontalAlign?: 'left' | 'right';
+};
+
+export function BoardCardEditableFieldText({
+  value,
+  placeholder,
+  onChange,
+  editModeHorizontalAlign,
+}: OwnProps) {
+  return (
+    <BoardCardEditableField
+      editModeHorizontalAlign={editModeHorizontalAlign}
+      editModeContent={
+        <InplaceInputTextEditMode
+          placeholder={placeholder || ''}
+          autoFocus
+          value={value}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            onChange(event.target.value);
+          }}
+        />
+      }
+      nonEditModeContent={
+        <InplaceInputTextDisplayMode>{value}</InplaceInputTextDisplayMode>
+      }
+    ></BoardCardEditableField>
+  );
+}