import React, { useEffect, useRef } from 'react';

// CollapseTransition组件
var CollapseTransition = function CollapseTransition(_ref) {
  var visible = _ref.visible,
    children = _ref.children;
  var rootRef = useRef(null);
  // 显示动画计时器
  var enterTimerRef = useRef(null);
  // 隐藏动画计时器
  var leaveTimerRef = useRef(null);
  // 动画持续时间
  var ANIMATION_DURATION = 300;
  useEffect(function () {
    beforeEnter();
    if (visible) enter();
    return function () {
      clearTimeout(enterTimerRef.current);
      clearTimeout(leaveTimerRef.current);
    };
    // eslint-disable-next-line
  }, []);
  useEffect(function () {
    triggerVisibleChange(visible);
    // eslint-disable-next-line
  }, [visible]);

  // 触发显示或隐藏
  var triggerVisibleChange = function triggerVisibleChange(show) {
    clearTimeout(enterTimerRef.current);
    clearTimeout(leaveTimerRef.current);
    if (show) {
      beforeEnter();
      enter();
    } else {
      beforeLeave();
      leave();
    }
  };

  // 显示前
  var beforeEnter = function beforeEnter() {
    var el = rootRef.current;
    el.dataset.oldPaddingTop = el.style.paddingTop;
    el.dataset.oldPaddingBottom = el.style.paddingBottom;
    el.dataset.oldOverflow = el.style.overflow;
    el.style.height = '0';
    el.style.paddingTop = 0;
    el.style.paddingBottom = 0;
  };

  // 显示: 显示并设置高度
  var enter = function enter() {
    var el = rootRef.current;
    el.style.display = 'block';
    if (el.scrollHeight !== 0) {
      el.style.height = "".concat(el.scrollHeight, "px");
      el.style.paddingTop = el.dataset.oldPaddingTop;
      el.style.paddingBottom = el.dataset.oldPaddingBottom;
    } else {
      el.style.height = '';
      el.style.paddingTop = el.dataset.oldPaddingTop;
      el.style.paddingBottom = el.dataset.oldPaddingBottom;
    }
    el.style.overflow = 'hidden';
    enterTimerRef.current = setTimeout(afterEnter, ANIMATION_DURATION);
  };

  // 显示后: 重置样式
  var afterEnter = function afterEnter() {
    var el = rootRef.current;
    el.style.display = 'block';
    el.style.height = '';
    el.style.overflow = el.dataset.oldOverflow;
  };

  // 隐藏前
  var beforeLeave = function beforeLeave() {
    var el = rootRef.current;
    el.dataset.oldPaddingTop = el.style.paddingTop;
    el.dataset.oldPaddingBottom = el.style.paddingBottom;
    el.dataset.oldOverflow = el.style.overflow;
    el.style.display = 'block';
    if (el.scrollHeight !== 0) {
      el.style.height = "".concat(el.scrollHeight, "px");
    }
    el.style.overflow = 'hidden';
  };

  // 隐藏: 设置高度为0
  var leave = function leave() {
    var el = rootRef.current;
    if (el.scrollHeight !== 0) {
      el.style.height = 0;
      el.style.paddingTop = 0;
      el.style.paddingBottom = 0;
    }
    leaveTimerRef.current = setTimeout(afterLeave, ANIMATION_DURATION);
  };

  // 隐藏后: 重置样式
  var afterLeave = function afterLeave() {
    var el = rootRef.current;
    if (!el) return;
    el.style.display = 'none';
    el.style.height = '';
    el.style.overflow = el.dataset.oldOverflow;
    el.style.paddingTop = el.dataset.oldPaddingTop;
    el.style.paddingBottom = el.dataset.oldPaddingBottom;
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "collapse-transition",
    style: {
      overflow: 'hidden'
    },
    ref: rootRef
  }, children);
};
export default CollapseTransition;