tdesign-react
Version:
TDesign Component for React
376 lines (368 loc) • 16.8 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var slicedToArray = require('../_chunks/dep-8e4d656d.js');
var defineProperty = require('../_chunks/dep-0006fcfa.js');
var React = require('react');
var classNames = require('classnames');
var tdesignIconsReact = require('tdesign-icons-react');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_useGlobalIcon = require('../hooks/useGlobalIcon.js');
var _util_noop = require('../_util/noop.js');
var swiper_defaultProps = require('./defaultProps.js');
var swiper_SwiperItem = require('./SwiperItem.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
require('../_chunks/dep-00b49251.js');
require('../_chunks/dep-667ac7af.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-1df1dad8.js');
require('../_chunks/dep-5b5ab11b.js');
require('dayjs');
require('../_chunks/dep-f32c03f1.js');
require('../_chunks/dep-31c4bc3d.js');
require('../_chunks/dep-eea2872a.js');
require('../_chunks/dep-25585736.js');
require('../_chunks/dep-62e73936.js');
require('../_chunks/dep-64577888.js');
require('../_chunks/dep-71455db7.js');
require('../_chunks/dep-9e5a468d.js');
require('../_chunks/dep-ec8d2dca.js');
require('../_chunks/dep-fc596d16.js');
require('../_chunks/dep-f26edb7b.js');
require('../_chunks/dep-f33c1939.js');
require('../_chunks/dep-21ece627.js');
require('../_chunks/dep-25e4aa84.js');
require('../_chunks/dep-e1fbe1c3.js');
require('../_chunks/dep-df2b541f.js');
require('../_chunks/dep-edd366db.js');
require('../_chunks/dep-a56c4939.js');
require('../_chunks/dep-6c297e20.js');
require('../_chunks/dep-b7ad4d54.js');
require('../_chunks/dep-a2cb9299.js');
require('../_chunks/dep-f981815b.js');
require('../hooks/useIsFirstRender.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);
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._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 defaultNavigation = {
placement: "inside",
showSlideBtn: "always",
size: "medium",
type: "bars"
};
var Swiper = function Swiper(swiperProps) {
var props = hooks_useDefaultProps["default"](swiperProps, swiper_defaultProps.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 ? _util_noop["default"] : _props$onChange,
className = props.className,
children = props.children,
navigation = props.navigation,
type = props.type;
var _useConfig = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var _useGlobalIcon = hooks_useGlobalIcon["default"]({
ChevronLeftIcon: tdesignIconsReact.ChevronLeftIcon,
ChevronRightIcon: tdesignIconsReact.ChevronRightIcon
}),
ChevronLeftIcon = _useGlobalIcon.ChevronLeftIcon,
ChevronRightIcon = _useGlobalIcon.ChevronRightIcon;
var navigationConfig = defaultNavigation;
var navigationNode = null;
if (/*#__PURE__*/React.isValidElement(navigation)) {
navigationNode = navigation;
} else {
navigationConfig = _objectSpread(_objectSpread({}, defaultNavigation), navigation);
}
var _useState = React.useState(defaultCurrent),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
currentIndex = _useState2[0],
setCurrentIndex = _useState2[1];
var _useState3 = React.useState(false),
_useState4 = slicedToArray._slicedToArray(_useState3, 2),
needAnimation = _useState4[0],
setNeedAnimation = _useState4[1];
var _useState5 = React.useState(function () {
return navigationConfig.showSlideBtn === "always";
}),
_useState6 = slicedToArray._slicedToArray(_useState5, 2),
arrowShow = _useState6[0],
setArrowShow = _useState6[1];
var swiperTimer = React.useRef(null);
var swiperAnimationTimer = React.useRef(null);
var isHovering = React.useRef(false);
var swiperWrap = React.useRef(null);
var getWrapAttribute = React__default["default"].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 = React.useMemo(function () {
return React__default["default"].Children.toArray(children).filter(function (child) {
var _child$type;
return ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === swiper_SwiperItem["default"].displayName;
});
}, [children]);
var childrenLength = childrenList.length;
var swiperItemList = childrenList.map(function (child, index) {
return /*#__PURE__*/React__default["default"].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__default["default"].cloneElement(lastEle, _objectSpread(_objectSpread({}, lastEle), {}, {
props: props,
key: -1,
index: -1
})));
swiperItemList.push(/*#__PURE__*/React__default["default"].cloneElement(firstEle, _objectSpread(_objectSpread({}, firstEle.props), {}, {
key: childrenLength,
index: childrenLength
})));
}
var swiperItemLength = swiperItemList.length;
var startIndex = loop ? -1 : 0;
var endIndex = loop ? React__default["default"].Children.count(children) : React__default["default"].Children.count(children) - 1;
var swiperTo = React.useCallback(function (index, context) {
onChange((index === -1 ? childrenLength - 1 : index) % childrenLength, context);
if (index !== currentIndex) {
setNeedAnimation(true);
setCurrentIndex(index);
}
}, [childrenLength, currentIndex, onChange]);
var setTimer = React.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 = React.useCallback(function () {
if (swiperTimer.current) {
clearTimeout(swiperTimer.current);
swiperTimer.current = null;
}
}, []);
React.useEffect(function () {
if (current !== void 0) {
var nextCurrent = current % childrenLength;
if (nextCurrent === 0) {
swiperTo(childrenLength, {
source: "autoplay"
});
} else {
swiperTo(nextCurrent, {
source: "autoplay"
});
}
}
}, [current, childrenLength]);
React.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]);
React.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__default["default"].createElement("div", {
className: classNames__default["default"]("".concat(classPrefix, "-swiper__arrow"), defineProperty._defineProperty({}, "".concat(classPrefix, "-swiper__arrow--default"), type2 === "default"))
}, /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-swiper__arrow-left"),
onClick: function onClick() {
return arrowClick("left" /* Left */);
}
}, /* @__PURE__ */React__default["default"].createElement(ChevronLeftIcon, null)), type2 === "fraction" /* Fraction */ ? /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-swiper__navigation-text-fraction")
}, fractionIndex, "/", childrenLength) : "", /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-swiper__arrow-right"),
onClick: function onClick() {
return arrowClick("right" /* Right */);
}
}, /* @__PURE__ */React__default["default"].createElement(ChevronRightIcon, null)));
};
var renderNavigation = function renderNavigation() {
if (navigationConfig.type === "fraction") {
return /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"]("".concat(classPrefix, "-swiper__navigation"), "".concat(classPrefix, "-swiper__navigation--fraction"))
}, renderArrow("fraction" /* Fraction */));
}
return navigationNode ? /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, navigationNode) : /* @__PURE__ */React__default["default"].createElement("ul", {
className: classNames__default["default"]("".concat(classPrefix, "-swiper__navigation"), "".concat(classPrefix, "-swiper__navigation-").concat(navigationConfig.type))
}, childrenList.map(function (_, i) {
return /* @__PURE__ */React__default["default"].createElement("li", {
key: i,
className: classNames__default["default"]("".concat(classPrefix, "-swiper__navigation-item"), defineProperty._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__default["default"].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__default["default"].createElement("div", {
className: classNames__default["default"]("".concat(classPrefix, "-swiper"), className),
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
ref: swiperWrap
}, /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"]("".concat(classPrefix, "-swiper__wrap"), defineProperty._defineProperty(defineProperty._defineProperty(defineProperty._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__default["default"].createElement("div", {
className: classNames__default["default"]("".concat(classPrefix, "-swiper__content"), defineProperty._defineProperty(defineProperty._defineProperty({}, "".concat(classPrefix, "-swiper-fade"), animation === "fade"), "".concat(classPrefix, "-swiper-card"), type === "card")),
style: {
height: ""
}
}, /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-swiper__container"),
style: getWrapperStyle()
}, swiperItemList)), renderNavigation(), renderArrow("default" /* Default */)));
};
Swiper.SwiperItem = swiper_SwiperItem["default"];
Swiper.displayName = "Swiper";
exports["default"] = Swiper;
//# sourceMappingURL=Swiper.js.map