@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
45 lines (44 loc) • 1.37 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/RollingNumber/DigitColumn.tsx
const STRIP_CELLS = [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"0",
"1"
];
function DigitColumn({ digit, getStyles, previousDigit, empty, valueDirection }) {
const digitIndex = parseInt(digit, 10);
const previousDigitIndex = previousDigit !== null ? parseInt(previousDigit, 10) : digitIndex;
const animateToIndex = valueDirection === "up" && previousDigit !== null && digitIndex < previousDigitIndex && digitIndex <= 1 ? digitIndex + 10 : digitIndex;
const direction = digitIndex >= previousDigitIndex ? "up" : "down";
const digitStyles = getStyles("digit");
const columnStyles = getStyles("digitColumn");
return /* @__PURE__ */ jsx("span", {
...digitStyles,
"data-empty": empty || void 0,
"aria-hidden": "true",
children: /* @__PURE__ */ jsx("span", {
...columnStyles,
style: {
...columnStyles.style,
transform: `translateY(${-digitIndex}em)`,
["--rn-roll-from"]: `translateY(${-previousDigitIndex}em)`,
["--rn-roll-to"]: `translateY(${-animateToIndex}em)`
},
"data-direction": direction,
children: STRIP_CELLS.map((d, i) => /* @__PURE__ */ jsx("span", { children: d }, i))
}, digit)
});
}
//#endregion
export { DigitColumn };
//# sourceMappingURL=DigitColumn.mjs.map