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.

Fade.js 1.4KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  3. var _fadeStyles;
  4. import classNames from 'classnames';
  5. import React, { useCallback } from 'react';
  6. import Transition, { ENTERED, ENTERING } from 'react-transition-group/Transition';
  7. import onEnd from 'dom-helpers/transition/end';
  8. import triggerBrowserReflow from './utils/triggerBrowserReflow';
  9. var defaultProps = {
  10. in: false,
  11. timeout: 300,
  12. mountOnEnter: false,
  13. unmountOnExit: false,
  14. appear: false
  15. };
  16. var fadeStyles = (_fadeStyles = {}, _fadeStyles[ENTERING] = 'show', _fadeStyles[ENTERED] = 'show', _fadeStyles);
  17. var Fade = React.forwardRef(function (_ref, ref) {
  18. var className = _ref.className,
  19. children = _ref.children,
  20. props = _objectWithoutPropertiesLoose(_ref, ["className", "children"]);
  21. var handleEnter = useCallback(function (node) {
  22. triggerBrowserReflow(node);
  23. if (props.onEnter) props.onEnter(node);
  24. }, [props]);
  25. return React.createElement(Transition, _extends({
  26. ref: ref,
  27. addEndListener: onEnd
  28. }, props, {
  29. onEnter: handleEnter
  30. }), function (status, innerProps) {
  31. return React.cloneElement(children, _extends({}, innerProps, {
  32. className: classNames('fade', className, children.props.className, fadeStyles[status])
  33. }));
  34. });
  35. });
  36. Fade.defaultProps = defaultProps;
  37. Fade.displayName = 'Fade';
  38. export default Fade;