drawer.js

import {createComponent} from 'origo-react';
import {DOM, createFactory} from 'react';
import {findDOMNode} from 'react-dom';
const {div} = DOM;

export const Drawer = createComponent({
  componentWillAppear(callback) {
    this.componentWillEnter(callback);
  },

  componentWillEnter(callback) {
    const el = findDOMNode(this);
    el.style.height = 'auto';
    const height = el.offsetHeight;

    if (!this.props.data.animate) {
      el.style.height = `${height}px`;
      return callback();
    }

    el.style.height = 0;

    setTimeout(() => {
      el.style.height = `${height}px`;
      callback();
    }, 0);
  },

  componentWillLeave(callback) {
    const el = findDOMNode(this);

    function afterTransition() {
      callback();
      el.removeEventListener('transitionend', afterTransition);
      el.style.height = 'auto';
    }

    el.addEventListener('transitionend', afterTransition);
    el.style.height = 0;
  },

  render(data, children) {
    return div({className: 'leest-sticky'}, children);
  }
});