@razorpay/blade
Version:
The Design System that powers Razorpay
93 lines (90 loc) • 2.73 kB
JavaScript
import 'react';
import styled from 'styled-components';
import '../Box/index.js';
import '../Box/BaseBox/index.js';
import '../Carousel/index.js';
import { jsx } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { Box } from '../Box/Box.js';
import { Carousel } from '../Carousel/Carousel.web.js';
import { CarouselItem } from '../Carousel/CarouselItem.web.js';
var LIGHTBOX_MAX_WIDTH = {
base: '100%',
m: '680px'
};
var LIGHTBOX_MAX_HEIGHT = {
base: '60vh',
m: '480px'
};
var LightBoxContentWrapper = function LightBoxContentWrapper(_ref) {
var children = _ref.children;
return /*#__PURE__*/jsx(BaseBox, {
width: LIGHTBOX_MAX_WIDTH,
height: LIGHTBOX_MAX_HEIGHT,
justifyContent: "center",
alignItems: "center",
display: "flex",
onClick: function onClick(e) {
return e.stopPropagation();
},
children: children
});
};
var StyledMainImage = /*#__PURE__*/styled.img.withConfig({
displayName: "LightBoxMainViewweb__StyledMainImage",
componentId: "sc-1s0k75-0"
})({
display: 'block',
width: 'auto',
height: 'auto',
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain'
});
var LightBoxMainView = function LightBoxMainView(_ref2) {
var items = _ref2.items,
activeIndex = _ref2.activeIndex,
onChange = _ref2.onChange;
return /*#__PURE__*/jsx(Box, {
overflow: "hidden",
height: "100%",
display: "flex",
alignItems: "center",
children: /*#__PURE__*/jsx(Carousel, {
activeSlide: activeIndex,
onChange: onChange,
visibleItems: 1,
shouldAddStartEndSpacing: false,
navigationButtonPosition: "side",
showNavigationButtons: false,
showIndicators: false,
width: "100%",
carouselItemWidth: "100%",
carouselItemAlignment: "center",
children: items.map(function (item, i) {
var _item$alt;
return /*#__PURE__*/jsx(CarouselItem, {
children: /*#__PURE__*/jsx(BaseBox, {
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: {
base: 'spacing.0',
m: 'spacing.5'
},
children: item.src ? /*#__PURE__*/jsx(LightBoxContentWrapper, {
children: /*#__PURE__*/jsx(StyledMainImage, {
src: item.src,
alt: (_item$alt = item.alt) !== null && _item$alt !== void 0 ? _item$alt : "Item ".concat(i + 1)
})
}) : /*#__PURE__*/jsx(LightBoxContentWrapper, {
children: item.children
})
})
}, i);
})
})
});
};
export { LightBoxMainView };
//# sourceMappingURL=LightBoxMainView.web.js.map