You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

159 lines
5.4 KiB

  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
  4. exports.__esModule = true;
  5. exports.default = void 0;
  6. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  7. var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
  8. var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
  9. var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
  10. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
  11. var _react = _interopRequireWildcard(require("react"));
  12. var _propTypes = _interopRequireDefault(require("prop-types"));
  13. var _classnames = _interopRequireDefault(require("classnames"));
  14. var _reactTransitionGroup = require("react-transition-group");
  15. var _utils = require("./utils");
  16. var _transitionStatusToCl;
  17. var propTypes = (0, _objectSpread2.default)({}, _reactTransitionGroup.Transition.propTypes, {
  18. isOpen: _propTypes.default.bool,
  19. children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]),
  20. tag: _utils.tagPropType,
  21. className: _propTypes.default.node,
  22. navbar: _propTypes.default.bool,
  23. cssModule: _propTypes.default.object,
  24. innerRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string, _propTypes.default.object])
  25. });
  26. var defaultProps = (0, _objectSpread2.default)({}, _reactTransitionGroup.Transition.defaultProps, {
  27. isOpen: false,
  28. appear: false,
  29. enter: true,
  30. exit: true,
  31. tag: 'div',
  32. timeout: _utils.TransitionTimeouts.Collapse
  33. });
  34. var transitionStatusToClassHash = (_transitionStatusToCl = {}, _transitionStatusToCl[_utils.TransitionStatuses.ENTERING] = 'collapsing', _transitionStatusToCl[_utils.TransitionStatuses.ENTERED] = 'collapse show', _transitionStatusToCl[_utils.TransitionStatuses.EXITING] = 'collapsing', _transitionStatusToCl[_utils.TransitionStatuses.EXITED] = 'collapse', _transitionStatusToCl);
  35. function getTransitionClass(status) {
  36. return transitionStatusToClassHash[status] || 'collapse';
  37. }
  38. function getHeight(node) {
  39. return node.scrollHeight;
  40. }
  41. var Collapse =
  42. /*#__PURE__*/
  43. function (_Component) {
  44. (0, _inheritsLoose2.default)(Collapse, _Component);
  45. function Collapse(props) {
  46. var _this;
  47. _this = _Component.call(this, props) || this;
  48. _this.state = {
  49. height: null
  50. };
  51. ['onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'].forEach(function (name) {
  52. _this[name] = _this[name].bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
  53. });
  54. return _this;
  55. }
  56. var _proto = Collapse.prototype;
  57. _proto.onEntering = function onEntering(node, isAppearing) {
  58. this.setState({
  59. height: getHeight(node)
  60. });
  61. this.props.onEntering(node, isAppearing);
  62. };
  63. _proto.onEntered = function onEntered(node, isAppearing) {
  64. this.setState({
  65. height: null
  66. });
  67. this.props.onEntered(node, isAppearing);
  68. };
  69. _proto.onExit = function onExit(node) {
  70. this.setState({
  71. height: getHeight(node)
  72. });
  73. this.props.onExit(node);
  74. };
  75. _proto.onExiting = function onExiting(node) {
  76. // getting this variable triggers a reflow
  77. var _unused = node.offsetHeight; // eslint-disable-line no-unused-vars
  78. this.setState({
  79. height: 0
  80. });
  81. this.props.onExiting(node);
  82. };
  83. _proto.onExited = function onExited(node) {
  84. this.setState({
  85. height: null
  86. });
  87. this.props.onExited(node);
  88. };
  89. _proto.render = function render() {
  90. var _this2 = this;
  91. var _this$props = this.props,
  92. Tag = _this$props.tag,
  93. isOpen = _this$props.isOpen,
  94. className = _this$props.className,
  95. navbar = _this$props.navbar,
  96. cssModule = _this$props.cssModule,
  97. children = _this$props.children,
  98. innerRef = _this$props.innerRef,
  99. otherProps = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["tag", "isOpen", "className", "navbar", "cssModule", "children", "innerRef"]);
  100. var height = this.state.height;
  101. var transitionProps = (0, _utils.pick)(otherProps, _utils.TransitionPropTypeKeys);
  102. var childProps = (0, _utils.omit)(otherProps, _utils.TransitionPropTypeKeys);
  103. return _react.default.createElement(_reactTransitionGroup.Transition, (0, _extends2.default)({}, transitionProps, {
  104. in: isOpen,
  105. onEntering: this.onEntering,
  106. onEntered: this.onEntered,
  107. onExit: this.onExit,
  108. onExiting: this.onExiting,
  109. onExited: this.onExited
  110. }), function (status) {
  111. var collapseClass = getTransitionClass(status);
  112. var classes = (0, _utils.mapToCssModules)((0, _classnames.default)(className, collapseClass, navbar && 'navbar-collapse'), cssModule);
  113. var style = height === null ? null : {
  114. height: height
  115. };
  116. return _react.default.createElement(Tag, (0, _extends2.default)({}, childProps, {
  117. style: (0, _objectSpread2.default)({}, childProps.style, style),
  118. className: classes,
  119. ref: _this2.props.innerRef
  120. }), children);
  121. });
  122. };
  123. return Collapse;
  124. }(_react.Component);
  125. Collapse.propTypes = propTypes;
  126. Collapse.defaultProps = defaultProps;
  127. var _default = Collapse;
  128. exports.default = _default;