@razorpay/blade
Version:
The Design System that powers Razorpay
139 lines (136 loc) • 4.55 kB
JavaScript
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import React__default from 'react';
import { m, AnimatePresence } from 'framer-motion';
import '../../utils/index.js';
import '../BladeProvider/index.js';
import { msToSeconds } from '../../utils/msToSeconds.js';
import { cssBezierToArray } from '../../utils/cssBezierToArray.js';
import '../BaseMotion/index.js';
import '../Box/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import useTheme from '../BladeProvider/useTheme.js';
import { castWebType } from '../../utils/platform/castUtils.js';
import { Box } from '../Box/Box.js';
import { BaseMotionBox } from '../BaseMotion/BaseMotion.js';
var ShimmerOverlay = function ShimmerOverlay() {
var _useTheme = useTheme(),
theme = _useTheme.theme;
var shimmerColor = theme.colors.surface.text.staticWhite.muted;
var shimmerDuration = msToSeconds(theme.motion.duration['2xgentle']);
var shimmerDelay = msToSeconds(theme.motion.delay.gentle);
var shimmerEase = cssBezierToArray(castWebType(theme.motion.easing.standard));
return /*#__PURE__*/jsx(m.span, {
"aria-hidden": true,
style: {
position: 'absolute',
inset: 0,
background: "linear-gradient(90deg, transparent 0%, ".concat(shimmerColor, " 50%, transparent 100%)"),
pointerEvents: 'none'
},
initial: {
x: '-100%'
},
animate: {
x: '100%'
},
transition: {
duration: shimmerDuration,
ease: shimmerEase,
repeat: Infinity,
repeatDelay: shimmerDelay
}
});
};
var RollingText = function RollingText(_ref) {
var texts = _ref.texts,
children = _ref.children,
onIndexChange = _ref.onIndexChange,
cycleDurationProp = _ref.cycleDuration,
_ref$showShimmer = _ref.showShimmer,
showShimmer = _ref$showShimmer === void 0 ? true : _ref$showShimmer;
var _useTheme2 = useTheme(),
theme = _useTheme2.theme;
var _React$useState = React__default.useState(0),
_React$useState2 = _slicedToArray(_React$useState, 2),
currentIndex = _React$useState2[0],
setCurrentIndex = _React$useState2[1];
var cycleDuration = cycleDurationProp !== null && cycleDurationProp !== void 0 ? cycleDurationProp : theme.motion.delay.xlong;
var slideDuration = msToSeconds(theme.motion.duration.xmoderate);
var slideEase = cssBezierToArray(castWebType(theme.motion.easing.emphasized));
React__default.useEffect(function () {
if (texts.length <= 1) {
return undefined;
}
var id = setInterval(function () {
setCurrentIndex(function (prev) {
var next = (prev + 1) % texts.length;
onIndexChange === null || onIndexChange === void 0 || onIndexChange(next);
return next;
});
}, cycleDuration);
return function () {
clearInterval(id);
};
}, [texts.length, cycleDuration, onIndexChange]);
var textsString = texts.join('\0');
React__default.useEffect(function () {
setCurrentIndex(0);
onIndexChange === null || onIndexChange === void 0 || onIndexChange(0);
// Reset only when the text contents change, not on every render (new array reference)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [textsString]);
var renderContent = function renderContent(text) {
return children ? children(text) : text;
};
if (texts.length <= 1) {
return /*#__PURE__*/jsx("span", {
children: renderContent(texts[0])
});
}
var slideVariants = {
initial: {
y: 16,
opacity: 0,
filter: 'blur(4px)'
},
animate: {
y: 0,
opacity: 1,
filter: 'blur(0px)',
transition: {
duration: slideDuration,
ease: slideEase
}
},
exit: {
y: -16,
opacity: 0,
filter: 'blur(4px)',
position: 'absolute',
transition: {
duration: slideDuration,
ease: slideEase
}
}
};
return /*#__PURE__*/jsx(Box, {
position: "relative",
display: "inline-flex",
overflow: "hidden",
children: /*#__PURE__*/jsx(AnimatePresence, {
mode: "popLayout",
initial: false,
children: /*#__PURE__*/jsx(BaseMotionBox, {
motionVariants: slideVariants,
children: /*#__PURE__*/jsxs(Box, {
position: "relative",
overflow: "hidden",
whiteSpace: "nowrap",
children: [renderContent(texts[currentIndex]), showShimmer && /*#__PURE__*/jsx(ShimmerOverlay, {})]
})
}, currentIndex)
})
});
};
export { RollingText };
//# sourceMappingURL=RollingText.web.js.map