@razorpay/blade/build/lib/web/production/components/Carousel/CarouselItem.web.js

The Design System that powers Razorpay

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 '../Box/BaseBox/index.js';
import '../BladeProvider/index.js';
import '../../utils/index.js';
import '../../utils/makeAccessible/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/makeAnalyticsAttribute/index.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"];
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;
  var _useBreakpoint = useBreakpoint({
      breakpoints: theme.breakpoints
    }),
    matchedDeviceType = _useBreakpoint.matchedDeviceType;
  var isMobile = matchedDeviceType === 'mobile';
  var gap = isMobile ? theme.spacing[4] : theme.spacing[5];
  var calculatedWidth = "calc(100% / ".concat(visibleItems, " - ").concat(gap, "px * (").concat(visibleItems, " - 1) / ").concat(visibleItems, ")");
  return _objectSpread({
    flexGrow: 0,
    flexShrink: 0,
    width: calculatedWidth,
    minHeight: '100%',
    scrollSnapAlign: 'start'
  }, isResponsive && {
    width: '100%',
    scrollSnapAlign: 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,
    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
  }, makeAnalyticsAttribute(rest)), {}, {
    children: children
  }));
};
var CarouselItem = /*#__PURE__*/assignWithoutSideEffects(_CarouselItem, {
  componentId: componentIds.CarouselItem
});

export { CarouselItem };
//# sourceMappingURL=CarouselItem.web.js.map