tdesign-react/esm/swiper/SwiperItem.js

TDesign Component for React

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

import { _ as _defineProperty } from '../_chunks/dep-cb0a3966.js';
import { _ as _slicedToArray } from '../_chunks/dep-48805ab8.js';
import React, { useState, useEffect } from 'react';
import classNames from 'classnames';
import useConfig from '../hooks/useConfig.js';
import useIsFirstRender from '../hooks/useIsFirstRender.js';
import '../_chunks/dep-eca3a3de.js';
import '../_chunks/dep-026a4c6b.js';
import '../config-provider/ConfigContext.js';
import 'lodash-es';
import '../locale/zh_CN.js';
import '../_chunks/dep-e29214cb.js';
import 'dayjs';
import '../_chunks/dep-3c9ab31a.js';

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 = useConfig(),
    classPrefix = _useConfig.classPrefix;
  var _useState = useState({}),
    _useState2 = _slicedToArray(_useState, 2),
    setUpdate = _useState2[1];
  var isFirstFirstRender = useIsFirstRender();
  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 {};
  };
  useEffect(function () {
    if (isFirstFirstRender) {
      setUpdate({});
    }
  }, []);
  return /* @__PURE__ */React.createElement("div", {
    className: classNames("".concat(classPrefix, "-swiper__container__item"), _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";

export { SwiperItem as default };
//# sourceMappingURL=SwiperItem.js.map