Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 | 1x 15x 15x 15x 15x 13x 4x 4x 4x 4x 4x 4x 13x 15x 1x 1x 1x 15x 1x 1x | import {forwardRef, useEffect, useRef, useState} from 'react'
import cx from 'classnames'
import PropTypes from 'prop-types'
import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs'
import CarouselContainer from './CarouselContainer.js'
import {
adaptReactSlidyProps,
BASE_CLASS,
CLASS_FULL_HEIGHT,
CLASS_FULL_WIDTH,
CLASS_IMAGE_OBJECT_FIT,
getNumOfSlidesSanitized
} from './settings.js'
const MoleculeCarousel = forwardRef(
(
{
arrowLeft,
arrowRight,
children,
classNameBase = BASE_CLASS,
onDestroy,
onInit,
onSlideAfter,
onSlideBefore,
imageObjectFit,
onNext,
onPrevious,
onSlide,
hasInfiniteLoop = false,
itemsToPreload = 1,
defaultSlide = 0,
slide,
ease = 'ease',
hasLazyLoadSlider = true,
lazyLoadConfig = {offset: 150},
hasKeyboardNavigation = false,
numOfSlides = 1,
isSanitized = true,
slideSpeed = 500,
hasArrows = true,
isFullHeight = false,
isFullWidth = true
},
forwardedRef
) => {
const [showSlider, setShowSlider] = useState(!hasLazyLoadSlider)
const innerRef = useRef(null)
const ref = useMergeRefs(forwardedRef, innerRef)
useEffect(
() => {
let observer
if (hasLazyLoadSlider) {
const initLazyLoadSlider = () => {
// if we support IntersectionObserver, let's use it
const {offset = 0} = lazyLoadConfig
observer = new window.IntersectionObserver(handleIntersection, {
rootMargin: `${offset}px 0px 0px`
})
observer.observe(innerRef.current)
}
Iif (!('IntersectionObserver' in window)) {
import('intersection-observer').then(initLazyLoadSlider)
} else {
initLazyLoadSlider()
}
}
return () => observer && observer.disconnect()
},
[] // eslint-disable-line
)
const handleIntersection = ([entry], observer) => {
Eif (entry.isIntersecting || entry.intersectionRatio > 0) {
observer.unobserve(entry.target)
setShowSlider(true)
}
}
return (
<div
ref={ref}
className={cx(
BASE_CLASS,
isFullHeight && CLASS_FULL_HEIGHT,
isFullWidth && CLASS_FULL_WIDTH,
imageObjectFit && `${CLASS_IMAGE_OBJECT_FIT}-${imageObjectFit}`
)}
>
{showSlider && (
<CarouselContainer
arrowLeft={arrowLeft}
arrowRight={arrowRight}
children={children}
classNameBase={classNameBase}
onDestroy={onDestroy}
onInit={onInit}
onSlideAfter={onSlideAfter}
onSlideBefore={onSlideBefore}
onNext={onNext}
onPrevious={onPrevious}
onSlide={onSlide}
ease={ease}
hasInfiniteLoop={hasInfiniteLoop}
defaultSlide={defaultSlide}
slide={slide}
itemsToPreload={itemsToPreload}
hasKeyboardNavigation={hasKeyboardNavigation}
hasArrows={hasArrows}
slideSpeed={slideSpeed}
numOfSlides={getNumOfSlidesSanitized({
isSanitized,
numOfSlides,
children
})}
>
{children}
</CarouselContainer>
)}
</div>
)
}
)
MoleculeCarousel.displayName = 'MoleculeCarousel'
MoleculeCarousel.propTypes = {
/** Component to be used as the left arrow for the slider */
arrowLeft: PropTypes.element,
/** Component to be used as the right arrow for the slider */
arrowRight: PropTypes.element,
/** Children to be used as slides for the slider */
children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
/** Class base to create all clases for elements. Styles might break if you modify it. */
classNameBase: PropTypes.string,
/** Function that will be executed AFTER destroying the slider. Useful for clean up stuff */
onDestroy: PropTypes.func,
/** Function that will be executed AFTER initializing the slider */
onInit: PropTypes.func,
/** Function that will be executed AFTER slide transition has ended */
onSlideAfter: PropTypes.func,
/** change index handler **/
onSlide: PropTypes.func,
/** Function that will be executed BEFORE slide is happening */
onSlideBefore: PropTypes.func,
/** next handler **/
onNext: PropTypes.func,
/** previous handler **/
onPrevious: PropTypes.func,
/** Ease mode to use on translations */
ease: PropTypes.string,
/** Determine the object-fit property for the images */
imageObjectFit: PropTypes.oneOf(['cover', 'contain']),
/** Indicates if the slider will start with the first slide once it ends */
hasInfiniteLoop: PropTypes.bool,
/** Determine the number of items that will be preloaded */
itemsToPreload: PropTypes.number,
/** Determine the first slide to start with */
defaultSlide: PropTypes.number,
/** Change dynamically the slide number, perfect to use with dots */
slide: PropTypes.number,
/** Activate navigation by keyboard */
hasKeyboardNavigation: PropTypes.bool,
/** Determine if the slider will be lazy loaded using Intersection Observer */
hasLazyLoadSlider: PropTypes.bool,
/** Configuration for lazy loading. Only needed if lazyLoadSlider is true */
lazyLoadConfig: PropTypes.shape({
/** Distance which the slider will be loaded */
offset: PropTypes.number
}),
/** Number of slides to show at once */
numOfSlides: PropTypes.number,
/** Determine if we want to sanitize the slides or take numberOfSlider directly */
isSanitized: PropTypes.bool,
/** Determine if arrows should be shown */
hasArrows: PropTypes.bool,
/** Determine the speed of the sliding animation */
slideSpeed: PropTypes.number,
/** Use the full width of the container for the image */
isFullWidth: PropTypes.bool,
/** Use the full height of the container adding some styles to the elements */
isFullHeight: PropTypes.bool
}
export default MoleculeCarousel
export {adaptReactSlidyProps}
|