accounts-frontend/packages/app/components/ui/collapse/Collapse.tsx

import React, { Component } from 'react';
import { Motion, spring } from 'react-motion';
import MeasureHeight from 'app/components/MeasureHeight';

import styles from './collapse.scss';

interface Props {
  isOpened?: boolean;
  children: React.ReactNode;
  onRest: () => void;
}

interface State {
  isOpened?: boolean; // just to track value for derived updates
  height: number;
  wasInitialized: boolean;
}

export default class Collapse extends Component<Props, State> {
  state = {
    isOpened: this.props.isOpened,
    height: 0,
    wasInitialized: false,
  };

  static defaultProps: Partial<Props> = {
    onRest: () => {},
  };

  static getDerivedStateFromProps(props: Props, state: State) {
    if (props.isOpened !== state.isOpened && !state.wasInitialized) {
      return {
        isOpened: props.isOpened,
        wasInitialized: true,
      };
    }

    return null;
  }

  render() {
    const { isOpened, children, onRest } = this.props;
    const { height, wasInitialized } = this.state;

    return (
      <div
        className={styles.overflow}
        style={wasInitialized ? {} : { height: 0 }}
      >
        <MeasureHeight
          state={this.shouldMeasureHeight()}
          onMeasure={this.onUpdateHeight}
        >
          <Motion
            style={{
              top: wasInitialized ? spring(isOpened ? 0 : -height) : -height,
            }}
            onRest={onRest}
          >
            {({ top }) => (
              <div
                className={styles.content}
                style={{
                  marginTop: top,
                  visibility: wasInitialized ? 'inherit' : 'hidden',
                }}
              >
                {children}
              </div>
            )}
          </Motion>
        </MeasureHeight>
      </div>
    );
  }

  onUpdateHeight = (height: number) => {
    this.setState({
      height,
    });
  };

  shouldMeasureHeight = () => {
    return [this.props.isOpened, this.state.wasInitialized].join('');
  };
}