Dashboard sipadu mbip
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

Collapse.js 5.3KB

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