Dashboard sipadu mbip
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.

Collapse.js 4.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  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/style';
  7. import React from 'react';
  8. import onEnd from 'dom-helpers/transition/end';
  9. import Transition, { EXITED, ENTERED, ENTERING, EXITING } from 'react-transition-group/Transition';
  10. import triggerBrowserReflow from './utils/triggerBrowserReflow';
  11. import createChainedFunction from './utils/createChainedFunction';
  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 =
  33. /*#__PURE__*/
  34. function (_React$Component) {
  35. _inheritsLoose(Collapse, _React$Component);
  36. function Collapse() {
  37. var _this;
  38. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  39. args[_key] = arguments[_key];
  40. }
  41. _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
  42. _this.handleEnter = function (elem) {
  43. elem.style[_this.getDimension()] = '0';
  44. };
  45. _this.handleEntering = function (elem) {
  46. var dimension = _this.getDimension();
  47. elem.style[dimension] = _this._getScrollDimensionValue(elem, dimension);
  48. };
  49. _this.handleEntered = function (elem) {
  50. elem.style[_this.getDimension()] = null;
  51. };
  52. _this.handleExit = function (elem) {
  53. var dimension = _this.getDimension();
  54. elem.style[dimension] = _this.props.getDimensionValue(dimension, elem) + "px";
  55. triggerBrowserReflow(elem);
  56. };
  57. _this.handleExiting = function (elem) {
  58. elem.style[_this.getDimension()] = null;
  59. };
  60. return _this;
  61. }
  62. var _proto = Collapse.prototype;
  63. _proto.getDimension = function getDimension() {
  64. return typeof this.props.dimension === 'function' ? this.props.dimension() : this.props.dimension;
  65. }
  66. /* -- Expanding -- */
  67. ;
  68. // for testing
  69. _proto._getScrollDimensionValue = function _getScrollDimensionValue(elem, dimension) {
  70. var scroll = "scroll" + dimension[0].toUpperCase() + dimension.slice(1);
  71. return elem[scroll] + "px";
  72. };
  73. _proto.render = function render() {
  74. var _this2 = this;
  75. var _this$props = this.props,
  76. onEnter = _this$props.onEnter,
  77. onEntering = _this$props.onEntering,
  78. onEntered = _this$props.onEntered,
  79. onExit = _this$props.onExit,
  80. onExiting = _this$props.onExiting,
  81. className = _this$props.className,
  82. children = _this$props.children,
  83. props = _objectWithoutPropertiesLoose(_this$props, ["onEnter", "onEntering", "onEntered", "onExit", "onExiting", "className", "children"]);
  84. delete props.dimension;
  85. delete props.getDimensionValue;
  86. var handleEnter = createChainedFunction(this.handleEnter, onEnter);
  87. var handleEntering = createChainedFunction(this.handleEntering, onEntering);
  88. var handleEntered = createChainedFunction(this.handleEntered, onEntered);
  89. var handleExit = createChainedFunction(this.handleExit, onExit);
  90. var handleExiting = createChainedFunction(this.handleExiting, onExiting);
  91. return React.createElement(Transition, _extends({
  92. addEndListener: onEnd
  93. }, props, {
  94. "aria-expanded": props.role ? props.in : null,
  95. onEnter: handleEnter,
  96. onEntering: handleEntering,
  97. onEntered: handleEntered,
  98. onExit: handleExit,
  99. onExiting: handleExiting
  100. }), function (state, innerProps) {
  101. return React.cloneElement(children, _extends({}, innerProps, {
  102. className: classNames(className, children.props.className, collapseStyles[state], _this2.getDimension() === 'width' && 'width')
  103. }));
  104. });
  105. };
  106. return Collapse;
  107. }(React.Component);
  108. Collapse.defaultProps = defaultProps;
  109. export default Collapse;