fix: bug error occured when nested (#222)

.eslintrc

@@ -31,6 +31,7 @@
     "react/require-default-props": 0,
     "no-mixed-operators": 0,
     "react/jsx-filename-extension": 0,
+    "object-curly-newline": 0,
     "react/sort-comp": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "max-len": 0,

src/index.js

@@ -181,9 +181,9 @@ export default class Resizable extends React.Component<ResizableProps, State> {
   extendsProps: { [key: string]: any };
 
   static defaultProps = {
-    onResizeStart: () => { },
-    onResize: () => { },
-    onResizeStop: () => { },
+    onResizeStart: () => {},
+    onResize: () => {},
+    onResizeStop: () => {},
     enable: {
       top: true,
       right: true,
@@ -254,8 +254,7 @@ export default class Resizable extends React.Component<ResizableProps, State> {
   }
 
   getParentSize(): { width: number, height: number } {
-    const parent = this.parentNode;
-    const base = ((parent.querySelector(`.${baseClassName}`): any): HTMLDivElement);
+    const { base } = this;
     if (!base) return { width: window.innerWidth, height: window.innerHeight };
     // INFO: To calculate parent width with flex layout
     let wrapChanged = false;
@@ -286,7 +285,7 @@ export default class Resizable extends React.Component<ResizableProps, State> {
     });
     const parent = this.parentNode;
     if (!(parent instanceof HTMLElement)) return;
-    if (parent.querySelector(`.${baseClassName}`)) return;
+    if (this.base) return;
     const element = document.createElement('div');
     element.style.width = '100%';
     element.style.height = '100%';
@@ -314,13 +313,24 @@ export default class Resizable extends React.Component<ResizableProps, State> {
       window.removeEventListener('touchmove', this.onMouseMove);
       window.removeEventListener('touchend', this.onMouseUp);
       const parent = this.parentNode;
-      const base = (parent.querySelector(`.${baseClassName}`): any);
+      const { base } = this;
       if (!base || !parent) return;
       if (!(parent instanceof HTMLElement) || !(base instanceof Node)) return;
       parent.removeChild(base);
     }
   }
 
+  get base(): ?HTMLElement {
+    const parent = this.parentNode;
+    if (!parent) return undefined;
+    return [...parent.children].find((n: HTMLElement) => {
+      if (n instanceof HTMLElement) {
+        return n.classList.contains(baseClassName);
+      }
+      return undefined;
+    });
+  }
+
   calculateNewSize(newSize: number | string, kind: 'width' | 'height'): number | string {
     const propsSize = this.propsSize && this.propsSize[kind];
     return this.state[kind] === 'auto' &&
@@ -381,13 +391,9 @@ export default class Resizable extends React.Component<ResizableProps, State> {
     if (!this.state.isResizing) return;
     const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
     const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
-    const {
-      direction, original, width, height,
-    } = this.state;
+    const { direction, original, width, height } = this.state;
     const { lockAspectRatio, lockAspectRatioExtraHeight, lockAspectRatioExtraWidth } = this.props;
-    let {
-      maxWidth, maxHeight, minWidth, minHeight,
-    } = this.props;
+    let { maxWidth, maxHeight, minWidth, minHeight } = this.props;
 
     // TODO: refactor
     const parentSize = this.getParentSize();
@@ -555,8 +561,14 @@ export default class Resizable extends React.Component<ResizableProps, State> {
       }
       return getStringSize(this.state[key]);
     };
-    const width = size && typeof size.width !== 'undefined' && !this.state.isResizing ? getStringSize(size.width) : getSize('width');
-    const height = size && typeof size.height !== 'undefined' && !this.state.isResizing ? getStringSize(size.height) : getSize('height');
+    const width =
+      size && typeof size.width !== 'undefined' && !this.state.isResizing
+        ? getStringSize(size.width)
+        : getSize('width');
+    const height =
+      size && typeof size.height !== 'undefined' && !this.state.isResizing
+        ? getStringSize(size.height)
+        : getSize('height');
     return { width, height };
   }
 
@@ -565,9 +577,7 @@ export default class Resizable extends React.Component<ResizableProps, State> {
   }
 
   renderResizer(): React.Node {
-    const {
-      enable, handleStyles, handleClasses, handleWrapperStyle, handleWrapperClass, handleComponent,
-    } = this.props;
+    const { enable, handleStyles, handleClasses, handleWrapperStyle, handleWrapperClass, handleComponent } = this.props;
     if (!enable) return null;
     const resizers = Object.keys(enable).map((dir: Direction): React$Node => {
       if (enable[dir] !== false) {

stories/index.js

@@ -33,6 +33,8 @@ import HandleComponentBottomRight from './handle-component/bottom-right';
 import MultipleVertical from './multiple/vertical';
 import MultipleHorizontal from './multiple/horizontal';
 
+import Nested from './nested/nested';
+
 storiesOf('omit size', module)
   .add('auto.', () => <Auto />)
 
@@ -67,3 +69,6 @@ storiesOf('handleComponent', module)
 storiesOf('multiple', module)
   .add('vertical', () => <MultipleVertical />)
   .add('horizontal (with flex layout)', () => <MultipleHorizontal />);
+
+storiesOf('nested', module)
+  .add('nested', () => <Nested />)

stories/nested/nested.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Resizable from '../../src';
+
+const style = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: 'solid 1px #ddd',
+  background: '#f0f0f0',
+  padding: '10px',
+};
+
+export default () => (
+  <div style={{ width: '100%', height: '100%' }}>
+    <Resizable defaultSize={{ width: '80%', height: '80%' }} style={style}>
+      <Resizable defaultSize={{ width: '80%', height: '80%' }} style={style}>
+        Nested
+      </Resizable>
+    </Resizable>
+  </div>
+);