@ebay/ebayui-core
Version:
Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.
49 lines (48 loc) • 1.65 kB
TypeScript
import type { WithNormalizedProps } from "../../global";
export declare const messageDurationStandard = 1500;
export declare const messageDurationReducedMotionMultiplier = 1.5;
export declare const messageFadeInDuration = 833;
interface Message {
renderBody: Marko.Body;
duration?: number;
}
interface ProgressBarExpressiveInput extends Omit<Marko.HTML.Div, `on${string}`> {
"a11y-text"?: Marko.HTMLAttributes["aria-label"];
message?: Marko.AttrTag<Message>;
size?: "medium" | "large";
}
export interface Input extends WithNormalizedProps<ProgressBarExpressiveInput> {
}
interface State {
isInitialMessage: boolean;
messageIsFadingIn: boolean;
currentMessageIndex: number;
nextMessageIndex: number;
}
declare class ProgressBarExpressive extends Marko.Component<Input, State> {
timeouts: {
fadeIn?: NodeJS.Timeout;
showMessage?: NodeJS.Timeout | number;
};
fadeInFirstMessage: boolean;
onCreate(input: Input): void;
onInput(input: Input): void;
onDestroy(): void;
clearTimeouts(): void;
initializeMessageRotation(messages?: Marko.AttrTag<Message>): void;
/**
* Determine how long a message should display.
* Displays longer when user prefers reduced motion.
* @returns time in milliseconds
*/
getMessageDuration(message?: Message): number;
/**
* Animate in a message, queuing up the next one
*/
fadeInMessage(): void;
/**
* Display a message and queue the next one
*/
showMessage(messageTags?: Marko.AttrTag<Message> | undefined, extraDelay?: number): void;
}
export default ProgressBarExpressive;