Move the component-prefixing function call to the class constructor. #178 (#179)

Author: jansiegel

src/helpers.tsx

@@ -189,20 +189,22 @@ export function getContainerAttributesProps(props, randomizeId: boolean = true):
 /**
  * Add the `UNSAFE_` prefixes to the deprecated lifecycle methods for React >= 16.3.
  *
- * @param {Function} Klass Class to have the methods renamed.
- * @returns {Function} Class with the renamed methods.
+ * @param {Object} instance Instance to have the methods renamed.
  */
-export function addUnsafePrefixes<T extends any>(Klass: T): T {
+export function addUnsafePrefixes(instance: {
+  UNSAFE_componentWillUpdate?: Function,
+  componentWillUpdate: Function,
+  UNSAFE_componentWillMount?: Function,
+  componentWillMount: Function
+}): void {
   const reactSemverArray = React.version.split('.').map((v) => parseInt(v));
   const shouldPrefix = reactSemverArray[0] >= 16 && reactSemverArray[1] >= 3;
 
   if (shouldPrefix) {
-    Klass.prototype.UNSAFE_componentWillUpdate = Klass.prototype.componentWillUpdate;
-    delete Klass.prototype.componentWillUpdate;
+    instance.UNSAFE_componentWillUpdate = instance.componentWillUpdate;
+    instance.componentWillUpdate = void 0;
 
-    Klass.prototype.UNSAFE_componentWillMount = Klass.prototype.componentWillMount;
-    delete Klass.prototype.componentWillMount;
+    instance.UNSAFE_componentWillMount = instance.componentWillMount;
+    instance.componentWillMount = void 0;
   }
-
-  return Klass;
 }

src/hotColumn.tsx

@@ -1,6 +1,10 @@
 import React, { ReactPortal } from 'react';
 import { HotTableProps, HotColumnProps } from './types';
-import { addUnsafePrefixes, createEditorPortal, getExtendedEditorElement } from './helpers';
+import {
+  addUnsafePrefixes,
+  createEditorPortal,
+  getExtendedEditorElement
+} from './helpers';
 import { SettingsMapper } from './settingsMapper';
 import Handsontable from 'handsontable';
 
@@ -16,6 +20,18 @@ class HotColumn extends React.Component<HotColumnProps, {}> {
    */
   private localEditorPortal: ReactPortal = null;
 
+  /**
+   * HotColumn class constructor.
+   *
+   * @param {HotColumnProps} props Component props.
+   * @param {*} [context] Component context.
+   */
+  constructor(props: HotColumnProps, context?: any) {
+    super(props, context);
+
+    addUnsafePrefixes(this);
+  }
+
   /**
    * Get the local editor portal cache property.
    *
@@ -175,5 +191,4 @@ class HotColumn extends React.Component<HotColumnProps, {}> {
   }
 }
 
-const PrefixedHotColumn = addUnsafePrefixes(HotColumn);
-export { PrefixedHotColumn as HotColumn };
+export { HotColumn };

src/hotTable.tsx

@@ -128,6 +128,18 @@ class HotTable extends React.Component<HotTableProps, {}> {
    */
   private componentRendererColumns: Map<number | string, boolean> = new Map();
 
+  /**
+   * HotTable class constructor.
+   *
+   * @param {HotTableProps} props Component props.
+   * @param {*} [context] Component context.
+   */
+  constructor(props: HotTableProps, context?: any) {
+    super(props, context);
+
+    addUnsafePrefixes(this);
+  }
+
   /**
    * Package version getter.
    *
@@ -553,6 +565,5 @@ class HotTable extends React.Component<HotTableProps, {}> {
   }
 }
 
-const PrefixedHotTable = addUnsafePrefixes(HotTable);
-export default PrefixedHotTable;
-export { PrefixedHotTable as HotTable };
+export default HotTable;
+export { HotTable };

test/_helpers.tsx

@@ -52,6 +52,8 @@ class IndividualPropsWrapper extends React.Component<{ref?: string, id?: string}
 
   constructor(props) {
     super(props);
+
+    addUnsafePrefixes(this);
   }
 
   componentWillMount() {
@@ -76,14 +78,16 @@ class IndividualPropsWrapper extends React.Component<{ref?: string, id?: string}
     );
   }
 }
-const PrefixedIPW = addUnsafePrefixes(IndividualPropsWrapper);
-export { PrefixedIPW as IndividualPropsWrapper };
+
+export { IndividualPropsWrapper };
 
 class SingleObjectWrapper extends React.Component<{ref?: string, id?: string}, {hotSettings?: object}> {
   hotTable: typeof HotTable;
 
   constructor(props) {
     super(props);
+
+    addUnsafePrefixes(this);
   }
 
   private setHotElementRef(component: typeof HotTable): void {
@@ -110,8 +114,7 @@ class SingleObjectWrapper extends React.Component<{ref?: string, id?: string}, {
   }
 }
 
-const PrefixedSOW = addUnsafePrefixes(SingleObjectWrapper);
-export { PrefixedSOW as SingleObjectWrapper };
+export { SingleObjectWrapper };
 
 export class RendererComponent extends React.Component<any, any> {
   render(): React.ReactElement<string> {