addition of HANDLE_EDITOR_FOCUS and HANDLE_EDITOR_BLUR methods per #98

Author: bencripps

README.MD

@@ -372,7 +372,9 @@ export const events = {
     HANDLE_AFTER_SELECT_ALL: () => {},
     HANDLE_AFTER_DESELECT_ALL: () => {},
     HANDLE_AFTER_ROW_DROP: () => {},
-    HANDLE_BEFORE_TREE_CHILD_CREATE: () => {}
+    HANDLE_BEFORE_TREE_CHILD_CREATE: () => {},
+    HANDLE_EDITOR_FOCUS: () => {},
+    HANDLE_EDITOR_BLUR: () => {}
 };
 ```
 

demo/demoData.js

@@ -50,6 +50,13 @@ export const events = {
     },
     HANDLE_AFTER_ROW_DROP: ({ treeData, row }) => {
         console.log('After drag and drop of row event');
+    },
+    HANDLE_EDITOR_FOCUS: (a) => {
+        console.log(a)
+        console.log('Handle editor focus');
+    },
+    HANDLE_EDITOR_BLUR: () => {
+        console.log('Handle editor blur');
     }
 };
 

src/components/layout/table-row/row/Cell.jsx

@@ -77,12 +77,8 @@ export const Cell = ({
             shouldNest ? 'tree-nested' : '',
             depth !== null ? `tree-node-depth-${depth}` : ''
         ),
-        onClick: (e) => {
-            return handleClick(cellClickArguments, e);
-        },
-        onDoubleClick: (e) => {
-            return handleDoubleClick(cellClickArguments, e);
-        },
+        onClick: (e) => handleClick(cellClickArguments, e),
+        onDoubleClick: (e) => handleDoubleClick(cellClickArguments, e),
         style: {}
     };
 
@@ -117,13 +113,14 @@ export const Cell = ({
 
     const cellHTML = getCellHTML(
         cellData,
+        columns,
         editorState,
+        events,
+        index,
         isEditable,
         isRowSelected,
-        columns,
-        index,
-        rowId,
         row,
+        rowId,
         stateKey,
         store
     );
@@ -144,13 +141,14 @@ export const Cell = ({
 
 export const getCellHTML = (
     cellData,
+    columns,
     editorState,
+    events,
+    index,
     isEditable,
     isRowSelected,
-    columns,
-    index,
-    rowId,
     row,
+    rowId,
     stateKey,
     store
 ) => {
@@ -161,6 +159,7 @@ export const getCellHTML = (
                 cellData={cellData}
                 columns={columns}
                 editorState={editorState}
+                events={events}
                 index={index}
                 isEditable={isEditable}
                 isRowSelected={isRowSelected}

src/components/layout/table-row/row/cell/Editor.jsx

@@ -2,12 +2,14 @@ import React, { PropTypes } from 'react';
 import { Input } from './Input';
 import { gridConfig } from './../../../../../constants/GridConstants';
 import { prefix } from './../../../../../util/prefix';
+import { fireEvent } from './../../../../../util/fire';
 import { nameFromDataIndex } from './../../../../../util/getData';
 
 export const Editor = ({
     cellData,
     columns,
     editorState,
+    events,
     rawValue,
     index,
     isEditable,
@@ -58,6 +60,26 @@ export const Editor = ({
         invalid ? CLASS_NAMES.EDITOR.INVALID : ''
     );
 
+    const onFocus = () => fireEvent(
+        'HANDLE_EDITOR_FOCUS',
+        events,
+        {
+            column: columns[index],
+            rowId,
+            editor: editorData
+        }
+    );
+
+    const onBlur = () => fireEvent(
+        'HANDLE_EDITOR_BLUR',
+        events,
+        {
+            column: columns[index],
+            rowId,
+            editor: editorData
+        }
+    );
+
     if (isEditable
         && columns[index]
         && columns[index].editor
@@ -73,6 +95,8 @@ export const Editor = ({
                 columns,
                 store,
                 rowId,
+                onFocus,
+                onBlur,
                 row: editorData && editorData.values && editorData.toJS
                     ? { ...row, ...cleanProps(editorData.values.toJS()) }
                     : { key: rowId, ...row },
@@ -104,6 +128,8 @@ export const Editor = ({
                     column={columns[index]}
                     columns={columns}
                     editorState={editorState}
+                    onBlur={onBlur}
+                    onFocus={onFocus}
                     rowId={rowId}
                     stateKey={stateKey}
                     store={store}
@@ -130,6 +156,7 @@ Editor.propTypes = {
     cellData: any,
     columns: array,
     editorState: object,
+    events: object,
     index: number,
     isEditable: bool,
     isRowSelected: bool,

src/components/layout/table-row/row/cell/Input.jsx

@@ -12,11 +12,21 @@ import {
     Editor
 } from './../../../../../records';
 
+const {
+    any,
+    array,
+    func,
+    object,
+    string
+} = PropTypes;
+
 export const Input = ({
     cellData,
     column,
     columns,
     editorState,
+    onBlur,
+    onFocus,
     rowId,
     stateKey,
     store
@@ -56,7 +66,9 @@ export const Input = ({
     return (
         <input
             disabled={disabled}
+            onBlur={onBlur}
             onChange={onChange}
+            onFocus={onFocus}
             placeholder={placeholder}
             type="text"
             value={value}
@@ -81,11 +93,13 @@ export const handleChange = (
 };
 
 Input.propTypes = {
-    cellData: PropTypes.any,
-    column: PropTypes.object,
-    columns: PropTypes.array,
-    editorState: PropTypes.object,
-    rowId: PropTypes.string,
-    stateKey: PropTypes.string,
-    store: PropTypes.object
+    cellData: any,
+    column: object,
+    columns: array,
+    editorState: object,
+    onBlur: func,
+    onFocus: func,
+    rowId: string,
+    stateKey: string,
+    store: object
 };