From b089b93e67e3e63ca3b8a41726ac7bf585c9c7ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eldar=20Dautovi=C4=87?=
 <49655828+eldardautovic@users.noreply.github.com>
Date: Thu, 21 Mar 2024 09:50:11 +0100
Subject: [PATCH] feat: modified DoubleTextInput to split First and Last name
 accordingly (#4598)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: modified DoubleTextInput to split First and Last name accordingly

* Fix Linter

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
---
 .../input/components/FullNameFieldInput.tsx   |  5 ++++
 .../input/components/DoubleTextInput.tsx      | 27 ++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/FullNameFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/FullNameFieldInput.tsx
index 77fa108e1..7756c1ef6 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/FullNameFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/FullNameFieldInput.tsx
@@ -66,6 +66,10 @@ export const FullNameFieldInput = ({
     setDraftValue(convertToFullName(newDoubleText));
   };
 
+  const handlePaste = (newDoubleText: FieldDoubleText) => {
+    setDraftValue(convertToFullName(newDoubleText));
+  };
+
   return (
     <FieldInputOverlay>
       <DoubleTextInput
@@ -82,6 +86,7 @@ export const FullNameFieldInput = ({
         onEscape={handleEscape}
         onShiftTab={handleShiftTab}
         onTab={handleTab}
+        onPaste={handlePaste}
         hotkeyScope={hotkeyScope}
         onChange={handleChange}
       />
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx
index 3a5b387aa..1ca95288f 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx
@@ -1,4 +1,10 @@
-import { ChangeEvent, useEffect, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  ClipboardEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import styled from '@emotion/styled';
 import { Key } from 'ts-key-enum';
 
@@ -39,6 +45,7 @@ type DoubleTextInputProps = {
     newDoubleTextValue: FieldDoubleText,
   ) => void;
   onChange?: (newDoubleTextValue: FieldDoubleText) => void;
+  onPaste?: (newDoubleTextValue: FieldDoubleText) => void;
 };
 
 export const DoubleTextInput = ({
@@ -53,6 +60,7 @@ export const DoubleTextInput = ({
   onShiftTab,
   onTab,
   onChange,
+  onPaste,
 }: DoubleTextInputProps) => {
   const [firstInternalValue, setFirstInternalValue] = useState(firstValue);
   const [secondInternalValue, setSecondInternalValue] = useState(secondValue);
@@ -150,6 +158,20 @@ export const DoubleTextInput = ({
     enabled: isDefined(onClickOutside),
   });
 
+  const handleOnPaste = (event: ClipboardEvent<HTMLInputElement>) => {
+    if (firstInternalValue.length > 0 || secondInternalValue.length > 0) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const name = event.clipboardData.getData('Text');
+
+    const splittedName = name.split(' ');
+
+    onPaste?.({ firstValue: splittedName[0], secondValue: splittedName[1] });
+  };
+
   return (
     <StyledContainer ref={containerRef}>
       <StyledInput
@@ -162,6 +184,9 @@ export const DoubleTextInput = ({
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           handleChange(event.target.value, secondInternalValue);
         }}
+        onPaste={(event: ClipboardEvent<HTMLInputElement>) =>
+          handleOnPaste(event)
+        }
       />
       <StyledInput
         autoComplete="off"