@razorpay/blade
Version:
The Design System that powers Razorpay
111 lines (106 loc) • 5.76 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import styled from 'styled-components';
import React__default from 'react';
import { useCarouselContext } from './CarouselContext.js';
import { componentIds } from './constants.js';
import '../../utils/index.js';
import '../../utils/makeAccessible/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import '../Box/BaseBox/index.js';
import '../BladeProvider/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import { getSpacingValue as _getSpacingValue } from '../Box/BaseBox/baseBoxStyles.js';
import { jsx } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { useBreakpoint } from '../../utils/useBreakpoint/useBreakpoint.js';
import useTheme from '../BladeProvider/useTheme.js';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["children", "shouldHaveStartSpacing", "shouldHaveEndSpacing", "id", "index", "snapAlign", "gap"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var StyledCarouselItem = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "CarouselItemweb__StyledCarouselItem",
componentId: "sc-56ppo3-0"
})(function (_ref) {
var visibleItems = _ref.visibleItems,
isResponsive = _ref.isResponsive,
shouldAddStartEndSpacing = _ref.shouldAddStartEndSpacing,
shouldHaveStartSpacing = _ref.shouldHaveStartSpacing,
theme = _ref.theme,
snapAlign = _ref.snapAlign,
gap = _ref.gap;
var _useBreakpoint = useBreakpoint({
breakpoints: theme.breakpoints
}),
matchedDeviceType = _useBreakpoint.matchedDeviceType,
matchedBreakpoint = _useBreakpoint.matchedBreakpoint;
var isMobile = matchedDeviceType === 'mobile';
// Resolve gap value: convert spacing token to pixels or use default spacing
// Default: spacing.4 (12px) on mobile, spacing.5 (16px) on desktop
var resolvedGap = gap ? parseInt(_getSpacingValue(gap, theme, typeof gap === 'string' ? 'base' : matchedBreakpoint || 'base') || '0', 10) : isMobile ? theme.spacing[4] : theme.spacing[5];
// Calculate item width: (containerWidth / numberOfItems) - (totalGapSpace / numberOfItems)
// This ensures each item gets equal width while accounting for gaps between items
var calculatedWidth = "calc(100% / ".concat(visibleItems, " - ").concat(resolvedGap, "px * (").concat(visibleItems, " - 1) / ").concat(visibleItems, ")");
var calculatedMarginLeft = shouldHaveStartSpacing ? "calc(".concat(calculatedWidth, " + ").concat(resolvedGap, "px)") : 0;
return _objectSpread({
flexGrow: 0,
flexShrink: 0,
width: calculatedWidth,
height: '100%',
minHeight: '100%',
scrollSnapAlign: snapAlign !== null && snapAlign !== void 0 ? snapAlign : 'start',
marginLeft: calculatedMarginLeft
}, isResponsive && {
width: '100%',
scrollSnapAlign: snapAlign !== null && snapAlign !== void 0 ? snapAlign : isMobile || !shouldAddStartEndSpacing ? 'start' : 'center',
marginLeft: shouldHaveStartSpacing ? '40%' : 0
});
});
var _CarouselItem = function _CarouselItem(_ref2) {
var children = _ref2.children,
shouldHaveStartSpacing = _ref2.shouldHaveStartSpacing,
shouldHaveEndSpacing = _ref2.shouldHaveEndSpacing,
id = _ref2.id,
index = _ref2.index,
snapAlign = _ref2.snapAlign,
gap = _ref2.gap,
rest = _objectWithoutProperties(_ref2, _excluded);
var itemRef = React__default.useRef(null);
var _useCarouselContext = useCarouselContext(),
totalNumberOfSlides = _useCarouselContext.totalNumberOfSlides,
visibleItems = _useCarouselContext.visibleItems,
isResponsive = _useCarouselContext.isResponsive,
carouselItemWidth = _useCarouselContext.carouselItemWidth,
shouldAddStartEndSpacing = _useCarouselContext.shouldAddStartEndSpacing;
var _useTheme = useTheme(),
platform = _useTheme.platform;
var isMobile = platform === 'onMobile';
return /*#__PURE__*/jsx(StyledCarouselItem, _objectSpread(_objectSpread(_objectSpread({}, makeAccessible({
role: 'tabpanel',
roleDescription: 'slide',
label: "".concat(index + 1, " of ").concat(totalNumberOfSlides)
})), {}, {
ref: itemRef,
id: id,
isMobile: isMobile,
"data-slide-index": index,
isResponsive: isResponsive,
visibleItems: visibleItems,
maxWidth: carouselItemWidth,
shouldAddStartEndSpacing: shouldAddStartEndSpacing,
shouldHaveStartSpacing: shouldHaveStartSpacing,
shouldHaveEndSpacing: shouldHaveEndSpacing,
snapAlign: snapAlign,
gap: gap
}, makeAnalyticsAttribute(rest)), {}, {
children: children
}));
};
var CarouselItem = /*#__PURE__*/assignWithoutSideEffects(_CarouselItem, {
componentId: componentIds.CarouselItem
});
export { CarouselItem };
//# sourceMappingURL=CarouselItem.web.js.map