tdesign-react
Version:
TDesign Component for React
363 lines (359 loc) • 15.2 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _slicedToArray } from '../_chunks/dep-48805ab8.js';
import { _ as _defineProperty } from '../_chunks/dep-cb0a3966.js';
import React, { isValidElement, useState, useRef, useMemo, useCallback, useEffect } from 'react';
import classNames from 'classnames';
import { ChevronLeftIcon, ChevronRightIcon } from 'tdesign-icons-react';
import useConfig from '../hooks/useConfig.js';
import useGlobalIcon from '../hooks/useGlobalIcon.js';
import noop from '../_util/noop.js';
import { swiperDefaultProps } from './defaultProps.js';
import SwiperItem from './SwiperItem.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import '../_chunks/dep-026a4c6b.js';
import '../_chunks/dep-eca3a3de.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';
import '../hooks/useIsFirstRender.js';
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 CreateArrow = /* @__PURE__ */function (CreateArrow2) {
CreateArrow2["Default"] = "default";
CreateArrow2["Fraction"] = "fraction";
return CreateArrow2;
}(CreateArrow || {});
var ArrowClickDirection = /* @__PURE__ */function (ArrowClickDirection2) {
ArrowClickDirection2["Left"] = "left";
ArrowClickDirection2["Right"] = "right";
return ArrowClickDirection2;
}(ArrowClickDirection || {});
var MouseAction = /* @__PURE__ */function (MouseAction2) {
MouseAction2["Enter"] = "enter";
MouseAction2["Leave"] = "leave";
MouseAction2["Click"] = "click";
return MouseAction2;
}(MouseAction || {});
var defaultNavigation = {
placement: "inside",
showSlideBtn: "always",
size: "medium",
type: "bars"
};
var Swiper = function Swiper(swiperProps) {
var props = useDefaultProps(swiperProps, swiperDefaultProps);
var animation = props.animation,
autoplay = props.autoplay,
current = props.current,
defaultCurrent = props.defaultCurrent,
direction = props.direction,
duration = props.duration,
interval = props.interval,
trigger = props.trigger,
height = props.height,
loop = props.loop,
stopOnHover = props.stopOnHover,
_props$onChange = props.onChange,
onChange = _props$onChange === void 0 ? noop : _props$onChange,
className = props.className,
children = props.children,
navigation = props.navigation,
type = props.type;
var _useConfig = useConfig(),
classPrefix = _useConfig.classPrefix;
var _useGlobalIcon = useGlobalIcon({
ChevronLeftIcon: ChevronLeftIcon,
ChevronRightIcon: ChevronRightIcon
}),
ChevronLeftIcon$1 = _useGlobalIcon.ChevronLeftIcon,
ChevronRightIcon$1 = _useGlobalIcon.ChevronRightIcon;
var navigationConfig = defaultNavigation;
var navigationNode = null;
if (/*#__PURE__*/isValidElement(navigation)) {
navigationNode = navigation;
} else {
navigationConfig = _objectSpread(_objectSpread({}, defaultNavigation), navigation);
}
var _useState = useState(defaultCurrent),
_useState2 = _slicedToArray(_useState, 2),
currentIndex = _useState2[0],
setCurrentIndex = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
needAnimation = _useState4[0],
setNeedAnimation = _useState4[1];
var _useState5 = useState(function () {
return navigationConfig.showSlideBtn === "always";
}),
_useState6 = _slicedToArray(_useState5, 2),
arrowShow = _useState6[0],
setArrowShow = _useState6[1];
var swiperTimer = useRef(null);
var swiperAnimationTimer = useRef(null);
var isHovering = useRef(false);
var swiperWrap = useRef(null);
var getWrapAttribute = React.useCallback(function (attr) {
var _swiperWrap$current;
return (_swiperWrap$current = swiperWrap.current) === null || _swiperWrap$current === void 0 || (_swiperWrap$current = _swiperWrap$current.parentNode) === null || _swiperWrap$current === void 0 ? void 0 : _swiperWrap$current[attr];
}, []);
var childrenList = useMemo(function () {
return React.Children.toArray(children).filter(function (child) {
var _child$type;
return ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === SwiperItem.displayName;
});
}, [children]);
var childrenLength = childrenList.length;
var swiperItemList = childrenList.map(function (child, index) {
return /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({
key: index,
index: index,
currentIndex: currentIndex,
needAnimation: needAnimation,
childrenLength: childrenLength,
getWrapAttribute: getWrapAttribute
}, props), child.props));
});
if (loop && childrenLength > 0 && type === "default") {
var firstEle = swiperItemList[0];
var lastEle = swiperItemList[childrenLength - 1];
swiperItemList.unshift(/*#__PURE__*/React.cloneElement(lastEle, _objectSpread(_objectSpread({}, lastEle), {}, {
props: props,
key: -1,
index: -1
})));
swiperItemList.push(/*#__PURE__*/React.cloneElement(firstEle, _objectSpread(_objectSpread({}, firstEle.props), {}, {
key: childrenLength,
index: childrenLength
})));
}
var swiperItemLength = swiperItemList.length;
var startIndex = loop ? -1 : 0;
var endIndex = loop ? React.Children.count(children) : React.Children.count(children) - 1;
var swiperTo = useCallback(function (index, context) {
onChange((index === -1 ? childrenLength - 1 : index) % childrenLength, context);
if (index !== currentIndex) {
setNeedAnimation(true);
setCurrentIndex(index);
}
}, [childrenLength, currentIndex, onChange]);
var setTimer = useCallback(function () {
if (autoplay && interval > 0) {
swiperTimer.current = setTimeout(function () {
if (!loop && currentIndex === endIndex) {
return;
}
swiperTo(currentIndex + 1, {
source: "autoplay"
});
}, currentIndex === 0 ? interval - (duration + 50) : interval);
}
}, [autoplay, interval, currentIndex, loop, duration, endIndex, swiperTo]);
var clearTimer = useCallback(function () {
if (swiperTimer.current) {
clearTimeout(swiperTimer.current);
swiperTimer.current = null;
}
}, []);
useEffect(function () {
if (current !== void 0) {
var nextCurrent = current % childrenLength;
if (nextCurrent === 0) {
swiperTo(childrenLength, {
source: "autoplay"
});
} else {
swiperTo(nextCurrent, {
source: "autoplay"
});
}
}
}, [current, childrenLength]);
useEffect(function () {
if (currentIndex + 1 > swiperItemLength && type === "card") {
return setCurrentIndex(0);
}
if (swiperAnimationTimer.current) {
clearTimeout(swiperAnimationTimer.current);
swiperAnimationTimer.current = null;
}
var swiperAnimationDuration = 0;
if (currentIndex === -1 && type === "card") {
swiperAnimationDuration = 50;
} else {
swiperAnimationDuration = duration + 50;
}
swiperAnimationTimer.current = setTimeout(function () {
setNeedAnimation(false);
if (loop && currentIndex === endIndex) {
clearTimer();
setCurrentIndex(0);
}
if (loop && currentIndex === startIndex) {
setCurrentIndex(endIndex - 1);
}
}, swiperAnimationDuration);
}, [currentIndex, swiperItemLength, duration, type, clearTimer, endIndex, startIndex, loop]);
useEffect(function () {
if (!isHovering.current || !stopOnHover) {
clearTimer();
setTimer();
}
}, [setTimer, clearTimer, stopOnHover, loop, currentIndex, endIndex]);
var onMouseEnter = function onMouseEnter() {
isHovering.current = true;
if (stopOnHover) {
clearTimer();
}
if (navigationConfig.showSlideBtn === "hover") {
setArrowShow(true);
}
};
var onMouseLeave = function onMouseLeave() {
isHovering.current = false;
if (!swiperTimer.current && autoplay) {
setTimer();
}
if (navigationConfig.showSlideBtn === "hover") {
setArrowShow(false);
}
};
var navMouseAction = function navMouseAction(action, index) {
if (action === "enter" /* Enter */ && trigger === "hover") {
swiperTo(index, {
source: "hover"
});
}
if (action === "click" /* Click */ && trigger === "click") {
swiperTo(index, {
source: "click"
});
}
};
var arrowClick = function arrowClick(direction2) {
if (needAnimation) {
return false;
}
if (direction2 === "right" /* Right */) {
if (!loop && currentIndex === endIndex) {
return;
}
if (type === "card") {
return swiperTo(currentIndex + 1 >= swiperItemLength ? 0 : currentIndex + 1, {
source: "click"
});
}
return swiperTo(currentIndex + 1, {
source: "click"
});
}
if (direction2 === "left" /* Left */) {
if (!loop && currentIndex === startIndex) {
return;
}
return swiperTo(currentIndex - 1, {
source: "click"
});
}
};
var renderArrow = function renderArrow(type2) {
if (!arrowShow) {
return "";
}
if (navigationConfig.type === "fraction" && type2 === "default" /* Default */) {
return "";
}
var fractionIndex = currentIndex + 1 > childrenLength ? 1 : currentIndex + 1;
return /* @__PURE__ */React.createElement("div", {
className: classNames("".concat(classPrefix, "-swiper__arrow"), _defineProperty({}, "".concat(classPrefix, "-swiper__arrow--default"), type2 === "default"))
}, /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-swiper__arrow-left"),
onClick: function onClick() {
return arrowClick("left" /* Left */);
}
}, /* @__PURE__ */React.createElement(ChevronLeftIcon$1, null)), type2 === "fraction" /* Fraction */ ? /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-swiper__navigation-text-fraction")
}, fractionIndex, "/", childrenLength) : "", /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-swiper__arrow-right"),
onClick: function onClick() {
return arrowClick("right" /* Right */);
}
}, /* @__PURE__ */React.createElement(ChevronRightIcon$1, null)));
};
var renderNavigation = function renderNavigation() {
if (navigationConfig.type === "fraction") {
return /* @__PURE__ */React.createElement("div", {
className: classNames("".concat(classPrefix, "-swiper__navigation"), "".concat(classPrefix, "-swiper__navigation--fraction"))
}, renderArrow("fraction" /* Fraction */));
}
return navigationNode ? /* @__PURE__ */React.createElement(React.Fragment, null, navigationNode) : /* @__PURE__ */React.createElement("ul", {
className: classNames("".concat(classPrefix, "-swiper__navigation"), "".concat(classPrefix, "-swiper__navigation-").concat(navigationConfig.type))
}, childrenList.map(function (_, i) {
return /* @__PURE__ */React.createElement("li", {
key: i,
className: classNames("".concat(classPrefix, "-swiper__navigation-item"), _defineProperty({}, "".concat(classPrefix, "-is-active"), i === (currentIndex === -1 ? childrenLength - 1 : currentIndex) % childrenLength)),
onClick: function onClick() {
return navMouseAction("click" /* Click */, i);
},
onMouseEnter: function onMouseEnter() {
return navMouseAction("enter" /* Enter */, i);
},
onMouseLeave: function onMouseLeave() {
return navMouseAction("leave" /* Leave */, i);
}
}, /* @__PURE__ */React.createElement("span", null));
}));
};
var getWrapperStyle = function getWrapperStyle() {
var loopIndex = loop ? 1 : 0;
var offsetHeight = height ? "".concat(height, "px") : "".concat(getWrapAttribute("offsetHeight"), "px");
if (type === "card" || animation === "fade") {
return {
height: offsetHeight
};
}
if (animation === "slide") {
if (direction === "vertical") {
return {
height: offsetHeight,
msTransform: "translate3d(0, -".concat((currentIndex + loopIndex) * 100, "%, 0px)"),
WebkitTransform: "translate3d(0, -".concat((currentIndex + loopIndex) * 100, "%, 0px)"),
transform: "translate3d(0, -".concat((currentIndex + loopIndex) * 100, "%, 0px)"),
transition: needAnimation ? "transform ".concat(duration / 1e3, "s ease") : ""
};
}
return {
msTransform: "translate3d(-".concat((currentIndex + loopIndex) * 100, "%, 0px, 0px)"),
WebkitTransform: "translate3d(-".concat((currentIndex + loopIndex) * 100, "%, 0px, 0px)"),
transform: "translate3d(-".concat((currentIndex + loopIndex) * 100, "%, 0px, 0px)"),
transition: needAnimation ? "transform ".concat(duration / 1e3, "s ease") : ""
};
}
};
return /* @__PURE__ */React.createElement("div", {
className: classNames("".concat(classPrefix, "-swiper"), className),
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
ref: swiperWrap
}, /* @__PURE__ */React.createElement("div", {
className: classNames("".concat(classPrefix, "-swiper__wrap"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-swiper--inside"), navigationConfig.placement === "inside"), "".concat(classPrefix, "-swiper--outside"), navigationConfig.placement === "outside"), "".concat(classPrefix, "-swiper--vertical"), direction === "vertical"), "".concat(classPrefix, "-swiper--large"), navigationConfig.size === "large"), "".concat(classPrefix, "-swiper--small"), navigationConfig.size === "small"))
}, /* @__PURE__ */React.createElement("div", {
className: classNames("".concat(classPrefix, "-swiper__content"), _defineProperty(_defineProperty({}, "".concat(classPrefix, "-swiper-fade"), animation === "fade"), "".concat(classPrefix, "-swiper-card"), type === "card")),
style: {
height: ""
}
}, /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-swiper__container"),
style: getWrapperStyle()
}, swiperItemList)), renderNavigation(), renderArrow("default" /* Default */)));
};
Swiper.SwiperItem = SwiperItem;
Swiper.displayName = "Swiper";
export { Swiper as default };
//# sourceMappingURL=Swiper.js.map