From 2538ad1c6ba5c019f466853343a7a8a134e97de5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Fri, 1 Sep 2023 11:25:19 +0200
Subject: [PATCH] fix: improve full name editable fields in Person Show page
 (#1390)

* fix: improve full name editable fields in Person Show page

+ autoresize inputs according to their content
+ use "Empty" as placeholder
+ improve hover style

Closes #910

* refactor: code review

- rename TemplateDimensionsEffect to ComputeNodeDimensionsEffect
---
 .../PeopleFullNameEditableField.tsx           |  4 +-
 .../components/DoubleTextInputEdit.tsx        | 58 ++++++++++++-------
 .../ComputeNodeDimensionsEffect.tsx           | 44 ++++++++++++++
 3 files changed, 83 insertions(+), 23 deletions(-)
 create mode 100644 front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensionsEffect.tsx

diff --git a/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx b/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx
index 004549592..69eb4b986 100644
--- a/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx
+++ b/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx
@@ -48,8 +48,8 @@ export function PeopleFullNameEditableField({ people }: OwnProps) {
   return (
     <RecoilScope SpecificContext={FieldRecoilScopeContext}>
       <DoubleTextInputEdit
-        firstValuePlaceholder={'F​irst n​ame'} // Hack: Fake character to prevent password-manager from filling the field
-        secondValuePlaceholder={'L​ast n​ame'} // Hack: Fake character to prevent password-manager from filling the field
+        firstValuePlaceholder="Empty"
+        secondValuePlaceholder="Empty"
         firstValue={internalValueFirstName ?? ''}
         secondValue={internalValueLastName ?? ''}
         onChange={handleChange}
diff --git a/front/src/modules/ui/input/double-text/components/DoubleTextInputEdit.tsx b/front/src/modules/ui/input/double-text/components/DoubleTextInputEdit.tsx
index fd3baa5eb..af0014ed2 100644
--- a/front/src/modules/ui/input/double-text/components/DoubleTextInputEdit.tsx
+++ b/front/src/modules/ui/input/double-text/components/DoubleTextInputEdit.tsx
@@ -2,6 +2,7 @@ import { ChangeEvent } from 'react';
 import styled from '@emotion/styled';
 
 import { StyledInput } from '@/ui/table/editable-cell/type/components/TextCellEdit';
+import { ComputeNodeDimensionsEffect } from '@/ui/utilities/dimensions/components/ComputeNodeDimensionsEffect';
 
 export type DoubleTextInputEditProps = {
   firstValue: string;
@@ -18,10 +19,17 @@ const StyledDoubleTextContainer = styled.div`
   text-align: center;
 `;
 
-const StyledNameInput = styled(StyledInput)`
+const StyledTextInput = styled(StyledInput)`
+  margin: 0 ${({ theme }) => theme.spacing(0.5)};
   padding: 0;
-  text-align: center;
-  width: auto;
+  width: ${({ width }) => (width ? `${width}px` : 'auto')};
+
+  &:hover:not(:focus) {
+    background-color: ${({ theme }) => theme.background.transparent.light};
+    border-radius: ${({ theme }) => theme.border.radius.sm};
+    cursor: pointer;
+    padding: 0 ${({ theme }) => theme.spacing(1)};
+  }
 `;
 
 export function DoubleTextInputEdit({
@@ -33,24 +41,32 @@ export function DoubleTextInputEdit({
 }: DoubleTextInputEditProps) {
   return (
     <StyledDoubleTextContainer>
-      <StyledNameInput
-        size={firstValue.length}
-        autoFocus
-        placeholder={firstValuePlaceholder}
-        value={firstValue}
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          onChange(event.target.value, secondValue);
-        }}
-      />
-      <StyledNameInput
-        size={secondValue.length}
-        autoComplete="off"
-        placeholder={secondValuePlaceholder}
-        value={secondValue}
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          onChange(firstValue, event.target.value);
-        }}
-      />
+      <ComputeNodeDimensionsEffect node={firstValue || firstValuePlaceholder}>
+        {(nodeDimensions) => (
+          <StyledTextInput
+            width={nodeDimensions?.width}
+            autoFocus
+            placeholder={firstValuePlaceholder}
+            value={firstValue}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              onChange(event.target.value, secondValue);
+            }}
+          />
+        )}
+      </ComputeNodeDimensionsEffect>
+      <ComputeNodeDimensionsEffect node={secondValue || secondValuePlaceholder}>
+        {(nodeDimensions) => (
+          <StyledTextInput
+            width={nodeDimensions?.width}
+            autoComplete="off"
+            placeholder={secondValuePlaceholder}
+            value={secondValue}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              onChange(firstValue, event.target.value);
+            }}
+          />
+        )}
+      </ComputeNodeDimensionsEffect>
     </StyledDoubleTextContainer>
   );
 }
diff --git a/front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensionsEffect.tsx b/front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensionsEffect.tsx
new file mode 100644
index 000000000..ac7bfb869
--- /dev/null
+++ b/front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensionsEffect.tsx
@@ -0,0 +1,44 @@
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+
+type ComputeNodeDimensionsEffectProps = {
+  children: (
+    dimensions: { height: number; width: number } | undefined,
+  ) => ReactNode;
+  node?: ReactNode;
+};
+
+const StyledNodeWrapper = styled.span`
+  pointer-events: none;
+  position: fixed;
+  visibility: hidden;
+`;
+
+export const ComputeNodeDimensionsEffect = ({
+  children,
+  node = children(undefined),
+}: ComputeNodeDimensionsEffectProps) => {
+  const nodeWrapperRef = useRef<HTMLSpanElement>(null);
+  const [nodeDimensions, setNodeDimensions] = useState<
+    | {
+        width: number;
+        height: number;
+      }
+    | undefined
+  >(undefined);
+
+  useEffect(() => {
+    nodeWrapperRef.current &&
+      setNodeDimensions({
+        width: nodeWrapperRef.current.offsetWidth,
+        height: nodeWrapperRef.current.offsetHeight,
+      });
+  }, [node]);
+
+  return (
+    <>
+      <StyledNodeWrapper ref={nodeWrapperRef}>{node}</StyledNodeWrapper>
+      {children(nodeDimensions)}
+    </>
+  );
+};