tdesign-react/cjs/swiper/SwiperItem.js

TDesign Component for React

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

'use strict';

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

var defineProperty = require('../_chunks/dep-cc768e34.js');
var slicedToArray = require('../_chunks/dep-e17e2d31.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-6d4d8660.js');
require('../_chunks/dep-b7d577ac.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-3a869b87.js');
require('../_chunks/dep-ac58e1cc.js');
require('dayjs');
require('../_chunks/dep-7da96a57.js');
require('../_chunks/dep-07b911d8.js');
require('../_chunks/dep-4b02d669.js');
require('../_chunks/dep-f0379c5f.js');
require('../_chunks/dep-ddacd27a.js');
require('../_chunks/dep-028b759d.js');
require('../_chunks/dep-8a116183.js');
require('../_chunks/dep-4671b9bd.js');
require('../_chunks/dep-bed9d73e.js');
require('../_chunks/dep-780eda7b.js');
require('../_chunks/dep-47bdc05f.js');
require('../_chunks/dep-cab13149.js');
require('../_chunks/dep-a30819a4.js');
require('../_chunks/dep-6a7ba247.js');
require('../_chunks/dep-c87d9752.js');
require('../_chunks/dep-bd956a2d.js');
require('../_chunks/dep-0cdb3286.js');
require('../_chunks/dep-865c186c.js');
require('../_chunks/dep-f4e58639.js');
require('../_chunks/dep-781a2854.js');
require('../_chunks/dep-1ef213f8.js');
require('../_chunks/dep-e2c832a5.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) {
  if (inStage) {
    return parentWidth * ((index - currentIndex) * (1 - itemWidth * CARD_SCALE) - itemWidth + 1) / 2;
  }
  if (index < currentIndex) {
    return -itemWidth * (1 + CARD_SCALE) * parentWidth / 2;
  }
  return (2 + itemWidth * (CARD_SCALE - 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;
  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).toFixed(2);
      var isActivity = translateIndex === currentIndex;
      var zIndex = getZindex(isActivity, inStage);
      return {
        msTransform: "translateX(".concat(translate, "px) scale(").concat(isActivity ? 1 : CARD_SCALE, ")"),
        WebkitTransform: "translateX(".concat(translate, "px) scale(").concat(isActivity ? 1 : CARD_SCALE, ")"),
        transform: "translateX(".concat(translate, "px) scale(").concat(isActivity ? 1 : CARD_SCALE, ")"),
        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