#2370 remove lots of unnecessary anonymous functions that trigger pro…

…ps update and re-renders
metasfresh · Oct 18, 2019 · 2c185c4 · 2c185c4
1 parent b230b71
commit 2c185c4
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 59 deletions.
diff --git a/src/components/table/Table.js b/src/components/table/Table.js
@@ -656,9 +656,15 @@ class Table extends Component {
     }
   };
 
-  handleClick = (e, keyProperty, item) => {
-    const { onSelectionChanged } = this.props;
+  handleClick = (e, item) => {
+    const {
+      onSelectionChanged,
+      openIncludedViewOnSelect,
+      showIncludedViewOnSelect,
+      keyProperty,
+    } = this.props;
     const id = item[keyProperty];
+    let selectionValue = false;
 
     if (e.button === 0) {
       const { selected } = this.state;
@@ -692,9 +698,20 @@ class Table extends Component {
         onSelectionChanged(newSelection);
       }
 
-      return newSelection.length > 0;
+      selectionValue = newSelection.length > 0;
+    }
+    selectionValue = true;
+
+    if (openIncludedViewOnSelect) {
+      showIncludedViewOnSelect({
+        showIncludedView: selectionValue && item.supportIncludedViews,
+        forceClose: !selectionValue,
+        windowType: item.supportIncludedViews
+          ? item.includedView.windowType || item.includedView.windowId
+          : null,
+        viewId: item.supportIncludedViews ? item.includedView.viewId : '',
+      });
     }
-    return true;
   };
 
   handleRightClick = (e, id, fieldName, supportZoomInto, supportFieldEdit) => {
@@ -959,8 +976,6 @@ class Table extends Component {
       entity,
       indentSupported,
       collapsible,
-      showIncludedViewOnSelect,
-      openIncludedViewOnSelect,
       viewId,
       supportOpenRecord,
     } = this.props;
@@ -998,6 +1013,7 @@ class Table extends Component {
           collapsible,
           viewId,
           supportOpenRecord,
+          item,
         }}
         dataKey={hash(item.fieldsByName)}
         key={`${i}-${viewId}`}
@@ -1012,32 +1028,12 @@ class Table extends Component {
             this.rowRefs[keyProp] = c.wrappedInstance;
           }
         }}
+        keyProperty={item[keyProperty]}
         rowId={item[keyProperty]}
         tabId={tabId}
         onDoubleClick={this.handleDoubleClick}
-        onClick={e => {
-          const selected = this.handleClick(e, keyProperty, item);
-
-          if (openIncludedViewOnSelect) {
-            showIncludedViewOnSelect({
-              showIncludedView: selected && item.supportIncludedViews,
-              forceClose: !selected,
-              windowType: item.supportIncludedViews
-                ? item.includedView.windowType || item.includedView.windowId
-                : null,
-              viewId: item.supportIncludedViews ? item.includedView.viewId : '',
-            });
-          }
-        }}
-        handleRightClick={(e, fieldName, supportZoomInto, supportFieldEdit) =>
-          this.handleRightClick(
-            e,
-            item[keyProperty],
-            fieldName,
-            !!supportZoomInto,
-            supportFieldEdit
-          )
-        }
+        onClick={this.handleClick}
+        handleRightClick={this.handleRightClick}
         changeListenOnTrue={() => this.changeListen(true)}
         changeListenOnFalse={() => this.changeListen(false)}
         newRow={i === rows.length - 1 ? newRow : false}

diff --git a/src/components/table/TableCell.js b/src/components/table/TableCell.js
@@ -170,6 +170,38 @@ class TableCell extends PureComponent {
     }
   };
 
