@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
334 lines (318 loc) • 11.9 kB
JavaScript
import React from 'react';
/**propTypes**/
import { propTypes } from "./props/propTypes";
import { defaultProps } from "./props/defaultProps";
/**components**/
import Icon from '@zohodesk/icons/es/Icon';
import Flex from '@zohodesk/layout/es/Flex/Flex';
import Button from '@zohodesk/components/es/Button/Button';
import Modal from '@zohodesk/components/es/Modal/Modal';
import Ribbon from '@zohodesk/components/es/Ribbon/Ribbon';
import Typography from '@zohodesk/components/es/Typography/Typography';
import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
/** local **/
import VideoLookup from "../VideoLookup/VideoLookup";
import Link from "../Link/Link";
import CarouselDots from "./CarouselDots/CarouselDots";
import Image from "../Image/Image";
/** hooks **/
import useOnboardingSlider from "./hooks/useOnboardingSlider";
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
import useOnboarding from "./hooks/useOnboarding";
/** Constant **/
import { DUMMY_OBJECT } from "../utils/General";
/** style **/
import defaultStyle from "./css/Onboarding.module.css";
const Onboarding = _ref => {
let {
hasCloseIcon,
onClose,
ribbonText,
hasRibbon,
videoLookupCloseText,
customStyle,
sliderData,
isAutoPlayAnimation,
hasBouncAnimationOnMount,
customId,
testId,
hasExpandedButton,
onPrimaryButtonClick,
onSecondaryButtonClick,
customProps,
tagAttributes,
a11yAttributes,
closeIconTooltip,
dragBoundaryLimit,
isDraggable,
position
} = _ref;
const getNextIndex = useZIndex();
const style = useMergeStyle(defaultStyle, customStyle);
const {
state,
dragRef,
openVideoLookup,
closeVideoLookup
} = useOnboarding({
dragBoundaryLimit,
isDraggable: isDraggable && sliderData.length > 0
});
const {
videoLookupLink,
isVideoLookupOpen,
isEmbeddedLink,
videoLookupFormat
} = state;
const {
primaryButtonProps,
secondaryButtonProps,
secondaryButtonLinkProps,
ribbonProps,
footerProps,
headingProps,
descriptionProps,
videoLookupProps
} = customProps;
const {
sliderIndex,
mainContainerEleRef,
isAnimationPaused,
translateMovementVal,
handleMouseEnter,
handleMouseLeave,
handleSliderIndexChange,
handleSliderNext,
handleAnimationEnd
} = useOnboardingSlider({
isAutoPlayAnimation: isAutoPlayAnimation,
sliderData: sliderData,
animationClass: style.mainContainerAnimation
});
const renderMediaElement = (imageSource, videoSourceLink, videoSourceFormat) => imageSource ? /*#__PURE__*/React.createElement(Image, {
src: imageSource,
className: `${style.mediaElement} ${style.image}`
}) : videoSourceLink ? /*#__PURE__*/React.createElement("video", {
className: style.mediaElement,
autoPlay: true,
loop: true,
muted: true
}, /*#__PURE__*/React.createElement("source", {
src: videoSourceLink,
type: `video/${videoSourceFormat}`
})) : null;
const renderFooter = (sliderData, currentSliderIndex) => {
const currentSliderData = sliderData && sliderData[currentSliderIndex];
const {
hasPrimaryButton = true,
hasSecondaryButton = false,
hasSecondaryButtonLink = false,
primaryButtonText = 'Got it',
secondaryButtonText,
secondaryButtonLink,
tabName
} = currentSliderData || DUMMY_OBJECT;
const expandedClass = hasExpandedButton ? style.expandedButton : "";
const isFinalSlide = sliderData && sliderData.length - 1 === currentSliderIndex;
const handlePrimaryButtonClick = () => {
if (typeof onPrimaryButtonClick == 'function') {
onPrimaryButtonClick(tabName);
} else {
if (!isFinalSlide) {
handleSliderNext();
} else {
onClose && onClose();
}
}
};
const handleSecondaryButtonClick = () => {
if (typeof onSecondaryButtonClick == 'function') {
onSecondaryButtonClick(tabName);
}
};
return /*#__PURE__*/React.createElement(Flex, {
$ui_displayMode: "flex",
$ui_direction: hasExpandedButton ? "column" : "row",
$ui_wrapMode: hasExpandedButton ? "wrap" : undefined,
$ui_alignItems: "center",
$ui_className: style.footer,
...footerProps
}, sliderData.length > 1 && /*#__PURE__*/React.createElement(CarouselDots, {
sliderDetails: sliderData,
currentSliderIndex: currentSliderIndex,
isAnimationPaused: isAnimationPaused,
onClick: handleSliderIndexChange,
customId: `${customId}_carousel_dots`,
testId: `${testId}_carousel_dots`
}), /*#__PURE__*/React.createElement(Flex, {
$ui_displayMode: "flex",
$ui_justifyContent: "end",
$flag_flexible: true,
$ui_wrapMode: hasExpandedButton ? "wrap" : undefined,
$ui_className: style.btnWrapper
}, hasSecondaryButton && (hasSecondaryButtonLink ? /*#__PURE__*/React.createElement(Link, {
href: secondaryButtonLink,
title: secondaryButtonText,
dataId: `${customId}_secondary_button_link`,
target: "_blank",
className: `${style.secondaryButtton} ${style.secondaryButttonLink} ${style.footerButton} ${expandedClass}`,
...secondaryButtonLinkProps
}, secondaryButtonText) : /*#__PURE__*/React.createElement(Button, {
dataId: `${customId}_secondary_button`,
title: secondaryButtonText,
text: secondaryButtonText,
onClick: handleSecondaryButtonClick,
customClass: {
customButton: ` ${style.secondaryButtton} ${style.footerButton} ${expandedClass}`
},
...secondaryButtonProps
})), hasPrimaryButton && /*#__PURE__*/React.createElement(Button, {
dataId: `${customId}_primary_button`,
title: primaryButtonText,
text: primaryButtonText,
palette: "primaryFilled",
customClass: {
customButton: `${style.primaryButton} ${style.footerButton} ${expandedClass}`
},
onClick: handlePrimaryButtonClick,
...primaryButtonProps
})));
};
return /*#__PURE__*/React.createElement("div", {
"data-drag-container": isDraggable ? 'true' : 'false',
style: position !== 'static' || isDraggable ? {
zIndex: getNextIndex()
} : null,
ref: mainContainerEleRef,
"data-id": `${customId}_container`,
"data-test-id": `${testId}_container`,
className: `${style.mainContainer} ${position !== 'static' ? style[`positon_${position}`] : ''} ${hasBouncAnimationOnMount ? style.mainContainerAnimation : ""}`,
onAnimationEnd: hasBouncAnimationOnMount ? handleAnimationEnd : null,
...tagAttributes,
...a11yAttributes
}, /*#__PURE__*/React.createElement("div", {
className: style.mainWrapper,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave
}, /*#__PURE__*/React.createElement("div", {
className: style.gradientLayer
}, /*#__PURE__*/React.createElement("div", {
className: `${style.circleBlur} ${style.circleBlurOne}`
}), /*#__PURE__*/React.createElement("div", {
className: `${style.circleBlur} ${style.circleBlurTwo}`
})), Array.isArray(sliderData) && sliderData.length > 0 ? /*#__PURE__*/React.createElement("div", {
className: style.carousel,
ref: isDraggable ? dragRef : null,
"data-drag-hook": isDraggable ? "true" : "false"
}, /*#__PURE__*/React.createElement(Flex, {
$ui_displayMode: "flex",
$tagAttributes_container: {
style: {
'--local_translate_movement': `${translateMovementVal}%`
}
},
$ui_className: style.carouselInner
}, sliderData.map((item, index) => {
const {
imageSource,
videoSource,
mediaElement,
heading,
description,
hasVideoPlayButton = false,
videoLookupSource,
tabName
} = item;
const videoLookupSourceLink = videoLookupSource && videoLookupSource.link ? videoLookupSource.link : null;
const videoLookupSourceFormat = videoLookupSource && videoLookupSource.format ? videoLookupSource.format : null;
const isEmbeddedvideoLookupSource = videoLookupSource && videoLookupSource.isEmbeddedLink ? videoLookupSource.isEmbeddedLink : null;
const videoSourceLink = videoSource && videoSource.link ? videoSource.link : null;
const videoSourceFormat = videoSource && videoSource.format ? videoSource.format : null;
const handleOpenVideoLookup = () => openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat);
return /*#__PURE__*/React.createElement(Flex, {
$ui_displayMode: "flex",
$ui_direction: "column",
$flag_shrink: false,
$ui_className: style.carouselItem,
key: tabName
}, /*#__PURE__*/React.createElement(Flex, {
$ui_className: `${style.header}`,
$ui_displayMode: "flex",
$ui_justifyContent: "center",
$ui_alignItems: "center",
$flag_fullsize: true
}, /*#__PURE__*/React.createElement("div", {
className: `${style.innerHead} ${hasVideoPlayButton ? style.dvLayer : ''}`
}, mediaElement ? mediaElement : renderMediaElement(imageSource, videoSourceLink, videoSourceFormat), hasVideoPlayButton && /*#__PURE__*/React.createElement(Flex, {
$ui_displayMode: "flex",
$ui_justifyContent: "center",
$ui_alignItems: "center",
$ui_className: style.playIconWrapper
}, /*#__PURE__*/React.createElement(Flex, {
$ui_displayMode: "flex",
$ui_justifyContent: "center",
$ui_alignItems: "center",
$ui_tagName: "button",
customId: `${customId}_play_icon`,
testId: `${testId}_play_icon`,
$ui_className: `${style.playIcon} ${style.animate} ${btnStyle.buttonReset}`,
$event_onClick: videoLookupSourceLink ? handleOpenVideoLookup : null
}, /*#__PURE__*/React.createElement(Icon, {
name: "ZD-GN-arrowFill",
iconClass: style.playIconInner
}))))), /*#__PURE__*/React.createElement(Flex, {
$ui_scroll: "vertical",
$ui_className: style.content
}, /*#__PURE__*/React.createElement(Typography, {
$ui_size: "20",
$ui_lineClamp: "3",
$ui_weight: "bold",
$ui_className: style.heading,
$i18n_dataTitle: heading,
$ui_lineHeight: "1.4",
...headingProps
}, heading), /*#__PURE__*/React.createElement(Typography, {
$ui_size: "14",
$ui_lineHeight: "1.6",
$ui_lineClamp: "4",
$i18n_dataTitle: description,
$ui_className: style.description,
...descriptionProps
}, description)));
}))) : null, renderFooter(sliderData, sliderIndex), hasCloseIcon ? /*#__PURE__*/React.createElement(Flex, {
$ui_tagName: "button",
$tagAttributes_container: {
'data-title': closeIconTooltip
},
$ui_displayMode: "flex",
customId: `${customId}_close_icon`,
testId: `${testId}_close_icon`,
$ui_justifyContent: "center",
$ui_alignItems: "center",
$ui_className: `${style.closeIconContainer} ${btnStyle.buttonReset}`,
$event_onClick: onClose
}, /*#__PURE__*/React.createElement(Icon, {
name: "ZD-inappClose",
iconClass: style.closeIcon
})) : null, hasRibbon ? /*#__PURE__*/React.createElement(Ribbon, {
dataId: `${customId}_ribbon`,
palette: "primary",
size: "medium",
customClass: style.newRibbon,
type: "flag",
text: ribbonText,
...ribbonProps
}) : null, isVideoLookupOpen ? /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(VideoLookup, {
videoFormat: videoLookupFormat,
onClose: closeVideoLookup,
isEmbeddedLink: isEmbeddedLink,
link: videoLookupLink,
isOpened: isVideoLookupOpen,
closeText: videoLookupCloseText,
...videoLookupProps
})) : null));
};
export default Onboarding;
Onboarding.propTypes = propTypes;
Onboarding.defaultProps = defaultProps;