react-simple-marquee
Version:
Marquee build with React and CSS animation
89 lines (88 loc) • 6.17 kB
JavaScript
;
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useAnimationDuration = exports.useAnimationPlayState = exports.VERTICAL_VALUE = exports.NEGATIVE_VALUE = void 0;
var react_1 = require("react");
exports.NEGATIVE_VALUE = ["right-left", "bottom-top"];
exports.VERTICAL_VALUE = ["top-bottom", "bottom-top"];
var useAnimationPlayState = function () {
var textWrapper = (0, react_1.useRef)(null);
var _a = __read((0, react_1.useState)(undefined), 2), animationPlayState = _a[0], setAnimationPlayState = _a[1];
(0, react_1.useEffect)(function () {
var _a, _b;
var mouseOutHandler = function () {
setAnimationPlayState("running");
};
var mouseInHandler = function () {
setAnimationPlayState("paused");
};
(_a = textWrapper.current) === null || _a === void 0 ? void 0 : _a.addEventListener("mouseenter", mouseInHandler);
(_b = textWrapper.current) === null || _b === void 0 ? void 0 : _b.addEventListener("mouseleave", mouseOutHandler);
return function () {
var _a, _b;
(_a = textWrapper.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("mouseenter", mouseInHandler);
(_b = textWrapper.current) === null || _b === void 0 ? void 0 : _b.removeEventListener("mouseleave", mouseOutHandler);
};
}, []);
return { textWrapper: textWrapper, animationPlayState: animationPlayState };
};
exports.useAnimationPlayState = useAnimationPlayState;
var keyFrames = function (DYNAMIC_VALUE, DIRECTION) {
if (DYNAMIC_VALUE < 0) {
return "\n @-webkit-keyframes dynamicMarqueeAnimation" + (DYNAMIC_VALUE + DIRECTION) + " {\n 100% {\n -webkit-transform: translate" + DIRECTION + "(" + DYNAMIC_VALUE + "px);\n transform: translate" + DIRECTION + "(" + DYNAMIC_VALUE + "px);\n }\n }\n @-moz-keyframes dynamicMarqueeAnimation" + (DYNAMIC_VALUE + DIRECTION) + " {\n 100% {\n -webkit-transform: translate" + DIRECTION + "(" + DYNAMIC_VALUE + "px);\n transform: translate" + DIRECTION + "(" + DYNAMIC_VALUE + "px);\n }\n }\n @keyframes dynamicMarqueeAnimation" + (DYNAMIC_VALUE + DIRECTION) + " {\n 100% {\n -webkit-transform: translate" + DIRECTION + "(" + DYNAMIC_VALUE + "px);\n transform: translate" + DIRECTION + "(" + DYNAMIC_VALUE + "px);\n }\n }\n ";
}
return "\n @-webkit-keyframes dynamicMarqueeAnimation" + (DYNAMIC_VALUE + DIRECTION) + " {\n 0% {\n -webkit-transform: translate" + DIRECTION + "(-" + DYNAMIC_VALUE + "px);\n transform: translate" + DIRECTION + "(0px);\n }\n 100% {\n -webkit-transform: translate" + DIRECTION + "(" + DYNAMIC_VALUE + "px);\n transform: translate" + DIRECTION + "(0px);\n }\n }\n @-moz-keyframes dynamicMarqueeAnimation" + (DYNAMIC_VALUE + DIRECTION) + " {\n 0% {\n -webkit-transform: translate" + DIRECTION + "(-" + DYNAMIC_VALUE + "px);\n transform: translate" + DIRECTION + "(-" + DYNAMIC_VALUE + "px);\n }\n 100% {\n -webkit-transform: translate" + DIRECTION + "(0px);\n transform: translate" + DIRECTION + "(0px);\n }\n }\n @keyframes dynamicMarqueeAnimation" + (DYNAMIC_VALUE + DIRECTION) + " {\n 0% {\n -webkit-transform: translate" + DIRECTION + "(-" + DYNAMIC_VALUE + "px);\n transform: translate" + DIRECTION + "(-" + DYNAMIC_VALUE + "px);\n }\n 100% {\n -webkit-transform: translate" + DIRECTION + "(0px);\n transform: translate" + DIRECTION + "(0px);\n }\n }\n ";
};
var useAnimationDuration = function (speed, direction) {
var textElem = (0, react_1.useRef)(null);
var dynamicStyle = (0, react_1.useRef)(null);
var _a = __read((0, react_1.useState)(undefined), 2), animationName = _a[0], setAnimationName = _a[1];
var _b = __read((0, react_1.useState)(undefined), 2), animationDuration = _b[0], setAnimationDuration = _b[1];
(0, react_1.useEffect)(function () {
dynamicStyle.current = document.createElement("style");
dynamicStyle.current.type = "text/css";
document.querySelector("head").append(dynamicStyle.current);
return function () {
dynamicStyle.current.remove();
};
}, []);
(0, react_1.useEffect)(function () {
var marqueeRun = function () {
var marqueeSpeed = speed || 1;
var isVertical = exports.VERTICAL_VALUE.includes(direction);
var dimension = textElem.current[isVertical ? "clientHeight" : "clientWidth"] +
(isVertical ? 0 : 40);
var DYNAMIC_VALUE = exports.NEGATIVE_VALUE.includes(direction)
? -dimension
: dimension;
var DIRECTION = exports.VERTICAL_VALUE.includes(direction) ? "Y" : "X";
if (dynamicStyle.current) {
dynamicStyle.current.innerHTML = keyFrames(DYNAMIC_VALUE, DIRECTION);
}
setAnimationName("dynamicMarqueeAnimation" + (DYNAMIC_VALUE + DIRECTION));
setAnimationDuration((dimension * 20) / marqueeSpeed + "ms");
};
marqueeRun();
window.addEventListener("resize", marqueeRun);
return function () {
window.removeEventListener("resize", marqueeRun);
};
}, [speed, direction]);
return { textElem: textElem, animationDuration: animationDuration, animationName: animationName };
};
exports.useAnimationDuration = useAnimationDuration;