Merge pull request #14 from margual56/master

Added enterEdit callback and fixed onClick event precision
chungchiehlun · Feb 4, 2021 · 74dd097 · 74dd097
2 parents d9c3bb8 + 262d447
commit 74dd097
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -26,6 +26,7 @@ const CTE = require("react-click-to-edit");
 | inputClass   | string        | css class applied to the _input_                                                 |
 | textClass    | string        | css class applied to the _text_                                                  |
 | initialValue | string        | initial value of text                                                            |
+| startEditing | () => {}      | callback invoked when entering edit mode by clicking the text                    |
 | endEditing   | (value) => {} | callback invoked when leaving edit mode by clicking ENTER or ESC                 |
 
 [See elaborate examples](https://react-click-to-edit.web.app/docs-examples)

diff --git a/src/index.js b/src/index.js
@@ -7,8 +7,11 @@ const ClickToEdit = props => {
   const [isEditMode, setEditMode] = useState(false);
 
   const getIntoEditMode = () => {
+    if (props.startEditing && !isEditMode) {
+       props.startEditing();
+    }
     setEditMode(true);
-  };
+ };
 
   const getOffEditMode = () => {
     setEditMode(false);
@@ -36,7 +39,6 @@ const ClickToEdit = props => {
     <section
       data-value={value}
       className={classNames("CTE--wrapper", props.wrapperClass)}
-      onClick={getIntoEditMode}
     >
       {isEditMode ? (
         <input
@@ -50,7 +52,10 @@ const ClickToEdit = props => {
           size="1"
         />
       ) : (
-        <span className={classNames("CTE--text", props.textClass)}>
+        <span 
+          className={classNames("CTE--text", props.textClass)}
+          onClick={getIntoEditMode}
+        >
           {value}
         </span>
       )}