@checksub_team/react-widgets/lib/SlideDownTransition.js

React-widgets

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _classnames = _interopRequireDefault(require("classnames"));

var _events = _interopRequireDefault(require("dom-helpers/events"));

var _style = _interopRequireDefault(require("dom-helpers/style"));

var _height = _interopRequireDefault(require("dom-helpers/query/height"));

var _properties = require("dom-helpers/transition/properties");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _Transition = _interopRequireWildcard(require("react-transition-group/Transition"));

var _transitionClasses;

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var transitionClasses = (_transitionClasses = {}, _transitionClasses[_Transition.ENTERING] = 'rw-popup-transition-entering', _transitionClasses[_Transition.EXITING] = 'rw-popup-transition-exiting', _transitionClasses[_Transition.EXITED] = 'rw-popup-transition-exited', _transitionClasses);
var propTypes = {
  in: _propTypes.default.bool.isRequired,
  dropUp: _propTypes.default.bool,
  onEntering: _propTypes.default.func,
  onEntered: _propTypes.default.func
};

function parseDuration(node) {
  var str = (0, _style.default)(node, _properties.transitionDuration);
  var mult = str.indexOf('ms') === -1 ? 1000 : 1;
  return parseFloat(str) * mult;
}

var SlideDownTransition =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(SlideDownTransition, _React$Component);

  function SlideDownTransition() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _this.setContainerHeight = function (elem) {
      elem.style.height = _this.getHeight() + 'px';
    };

    _this.clearContainerHeight = function (elem) {
      elem.style.height = '';
    };

    _this.handleEntered = function (elem) {
      _this.clearContainerHeight(elem);

      if (_this.props.onEntered) _this.props.onEntered();
    };

    _this.handleEntering = function () {
      if (_this.props.onEntering) _this.props.onEntering();
    };

    _this.handleTransitionEnd = function (node, done) {
      var duration = parseDuration(node.lastChild) || 0;

      var handler = function handler() {
        _events.default.off(node, _properties.transitionEnd, handler, false);

        done();
      };

      setTimeout(handler, duration * 1.5);

      _events.default.on(node, _properties.transitionEnd, handler, false);
    };

    _this.attachRef = function (ref) {
      return _this.element = ref;
    };

    return _this;
  }

  var _proto = SlideDownTransition.prototype;

  _proto.getHeight = function getHeight() {
    var container = this.element;
    var content = container.firstChild;
    var margin = parseInt((0, _style.default)(content, 'margin-top'), 10) + parseInt((0, _style.default)(content, 'margin-bottom'), 10);
    var old = container.style.display;
    var height;
    container.style.display = 'block';
    height = ((0, _height.default)(content) || 0) + (isNaN(margin) ? 0 : margin);
    container.style.display = old;
    return height;
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        children = _this$props.children,
        className = _this$props.className,
        dropUp = _this$props.dropUp;
    return _react.default.createElement(_Transition.default, {
      appear: true,
      in: this.props.in,
      timeout: 5000,
      onEnter: this.setContainerHeight,
      onEntering: this.handleEntering,
      onEntered: this.handleEntered,
      onExit: this.setContainerHeight,
      onExited: this.clearContainerHeight,
      addEndListener: this.handleTransitionEnd
    }, function (status, innerProps) {
      return _react.default.createElement("div", _extends({}, innerProps, {
        ref: _this2.attachRef,
        className: (0, _classnames.default)(className, dropUp && 'rw-dropup', transitionClasses[status])
      }), _react.default.createElement("div", {
        className: "rw-popup-transition"
      }, children));
    });
  };

  return SlideDownTransition;
}(_react.default.Component);

SlideDownTransition.propTypes = propTypes;
var _default = SlideDownTransition;
exports.default = _default;
module.exports = exports["default"];