@auraxy/carousel
Version:
A description for the module
447 lines (382 loc) • 13.9 kB
JavaScript
/**
* Bundle of @auraxy/carousel
* Generated: 2020-01-15
* Version: 1.0.0
* License: MIT
* Author:
*/
import React, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
return;
}
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var classnames = createCommonjsModule(function (module) {
/*!
Copyright (c) 2017 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
var hasOwn = {}.hasOwnProperty;
function classNames() {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg) && arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if ( module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = classNames;
}
})();
});
var VisibleWay;
(function (VisibleWay) {
VisibleWay["ALWAYS"] = "always";
VisibleWay["HOVER"] = "hover";
VisibleWay["NEVER"] = "never";
})(VisibleWay || (VisibleWay = {}));
var Trigger;
(function (Trigger) {
Trigger["CLICK"] = "click";
Trigger["HOVER"] = "hover";
})(Trigger || (Trigger = {}));
function styleInject(css, ref) {
if (ref === void 0) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') {
return;
}
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css = ".au-carousel-slider{position:absolute;overflow:hidden}.au-carousel-slider .au-carousel-item{float:left;background:#364d79}.au-carousel-slider .au-carousel-item img{width:100%}";
styleInject(css);
function initNode(n) {
var firNode = n[0];
var lastNode = n[n.length - 1];
n.unshift(lastNode);
n.push(firNode);
return n;
}
var Slider = function Slider(_ref) {
var children = _ref.children,
vertical = _ref.vertical,
activeIndex = _ref.activeIndex,
original_total = _ref.total,
resetIndex = _ref.resetIndex,
duration = _ref.duration;
var _children = useMemo(function () {
return initNode(React.Children.toArray(children));
}, [children]); // get cloned children nodes
var total = useMemo(function () {
return _children.length;
}, [_children]); // calculate cloned children nodes length
var _useState = useState(true),
_useState2 = _slicedToArray(_useState, 2),
isTrans = _useState2[0],
setIsTrans = _useState2[1];
var style = useMemo(function () {
return {
width: vertical ? '100%' : "".concat(total * 100, "%"),
height: !vertical ? '100%' : "".concat(total * 100, "%"),
left: vertical ? '0px' : "-".concat((activeIndex + 1) * 100, "%"),
top: !vertical ? '0px' : "-".concat((activeIndex + 1) * 100, "%"),
transitionProperty: isTrans ? vertical ? 'top' : 'left' : 'none',
transitionDuration: isTrans ? duration + 'ms' : '0'
};
}, [vertical, total, activeIndex, isTrans, duration]);
var timerRef = useRef(null);
useEffect(function () {
var timerId = null;
if (activeIndex > original_total - 1 || activeIndex < -1 + 1) {
timerId = setTimeout(function () {
resetIndex(activeIndex < -1 + 1 ? original_total - 1 : 0);
setIsTrans(false);
}, duration + 100);
} else {
timerId = setTimeout(function () {
return setIsTrans(true);
}, 100);
}
timerRef.current = timerId;
return function () {
return clearInterval(timerRef.current);
};
}, [activeIndex, original_total, resetIndex, duration]);
return React.createElement("div", {
className: "au-carousel-slider",
style: style
}, _children.map(function (item, index) {
return React.createElement("div", {
key: index,
className: "au-carousel-item",
style: {
width: vertical ? '100%' : "".concat(100 / total, "%"),
height: !vertical ? '100%' : "".concat(100 / total, "%")
}
}, item);
}));
};
var ArrowLeft = function ArrowLeft() {
return React.createElement("svg", {
viewBox: "0 0 1024 1024",
version: "1.1",
width: "200",
height: "200"
}, React.createElement("defs", null, React.createElement("style", {
type: "text/css"
})), React.createElement("path", {
d: "M589.088 790.624L310.464 512l278.624-278.624 45.248 45.248L400.96 512l233.376 233.376z",
fill: "#ffffff",
"p-id": "5950"
}));
};
var ArrowRight = function ArrowRight() {
return React.createElement("svg", {
viewBox: "0 0 1024 1024",
version: "1.1",
width: "200",
height: "200"
}, React.createElement("defs", null, React.createElement("style", {
type: "text/css"
})), React.createElement("path", {
d: "M434.944 790.624l-45.248-45.248L623.04 512l-233.376-233.376 45.248-45.248L713.568 512z",
fill: "#ffffff",
"p-id": "6275"
}));
};
var css$1 = ".au-carousel-arrow .au-carousel-arrow-item{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;cursor:pointer}.au-carousel-arrow .au-carousel-arrow-item.au-carousel-arrow-left{left:20px}.au-carousel-arrow .au-carousel-arrow-item.au-carousel-arrow-right{right:20px}.au-carousel-arrow .au-carousel-arrow-item>svg{width:100%;height:100%}";
styleInject(css$1);
var ArrowType;
(function (ArrowType) {
ArrowType["PREV"] = "PREV";
ArrowType["NEXT"] = "NEXT";
})(ArrowType || (ArrowType = {}));
var Arrow = function Arrow(_ref) {
var arrowVisible = _ref.arrowVisible,
onClick = _ref.onClick;
var arrowsOnClick = function arrowsOnClick(type) {
onClick(function (preIndex) {
if (type === ArrowType.PREV) return preIndex - 1;else return preIndex + 1;
});
};
var style = useMemo(function () {
return {
display: arrowVisible ? 'block' : 'none'
};
}, [arrowVisible]);
return React.createElement("div", {
className: "au-carousel-arrow",
style: style
}, React.createElement("div", {
className: "au-carousel-arrow-item au-carousel-arrow-left",
onClick: function onClick() {
return arrowsOnClick(ArrowType.PREV);
}
}, React.createElement(ArrowLeft, null)), React.createElement("div", {
className: "au-carousel-arrow-item au-carousel-arrow-right",
onClick: function onClick() {
return arrowsOnClick(ArrowType.NEXT);
}
}, React.createElement(ArrowRight, null)));
};
var css$2 = ".au-carousel-dots{position:absolute;list-style:none;margin:0;padding:0;z-index:2}.au-carousel-dots.au-carousel-dots-horizontal{bottom:0;left:50%;transform:translateX(-50%)}.au-carousel-dots.au-carousel-dots-vertical{right:0;top:50%;transform:translateY(-50%)}.au-carousel-dots-item{background-color:transparent;cursor:pointer}.au-carousel-dots-item.au-carousel-dots-item-horizontal{display:inline-block;padding:12px 4px}.au-carousel-dots-item.au-carousel-dots-item-vertical{display:block;padding:4px 12px}.au-carousel-dots-item.au-carousel-dots-item-vertical .au-carousel-dots-item-button{width:2px;height:15px}.au-carousel-dots-item-button{display:block;width:30px;height:2px;opacity:.48;background-color:#fff;border:none;outline:none;padding:0;margin:0;cursor:pointer;transition:.5s}.au-carousel-dots-item-button.au-carousel-dots-item-button-active{opacity:1}";
styleInject(css$2);
var Dots = function Dots(_ref) {
var dotsTrigger = _ref.dotsTrigger,
vertical = _ref.vertical,
total = _ref.total,
activeIndex = _ref.activeIndex,
resetIndex = _ref.resetIndex;
var _onMouseEnter = function onMouseEnter(index) {
if (dotsTrigger === Trigger.HOVER) resetIndex(index);
};
var _onClick = function onClick(index) {
if (dotsTrigger === Trigger.CLICK) resetIndex(index);
};
return React.createElement("ul", {
className: classnames('au-carousel-dots', vertical ? 'au-carousel-dots-vertical' : 'au-carousel-dots-horizontal')
}, Array.from(Array(total), function (item, index) {
return React.createElement("li", {
className: classnames('au-carousel-dots-item', vertical ? 'au-carousel-dots-item-vertical' : 'au-carousel-dots-item-horizontal'),
key: index
}, React.createElement("span", {
className: classnames('au-carousel-dots-item-button', activeIndex === index ? 'au-carousel-dots-item-button-active' : ''),
onMouseEnter: function onMouseEnter() {
return _onMouseEnter(index);
},
onClick: function onClick() {
return _onClick(index);
}
}));
}));
};
var css$3 = ".au-carousel{position:relative;overflow:hidden;height:300px}";
styleInject(css$3);
var duration = 500;
var ReactCarousel = function ReactCarousel(_ref) {
var children = _ref.children,
className = _ref.className,
_ref$vertical = _ref.vertical,
vertical = _ref$vertical === void 0 ? false : _ref$vertical,
_ref$autoplay = _ref.autoplay,
autoplay = _ref$autoplay === void 0 ? true : _ref$autoplay,
_ref$interval = _ref.interval,
interval = _ref$interval === void 0 ? 3000 : _ref$interval,
_ref$arrowVisibleWay = _ref.arrowVisibleWay,
arrowVisibleWay = _ref$arrowVisibleWay === void 0 ? VisibleWay.HOVER : _ref$arrowVisibleWay,
_ref$dotsTrigger = _ref.dotsTrigger,
dotsTrigger = _ref$dotsTrigger === void 0 ? Trigger.HOVER : _ref$dotsTrigger;
var _useState = useState(0),
_useState2 = _slicedToArray(_useState, 2),
activeIndex = _useState2[0],
setActiveIndex = _useState2[1];
var total = useMemo(function () {
return React.Children.count(children);
}, [children]);
var arrowEnable = useMemo(function () {
return !vertical && arrowVisibleWay !== VisibleWay.NEVER && total !== 1;
}, [vertical, arrowVisibleWay, total]);
var _useState3 = useState(arrowVisibleWay === VisibleWay.ALWAYS),
_useState4 = _slicedToArray(_useState3, 2),
arrowVisible = _useState4[0],
setArrowVisible = _useState4[1];
var timerRef = useRef(null);
var stopSlider = useCallback(function () {
timerRef && clearInterval(timerRef.current);
}, [timerRef]);
var startSlider = useCallback(function () {
if (!autoplay || total === 1) return false;
stopSlider();
var id = setInterval(function () {
setActiveIndex(function (pre) {
return pre + 1;
});
}, interval);
timerRef.current = id;
}, [autoplay, timerRef, interval, stopSlider, total]);
var showArrow = function showArrow() {
setArrowVisible(true);
};
var hideArrow = function hideArrow() {
setArrowVisible(arrowVisibleWay === VisibleWay.ALWAYS);
};
var _onMouseOver = function onMouseOver() {
showArrow();
stopSlider();
};
var onMouseout = function onMouseout() {
hideArrow();
startSlider();
};
useEffect(function () {
startSlider();
return function () {
return clearInterval(timerRef.current);
};
}, [startSlider]); // props for Slider component
var sliderProps = useMemo(function () {
return {
duration: duration,
children: children,
vertical: vertical,
total: total,
activeIndex: activeIndex,
resetIndex: setActiveIndex
};
}, [children, total, vertical, activeIndex]);
var arrowProps = useMemo(function () {
return {
arrowVisible: arrowVisible,
onClick: setActiveIndex
};
}, [arrowVisible, setActiveIndex]);
var dotProps = useMemo(function () {
return {
vertical: vertical,
total: total,
activeIndex: activeIndex,
resetIndex: setActiveIndex,
dotsTrigger: dotsTrigger
};
}, [vertical, total, activeIndex, dotsTrigger]);
return React.createElement("div", {
className: classnames('au-carousel', className),
onMouseOver: function onMouseOver() {
return _onMouseOver();
},
onMouseOut: function onMouseOut() {
return onMouseout();
}
}, React.createElement(Slider, sliderProps), arrowEnable && React.createElement(Arrow, arrowProps), React.createElement(Dots, dotProps));
};
export { ReactCarousel, Trigger, VisibleWay };