split-flap-lib
Version:
A modern React split-flap display component with TypeScript and Tailwind CSS
188 lines (174 loc) • 8.47 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var __assign = function() {
__assign = Object.assign || function __assign(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);
};
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var Flap = function (_a) {
var _b = _a.bottom, bottom = _b === void 0 ? false : _b, _c = _a.animated, animated = _c === void 0 ? false : _c, _d = _a.final, final = _d === void 0 ? false : _d, _e = _a.hinge, hinge = _e === void 0 ? false : _e, children = _a.children, _f = _a.className, className = _f === void 0 ? "" : _f;
var baseClasses = [
"absolute h-full w-full bg-inherit",
"transform-gpu origin-center",
"border-inherit rounded-inherit box-border",
"z-[1]",
];
var positionClasses = bottom ? ["clip-path-bottom"] : ["clip-path-top"];
var animationClasses = [];
if (animated) {
animationClasses.push("z-[2]", "duration-300", "fill-mode-forwards");
if (bottom) {
if (final) {
animationClasses.push("animate-flap-down-bottom", "ease-out");
}
}
else {
if (final) {
animationClasses.push("animate-flap-down-top", "ease-in", "opacity-100");
}
else {
animationClasses.push("rotate-x-50", "opacity-40");
}
}
}
var allClasses = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], baseClasses, true), positionClasses, true), animationClasses, true), [
className,
], false).filter(Boolean)
.join(" ");
return (jsxs("div", __assign({ className: allClasses }, { children: [children, hinge && (jsx("div", { className: "absolute left-0 top-1/2 transform -translate-y-1/2 w-full h-[0.04em] bg-inherit z-[3] box-border" }))] })));
};
var FlapDigit = function (_a) {
var _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.prevValue, prevValue = _c === void 0 ? "" : _c, _d = _a.final, final = _d === void 0 ? false : _d, mode = _a.mode, _e = _a.hinge, hinge = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? "" : _f;
var baseClasses = [
"relative inline-block box-content",
"text-white bg-black",
"font-sans text-center leading-none",
"h-[1em] w-[1.1ch]",
];
var modeClasses = {
words: ["w-full"],
alphanumeric: ["w-[1.7ch]"],
numeric: [],
};
var allClasses = __spreadArray(__spreadArray(__spreadArray([], baseClasses, true), modeClasses[mode], true), [className], false).filter(Boolean)
.join(" ");
return (jsxs("div", __assign({ className: allClasses, "data-mode": mode }, { children: [jsx(Flap, __assign({ hinge: hinge }, { children: value })), jsx(Flap, __assign({ bottom: true, hinge: hinge }, { children: prevValue })), jsx(Flap, __assign({ animated: true, final: final, hinge: hinge }, { children: prevValue }), "top-".concat(prevValue)), final && (jsx(Flap, __assign({ bottom: true, animated: true, final: true, hinge: hinge }, { children: value }), "bottom-".concat(value)))] })));
};
var InitialCursor = {
current: -1,
previous: -1,
target: 0,
};
var FlapStack = function (_a) {
var stack = _a.stack, value = _a.value, timing = _a.timing, mode = _a.mode, _b = _a.hinge, hinge = _b === void 0 ? true : _b;
var _c = useState(InitialCursor), cursor = _c[0], setCursor = _c[1];
useEffect(function () {
setCursor(InitialCursor);
}, [stack]);
useEffect(function () {
var current = cursor.current, previous = cursor.previous;
var target = Math.max(stack.indexOf(value), 0);
var increment = function () {
previous = current;
if (current >= stack.length - 1) {
current = 0;
}
else {
current = current + 1;
}
setCursor({
current: current,
previous: previous,
target: target,
});
};
increment();
var timer = setInterval(function () {
if (current === target) {
clearInterval(timer);
}
else {
increment();
}
}, timing);
return function () { return clearInterval(timer); };
}, [stack, value, timing]);
var current = cursor.current, previous = cursor.previous, target = cursor.target;
return (jsx(FlapDigit, { value: stack[current] || "", prevValue: stack[previous] || "", final: current === target, mode: mode, hinge: hinge }));
};
var Presets = {
NUM: " 0123456789",
ALPHANUM: " 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ",
};
var splitChars = function (v) {
return String(v)
.split("")
.map(function (c) { return c.toUpperCase(); });
};
var padValue = function (v, length, padChar, padStart) {
var trimmed = v.slice(0, length);
return padStart
? String(trimmed).padStart(length, padChar)
: String(trimmed).padEnd(length, padChar);
};
var FlapDisplay = function (_a) {
var id = _a.id, _b = _a.className, className = _b === void 0 ? "" : _b, value = _a.value, _c = _a.chars, chars = _c === void 0 ? Presets.NUM : _c, words = _a.words, _d = _a.length, length = _d === void 0 ? 6 : _d, _e = _a.padChar, padChar = _e === void 0 ? " " : _e, _f = _a.padMode, padMode = _f === void 0 ? "auto" : _f, _g = _a.timing, timing = _g === void 0 ? 30 : _g, _h = _a.hinge, hinge = _h === void 0 ? true : _h;
var _j = useState([]), stack = _j[0], setStack = _j[1];
var _k = useState("numeric"), mode = _k[0], setMode = _k[1];
var _l = useState([]), digits = _l[0], setDigits = _l[1];
useEffect(function () {
if (words && words.length) {
setStack(words);
setMode("words");
}
else {
setStack(splitChars(chars));
setMode(chars.match(/[a-z]/i) ? "alphanumeric" : "numeric");
}
}, [chars, words]);
useEffect(function () {
if (words && words.length) {
setDigits([value]);
}
else {
var padStart = padMode === "auto"
? !!value.match(/^[0-9.,+-]*$/)
: padMode === "start";
setDigits(splitChars(padValue(value, length, padChar, padStart)));
}
}, [value, chars, words, length, padChar, padMode]);
return (jsx("div", __assign({ id: id, className: className, "aria-hidden": "true", "aria-label": value }, { children: digits.map(function (digit, i) { return (jsx(FlapStack, { stack: stack, value: digit, timing: timing, mode: mode, hinge: hinge }, i)); }) })));
};
export { Flap, FlapDigit, FlapDisplay, FlapStack, Presets, FlapDisplay as default };
//# sourceMappingURL=index.esm.js.map