Merge branch 'release/3.1.1'

Author: jansiegel

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@handsontable/react",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Best Data Grid for React with Spreadsheet Look and Feel.",
   "author": "Handsoncode <[email protected]> (https://handsoncode.net)",
   "homepage": "https://handsontable.com",

package.json

@@ -3,6 +3,12 @@ import ReactDOM from 'react-dom';
 
 let bulkComponentContainer = null;
 
+/**
+ * Warning message for the `autoRowSize`/`autoColumnSize` compatibility check.
+ */
+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.';
+
 /**
  * Filter out and return elements of the provided `type` from the `HotColumn` component's children.
  *

src/helpers.tsx

@@ -40,7 +40,7 @@ class HotColumn extends React.Component<HotColumnProps, {}> {
    * @returns {Object}
    */
   getSettingsProps(): HotTableProps {
-    this.internalProps = ['_emitColumnSettings', '_columnIndex', '_getChildElementByType', '_getRendererWrapper',
+    this.internalProps = ['__componentRendererColumns', '_emitColumnSettings', '_columnIndex', '_getChildElementByType', '_getRendererWrapper',
       '_getEditorClass', '_getEditorCache', 'hot-renderer', 'hot-editor', 'children'];
 
     return Object.keys(this.props)
@@ -84,6 +84,7 @@ class HotColumn extends React.Component<HotColumnProps, {}> {
 
     if (rendererElement !== null) {
       this.columnSettings.renderer = this.props._getRendererWrapper(rendererElement);
+      this.props._componentRendererColumns.set(this.props._columnIndex, true);
 
     } else if (this.hasProp('renderer')) {
       this.columnSettings.renderer = this.props.renderer;

src/hotColumn.tsx

@@ -6,6 +6,7 @@ import { HotColumn } from './hotColumn';
 import * as packageJson from '../package.json';
 import { HotTableProps } from './types';
 import {
+  AUTOSIZE_WARNING,
   createEditorPortal,
   createPortal,
   getChildElementByType,
@@ -14,6 +15,7 @@ import {
   addUnsafePrefixes,
   removeEditorContainers
 } from './helpers';
+import { warn } from 'handsontable/commonjs/helpers/console';
 
 /**
  * A Handsontable-ReactJS wrapper.
@@ -113,6 +115,15 @@ class HotTable extends React.Component<HotTableProps, {}> {
    */
   private editorCache: Map<string, React.Component> = new Map();
 
+  /**
+   * Map with column indexes (or a string = 'global') as keys, and booleans as values. Each key represents a component-based editor
+   * declared for the used column index, or a global one, if the key is the `global` string.
+   *
+   * @private
+   * @type {Map}
+   */
+  private componentRendererColumns: Map<number | string, boolean> = new Map();
+
   /**
    * Package version getter.
    *
@@ -169,6 +180,8 @@ class HotTable extends React.Component<HotTableProps, {}> {
     removeEditorContainers(this.hotElementRef ? this.hotElementRef.ownerDocument : document);
 
     renderedCellCache.clear();
+
+    this.componentRendererColumns.clear();
   }
 
   /**
@@ -336,14 +349,15 @@ class HotTable extends React.Component<HotTableProps, {}> {
       newSettings.editor = this.getEditorClass(globalEditorNode);
 
     } else {
-      newSettings.editor = this.props.editor || this.props.settings ? this.props.settings.editor : void 0;
+      newSettings.editor = this.props.editor || (this.props.settings ? this.props.settings.editor : void 0);
     }
 
     if (globalRendererNode) {
       newSettings.renderer = this.getRendererWrapper(globalRendererNode);
+      this.componentRendererColumns.set('global', true);
 
     } else {
-      newSettings.renderer = this.props.renderer || this.props.settings ? this.props.settings.renderer : void 0;
+      newSettings.renderer = this.props.renderer || (this.props.settings ? this.props.settings.renderer : void 0);
     }
 
     return newSettings;
@@ -356,32 +370,8 @@ class HotTable extends React.Component<HotTableProps, {}> {
    */
   displayAutoSizeWarning(newGlobalSettings: Handsontable.GridSettings): void {
     if (this.hotInstance.getPlugin('autoRowSize').enabled || this.hotInstance.getPlugin('autoColumnSize').enabled) {
-      const isNativeRenderer = (renderer, column?) => {
-        const standaloneColumnRenderer = this.props.columns && this.props.columns[column] ? this.props.columns[column].renderer : null;
-        const settingsObjectColumnRenderer = this.props.settings && this.props.settings.columns && this.props.settings.columns[column] ? this.props.settings.columns[column].renderer : null;
-
-        return column ?
-          standaloneColumnRenderer === renderer || settingsObjectColumnRenderer === renderer :
-          this.props.renderer === renderer || this.props.settings.renderer === renderer;
-      };
-      let rendererDefined = false;
-
-      if (newGlobalSettings.renderer && !isNativeRenderer(newGlobalSettings.renderer)) {
-        rendererDefined = true;
-      }
-
-      if (!rendererDefined && newGlobalSettings.columns) {
-        for (let i = 0; i < newGlobalSettings.columns.length; i++) {
-          if (newGlobalSettings.columns[i].renderer && !isNativeRenderer(newGlobalSettings.columns[i].renderer, i)) {
-            rendererDefined = true;
-            break;
-          }
-        }
-      }
-
-      if (rendererDefined) {
-        console.warn('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.');
+      if (this.componentRendererColumns.size > 0) {
+        warn(AUTOSIZE_WARNING);
       }
     }
   }
@@ -513,6 +503,7 @@ class HotTable extends React.Component<HotTableProps, {}> {
     // clone the HotColumn nodes and extend them with the callbacks
     let childClones = children.map((childNode: React.ReactElement, columnIndex: number) => {
       return React.cloneElement(childNode, {
+        _componentRendererColumns: this.componentRendererColumns,
         _emitColumnSettings: this.setHotColumnSettings.bind(this),
         _columnIndex: columnIndex,
         _getChildElementByType: getChildElementByType.bind(this),

src/hotTable.tsx

@@ -18,6 +18,7 @@ export interface HotTableProps extends Handsontable.GridSettings {
  * Properties related to the HotColumn architecture.
  */
 export interface HotColumnProps extends Handsontable.GridSettings {
+  _componentRendererColumns?: Map<number | string, boolean>;
   _emitColumnSettings?: (columnSettings: Handsontable.GridSettings, columnIndex: number) => void;
   _columnIndex?: number,
   _getChildElementByType?: (children: React.ReactNode, type: string) => React.ReactElement;

src/types.tsx

@@ -65,7 +65,13 @@ class IndividualPropsWrapper extends React.Component<{ref?: string, id?: string}
   render(): React.ReactElement {
     return (
       <div>
-        <HotTable licenseKey="non-commercial-and-evaluation" ref={this.setHotElementRef.bind(this)} id="hot" {...this.state.hotSettings} />
+        <HotTable
+          licenseKey="non-commercial-and-evaluation"
+          ref={this.setHotElementRef.bind(this)}
+          id="hot" {...this.state.hotSettings}
+          autoRowSize={false}
+          autoColumnSize={false}
+        />
       </div>
     );
   }
@@ -91,7 +97,14 @@ class SingleObjectWrapper extends React.Component<{ref?: string, id?: string}, {
   render(): React.ReactElement {
     return (
       <div>
-        <HotTable licenseKey="non-commercial-and-evaluation" ref={this.setHotElementRef.bind(this)} id="hot" settings={this.state.hotSettings}/>
+        <HotTable
+          licenseKey="non-commercial-and-evaluation"
+          ref={this.setHotElementRef.bind(this)}
+          id="hot"
+          settings={this.state.hotSettings}
+          autoRowSize={false}
+          autoColumnSize={false}
+        />
       </div>
     );
   }