zent
Version:
一套前端设计语言和基于React的实现
257 lines (256 loc) • 11.5 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component, Children, cloneElement } from 'react';
import cx from 'classnames';
import { WindowResizeHandler } from '../utils/component/WindowResizeHandler';
import Icon from '../icon';
import SwiperDots from './SwiperDots';
function setStyle(target, styles) {
var style = target.style;
Object.keys(styles).forEach(function (attribute) {
style[attribute] = styles[attribute];
});
}
var defaultRenderPrevArrow = function (onPrev, disabled) {
return (_jsx("div", __assign({ className: cx('zent-swiper__arrow', 'zent-swiper__arrow-left', {
'zent-swiper__arrow--disabled': disabled,
}), onClick: !disabled ? onPrev : undefined, "data-zv": '10.0.17' }, { children: _jsx(Icon, { type: "right-circle", className: "zent-swiper__arrow-icon" }, void 0) }), void 0));
};
var defaultRenderNextArrow = function (onNext, disabled) {
return (_jsx("div", __assign({ className: cx('zent-swiper__arrow', 'zent-swiper__arrow-right', {
'zent-swiper__arrow--disabled': disabled,
}), onClick: !disabled ? onNext : undefined, "data-zv": '10.0.17' }, { children: _jsx(Icon, { type: "right-circle", className: "zent-swiper__arrow-icon" }, void 0) }), void 0));
};
var Swiper = (function (_super) {
__extends(Swiper, _super);
function Swiper() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
currentIndex: 0,
};
_this.init = function (isResetToOrigin) {
if (isResetToOrigin === void 0) { isResetToOrigin = false; }
var _a = _this.props, autoplay = _a.autoplay, children = _a.children;
var currentIndex = _this.state.currentIndex;
var childrenCount = Children.count(children);
var innerElements = _this.swiperContainer.children;
_this.clearAutoplay();
_this.setSwiperWidth();
setStyle(_this.swiperContainer, {
width: _this.swiperWidth * innerElements.length + "px",
});
for (var i = 0; i < innerElements.length; i++) {
var item = innerElements[i];
setStyle(item, {
width: 100 / innerElements.length + "%",
});
}
isResetToOrigin && _this.translate(-1, null, true);
if (childrenCount > 1) {
autoplay && _this.startAutoplay();
_this.translate(currentIndex, null, true);
}
};
_this.getSwiper = function (swiper) {
_this.swiper = swiper;
};
_this.getSwiperContainer = function (swiperContainer) {
_this.swiperContainer = swiperContainer;
};
_this.setSwiperWidth = function () {
_this.swiperWidth = _this.swiper.getBoundingClientRect().width;
};
_this.startAutoplay = function () {
var autoplayInterval = _this.props.autoplayInterval;
_this.autoplayTimer = setTimeout(_this.next, Number(autoplayInterval));
};
_this.clearAutoplay = function () {
clearTimeout(_this.autoplayTimer);
_this.autoplayTimer = undefined;
};
_this.next = function () {
var currentIndex = _this.state.currentIndex;
if (Children.count(_this.props.children) === 1) {
return;
}
_this.swipeTo(currentIndex + 1);
};
_this.prev = function () {
var currentIndex = _this.state.currentIndex;
_this.swipeTo(currentIndex - 1);
};
_this.swipeTo = function (index) {
if (index === _this.state.currentIndex || _this.isSwiping) {
return;
}
_this.isSwiping = true;
_this.setState({ currentIndex: index });
};
_this.translate = function (currentIndex, prevIndex, isSilent) {
var _a = _this.props, autoplay = _a.autoplay, autoplayInterval = _a.autoplayInterval, transitionDuration = _a.transitionDuration, onChange = _a.onChange;
var length = _this.props.children.length;
var initIndex = -1;
var itemWidth = _this.swiperWidth;
var translateDistance = itemWidth * (initIndex - currentIndex);
var realDuration = isSilent ? 0 : transitionDuration;
if (autoplay && !_this.isMouseEnter) {
clearTimeout(_this.autoplayTimer);
_this.autoplayTimer = setTimeout(_this.next, Number(autoplayInterval));
}
setStyle(_this.swiperContainer, {
transform: "translateX(" + translateDistance + "px)",
'transition-duration': realDuration + "ms",
});
if (currentIndex > length - 1 || currentIndex < 0) {
return _this.resetPosition(currentIndex);
}
setTimeout(function () {
_this.isSwiping = false;
}, realDuration);
onChange && onChange(currentIndex, _this.getRealPrevIndex(prevIndex));
};
_this.resetPosition = function (currentIndex) {
var transitionDuration = _this.props.transitionDuration;
var length = _this.props.children.length;
if (currentIndex < 0) {
setTimeout(function () {
return _this.setState({
currentIndex: length - 1,
});
}, transitionDuration);
}
else {
setTimeout(function () {
return _this.setState({
currentIndex: 0,
});
}, transitionDuration);
}
};
_this.getRealPrevIndex = function (index) {
var length = _this.props.children.length;
if (index === null) {
return null;
}
if (index > length - 1) {
return length - 1;
}
if (index < 0) {
return 0;
}
return index;
};
_this.cloneChildren = function (children) {
var length = Children.count(children);
if (length <= 1) {
return children;
}
var clonedChildren = new Array(length + 2);
Children.forEach(children, function (child, index) {
clonedChildren[index + 1] = child;
if (index === 0) {
clonedChildren[length + 1] = child;
}
else if (index === length - 1) {
clonedChildren[0] = child;
}
});
return clonedChildren;
};
_this.handleMouseEnter = function () {
var autoplay = _this.props.autoplay;
_this.isMouseEnter = true;
autoplay && _this.clearAutoplay();
};
_this.handleMouseLeave = function () {
var autoplay = _this.props.autoplay;
_this.isMouseEnter = false;
autoplay && _this.startAutoplay();
};
_this.handleDotsClick = function (index) {
_this.setState({ currentIndex: index });
};
_this.handleResize = function () { return _this.init(); };
return _this;
}
Swiper.getDerivedStateFromProps = function (props, state) {
if (!state.prevProps) {
return {
prevProps: props,
};
}
var newChildren = props.children;
var children = state.prevProps.children;
if (Children.count(children) !== Children.count(newChildren)) {
return {
currentIndex: 0,
prevProps: props,
};
}
return null;
};
Swiper.prototype.componentDidMount = function () {
this.init();
};
Swiper.prototype.componentDidUpdate = function (prevProps, prevState) {
var length = this.props.children.length;
var currentIndex = this.state.currentIndex;
var prevIndex = prevState.currentIndex;
var isSilent = prevIndex > length - 1 || prevIndex < 0;
if (prevIndex !== currentIndex) {
this.translate(currentIndex, prevIndex, isSilent);
}
if (Children.count(prevProps.children) !== Children.count(this.props.children)) {
var isTwoToOneCase = Children.count(prevProps.children) === 2 &&
Children.count(this.props.children) === 1;
this.init(isTwoToOneCase);
}
};
Swiper.prototype.componentWillUnmount = function () {
this.clearAutoplay();
};
Swiper.prototype.render = function () {
var _a = this.props, className = _a.className, dots = _a.dots, dotsColor = _a.dotsColor, dotsSize = _a.dotsSize, dotsTheme = _a.dotsTheme, arrows = _a.arrows, arrowsSize = _a.arrowsSize, arrowsType = _a.arrowsType, arrowsDisabled = _a.arrowsDisabled, children = _a.children, renderNextArrow = _a.renderNextArrow, renderPrevArrow = _a.renderPrevArrow;
var currentIndex = this.state.currentIndex;
var showDots = !!dots;
var dotsType = dots === 'round' ? 'round' : 'line';
var classString = cx('zent-swiper', className, {
'zent-swiper-light': arrows && arrowsType === 'light',
'zent-swiper--hover-show-arrow': arrows === 'hover',
'zent-swiper--arrow-large': arrowsSize === 'large',
});
var childrenCount = Children.count(children);
var clonedChildren = this.cloneChildren(children);
return (_jsxs("div", __assign({ ref: this.getSwiper, className: classString, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, "data-zv": '10.0.17' }, { children: [arrows &&
childrenCount > 1 &&
renderPrevArrow(this.prev, arrowsDisabled.left), arrows &&
childrenCount > 1 &&
renderNextArrow(this.next, arrowsDisabled.right), _jsx("div", __assign({ ref: this.getSwiperContainer, className: "zent-swiper__container", "data-zv": '10.0.17' }, { children: Children.map(clonedChildren, function (child, index) {
return cloneElement(child, {
key: index - 1,
style: { float: 'left', height: '100%' },
});
}) }), void 0), showDots && childrenCount > 1 && (_jsx(SwiperDots, { dotsType: dotsType, dotsColor: dotsColor, dotsTheme: dotsTheme, dotsSize: dotsSize, items: children, currentIndex: currentIndex, onDotsClick: this.handleDotsClick }, void 0)), _jsx(WindowResizeHandler, { onResize: this.handleResize }, void 0)] }), void 0));
};
Swiper.defaultProps = {
className: '',
transitionDuration: 300,
autoplay: false,
autoplayInterval: 3000,
dots: true,
dotsTheme: 'dark',
dotsSize: 'normal',
arrows: false,
arrowsSize: 'normal',
arrowsType: 'dark',
arrowsDisabled: {
left: false,
right: false,
},
renderPrevArrow: defaultRenderPrevArrow,
renderNextArrow: defaultRenderNextArrow,
};
return Swiper;
}(Component));
export { Swiper };
export default Swiper;