@botonic/react
Version:
Build Chatbots using React
109 lines (108 loc) • 5.73 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { INPUT, isBrowser } from '@botonic/core';
import { useContext, useEffect, useRef, useState } from 'react';
import styled from 'styled-components';
import LeftArrow from '../assets/leftArrow.svg';
import RightArrow from '../assets/rightArrow.svg';
import { COLORS, WEBCHAT } from '../constants';
import { resolveImage } from '../util/environment';
import { WebchatContext } from '../webchat/context';
import { ButtonsDisabler } from './buttons-disabler';
import { Message } from './message';
const ScrollableCarousel = styled.div `
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
`;
const StyledCarousel = styled.div `
padding: 10px 0px;
display: flex;
flex-direction: row;
max-width: 100%;
${props => props.carouselArrowsEnabled && 'overflow-x: auto;'}
`;
const StyledItems = styled.div `
display: flex;
`;
const StyledArrowContainer = styled.div `
position: absolute;
top: calc(50% - 20px);
height: 40px;
width: 25px;
background: ${COLORS.SILVER};
display: flex;
align-items: center;
cursor: pointer;
justify-content: ${props => props.justifyContent};
${props => (props.left ? ` left: ${props.left}px` : '')};
${props => (props.right ? ` right: ${props.right}px` : '')};
${props => (props.arrow === 'right' ? 'border-top-right-radius: 30px' : '')};
${props => props.arrow === 'right' ? 'border-bottom-right-radius: 30px' : ''};
${props => (props.arrow === 'left' ? 'border-top-left-radius: 30px' : '')};
${props => (props.arrow === 'left' ? 'border-bottom-left-radius: 30px' : '')};
`;
const StyledArrow = styled.img `
width: 20px;
height: 20px;
`;
const serialize = carouselProps => {
let carouselChildren = carouselProps.children;
if (!Array.isArray(carouselChildren))
carouselChildren = [carouselChildren];
return {
type: INPUT.CAROUSEL,
elements: carouselChildren.map(e => { var _a; return ((_a = e === null || e === void 0 ? void 0 : e.type) === null || _a === void 0 ? void 0 : _a.serialize) && e.type.serialize(e.props); }),
};
};
export const Carousel = (props) => {
const { getThemeProperty } = useContext(WebchatContext);
const [hasLeftArrow, setLeftArrow] = useState(false);
const [hasRightArrow, setRightArrow] = useState(true);
const carouselRef = useRef(null);
const CustomCarouselLeftArrow = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customCarouselLeftArrow);
const CustomCarouselRightArrow = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customCarouselRightArrow);
// TODO: Investigate why when set to false, scroll is enabled via dragging the bar but not hovering the carousel elements
const carouselArrowsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableCarouselArrows);
const scrollCarouselBy = value => {
var _a;
(_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
left: value,
behavior: 'smooth',
});
};
const setArrowsVisibility = event => {
const carousel = event.currentTarget;
const maxRightScroll = carousel.scrollWidth -
carousel.offsetWidth -
WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT;
setLeftArrow(carousel.scrollLeft !== 0);
setRightArrow(carousel.scrollLeft < maxRightScroll);
};
const getArrows = () => {
const scrollBy = WEBCHAT.DEFAULTS.ELEMENT_WIDTH + WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT;
return (_jsxs(_Fragment, { children: [hasLeftArrow &&
(CustomCarouselLeftArrow ? (_jsx(CustomCarouselLeftArrow, { scrollCarouselBy: scrollCarouselBy })) : (_jsx(StyledArrowContainer, Object.assign({ left: 0, arrow: 'right', justifyContent: 'flex-start', onClick: () => scrollCarouselBy(-scrollBy) }, { children: _jsx(StyledArrow, { src: resolveImage(LeftArrow) }) })))), hasRightArrow &&
(CustomCarouselRightArrow ? (_jsx(CustomCarouselRightArrow, { scrollCarouselBy: scrollCarouselBy })) : (_jsx(StyledArrowContainer, Object.assign({ right: 0, arrow: 'left', justifyContent: 'flex-end', onClick: () => scrollCarouselBy(scrollBy) }, { children: _jsx(StyledArrow, { src: resolveImage(RightArrow) }) }))))] }));
};
useEffect(() => {
const carousel = carouselRef.current;
if (carousel && carousel.addEventListener) {
carousel.addEventListener('scroll', setArrowsVisibility, false);
}
return () => {
if (carousel && carousel.removeEventListener) {
carousel.removeEventListener('scroll', setArrowsVisibility, false);
}
};
}, [carouselRef.current]);
const carouselProps = Object.assign(Object.assign({}, props), { children: ButtonsDisabler.updateChildrenButtons(props.children) });
if (isBrowser()) {
return (_jsx(Message, Object.assign({ style: {
width: '85%',
padding: 0,
backgroundColor: COLORS.TRANSPARENT,
}, blob: false, json: serialize(carouselProps), type: INPUT.CAROUSEL }, carouselProps, { children: _jsx(ScrollableCarousel, { children: _jsxs(StyledCarousel, Object.assign({ ref: carouselRef, carouselArrowsEnabled: carouselArrowsEnabled }, { children: [_jsx(StyledItems, { children: carouselProps.children }), carouselArrowsEnabled && getArrows()] })) }) })));
}
return (_jsx(Message, Object.assign({ style: { width: '85%', padding: 0, backgroundColor: COLORS.TRANSPARENT }, blob: false, json: serialize(carouselProps), type: INPUT.CAROUSEL }, carouselProps, { children: props.children })));
};
Carousel.serialize = serialize;
//# sourceMappingURL=carousel.js.map