選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
 

144 行
4.6 KiB

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