+  handleKeyDown = e => {
+    const { handleKeyDown, property, widgetData } = this.props;
+
+    handleKeyDown(e, property, widgetData[0]);
+  };
+
+  handleRightClick = e => {
+    const {
+      handleRightClick,
+      property,
+      supportZoomInto,
+      supportFieldEdit,
+      keyProperty,
+    } = this.props;
+
+    handleRightClick(
+      e,
+      keyProperty,
+      property,
+      !!supportZoomInto,
+      supportFieldEdit
+    );
+  };
+
+  onDoubleClick = e => {
+    const { isEditable, property, widgetData, handleDoubleClick } = this.props;
+
+    if (isEditable) {
+      handleDoubleClick(e, property, true, widgetData[0]);
+    }
+  };
+
   render() {
     const {
       isEdited,
@@ -181,8 +213,6 @@ class TableCell extends PureComponent {
       rowId,
       tabId,
       property,
-      handleDoubleClick,
-      handleKeyDown,
       updatedRow,
       tabIndex,
       entity,
@@ -191,7 +221,6 @@ class TableCell extends PureComponent {
       listenOnKeysTrue,
       closeTableField,
       getSizeClass,
-      handleRightClick,
       mainTable,
       onCellChange,
       viewId,
@@ -259,9 +288,9 @@ class TableCell extends PureComponent {
       <td
         tabIndex={modalVisible ? -1 : tabIndex}
         ref={c => (this.cell = c)}
-        onDoubleClick={handleDoubleClick}
-        onKeyDown={handleKeyDown}
-        onContextMenu={handleRightClick}
+        onDoubleClick={this.onDoubleClick}
+        onKeyDown={this.handleKeyDown}
+        onContextMenu={this.handleRightClick}
         className={classnames(
           {
             [`text-${item.gridAlign}`]: item.gridAlign,

diff --git a/src/components/table/TableItem.js b/src/components/table/TableItem.js
@@ -218,6 +218,18 @@ class TableItem extends PureComponent {
     }
   };
 
+  handleClick = e => {
+    const { onClick, item } = this.props;
+
+    onClick(e, item);
+  };
+
+  handleClickOutside = e => {
+    const { changeListenOnTrue } = this.props;
+    this.handleEditProperty(e);
+    changeListenOnTrue();
+  };
+
   handleCellExtend = () => {
     this.setState({
       cellsExtended: !this.state.cellsExtended,
@@ -234,14 +246,14 @@ class TableItem extends PureComponent {
       tabId,
       mainTable,
       newRow,
-      changeListenOnTrue,
       tabIndex,
       entity,
       getSizeClass,
       handleRightClick,
       caption,
       colspan,
       viewId,
+      keyProperty,
       isSelected,
     } = this.props;
     const {
@@ -315,38 +327,26 @@ class TableItem extends PureComponent {
                   viewId,
                   extendLongText,
                   property,
+                  isEditable,
+                  supportZoomInto,
+                  supportFieldEdit,
+                  handleRightClick,
+                  keyProperty,
                 }}
                 cellExtended={cellsExtended}
                 key={`${rowId}-${property}`}
                 isRowSelected={isSelected}
                 isEdited={isEdited}
-                handleDoubleClick={e => {
-                  if (isEditable) {
-                    this.handleEditProperty(e, property, true, widgetData[0]);
-                  }
-                }}
-                onClickOutside={e => {
-                  this.handleEditProperty(e);
-                  changeListenOnTrue();
-                }}
+                handleDoubleClick={this.handleEditProperty}
+                onClickOutside={this.handleClickOutside}
                 onCellChange={this.onCellChange}
                 onCellExtend={this.handleCellExtend}
                 updatedRow={updatedRow || newRow}
                 updateRow={this.updateRow}
-                handleKeyDown={e =>
-                  this.handleKeyDown(e, property, widgetData[0])
-                }
+                handleKeyDown={this.handleKeyDown}
                 listenOnKeysTrue={this.listenOnKeysTrue}
                 listenOnKeysFalse={this.listenOnKeysFalse}
-                closeTableField={e => this.closeTableField(e)}
-                handleRightClick={e =>
-                  handleRightClick(
-                    e,
-                    property,
-                    supportZoomInto,
-                    supportFieldEdit
-                  )
-                }
+                closeTableField={this.closeTableField}
               />
             );
           }
@@ -482,7 +482,6 @@ class TableItem extends PureComponent {
     const {
       key,
       isSelected,
-      onClick,
       odd,
       indentSupported,
       indent,
@@ -498,7 +497,7 @@ class TableItem extends PureComponent {
       <WithMobileDoubleTap>
         <tr
           key={key}
-          onClick={onClick}
+          onClick={this.handleClick}
           onDoubleClick={this.handleDoubleClick}
           className={classnames({
             'row-selected': isSelected,