@ebay/ebayui-core
Version:
Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.
99 lines (98 loc) • 4.01 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.messageFadeInDuration = exports.messageDurationReducedMotionMultiplier = exports.messageDurationStandard = void 0;
const dom_1 = require("../../common/dom");
exports.messageDurationStandard = 1500;
exports.messageDurationReducedMotionMultiplier = 1.5;
exports.messageFadeInDuration = 833;
class ProgressBarExpressive {
onCreate(input) {
// For medium sized text, display the first message immediately
this.fadeInFirstMessage = input.size !== "medium";
this.state = {
isInitialMessage: true,
messageIsFadingIn: false,
currentMessageIndex: -1,
nextMessageIndex: 0,
};
this.timeouts = { fadeIn: undefined, showMessage: undefined };
}
onInput(input) {
this.initializeMessageRotation(input.message);
}
onDestroy() {
this.clearTimeouts();
}
clearTimeouts() {
clearTimeout(this.timeouts.fadeIn);
clearTimeout(this.timeouts.showMessage);
}
initializeMessageRotation(messages) {
const messageCount = [...(messages || [])].length;
if (messageCount > 0) {
// Ensure next message index is in new message array bounds
if (this.state.nextMessageIndex >= messageCount) {
this.state.nextMessageIndex = 0;
}
this.clearTimeouts();
setTimeout(() => {
this.state.isInitialMessage = false;
}, exports.messageDurationStandard);
if (!this.fadeInFirstMessage) {
// Automatically show first message (no delay or animation)
this.showMessage(messages);
}
else if (dom_1.useReducedMotion) {
// In reduced motion mode, fade in first message immediately
this.showMessage(messages, exports.messageFadeInDuration);
}
else {
// Fade in first message after a short delay
setTimeout(this.fadeInMessage.bind(this), messageCount === 1
? exports.messageDurationStandard / 2
: exports.messageDurationStandard);
}
}
}
/**
* Determine how long a message should display.
* Displays longer when user prefers reduced motion.
* @returns time in milliseconds
*/
getMessageDuration(message) {
return (((message === null || message === void 0 ? void 0 : message.duration) || exports.messageDurationStandard) *
(dom_1.useReducedMotion ? exports.messageDurationReducedMotionMultiplier : 1));
}
/**
* Animate in a message, queuing up the next one
*/
fadeInMessage() {
this.state.messageIsFadingIn = true;
this.timeouts.showMessage = setTimeout(this.showMessage.bind(this), exports.messageFadeInDuration);
}
/**
* Display a message and queue the next one
*/
showMessage(messageTags = this.input.message, extraDelay = 0) {
const messages = [...(messageTags || [])];
if (messageTags) {
const messageCount = messages.length;
if (messageCount > 1) {
const currentIndex = this.state.nextMessageIndex;
const nextIndex = currentIndex === messageCount - 1 ? 0 : currentIndex + 1;
// Show current message
this.state.currentMessageIndex = currentIndex;
this.state.messageIsFadingIn = false;
// Queue next message
this.state.nextMessageIndex = nextIndex;
this.timeouts.fadeIn = setTimeout(this.fadeInMessage.bind(this), extraDelay +
this.getMessageDuration(messages[currentIndex]));
}
else {
this.state.currentMessageIndex = 0;
this.state.messageIsFadingIn = false;
}
}
}
}
module.exports = ProgressBarExpressive;