@bytedance/mona-client-web
Version:
web for mona
91 lines • 5.22 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
// TODO: rewrite this component
import React, { useEffect, useRef } from 'react';
import styles from './index.module.less';
import { useHandlers } from '../hooks';
import { useSlide, useTouch } from './hooks';
function findIndexFromItemId(children, itemId) {
var resultIndex = 0;
React.Children.forEach(children, function (child, index) {
if (React.isValidElement(child) && child.props.itemId === itemId) {
resultIndex = index;
}
});
return resultIndex;
}
var Swiper = function (props) {
var children = props.children, _a = props.indicatorDots, indicatorDots = _a === void 0 ? false : _a, _b = props.indicatorColor, indicatorColor = _b === void 0 ? 'rgba(0, 0, 0, .3)' : _b, _c = props.indicatorActiveColor, indicatorActiveColor = _c === void 0 ? 'rgba(0, 0, 0, 1)' : _c, _d = props.autoplay, autoplay = _d === void 0 ? false : _d, _e = props.current, current = _e === void 0 ? 0 : _e, _f = props.currentItemId, currentItemId = _f === void 0 ? '' : _f, _g = props.interval, interval = _g === void 0 ? 5000 : _g, _h = props.previousMargin, previousMargin = _h === void 0 ? '' : _h, _j = props.nextMargin, nextMargin = _j === void 0 ? '' : _j, _k = props.displayMultipleItems, displayMultipleItems = _k === void 0 ? 1 : _k, _l = props.duration, duration = _l === void 0 ? 500 : _l, _m = props.circular, circular = _m === void 0 ? false : _m, _o = props.vertical, vertical = _o === void 0 ? false : _o, onChange = props.onChange,
// not implemented
onAnimationFinish = props.onAnimationFinish,
// not implemented
onTransition = props.onTransition, restProps = __rest(props, ["children", "indicatorDots", "indicatorColor", "indicatorActiveColor", "autoplay", "current", "currentItemId", "interval", "previousMargin", "nextMargin", "displayMultipleItems", "duration", "circular", "vertical", "onChange", "onAnimationFinish", "onTransition"]);
var ref = useRef(null);
var dotsRef = useRef(null);
var _p = useHandlers(restProps), handleClassName = _p.handleClassName, handleProps = __rest(_p, ["handleClassName"]);
var total = React.Children.count(children);
var currentIndex = currentItemId ? findIndexFromItemId(children, currentItemId) : current;
var _q = useSlide({
current: currentIndex,
total: total,
vertical: vertical,
duration: duration,
circular: circular,
onChange: onChange,
}), next = _q.next, prev = _q.prev, wrapperRef = _q.wrapperRef, activeIndex = _q.activeIndex;
var touchParams = {
left: vertical ? null : function (e) { return next(false, e); },
right: vertical ? null : function (e) { return prev(false, e); },
top: vertical ? function (e) { return next(false, e); } : null,
bottom: vertical ? function (e) { return prev(false, e); } : null,
duration: duration,
};
var _r = useTouch(touchParams), handleTouchStart = _r.handleTouchStart, handleTouchMove = _r.handleTouchMove;
// autoplay
useEffect(function () {
if (!total) {
return;
}
if (autoplay) {
var timer_1 = setInterval(function () {
next(true);
}, interval);
return function () { return clearInterval(timer_1); };
}
return function () { };
}, [autoplay, interval, next, total]);
if (!total) {
return null;
}
return (React.createElement("div", __assign({ ref: ref }, handleProps, { className: handleClassName(styles.swiper) }),
React.createElement("div", { ref: wrapperRef, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, className: vertical ? styles['vertical-wrapper'] : styles.wrapper, style: { transitionDuration: '0ms', transform: 'translate3d(10px, 0px, 0px)' } }, children),
indicatorDots && (React.createElement("div", { className: "".concat(styles.dots, " ").concat(!vertical ? styles.horizontal : ''), ref: dotsRef }, (function () {
var result = [];
for (var i = 0; i < total; i++) {
result.push(React.createElement("span", { className: styles.dot, style: { backgroundColor: activeIndex === i ? indicatorActiveColor : indicatorColor }, key: i }));
}
return result;
})()))));
};
export default Swiper;
//# sourceMappingURL=index.js.map