TypeError and Warning on window resize.

[tsudmi]

Thank you for such an amazing library. It works great and is very easy to setup.

During window resize I receive following warning:

warning.js:36 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the GridItem component.
printWarning	                                        @ warning.js:36
warning	                                                @ warning.js:60
getInternalInstanceReadyForUpdate	@ ReactUpdateQueue.js:48
enqueueSetState	                                @ ReactUpdateQueue.js:200
ReactComponent.setState	                @ ReactComponent.js:63
(anonymous)	                                        @ GridItem.js:70

After the warning I get following TypeError:

Uncaught TypeError: Cannot read property 'componentDidLeave' of undefined
    at ReactTransitionGroup._this._handleDoneLeaving (ReactTransitionGroup.js:121)

[tsudmi]

This is the code I currently have:

/**
 *
 * Cards
 *
 */

import React from 'react';
import StackGrid, { transitions } from 'react-stack-grid';

import Card from '../Card';
import { OnDesktop, OnTablet, OnLargePhone, OnPhone } from '../Breakpoints';

const { scaleDown } = transitions;

const gridProps = {
  appear: scaleDown.appear,
  appeared: scaleDown.appeared,
  enter: scaleDown.enter,
  entered: scaleDown.entered,
  leaved: scaleDown.leaved,
  monitorImagesLoaded: true,
};

const desktopGridProps = {
  gutterWidth: 20,
  gutterHeight: 20,
  columnWidth: '33.33%',
  ...gridProps,
};

const tabletGridProps = {
  gutterWidth: 15,
  gutterHeight: 15,
  columnWidth: '48%',
  ...gridProps,
};

const largePhoneGridProps = {
  gutterWidth: 0,
  gutterHeight: 10,
  columnWidth: '80%',
  ...gridProps,
};

const phoneGridProps = {
  ...largePhoneGridProps,
  columnWidth: '100%',
};

export default class Cards extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
  render() {
    let cards = null;
    if (this.props.items) {
      cards = this.props.items.map((item) => <Card key={item.id} {...item} />);
    }

    return (
      <div>
        <OnDesktop
          component={StackGrid}
          style={{ marginTop: desktopGridProps.gutterHeight }}
          {...desktopGridProps}
        >
          {React.Children.toArray(cards)}
        </OnDesktop>
        <OnTablet
          component={StackGrid}
          style={{ marginTop: tabletGridProps.gutterHeight }}
          {...tabletGridProps}
        >
          {React.Children.toArray(cards)}
        </OnTablet>
        <OnLargePhone
          component={StackGrid}
          style={{ marginTop: largePhoneGridProps.gutterHeight }}
          {...largePhoneGridProps}
        >
          {React.Children.toArray(cards)}
        </OnLargePhone>
        <OnPhone
          component={StackGrid}
          style={{ marginTop: phoneGridProps.gutterHeight }}
          {...phoneGridProps}
        >
          {React.Children.toArray(cards)}
        </OnPhone>
      </div>
    );
  }
};

Cards.propTypes = {
  loading: React.PropTypes.bool,
  error: React.PropTypes.oneOfType([
    React.PropTypes.object,
    React.PropTypes.bool,
  ]),
  items: React.PropTypes.oneOfType([
    React.PropTypes.array,
    React.PropTypes.bool,
  ]),
  loadItems: React.PropTypes.func,
};

[wadackel]

Hi @tsudmi. Thanks for issues. and Sorry for my late reply.

There seems to be a bug in handling ReactTransitionGroup and others, so I would like to fix it.