tdesign-react/cjs/swiper/SwiperItem.js

TDesign Component for React

/**
 * tdesign v1.16.2
 * (c) 2025 tdesign
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var defineProperty = require('../_chunks/dep-0fe55884.js');
var slicedToArray = require('../_chunks/dep-5cb0d66d.js');
var React = require('react');
var classNames = require('classnames');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_useIsFirstRender = require('../hooks/useIsFirstRender.js');
require('../_chunks/dep-b325182b.js');
require('../_chunks/dep-737b8bd8.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-17dea53e.js');
require('../_chunks/dep-a0cbf081.js');
require('dayjs');
require('../_chunks/dep-481a1ecc.js');
require('../_chunks/dep-474eb386.js');
require('../_chunks/dep-3b256bc0.js');
require('../_chunks/dep-4ce0670e.js');
require('../_chunks/dep-3448f35f.js');
require('../_chunks/dep-b6a3ada9.js');
require('../_chunks/dep-967e785f.js');
require('../_chunks/dep-5c8525ea.js');
require('../_chunks/dep-735cd5b9.js');
require('../_chunks/dep-bdafd287.js');
require('../_chunks/dep-4d300b8f.js');
require('../_chunks/dep-3332ad6f.js');
require('../_chunks/dep-98783318.js');
require('../_chunks/dep-fc884a8e.js');
require('../_chunks/dep-008b21d4.js');
require('../_chunks/dep-9193eded.js');
require('../_chunks/dep-afe817f9.js');
require('../_chunks/dep-0b70c7ec.js');
require('../_chunks/dep-a1e3e59b.js');
require('../_chunks/dep-24ab8f68.js');
require('../_chunks/dep-753b7d52.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);

var CARD_SCALE = 210 / 332;
var itemWidth = 0.415;
var disposeIndex = function disposeIndex(index, currentIndex, childrenLength) {
  if (currentIndex === 0 && index === childrenLength - 1) {
    return -1;
  }
  if (currentIndex === childrenLength - 1 && index === 0) {
    return childrenLength;
  }
  if (index < currentIndex - 1 && currentIndex - index >= childrenLength / 2) {
    return childrenLength + 1;
  }
  if (index > currentIndex + 1 && index - currentIndex >= childrenLength / 2) {
    return -2;
  }
  return index;
};
var calculateTranslate = function calculateTranslate(index, currentIndex, parentWidth, inStage, cardScale) {
  if (inStage) {
    return parentWidth * ((index - currentIndex) * (1 - itemWidth * cardScale) - itemWidth + 1) / 2;
  }
  if (index < currentIndex) {
    return -itemWidth * (1 + cardScale) * parentWidth / 2;
  }
  return (2 + itemWidth * (cardScale - 1)) * parentWidth / 2;
};
var getZindex = function getZindex(isActivity, inStage) {
  if (isActivity) {
    return 2;
  }
  if (inStage) {
    return 1;
  }
  return 0;
};
var SwiperItem = function SwiperItem(props) {
  var children = props.children,
    currentIndex = props.currentIndex,
    index = props.index,
    animation = props.animation,
    _props$duration = props.duration,
    duration = _props$duration === void 0 ? 300 : _props$duration,
    needAnimation = props.needAnimation,
    _props$type = props.type,
    type = _props$type === void 0 ? "default" : _props$type,
    childrenLength = props.childrenLength,
    getWrapAttribute = props.getWrapAttribute,
    _props$cardScale = props.cardScale,
    cardScale = _props$cardScale === void 0 ? CARD_SCALE : _props$cardScale;
  var _useConfig = hooks_useConfig["default"](),
    classPrefix = _useConfig.classPrefix;
  var _useState = React.useState({}),
    _useState2 = slicedToArray._slicedToArray(_useState, 2),
    setUpdate = _useState2[1];
  var isFirstFirstRender = hooks_useIsFirstRender["default"]();
  var getSwiperItemStyle = function getSwiperItemStyle() {
    if (animation === "fade") {
      return {
        opacity: currentIndex === index ? 1 : 0,
        transition: needAnimation ? "opacity ".concat(duration / 1e3, "s") : ""
      };
    }
    if (type === "card") {
      var wrapWidth = getWrapAttribute("offsetWidth");
      var translateIndex = index !== currentIndex && childrenLength > 2 ? disposeIndex(index, currentIndex, childrenLength) : index;
      var inStage = Math.round(Math.abs(translateIndex - currentIndex)) <= 1;
      var translate = calculateTranslate(translateIndex, currentIndex, wrapWidth, inStage, cardScale).toFixed(2);
      var isActivity = translateIndex === currentIndex;
      var zIndex = getZindex(isActivity, inStage);
      return {
        msTransform: "translateX(".concat(translate, "px) scale(").concat(isActivity ? 1 : cardScale, ")"),
        WebkitTransform: "translateX(".concat(translate, "px) scale(").concat(isActivity ? 1 : cardScale, ")"),
        transform: "translateX(".concat(translate, "px) scale(").concat(isActivity ? 1 : cardScale, ")"),
        transition: "transform ".concat(duration / 1e3, "s ease"),
        zIndex: zIndex
      };
    }
    return {};
  };
  React.useEffect(function () {
    if (isFirstFirstRender) {
      setUpdate({});
    }
  }, []);
  return /* @__PURE__ */React__default["default"].createElement("div", {
    className: classNames__default["default"]("".concat(classPrefix, "-swiper__container__item"), defineProperty._defineProperty(defineProperty._defineProperty(defineProperty._defineProperty({}, "".concat(classPrefix, "-swiper__card"), type === "card"), "".concat(classPrefix, "-is-active"), index === currentIndex), "".concat(classPrefix, "-swiper__fade"), animation === "fade")),
    style: getSwiperItemStyle(),
    "data-index": index
  }, children);
};
SwiperItem.displayName = "SwiperItem";

exports["default"] = SwiperItem;
//# sourceMappingURL=SwiperItem.js.map