Fix a problem with string minification breaking the editor components. (#172)

* - Change the editor cache key type from string (class constructor name, fails on minification) to the class constructor itself.
- Remove the default id for the editor container (breaking change!) in favor of a customizable option to pass 'id', 'className' and 'style' to the editor component. + extend one of the test cases to test it.
- Fix some typos and minor inconsistencies.
(#152)

* - Clean up some typings (which included adding @types/react-redux to devDependencies, thus recreating the package-lock)
- Fix the editor removal mechanism #152 �

* Post-CR changes:
- removed unneeded whitespace
- moved the common classname to a constant
- added react's runtime prop type checking for id, className and style
 (#152)

* Fix npm audit errors. #152

* - Add editor prop interface for className, id and style and utilize it in the BaseEditorComponent�
- Fix a problem with editor components in React's strict mode + development mode.
- Update the babel package with the latest minor versions to fix npm audit errors.
 #152

* Add a replacement string for 'process.env.NODE_EVN' (introduced with React's 'prop-types') in the umd and minified builds. #152

* - Add 'hot-editor' as a required editor prop
- post-cr corrections
 #152

Author: jansiegel

.config/minified.js

@@ -1,5 +1,6 @@
 import { baseConfig } from './base';
 import { addLicenseBanner } from './helpers/licenseBanner';
+import replace from 'rollup-plugin-replace';
 import { uglify } from 'rollup-plugin-uglify';
 
 const minFilename = 'react-handsontable.min.js';
@@ -19,6 +20,9 @@ const minConfig = {
     }
   },
   plugins: baseConfig.plugins.concat([
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
     uglify({
       output: {
         comments: /^!/

.config/umd.js

@@ -1,5 +1,6 @@
 import { addLicenseBanner } from './helpers/licenseBanner';
 import { baseConfig } from './base';
+import replace from 'rollup-plugin-replace';
 
 const env = process.env.NODE_ENV;
 const filename = 'react-handsontable.js';
@@ -18,7 +19,11 @@ const umdConfig = {
       handsontable: 'Handsontable'
     }
   },
-  plugins: baseConfig.plugins
+  plugins: baseConfig.plugins.concat([
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ])
 };
 
 addLicenseBanner(umdConfig);

package-lock.json

@@ -43,20 +43,21 @@
     "url": "https://github.com/handsontable/react-handsontable/issues"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/plugin-transform-runtime": "^7.3.4",
-    "@babel/polyfill": "^7.2.5",
-    "@babel/preset-env": "^7.3.4",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.3.3",
-    "@babel/runtime": "^7.3.4",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/polyfill": "^7.8.7",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.9.0",
+    "@babel/runtime": "^7.9.2",
     "@types/enzyme": "^3.1.15",
     "@types/enzyme-adapter-react-16": "^1.0.3",
     "@types/jest": "^24.0.9",
     "@types/react": "^16.9.5",
     "@types/react-dom": "^16.9.1",
+    "@types/react-redux": "^7.1.7",
     "babel-core": "^7.0.0-bridge.0",
     "cpy-cli": "^2.0.0",
     "cross-env": "^5.2.0",
@@ -65,7 +66,8 @@
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.4.0",
     "handsontable": "^7.2.2",
-    "jest": "^24.1.0",
+    "jest": "^25.1.0",
+    "prop-types": "^15.7.2",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-redux": "^7.1.1",
@@ -76,6 +78,7 @@
     "rollup-plugin-commonjs": "^10.0.1",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-typescript2": "^0.22.1",
     "rollup-plugin-uglify": "^6.0.4",
     "typescript": "^3.5.3",

package.json

@@ -1,7 +1,8 @@
 import React from 'react';
 import Handsontable from 'handsontable';
+import { HotEditorProps } from './types';
 
-class BaseEditorComponent<P = {}, S = {}, SS = any> extends React.Component<P, S, SS> implements Handsontable._editors.Base {
+class BaseEditorComponent<P = {}, S = {}, SS = any> extends React.Component<P | HotEditorProps, S> implements Handsontable._editors.Base {
   name = 'BaseEditorComponent';
   instance = null;
   row = null;
@@ -19,7 +20,7 @@ class BaseEditorComponent<P = {}, S = {}, SS = any> extends React.Component<P, S
     super(props);
 
     if (props.emitEditorInstance) {
-      props.emitEditorInstance(this.constructor.name, this);
+      props.emitEditorInstance(this);
     }
   }
 

src/baseEditorComponent.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { HotEditorElement } from './types';
 
 let bulkComponentContainer = null;
 
@@ -9,6 +10,11 @@ let bulkComponentContainer = null;
 export const AUTOSIZE_WARNING = 'Your `HotTable` configuration includes `autoRowSize`/`autoColumnSize` options, which are not compatible with ' +
   ' the component-based renderers`. Disable `autoRowSize` and `autoColumnSize` to prevent row and column misalignment.';
 
+/**
+ * Default classname given to the wrapper container.
+ */
+const DEFAULT_CLASSNAME = 'hot-wrapper-editor-container';
+
 /**
  * Logs warn to the console if the `console` object is exposed.
  *
@@ -47,26 +53,27 @@ export function getChildElementByType(children: React.ReactNode, type: string):
 }
 
 /**
- * Get the component node name.
+ * Get the reference to the original editor class.
  *
- * @param {React.ReactElement} componentNode
- * @returns {String} Provided component's name.
+ * @param {React.ReactElement} editorElement React element of the editor class.
+ * @returns {Function} Original class of the editor component.
  */
-export function getComponentNodeName(componentNode: React.ReactElement): string {
-  if (!componentNode) {
+export function getOriginalEditorClass(editorElement: HotEditorElement) {
+  if (!editorElement) {
     return null;
   }
 
-  return (componentNode.type as Function).name || ((componentNode.type as any).WrappedComponent as Function).name;
+  return editorElement.type.WrappedComponent ? editorElement.type.WrappedComponent : editorElement.type;
 }
 
 /**
  * Remove editor containers from DOM.
  *
- * @param [doc] Document to be used.
+ * @param {Document} [doc] Document to be used.
+ * @param {Map} editorCache The editor cache reference.
  */
 export function removeEditorContainers(doc = document): void {
-  doc.querySelectorAll('[id^="hot-wrapper-editor-container-"]').forEach((domNode) => {
+  doc.querySelectorAll(`[class^="${DEFAULT_CLASSNAME}"]`).forEach((domNode) => {
     if (domNode.parentNode) {
       domNode.parentNode.removeChild(domNode);
     }
@@ -76,23 +83,31 @@ export function removeEditorContainers(doc = document): void {
 /**
  * Create an editor portal.
  *
+ * @param {Document} [doc] Document to be used.
  * @param {React.ReactElement} editorElement Editor's element.
+ * @param {Map} editorCache The editor cache reference.
  * @returns {React.ReactPortal} The portal for the editor.
  */
-export function createEditorPortal(editorElement: React.ReactElement): React.ReactPortal {
+export function createEditorPortal(doc = document, editorElement: HotEditorElement, editorCache: Map<Function, React.Component>): React.ReactPortal {
   if (editorElement === null) {
     return;
   }
 
-  const componentName: string = getComponentNodeName(editorElement);
+  const editorContainer = doc.createElement('DIV');
+  const {id, className, style} = getContainerAttributesProps(editorElement.props, false);
 
-  let editorContainer = document.querySelector('#hot-wrapper-editor-container-' + componentName);
-  if (!document.querySelector('#hot-wrapper-editor-container-' + componentName)) {
-    editorContainer = document.createElement('DIV');
-    editorContainer.id = 'hot-wrapper-editor-container-' + componentName;
-    document.body.appendChild(editorContainer);
+  if (id) {
+    editorContainer.id = id;
   }
 
+  editorContainer.className = [DEFAULT_CLASSNAME, className].join(' ');
+
+  if (style) {
+    Object.assign(editorContainer.style, style);
+  }
+
+  doc.body.appendChild(editorContainer);
+
   return ReactDOM.createPortal(editorElement, editorContainer);
 }
 
@@ -103,21 +118,20 @@ export function createEditorPortal(editorElement: React.ReactElement): React.Rea
  * @param {Map} editorCache Component's editor cache.
  * @returns {React.ReactElement} An editor element containing the additional methods.
  */
-export function getExtendedEditorElement(children: React.ReactNode, editorCache: Map<string, object>): React.ReactElement | null {
+export function getExtendedEditorElement(children: React.ReactNode, editorCache: Map<Function, object>): React.ReactElement | null {
   const editorElement = getChildElementByType(children, 'hot-editor');
+  const editorClass = getOriginalEditorClass(editorElement);
 
   if (!editorElement) {
     return null;
   }
 
   return React.cloneElement(editorElement, {
-    emitEditorInstance: (editorName, editorInstance) => {
-      if (!editorCache.has(editorName)) {
-        editorCache.set(editorName, editorInstance);
-      }
+    emitEditorInstance: (editorInstance) => {
+      editorCache.set(editorClass, editorInstance);
     },
     isEditor: true
-  });
+  } as object);
 }
 
 /**
@@ -155,6 +169,23 @@ export function createPortal(rElement: React.ReactElement, props, callback: Func
   };
 }
 
+/**
+ * Get an object containing the `id`, `className` and `style` keys, representing the corresponding props passed to the
+ * component.
+ *
+ * @param {Object} props Object containing the react element props.
+ * @param {Boolean} randomizeId If set to `true`, the function will randomize the `id` property when no `id` was present in the `prop` object.
+ * @returns An object containing the `id`, `className` and `style` keys, representing the corresponding props passed to the
+ * component.
+ */
+export function getContainerAttributesProps(props, randomizeId: boolean = true): {id: string, className: string, style: object} {
+  return {
+    id: props.id || (randomizeId ? 'hot-' + Math.random().toString(36).substring(5) : void 0),
+    className: props.className || '',
+    style: props.style || {},
+  }
+}
+
 /**
  * Add the `UNSAFE_` prefixes to the deprecated lifecycle methods for React >= 16.3.
  *

src/helpers.tsx

@@ -41,7 +41,7 @@ class HotColumn extends React.Component<HotColumnProps, {}> {
    */
   getSettingsProps(): HotTableProps {
     this.internalProps = ['__componentRendererColumns', '_emitColumnSettings', '_columnIndex', '_getChildElementByType', '_getRendererWrapper',
-      '_getEditorClass', '_getEditorCache', 'hot-renderer', 'hot-editor', 'children'];
+      '_getEditorClass', '_getEditorCache', '_getOwnerDocument', 'hot-renderer', 'hot-editor', 'children'];
 
     return Object.keys(this.props)
       .filter(key => {
@@ -110,10 +110,11 @@ class HotColumn extends React.Component<HotColumnProps, {}> {
    * @param {React.ReactNode} [children] Children of the HotTable instance. Defaults to `this.props.children`.
    */
   createLocalEditorPortal(children = this.props.children): void {
-    const localEditorElement: React.ReactElement = getExtendedEditorElement(children, this.props._getEditorCache());
+    const editorCache = this.props._getEditorCache();
+    const localEditorElement: React.ReactElement = getExtendedEditorElement(children, editorCache);
 
     if (localEditorElement) {
-      this.setLocalEditorPortal(createEditorPortal(localEditorElement))
+      this.setLocalEditorPortal(createEditorPortal(this.props._getOwnerDocument(), localEditorElement, editorCache));
     }
   }