@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
161 lines • 6.88 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["expanded", "handleChange", "children"],
_excluded2 = ["sx"],
_excluded3 = ["variant", "variantAspectRatio", "containerProps", "srcVideo"],
_excluded4 = ["component", "alt", "width", "height", "src", "sx"],
_excluded5 = ["sx"],
_excluded6 = ["sx"];
/* eslint-disable max-len */
import React from 'react';
import { Box, Stack, useMediaQuery, useTheme } from '@mui/material';
import { BlockVideoCustom } from '../BlockVideoCustom';
import { CustomButton } from './styled';
import { ContentRowBlock } from '../../ContentRowBlock';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export var ButtonTabTemplate = function ButtonTabTemplate(_ref) {
var expanded = _ref.expanded,
handleChange = _ref.handleChange,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/_jsx(CustomButton, Object.assign({
variant: "text",
expanded: expanded,
onClick: function onClick() {
return handleChange == null ? void 0 : handleChange();
}
}, rest, {
children: children
}));
};
export var RenderTabsVideo = function RenderTabsVideo(_ref2) {
var blockImageProps = _ref2.blockImageProps,
blockVideoProps = _ref2.blockVideoProps,
containerProps = _ref2.containerProps,
firstBlockProps = _ref2.firstBlockProps,
panel = _ref2.panel,
renderChildren = _ref2.renderChildren,
renderUrl = _ref2.renderUrl,
tabProps = _ref2.tabProps,
tabs = _ref2.tabs,
title = _ref2.title,
_ref2$variantBlock = _ref2.variantBlock,
variantBlock = _ref2$variantBlock === void 0 ? 'video' : _ref2$variantBlock,
renderCustomTabChildren = _ref2.renderCustomTabChildren;
var theme = useTheme();
var isMqMd = useMediaQuery(theme.breakpoints.down('md'));
var _ref3 = tabProps || {},
rest = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
var _ref4 = containerProps || {},
sx = _ref4.sx,
restContainerProps = _objectWithoutProperties(_ref4, _excluded2);
var _ref5 = blockVideoProps || {},
_ref5$variant = _ref5.variant,
variantBlockVideo = _ref5$variant === void 0 ? 'videoPlayer' : _ref5$variant,
_ref5$variantAspectRa = _ref5.variantAspectRatio,
variantAspectRatio = _ref5$variantAspectRa === void 0 ? '16:9' : _ref5$variantAspectRa,
containerPropsBlockVideo = _ref5.containerProps,
_ref5$srcVideo = _ref5.srcVideo,
srcVideo = _ref5$srcVideo === void 0 ? variantBlock === 'video' && renderUrl ? renderUrl[panel] : '' : _ref5$srcVideo,
restBlockVideoProps = _objectWithoutProperties(_ref5, _excluded3);
var _ref6 = blockImageProps || {},
_ref6$component = _ref6.component,
componentBlockImage = _ref6$component === void 0 ? 'img' : _ref6$component,
_ref6$alt = _ref6.alt,
altBlockImage = _ref6$alt === void 0 ? 'random img' : _ref6$alt,
_ref6$width = _ref6.width,
widthBlockImage = _ref6$width === void 0 ? 500 : _ref6$width,
_ref6$height = _ref6.height,
heightBlockImage = _ref6$height === void 0 ? 400 : _ref6$height,
_ref6$src = _ref6.src,
srcBlockImage = _ref6$src === void 0 ? variantBlock === 'image' && renderUrl ? renderUrl[panel] : '' : _ref6$src,
sxBlockImage = _ref6.sx,
restBlockImageProps = _objectWithoutProperties(_ref6, _excluded4);
var _ref7 = (firstBlockProps == null ? void 0 : firstBlockProps.containerProps) || {},
sxFirstBlockContainerProps = _ref7.sx,
restFirstBlockContainerProps = _objectWithoutProperties(_ref7, _excluded5);
var _ref8 = (firstBlockProps == null ? void 0 : firstBlockProps.contentTabsProps) || {},
sxFirstBlockContentTabsProps = _ref8.sx,
restFirstBlockContentTabsProps = _objectWithoutProperties(_ref8, _excluded6);
return /*#__PURE__*/_jsx(ContentRowBlock, Object.assign({
maxWidth: "lg",
sx: Object.assign({
gap: '2.5rem'
}, sx),
firstBoxProps: {
sx: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
gap: '2rem'
}
},
secondBoxProps: {
sx: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}
},
firstBox: /*#__PURE__*/_jsxs(_Fragment, {
children: [isMqMd && title && title, /*#__PURE__*/_jsxs(Stack, Object.assign({
rowGap: "1rem",
sx: Object.assign(_defineProperty({
width: 'fit-content'
}, theme.breakpoints.down('md'), {
width: '100%'
}), sxFirstBlockContainerProps)
}, restFirstBlockContainerProps, {
children: [!isMqMd && title, /*#__PURE__*/_jsx(Box, Object.assign({
sx: Object.assign(_defineProperty({
display: 'flex',
flexDirection: 'column',
gap: '1rem',
width: '100%'
}, theme.breakpoints.down('md'), {
display: 'grid',
gridTemplateColumns: 'repeat(2, 1fr)'
}), sxFirstBlockContentTabsProps)
}, restFirstBlockContentTabsProps, {
children: tabs.map(function (tab) {
if (renderCustomTabChildren) {
return renderCustomTabChildren == null ? void 0 : renderCustomTabChildren(tab);
}
return /*#__PURE__*/_jsx(ButtonTabTemplate, Object.assign({
expanded: tab.expanded,
handleChange: tab.handleChange
}, rest, {
children: tab.title
}), tab.id);
})
}))]
}))]
}),
secondBox: /*#__PURE__*/_jsxs(_Fragment, {
children: [variantBlock === 'video' && renderUrl && /*#__PURE__*/_jsx(BlockVideoCustom, Object.assign({
variant: variantBlockVideo,
variantAspectRatio: variantAspectRatio,
srcVideo: srcVideo,
containerProps: Object.assign({
sx: Object.assign({
margin: '0 auto',
width: '100%'
}, containerPropsBlockVideo == null ? void 0 : containerPropsBlockVideo.sx)
}, containerPropsBlockVideo)
}, restBlockVideoProps)), variantBlock === 'image' && renderUrl && /*#__PURE__*/_jsx(Box, Object.assign({
component: componentBlockImage,
src: srcBlockImage,
alt: altBlockImage,
width: widthBlockImage,
height: heightBlockImage,
sx: Object.assign({
objectFit: 'cover',
objectPosition: 'center'
}, sxBlockImage)
}, restBlockImageProps)), variantBlock === 'custom' && renderChildren && renderChildren[panel]]
})
}, restContainerProps));
};