index.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. "use client";
  2. var __rest = this && this.__rest || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  6. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  7. }
  8. return t;
  9. };
  10. import * as React from 'react';
  11. import SlickCarousel from '@ant-design/react-slick';
  12. import classNames from 'classnames';
  13. import { useComponentConfig } from '../config-provider/context';
  14. import useStyle, { DotDuration } from './style';
  15. const dotsClass = 'slick-dots';
  16. const ArrowButton = _a => {
  17. var {
  18. currentSlide,
  19. slideCount
  20. } = _a,
  21. rest = __rest(_a, ["currentSlide", "slideCount"]);
  22. return /*#__PURE__*/React.createElement("button", Object.assign({
  23. type: "button"
  24. }, rest));
  25. };
  26. const Carousel = /*#__PURE__*/React.forwardRef((props, ref) => {
  27. const {
  28. dots = true,
  29. arrows = false,
  30. prevArrow,
  31. nextArrow,
  32. draggable = false,
  33. waitForAnimate = false,
  34. dotPosition = 'bottom',
  35. vertical = dotPosition === 'left' || dotPosition === 'right',
  36. rootClassName,
  37. className: customClassName,
  38. style,
  39. id,
  40. autoplay = false,
  41. autoplaySpeed = 3000,
  42. rtl
  43. } = props,
  44. otherProps = __rest(props, ["dots", "arrows", "prevArrow", "nextArrow", "draggable", "waitForAnimate", "dotPosition", "vertical", "rootClassName", "className", "style", "id", "autoplay", "autoplaySpeed", "rtl"]);
  45. const {
  46. getPrefixCls,
  47. direction,
  48. className: contextClassName,
  49. style: contextStyle
  50. } = useComponentConfig('carousel');
  51. const slickRef = React.useRef(null);
  52. const goTo = (slide, dontAnimate = false) => {
  53. slickRef.current.slickGoTo(slide, dontAnimate);
  54. };
  55. React.useImperativeHandle(ref, () => ({
  56. goTo,
  57. autoPlay: slickRef.current.innerSlider.autoPlay,
  58. innerSlider: slickRef.current.innerSlider,
  59. prev: slickRef.current.slickPrev,
  60. next: slickRef.current.slickNext
  61. }), [slickRef.current]);
  62. const {
  63. children,
  64. initialSlide = 0
  65. } = props;
  66. const count = React.Children.count(children);
  67. const isRTL = (rtl !== null && rtl !== void 0 ? rtl : direction === 'rtl') && !vertical;
  68. React.useEffect(() => {
  69. if (count > 0) {
  70. const newIndex = isRTL ? count - initialSlide - 1 : initialSlide;
  71. goTo(newIndex, false);
  72. }
  73. }, [count, initialSlide, isRTL]);
  74. const newProps = Object.assign({
  75. vertical,
  76. className: classNames(customClassName, contextClassName),
  77. style: Object.assign(Object.assign({}, contextStyle), style),
  78. autoplay: !!autoplay
  79. }, otherProps);
  80. if (newProps.effect === 'fade') {
  81. newProps.fade = true;
  82. }
  83. const prefixCls = getPrefixCls('carousel', newProps.prefixCls);
  84. const enableDots = !!dots;
  85. const dsClass = classNames(dotsClass, `${dotsClass}-${dotPosition}`, typeof dots === 'boolean' ? false : dots === null || dots === void 0 ? void 0 : dots.className);
  86. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
  87. const className = classNames(prefixCls, {
  88. [`${prefixCls}-rtl`]: isRTL,
  89. [`${prefixCls}-vertical`]: newProps.vertical
  90. }, hashId, cssVarCls, rootClassName);
  91. const mergedShowDuration = autoplay && (typeof autoplay === 'object' ? autoplay.dotDuration : false);
  92. const dotDurationStyle = mergedShowDuration ? {
  93. [DotDuration]: `${autoplaySpeed}ms`
  94. } : {};
  95. return wrapCSSVar(/*#__PURE__*/React.createElement("div", {
  96. className: className,
  97. id: id,
  98. style: dotDurationStyle
  99. }, /*#__PURE__*/React.createElement(SlickCarousel, Object.assign({
  100. ref: slickRef
  101. }, newProps, {
  102. dots: enableDots,
  103. dotsClass: dsClass,
  104. arrows: arrows,
  105. prevArrow: prevArrow !== null && prevArrow !== void 0 ? prevArrow : /*#__PURE__*/React.createElement(ArrowButton, {
  106. "aria-label": isRTL ? 'next' : 'prev'
  107. }),
  108. nextArrow: nextArrow !== null && nextArrow !== void 0 ? nextArrow : /*#__PURE__*/React.createElement(ArrowButton, {
  109. "aria-label": isRTL ? 'prev' : 'next'
  110. }),
  111. draggable: draggable,
  112. verticalSwiping: vertical,
  113. autoplaySpeed: autoplaySpeed,
  114. waitForAnimate: waitForAnimate,
  115. rtl: isRTL
  116. }))));
  117. });
  118. if (process.env.NODE_ENV !== 'production') {
  119. Carousel.displayName = 'Carousel';
  120. }
  121. export default Carousel;