From 0ef85c3b03ed5427d3235ad5b4132803ecadd2f5 Mon Sep 17 00:00:00 2001
From: John <johndevor@gmail.com>
Date: Sat, 25 Jan 2025 11:05:57 -0500
Subject: [PATCH] Add option for EditText to edit on double click

---
 example/src/App.js   | 10 ++++++++++
 src/EditText.js      | 12 +++++++++++-
 src/EditText.test.js |  9 +++++++++
 src/propTypes.js     |  3 ++-
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/example/src/App.js b/example/src/App.js
index 36aa2a4..d4b2637 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -83,6 +83,11 @@ const App = () => {
                   editButtonProps={{ style: { marginLeft: '5px', width: 16 } }}
                   showEditButton
                 />
+                <EditText
+                  name='textbox4'
+                  defaultValue='Double click me to edit my text'
+                  editOnDoubleClick
+                />
                 <EditTextarea placeholder='I am an editable textarea' />
               </div>
             </div>
@@ -171,6 +176,11 @@ const App = () => {
             (default: false) are props that are passed to the edit button
             element. This can include any valid DOM attribute.
           </li>
+          <li>
+            <b>editOnDoubleClick</b> <sup className='new-badge'>NEW</sup>{' '}
+            (default: false) enables editing on double click instead of single
+            click.
+          </li>
         </ul>
         <p className='lead mb-0'>EditTextarea props</p>
         <ul>
diff --git a/src/EditText.js b/src/EditText.js
index a705ee1..c398971 100644
--- a/src/EditText.js
+++ b/src/EditText.js
@@ -24,7 +24,8 @@ export default function EditText({
   showEditButton = false,
   editButtonContent = <EditIcon />,
   editButtonProps = {},
-  inputClassName
+  inputClassName,
+  editOnDoubleClick = false
 }) {
   const inputRef = React.useRef(null);
   const [changeEvent, setChangeEvent] = React.useState({});
@@ -50,6 +51,14 @@ export default function EditText({
 
   const handleClickDisplay = () => {
     if (readonly || showEditButton) return;
+    if (editOnDoubleClick) return;
+    setEditMode(true);
+    onEditMode();
+  };
+
+  const handleDoubleClickDisplay = () => {
+    if (readonly || showEditButton) return;
+    if (!editOnDoubleClick) return;
     setEditMode(true);
     onEditMode();
   };
@@ -120,6 +129,7 @@ export default function EditText({
             className
           )}
           onClick={handleClickDisplay}
+          onDoubleClick={handleDoubleClickDisplay}
           style={style}
           aria-label='display component'
         >
diff --git a/src/EditText.test.js b/src/EditText.test.js
index a0c56b9..7af9aa9 100644
--- a/src/EditText.test.js
+++ b/src/EditText.test.js
@@ -16,6 +16,15 @@ test('clicking on the component should activate edit mode', async () => {
   expect(screen.queryByLabelText(displayComponentLabel)).toBeNull();
   expect(screen.queryByLabelText(inputComponentLabel)).toBeTruthy();
 });
+test('double clicking on the component should activate edit mode if editOnDoubleClick is true', async () => {
+  render(<EditText editOnDoubleClick />);
+  const div = await screen.findByLabelText(displayComponentLabel);
+  expect(div).toBeTruthy();
+  expect(screen.queryByLabelText(inputComponentLabel)).toBeNull();
+  await userEvent.dblClick(div);
+  expect(screen.queryByLabelText(displayComponentLabel)).toBeNull();
+  expect(screen.queryByLabelText(inputComponentLabel)).toBeTruthy();
+});
 test('pressing enter key should disable edit mode and trigger onSave', async () => {
   const handleSave = jest.fn();
   render(<EditText name='mockName' onSave={handleSave} />);
diff --git a/src/propTypes.js b/src/propTypes.js
index 5312bce..cad3fc5 100644
--- a/src/propTypes.js
+++ b/src/propTypes.js
@@ -23,7 +23,8 @@ export const EditTextPropTypes = {
   inline: PropTypes.bool,
   showEditButton: PropTypes.bool,
   editButtonContent: PropTypes.any,
-  editButtonProps: PropTypes.object
+  editButtonProps: PropTypes.object,
+  editOnDoubleClick: PropTypes.bool
 };
 
 export const EditTextareaPropTypes = {