design-react-kit
Version:
Componenti React per Bootstrap 5
193 lines • 5.32 kB
JavaScript
import React from 'react';
import classNames from 'classnames';
import { Splide } from '@splidejs/react-splide';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const CONFIG_DEFAULT = {
slideFocus: false,
rewind: true,
perMove: 1,
i18n: {
prev: 'Slide precedente',
next: 'Slide successiva',
first: 'Vai alla prima slide',
last: 'Vai all’ultima slide',
slideX: 'Vai alla slide %s',
pageX: 'Vai a pagina %s',
play: 'Attiva autoplay',
pause: 'Pausa autoplay',
carousel: 'Carosello',
select: 'Seleziona una slide da mostrare',
slide: 'slide',
slideLabel: '%s di %s',
},
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const CONFIGS = {
'landscape-three-cols': {
type: 'slide',
perPage: 3,
gap: 24,
padding: { left: 0, right: 0 },
arrows: false,
breakpoints: {
768: {
perPage: 1,
gap: 24,
padding: { left: 0, right: 0 },
arrows: false,
},
992: {
perPage: 2,
gap: 24,
padding: { left: 40, right: 40 },
arrows: false,
},
},
},
'landscape-three-cols-arrows': {
type: 'slide',
perPage: 3,
gap: 24,
padding: { left: 0, right: 0 },
arrows: true,
breakpoints: {
768: {
perPage: 1,
gap: 24,
padding: { left: 40, right: 40 },
arrows: true,
},
992: {
perPage: 2,
gap: 24,
padding: { left: 40, right: 40 },
arrows: true,
},
},
},
'big-image': {
type: 'loop',
perPage: 1,
gap: 48,
padding: { left: 320, right: 320 },
arrows: false,
breakpoints: {
768: {
perPage: 1,
gap: 0,
padding: { left: 0, right: 0 },
arrows: false,
},
992: {
perPage: 1,
gap: 24,
padding: { left: 160, right: 160 },
arrows: false,
},
},
},
'standard-image': {
type: 'loop',
perPage: 3,
gap: 24,
padding: { left: 48, right: 48 },
arrows: false,
breakpoints: {
768: {
perPage: 1,
gap: 24,
padding: { left: 40, right: 40 },
arrows: false,
},
992: {
perPage: 2,
gap: 24,
padding: { left: 48, right: 48 },
arrows: false,
},
},
},
'landscape': {
type: 'slide',
perPage: 1,
gap: 24,
padding: { left: 0, right: 0 },
arrows: false,
breakpoints: {
768: {
perPage: 1,
gap: 24,
padding: { left: 0, right: 0 },
arrows: false,
},
992: {
perPage: 1,
gap: 24,
padding: { left: 24, right: 24 },
arrows: false,
},
},
},
'calendar-wrapper': {
type: 'slide',
perPage: 4,
gap: 0,
padding: { left: 0, right: 0 },
arrows: false,
breakpoints: {
560: {
perPage: 1,
gap: 0,
padding: { left: 24, right: 24 },
arrows: false,
},
768: {
perPage: 2,
gap: 0,
padding: { left: 0, right: 0 },
arrows: false,
},
992: {
perPage: 3,
gap: 0,
padding: { left: 0, right: 0 },
arrows: false,
},
},
},
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const EXTRA_CLASSES = {
'landscape-three-cols': [
'it-carousel-landscape-abstract-three-cols'
],
'landscape-three-cols-arrows': [
'it-carousel-landscape-abstract-three-cols-arrow-visible'
],
'big-image': [
'it-carousel-landscape-abstract-three-cols',
'it-full-carousel',
'it-big-img'
],
'standard-image': [
'it-carousel-landscape-abstract-three-cols',
'it-full-carousel',
'it-standard-image'
],
'landscape': [
'it-carousel-landscape-abstract'
],
'calendar-wrapper': [
'it-calendar-wrapper'
]
};
// Splide wrapper
export const Carousel = ({ className = '', type, children, ...attributes }) => {
let conf = Object.assign({}, CONFIG_DEFAULT);
if (['big-image', 'standard-image'].includes(type)) {
conf = Object.assign({}, conf, CONFIGS['landscape-three-cols']);
}
conf = Object.assign({}, conf, CONFIGS[type]);
return React.createElement(Splide, { ...attributes, className: classNames('it-carousel-wrapper', className, ...EXTRA_CLASSES[type]), options: conf }, children);
};
//# sourceMappingURL=Carousel.js.map