react-widgets-up/esm/SlideTransitionGroup.js

An à la carte set of polished, extensible, and accessible inputs built for React

const _excluded = ["direction", "children", "onTransitionEnd"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import cn from 'classnames';
import transitionEnd from 'dom-helpers/transitionEnd';
import * as React from 'react';
import { omitUndefined } from './omitUndefined';
const prefix = 'rw-calendar-transition';
const active = 'rw-calendar-transition-active';
const next = 'rw-calendar-transition-next';
const prev = 'rw-calendar-transition-prev';
const clone = (el, cls) => el && /*#__PURE__*/React.cloneElement(el, {
  className: cn(el.props.className, prefix, cls)
});
const defaultProps = {
  direction: 'left'
};
class SlideTransitionGroup extends React.Component {
  constructor(args) {
    super(args);
    this.handleTransitionEnd = hadFocus => {
      this.isTransitioning = false;
      let current = this.container.current.lastChild;
      if (this.props.onTransitionEnd) this.props.onTransitionEnd(current, hadFocus);
    };
    this.current = this.props.children;
    this.container = /*#__PURE__*/React.createRef();
    this.state = {
      prevClasses: '',
      currentClasses: ''
    };
  }
  componentDidUpdate() {
    if (!this.flush || this.isTransitioning) return;
    this.flush = false;
    this.isTransitioning = true;
    let previous = this.container.current.firstChild;
    const hadFocus = document.activeElement && previous.contains(document.activeElement);
    this.setState({
      prevClasses: '',
      currentClasses: next
    }, () => {
      let current = this.container.current.lastChild;
      current.clientHeight; // eslint-disable-line

      this.setState({
        prevClasses: prev,
        currentClasses: cn(next, active)
      }, () => {
        transitionEnd(current, () => {
          this.prev = null;
          if (this.current.key !== this.props.children.key) {
            this.current = this.props.children;
          }
          this.setState({
            prevClasses: '',
            currentClasses: ''
          }, () => this.handleTransitionEnd(hadFocus));
        });
      });
    });
  }
  render() {
    let _defaultProps$omitUnd = Object.assign({}, defaultProps, omitUndefined(this.props)),
      {
        direction,
        children
      } = _defaultProps$omitUnd,
      props = _objectWithoutPropertiesLoose(_defaultProps$omitUnd, _excluded);
    if (!this.isTransitioning) {
      if (this.current.key !== children.key) {
        this.prev = this.current;
        this.flush = true;
      }
      this.current = children;
    }
    let {
      prevClasses,
      currentClasses
    } = this.state;
    return /*#__PURE__*/React.createElement("div", _extends({}, props, {
      ref: this.container,
      className: cn(`rw-calendar-transition-group`, direction === 'top' && 'rw-calendar-transition-top', direction === 'right' && 'rw-calendar-transition-right', direction === 'bottom' && 'rw-calendar-transition-bottom', direction === 'left' && 'rw-calendar-transition-left')
    }), clone(this.prev, prevClasses), clone(this.current, currentClasses));
  }
}
export default SlideTransitionGroup;