@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
346 lines (308 loc) • 16.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = require("./props/propTypes");
var _defaultProps = require("./props/defaultProps");
var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
var _Button = _interopRequireDefault(require("@zohodesk/components/lib/Button/Button"));
var _Modal = _interopRequireDefault(require("@zohodesk/components/lib/Modal/Modal"));
var _Ribbon = _interopRequireDefault(require("@zohodesk/components/es/Ribbon/Ribbon"));
var _Typography = _interopRequireDefault(require("@zohodesk/components/es/Typography/Typography"));
var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
var _ZindexProvider = require("@zohodesk/components/es/Provider/ZindexProvider");
var _VideoLookup = _interopRequireDefault(require("../VideoLookup/VideoLookup"));
var _Link = _interopRequireDefault(require("../Link/Link"));
var _CarouselDots = _interopRequireDefault(require("./CarouselDots/CarouselDots"));
var _Image = _interopRequireDefault(require("../Image/Image"));
var _useOnboardingSlider2 = _interopRequireDefault(require("./hooks/useOnboardingSlider"));
var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
var _useOnboarding2 = _interopRequireDefault(require("./hooks/useOnboarding"));
var _General = require("../utils/General");
var _OnboardingModule = _interopRequireDefault(require("./css/Onboarding.module.css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var Onboarding = function Onboarding(_ref) {
var hasCloseIcon = _ref.hasCloseIcon,
onClose = _ref.onClose,
ribbonText = _ref.ribbonText,
hasRibbon = _ref.hasRibbon,
videoLookupCloseText = _ref.videoLookupCloseText,
customStyle = _ref.customStyle,
sliderData = _ref.sliderData,
isAutoPlayAnimation = _ref.isAutoPlayAnimation,
hasBouncAnimationOnMount = _ref.hasBouncAnimationOnMount,
customId = _ref.customId,
testId = _ref.testId,
hasExpandedButton = _ref.hasExpandedButton,
onPrimaryButtonClick = _ref.onPrimaryButtonClick,
onSecondaryButtonClick = _ref.onSecondaryButtonClick,
customProps = _ref.customProps,
tagAttributes = _ref.tagAttributes,
a11yAttributes = _ref.a11yAttributes,
closeIconTooltip = _ref.closeIconTooltip,
dragBoundaryLimit = _ref.dragBoundaryLimit,
isDraggable = _ref.isDraggable,
position = _ref.position;
var getNextIndex = (0, _ZindexProvider.useZIndex)();
var style = (0, _useMergeStyle["default"])(_OnboardingModule["default"], customStyle);
var _useOnboarding = (0, _useOnboarding2["default"])({
dragBoundaryLimit: dragBoundaryLimit,
isDraggable: isDraggable && sliderData.length > 0
}),
state = _useOnboarding.state,
dragRef = _useOnboarding.dragRef,
openVideoLookup = _useOnboarding.openVideoLookup,
closeVideoLookup = _useOnboarding.closeVideoLookup;
var videoLookupLink = state.videoLookupLink,
isVideoLookupOpen = state.isVideoLookupOpen,
isEmbeddedLink = state.isEmbeddedLink,
videoLookupFormat = state.videoLookupFormat;
var primaryButtonProps = customProps.primaryButtonProps,
secondaryButtonProps = customProps.secondaryButtonProps,
secondaryButtonLinkProps = customProps.secondaryButtonLinkProps,
ribbonProps = customProps.ribbonProps,
footerProps = customProps.footerProps,
headingProps = customProps.headingProps,
descriptionProps = customProps.descriptionProps,
videoLookupProps = customProps.videoLookupProps;
var _useOnboardingSlider = (0, _useOnboardingSlider2["default"])({
isAutoPlayAnimation: isAutoPlayAnimation,
sliderData: sliderData,
animationClass: style.mainContainerAnimation
}),
sliderIndex = _useOnboardingSlider.sliderIndex,
mainContainerEleRef = _useOnboardingSlider.mainContainerEleRef,
isAnimationPaused = _useOnboardingSlider.isAnimationPaused,
translateMovementVal = _useOnboardingSlider.translateMovementVal,
handleMouseEnter = _useOnboardingSlider.handleMouseEnter,
handleMouseLeave = _useOnboardingSlider.handleMouseLeave,
handleSliderIndexChange = _useOnboardingSlider.handleSliderIndexChange,
handleSliderNext = _useOnboardingSlider.handleSliderNext,
handleAnimationEnd = _useOnboardingSlider.handleAnimationEnd;
var renderMediaElement = function renderMediaElement(imageSource, videoSourceLink, videoSourceFormat) {
return imageSource ? /*#__PURE__*/_react["default"].createElement(_Image["default"], {
src: imageSource,
className: "".concat(style.mediaElement, " ").concat(style.image)
}) : videoSourceLink ? /*#__PURE__*/_react["default"].createElement("video", {
className: style.mediaElement,
autoPlay: true,
loop: true,
muted: true
}, /*#__PURE__*/_react["default"].createElement("source", {
src: videoSourceLink,
type: "video/".concat(videoSourceFormat)
})) : null;
};
var renderFooter = function renderFooter(sliderData, currentSliderIndex) {
var currentSliderData = sliderData && sliderData[currentSliderIndex];
var _ref2 = currentSliderData || _General.DUMMY_OBJECT,
_ref2$hasPrimaryButto = _ref2.hasPrimaryButton,
hasPrimaryButton = _ref2$hasPrimaryButto === void 0 ? true : _ref2$hasPrimaryButto,
_ref2$hasSecondaryBut = _ref2.hasSecondaryButton,
hasSecondaryButton = _ref2$hasSecondaryBut === void 0 ? false : _ref2$hasSecondaryBut,
_ref2$hasSecondaryBut2 = _ref2.hasSecondaryButtonLink,
hasSecondaryButtonLink = _ref2$hasSecondaryBut2 === void 0 ? false : _ref2$hasSecondaryBut2,
_ref2$primaryButtonTe = _ref2.primaryButtonText,
primaryButtonText = _ref2$primaryButtonTe === void 0 ? 'Got it' : _ref2$primaryButtonTe,
secondaryButtonText = _ref2.secondaryButtonText,
secondaryButtonLink = _ref2.secondaryButtonLink,
tabName = _ref2.tabName;
var expandedClass = hasExpandedButton ? style.expandedButton : "";
var isFinalSlide = sliderData && sliderData.length - 1 === currentSliderIndex;
var handlePrimaryButtonClick = function handlePrimaryButtonClick() {
if (typeof onPrimaryButtonClick == 'function') {
onPrimaryButtonClick(tabName);
} else {
if (!isFinalSlide) {
handleSliderNext();
} else {
onClose && onClose();
}
}
};
var handleSecondaryButtonClick = function handleSecondaryButtonClick() {
if (typeof onSecondaryButtonClick == 'function') {
onSecondaryButtonClick(tabName);
}
};
return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
$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["default"].createElement(_CarouselDots["default"], {
sliderDetails: sliderData,
currentSliderIndex: currentSliderIndex,
isAnimationPaused: isAnimationPaused,
onClick: handleSliderIndexChange,
customId: "".concat(customId, "_carousel_dots"),
testId: "".concat(testId, "_carousel_dots")
}), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
$ui_displayMode: "flex",
$ui_justifyContent: "end",
$flag_flexible: true,
$ui_wrapMode: hasExpandedButton ? "wrap" : undefined,
$ui_className: style.btnWrapper
}, hasSecondaryButton && (hasSecondaryButtonLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
href: secondaryButtonLink,
title: secondaryButtonText,
dataId: "".concat(customId, "_secondary_button_link"),
target: "_blank",
className: "".concat(style.secondaryButtton, " ").concat(style.secondaryButttonLink, " ").concat(style.footerButton, " ").concat(expandedClass)
}, secondaryButtonLinkProps), secondaryButtonText) : /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
dataId: "".concat(customId, "_secondary_button"),
title: secondaryButtonText,
text: secondaryButtonText,
onClick: handleSecondaryButtonClick,
customClass: {
customButton: " ".concat(style.secondaryButtton, " ").concat(style.footerButton, " ").concat(expandedClass)
}
}, secondaryButtonProps))), hasPrimaryButton && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
dataId: "".concat(customId, "_primary_button"),
title: primaryButtonText,
text: primaryButtonText,
palette: "primaryFilled",
customClass: {
customButton: "".concat(style.primaryButton, " ").concat(style.footerButton, " ").concat(expandedClass)
},
onClick: handlePrimaryButtonClick
}, primaryButtonProps))));
};
return /*#__PURE__*/_react["default"].createElement("div", _extends({
"data-drag-container": isDraggable ? 'true' : 'false',
style: position !== 'static' || isDraggable ? {
zIndex: getNextIndex()
} : null,
ref: mainContainerEleRef,
"data-id": "".concat(customId, "_container"),
"data-test-id": "".concat(testId, "_container"),
className: "".concat(style.mainContainer, " ").concat(position !== 'static' ? style["positon_".concat(position)] : '', " ").concat(hasBouncAnimationOnMount ? style.mainContainerAnimation : ""),
onAnimationEnd: hasBouncAnimationOnMount ? handleAnimationEnd : null
}, tagAttributes, a11yAttributes), /*#__PURE__*/_react["default"].createElement("div", {
className: style.mainWrapper,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave
}, /*#__PURE__*/_react["default"].createElement("div", {
className: style.gradientLayer
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(style.circleBlur, " ").concat(style.circleBlurOne)
}), /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(style.circleBlur, " ").concat(style.circleBlurTwo)
})), Array.isArray(sliderData) && sliderData.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
className: style.carousel,
ref: isDraggable ? dragRef : null,
"data-drag-hook": isDraggable ? "true" : "false"
}, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
$ui_displayMode: "flex",
$tagAttributes_container: {
style: {
'--local_translate_movement': "".concat(translateMovementVal, "%")
}
},
$ui_className: style.carouselInner
}, sliderData.map(function (item, index) {
var imageSource = item.imageSource,
videoSource = item.videoSource,
mediaElement = item.mediaElement,
heading = item.heading,
description = item.description,
_item$hasVideoPlayBut = item.hasVideoPlayButton,
hasVideoPlayButton = _item$hasVideoPlayBut === void 0 ? false : _item$hasVideoPlayBut,
videoLookupSource = item.videoLookupSource,
tabName = item.tabName;
var videoLookupSourceLink = videoLookupSource && videoLookupSource.link ? videoLookupSource.link : null;
var videoLookupSourceFormat = videoLookupSource && videoLookupSource.format ? videoLookupSource.format : null;
var isEmbeddedvideoLookupSource = videoLookupSource && videoLookupSource.isEmbeddedLink ? videoLookupSource.isEmbeddedLink : null;
var videoSourceLink = videoSource && videoSource.link ? videoSource.link : null;
var videoSourceFormat = videoSource && videoSource.format ? videoSource.format : null;
var handleOpenVideoLookup = function handleOpenVideoLookup() {
return openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat);
};
return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
$ui_displayMode: "flex",
$ui_direction: "column",
$flag_shrink: false,
$ui_className: style.carouselItem,
key: tabName
}, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
$ui_className: "".concat(style.header),
$ui_displayMode: "flex",
$ui_justifyContent: "center",
$ui_alignItems: "center",
$flag_fullsize: true
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(style.innerHead, " ").concat(hasVideoPlayButton ? style.dvLayer : '')
}, mediaElement ? mediaElement : renderMediaElement(imageSource, videoSourceLink, videoSourceFormat), hasVideoPlayButton && /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
$ui_displayMode: "flex",
$ui_justifyContent: "center",
$ui_alignItems: "center",
$ui_className: style.playIconWrapper
}, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
$ui_displayMode: "flex",
$ui_justifyContent: "center",
$ui_alignItems: "center",
$ui_tagName: "button",
customId: "".concat(customId, "_play_icon"),
testId: "".concat(testId, "_play_icon"),
$ui_className: "".concat(style.playIcon, " ").concat(style.animate, " ").concat(_semanticButtonModule["default"].buttonReset),
$event_onClick: videoLookupSourceLink ? handleOpenVideoLookup : null
}, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
name: "ZD-GN-arrowFill",
iconClass: style.playIconInner
}))))), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
$ui_scroll: "vertical",
$ui_className: style.content
}, /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({
$ui_size: "20",
$ui_lineClamp: "3",
$ui_weight: "bold",
$ui_className: style.heading,
$i18n_dataTitle: heading,
$ui_lineHeight: "1.4"
}, headingProps), heading), /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({
$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["default"].createElement(_Flex["default"], {
$ui_tagName: "button",
$tagAttributes_container: {
'data-title': closeIconTooltip
},
$ui_displayMode: "flex",
customId: "".concat(customId, "_close_icon"),
testId: "".concat(testId, "_close_icon"),
$ui_justifyContent: "center",
$ui_alignItems: "center",
$ui_className: "".concat(style.closeIconContainer, " ").concat(_semanticButtonModule["default"].buttonReset),
$event_onClick: onClose
}, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
name: "ZD-inappClose",
iconClass: style.closeIcon
})) : null, hasRibbon ? /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], _extends({
dataId: "".concat(customId, "_ribbon"),
palette: "primary",
size: "medium",
customClass: style.newRibbon,
type: "flag",
text: ribbonText
}, ribbonProps)) : null, isVideoLookupOpen ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], null, /*#__PURE__*/_react["default"].createElement(_VideoLookup["default"], _extends({
videoFormat: videoLookupFormat,
onClose: closeVideoLookup,
isEmbeddedLink: isEmbeddedLink,
link: videoLookupLink,
isOpened: isVideoLookupOpen,
closeText: videoLookupCloseText
}, videoLookupProps))) : null));
};
var _default = Onboarding;
exports["default"] = _default;
Onboarding.propTypes = _propTypes.propTypes;
Onboarding.defaultProps = _defaultProps.defaultProps;