Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

Collapse.js 4.5 KiB

3 år sedan
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  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. var _collapseStyles;
  5. import classNames from 'classnames';
  6. import css from 'dom-helpers/css';
  7. import transitionEnd from 'dom-helpers/transitionEnd';
  8. import React from 'react';
  9. import Transition, { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
  10. import createChainedFunction from './createChainedFunction';
  11. import triggerBrowserReflow from './triggerBrowserReflow';
  12. var MARGINS = {
  13. height: ['marginTop', 'marginBottom'],
  14. width: ['marginLeft', 'marginRight']
  15. };
  16. function getDimensionValue(dimension, elem) {
  17. var offset = "offset" + dimension[0].toUpperCase() + dimension.slice(1);
  18. var value = elem[offset];
  19. var margins = MARGINS[dimension];
  20. return value + parseInt(css(elem, margins[0]), 10) + parseInt(css(elem, margins[1]), 10);
  21. }
  22. var collapseStyles = (_collapseStyles = {}, _collapseStyles[EXITED] = 'collapse', _collapseStyles[EXITING] = 'collapsing', _collapseStyles[ENTERING] = 'collapsing', _collapseStyles[ENTERED] = 'collapse show', _collapseStyles);
  23. var defaultProps = {
  24. in: false,
  25. timeout: 300,
  26. mountOnEnter: false,
  27. unmountOnExit: false,
  28. appear: false,
  29. dimension: 'height',
  30. getDimensionValue: getDimensionValue
  31. };
  32. var Collapse = /*#__PURE__*/function (_React$Component) {
  33. _inheritsLoose(Collapse, _React$Component);
  34. function Collapse() {
  35. var _this;
  36. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  37. args[_key] = arguments[_key];
  38. }
  39. _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
  40. _this.handleEnter = function (elem) {
  41. elem.style[_this.getDimension()] = '0';
  42. };
  43. _this.handleEntering = function (elem) {
  44. var dimension = _this.getDimension();
  45. elem.style[dimension] = _this._getScrollDimensionValue(elem, dimension);
  46. };
  47. _this.handleEntered = function (elem) {
  48. elem.style[_this.getDimension()] = null;
  49. };
  50. _this.handleExit = function (elem) {
  51. var dimension = _this.getDimension();
  52. elem.style[dimension] = _this.props.getDimensionValue(dimension, elem) + "px";
  53. triggerBrowserReflow(elem);
  54. };
  55. _this.handleExiting = function (elem) {
  56. elem.style[_this.getDimension()] = null;
  57. };
  58. return _this;
  59. }
  60. var _proto = Collapse.prototype;
  61. _proto.getDimension = function getDimension() {
  62. return typeof this.props.dimension === 'function' ? this.props.dimension() : this.props.dimension;
  63. }
  64. /* -- Expanding -- */
  65. ;
  66. // for testing
  67. _proto._getScrollDimensionValue = function _getScrollDimensionValue(elem, dimension) {
  68. var scroll = "scroll" + dimension[0].toUpperCase() + dimension.slice(1);
  69. return elem[scroll] + "px";
  70. };
  71. _proto.render = function render() {
  72. var _this2 = this;
  73. var _this$props = this.props,
  74. onEnter = _this$props.onEnter,
  75. onEntering = _this$props.onEntering,
  76. onEntered = _this$props.onEntered,
  77. onExit = _this$props.onExit,
  78. onExiting = _this$props.onExiting,
  79. className = _this$props.className,
  80. children = _this$props.children,
  81. props = _objectWithoutPropertiesLoose(_this$props, ["onEnter", "onEntering", "onEntered", "onExit", "onExiting", "className", "children"]);
  82. delete props.dimension;
  83. delete props.getDimensionValue;
  84. var handleEnter = createChainedFunction(this.handleEnter, onEnter);
  85. var handleEntering = createChainedFunction(this.handleEntering, onEntering);
  86. var handleEntered = createChainedFunction(this.handleEntered, onEntered);
  87. var handleExit = createChainedFunction(this.handleExit, onExit);
  88. var handleExiting = createChainedFunction(this.handleExiting, onExiting);
  89. return /*#__PURE__*/React.createElement(Transition, _extends({
  90. addEndListener: transitionEnd
  91. }, props, {
  92. "aria-expanded": props.role ? props.in : null,
  93. onEnter: handleEnter,
  94. onEntering: handleEntering,
  95. onEntered: handleEntered,
  96. onExit: handleExit,
  97. onExiting: handleExiting
  98. }), function (state, innerProps) {
  99. return React.cloneElement(children, _extends({}, innerProps, {
  100. className: classNames(className, children.props.className, collapseStyles[state], _this2.getDimension() === 'width' && 'width')
  101. }));
  102. });
  103. };
  104. return Collapse;
  105. }(React.Component);
  106. Collapse.defaultProps = defaultProps;
  107. export default Collapse;