@tripetto/runner-autoscroll
Version:
Autoscroll UI for running Tripetto forms and surveys.
499 lines (490 loc) • 24.3 kB
TypeScript
/*! Tripetto Autoscroll Runner 9.0.1 - Copyright (C) 2024 Tripetto B.V. - All Rights Reserved */
declare module "@tripetto/runner-autoscroll" {
import * as TripettoAutoscroll from "@tripetto/runner-autoscroll/module";
export * from "@tripetto/runner-autoscroll/module";
export { TripettoAutoscroll };
export default TripettoAutoscroll;
}
declare module "@tripetto/runner-autoscroll/es5" {
import * as TripettoAutoscroll from "@tripetto/runner-autoscroll/module";
export * from "@tripetto/runner-autoscroll/module";
export { TripettoAutoscroll };
export default TripettoAutoscroll;
}
declare module "@tripetto/runner-autoscroll/runner" {
import * as TripettoAutoscroll from "@tripetto/runner-autoscroll/module";
export * from "@tripetto/runner-autoscroll/module";
export { TripettoAutoscroll };
export default TripettoAutoscroll;
}
declare module "@tripetto/runner-autoscroll/runner/es5" {
import * as TripettoAutoscroll from "@tripetto/runner-autoscroll/module";
export * from "@tripetto/runner-autoscroll/module";
export { TripettoAutoscroll };
export default TripettoAutoscroll;
}
declare module "@tripetto/runner-autoscroll/react" {
import * as TripettoAutoscroll from "@tripetto/runner-autoscroll/module";
export * from "@tripetto/runner-autoscroll/module";
export { TripettoAutoscroll };
export default TripettoAutoscroll;
}
declare module "@tripetto/runner-autoscroll/module" {
import { Hooks, IDefinition, ISnapshot, Instance, L10n, NodeBlock, TL10n, TStyles } from "@tripetto/runner";
import { TOverlayContext } from "@tripetto/runner-fabric/overlay";
import { IRunnerAttachments, IRunnerProps, TRunnerPreviewData, TRunnerViews } from "@tripetto/runner-react-hook";
import { styled } from "styled-components";
import { CSSProperties, FocusEvent, MutableRefObject, ReactNode } from "react";
export interface IAutoscrollStyles extends TStyles {
readonly direction?: "horizontal" | "vertical";
readonly verticalAlignment?: "top" | "middle" | "bottom";
readonly hidePast?: boolean;
readonly hideUpcoming?: boolean;
readonly hideWhenFailed?: boolean;
readonly color?: string;
readonly autoFocus?: boolean;
readonly showSeparateSubmit?: boolean;
readonly showPreviousButton?: boolean;
readonly showNavigation?: "auto" | "always" | "never";
readonly showProgressbar?: boolean;
readonly showEnumerators?: boolean;
readonly hideRequiredIndicator?: boolean;
readonly showScrollbar?: boolean;
readonly disableScrolling?: boolean;
readonly noBranding?: boolean;
readonly font?: {
readonly family?: string;
readonly size?: number;
readonly sizeSmall?: number;
};
readonly background?: {
readonly color?: string;
readonly url?: string;
readonly opacity?: number;
readonly positioning?: "auto" | "100% auto" | "auto 100%" | "cover" | "contain" | "repeat";
};
readonly inputs?: {
readonly backgroundColor?: string;
readonly borderColor?: string;
readonly borderSize?: number;
readonly roundness?: number;
readonly textColor?: string;
readonly errorColor?: string;
readonly agreeColor?: string;
readonly declineColor?: string;
readonly selectionColor?: string;
};
readonly buttons?: {
readonly baseColor?: string;
readonly textColor?: string;
readonly roundness?: number;
readonly mode?: "fill" | "outline";
readonly finishColor?: string;
};
readonly navigation?: {
readonly backgroundColor?: string;
readonly textColor?: string;
readonly progressbarColor?: string;
};
}
export interface IRuntimeStyles extends IAutoscrollStyles {
readonly direction: "horizontal" | "vertical";
readonly verticalAlignment: "top" | "middle" | "bottom";
readonly font: {
readonly family: string;
readonly size: number;
readonly sizeSmall: number;
readonly color: string;
};
readonly background: {
readonly color: string;
readonly opacity: number;
readonly url?: string;
readonly positioning?: "auto" | "100% auto" | "auto 100%" | "cover" | "contain" | "repeat";
};
readonly inputs: {
readonly backgroundColor: string;
readonly borderColor: string;
readonly borderSize: number;
readonly roundness: number | undefined;
readonly textColor: string;
readonly errorColor: string;
readonly scale: number;
};
readonly checkboxes: {
readonly backgroundColor: string;
readonly borderColor: string;
readonly borderSize: number;
readonly roundness: number | undefined;
readonly textColor: string;
readonly errorColor: string;
readonly scale: number;
readonly hideRequiredIndicator: boolean;
};
readonly radiobuttons: {
readonly backgroundColor: string;
readonly borderColor: string;
readonly borderSize: number;
readonly textColor: string;
readonly scale: number;
};
readonly matrix: {
readonly backgroundColor: string;
readonly borderColor: string;
readonly borderSize: number;
readonly textColor: string;
readonly errorColor: string;
readonly scale: number;
readonly hideRequiredIndicator: boolean;
};
readonly yesNo: {
readonly yesColor: string;
readonly noColor: string;
readonly outlineSize: number;
readonly roundness: number | undefined;
readonly scale: number;
readonly margin: number;
readonly alignment: "horizontal" | "vertical";
};
readonly rating: {
readonly color: string;
readonly scale: number;
};
readonly scale: {
readonly color: string;
readonly outlineSize: number;
readonly roundness: number | undefined;
readonly scale: number;
readonly margin: number;
readonly labelColor: string;
};
readonly multipleChoice: {
readonly color: string;
readonly outlineSize: number;
readonly roundness: number | undefined;
readonly scale: number;
readonly margin: number;
};
readonly pictureChoice: {
readonly color: string;
readonly outlineSize: number;
readonly roundness: number | undefined;
readonly scale: number;
readonly margin: number;
};
readonly fileUpload: {
readonly backgroundColor: string;
readonly borderColor: string;
readonly borderSize: number;
readonly roundness: number | undefined;
readonly textColor: string;
readonly errorColor: string;
readonly scale: number;
};
readonly buttons: {
readonly baseColor: string;
readonly textColor: string | undefined;
readonly outlineSize: number;
readonly roundness: number | undefined;
readonly mode: "fill" | "outline";
readonly scale: number;
};
readonly finishButton: {
readonly baseColor: string;
readonly textColor: string | undefined;
readonly outlineSize: number;
readonly roundness: number | undefined;
readonly mode: "fill" | "outline";
readonly scale: number;
};
}
export interface IAutoscrollRenderProps {
readonly index: number;
readonly id: string;
readonly l10n: L10n.Namespace;
readonly styles: IRuntimeStyles;
readonly overlay: TOverlayContext;
readonly view: TRunnerViews;
readonly name: JSX.Element | undefined;
readonly description: JSX.Element | undefined;
readonly explanation: JSX.Element | undefined;
readonly label: JSX.Element | undefined;
readonly placeholder: string;
readonly tabIndex: number;
readonly isActivated: boolean;
readonly isFailed: boolean;
readonly isPage: boolean;
readonly ariaDescribedBy: string | undefined;
readonly ariaDescription: JSX.Element | undefined;
readonly focus: <T>(e: FocusEvent) => T;
readonly blur: <T>(e: FocusEvent) => T;
readonly autoFocus: (element: HTMLElement | null) => void;
readonly attachments: IRunnerAttachments | undefined;
readonly markdownifyToJSX: (md: string, lineBreaks?: boolean) => JSX.Element;
readonly markdownifyToURL: (md: string) => string;
readonly markdownifyToImage: (md: string) => string;
readonly markdownifyToString: (md: string) => string;
}
export interface IAutoscrollRendering extends NodeBlock {
readonly required?: boolean;
readonly hideRequiredIndicatorFromName?: boolean;
readonly hideAriaDescription?: boolean;
readonly hideButtons?: boolean;
readonly autoSubmit?: boolean;
readonly autoFocus?: boolean;
readonly render?: (props: IAutoscrollRenderProps, done?: () => void, cancel?: () => void) => ReactNode;
}
export interface IAutoscrollSnapshot {
/** Contains the active block. */
readonly a?: string;
/** Contains focus information. */
readonly b?: {
[key: string]: false | true | undefined;
};
/** Contains the email address that was used to pause. */
readonly d?: string;
/** Contains a timestamp of the snapshot. */
readonly e?: number;
}
export interface IAutoscrollController {
definition: IDefinition;
styles: IAutoscrollStyles;
l10n: TL10n;
view: TRunnerViews;
readonly instance: Instance | undefined;
readonly fingerprint: string;
readonly snapshot: ISnapshot<IAutoscrollSnapshot> | undefined;
readonly isRunning: boolean;
readonly isFinishing: boolean;
readonly isPausing: boolean;
readonly isLicensed: boolean;
readonly allowStart: boolean;
readonly allowRestart: boolean;
readonly allowPause: boolean;
readonly allowStop: boolean;
readonly start: () => void;
readonly restart: () => void;
readonly pause: () => ISnapshot<IAutoscrollSnapshot> | Promise<ISnapshot<IAutoscrollSnapshot>> | undefined;
readonly stop: () => void;
readonly doPreview: (data: TRunnerPreviewData) => void;
}
export interface IBuilderInstance extends Hooks<"OnChange" | "OnEdit"> {
definition: IDefinition | undefined;
edit(sType: "branch" | "section" | "node" | "condition", sId: string): void;
edit(sType: "epilogue", sId?: string): void;
edit(sType?: "properties" | "prologue"): void;
}
export type TAutoscrollDisplay = "inline" | "page";
export type TAutoscrollPause =
| {
readonly recipe: "email";
readonly onPause: (
emailAddress: string,
snapshot: ISnapshot,
language: string,
locale: string,
namespace: string
) => Promise<void> | boolean | void;
}
| ((snapshot: ISnapshot, language: string, locale: string, namespace: string) => Promise<void> | boolean | void);
export interface IAutoscrollUIProps extends IRunnerProps<IAutoscrollSnapshot> {
/** Specifies the styles (colors, font, size, etc.) for the runner. */
readonly styles?: IAutoscrollStyles;
/** Specifies the localization (locale and translation) information. */
readonly l10n?: TL10n;
/** Specifies the initial view mode of the runner. */
readonly view?: TRunnerViews;
/** Specifies the display mode of the runner. */
readonly display?: TAutoscrollDisplay;
/** Specifies a license code for the runner. */
readonly license?: string;
/** Removes all Tripetto branding when a valid license is supplied. */
readonly removeBranding?: boolean;
/** Specifies a custom class name for the HTML element that holds the runner. */
readonly className?: string;
/** Specifies the inline style for the HTML element that holds the runner. */
readonly customStyle?: CSSProperties;
/**
* Specifies custom CSS rules.
* To specify rules for a specific block, use this selector: [data-block="<block identifier>"] { ... }
*/
readonly customCSS?: string;
/** Specifies a function that is invoked when the runner needs a locale or translation. */
readonly onL10n?: (l10n: TL10n) => Promise<void>;
/** Specifies a function that is invoked when the runner wants to reload the definition. */
readonly onReload?: () => IDefinition | Promise<IDefinition>;
/** Specifies a function that is invoked when an edit action is requested. */
readonly onEdit?: (type: "prologue" | "epilogue" | "styles" | "l10n" | "block", id?: string) => void;
/** Specifies a function or recipe that is invoked when the runner wants to pause. */
readonly onPause?: TAutoscrollPause;
/** Specifies a function that is invoked when the runner is "touched" by a user. */
readonly onTouch?: () => void;
/** Reference to the runner controller. */
readonly controller?: MutableRefObject<IAutoscrollController | undefined>;
/** Specifies a function that is invoked when the runner controller is available. */
readonly onController?: (controller: MutableRefObject<IAutoscrollController>) => void;
}
export type IAutoscrollProps = Omit<
IAutoscrollUIProps,
"definition" | "snapshot" | "styles" | "license" | "l10n" | "onL10n" | "l10nNamespace"
> & {
/** Specifies the definition to run. */
readonly definition?: IDefinition | Promise<IDefinition | undefined>;
/** Specifies the snapshot that should be restored. */
readonly snapshot?: ISnapshot<IAutoscrollSnapshot> | Promise<ISnapshot<IAutoscrollSnapshot> | undefined>;
/** Specifies the styles. */
readonly styles?: IAutoscrollStyles | Promise<IAutoscrollStyles | undefined>;
/** Specifies a license code for the runner. */
readonly license?: string | Promise<string | undefined>;
/** Removes all Tripetto branding when a valid license is supplied. */
readonly removeBranding?: boolean;
/** Try to store sessions in the local store to preserve persistency on navigation between multiple pages that host the runner. */
readonly persistent?: boolean;
/** Specifies the localization information. */
readonly l10n?: TL10n | Promise<TL10n | undefined>;
/** Specifies the preferred language (when no language is specified in the definition). */
readonly language?: string;
/** Provides locale information. */
readonly locale?: L10n.ILocale | ((locale: string) => L10n.ILocale | Promise<L10n.ILocale | undefined> | undefined);
/** Provides translations. */
readonly translations?:
| L10n.TTranslation
| L10n.TTranslation[]
| ((
language: string,
name: string,
version: string
) => L10n.TTranslation | L10n.TTranslation[] | Promise<L10n.TTranslation | L10n.TTranslation[] | undefined> | undefined);
/** Specifies a loader that is shown when the runner is loading. */
readonly loader?: JSX.Element;
/** Reference to a builder instance to enable live preview for the builder. */
readonly builder?: MutableRefObject<IBuilderInstance | undefined>;
};
export const AutoscrollUI: (props: IAutoscrollUIProps) => import("react/jsx-runtime").JSX.Element;
export interface IAutoscroll {
/** Specifies the parent element for the runner. */
readonly element?: HTMLElement | null;
/** Specifies the definition to run. */
readonly definition?: IDefinition | Promise<IDefinition | undefined>;
/** Specifies the snapshot that should be restored. */
readonly snapshot?: ISnapshot<IAutoscrollSnapshot> | Promise<ISnapshot<IAutoscrollSnapshot> | undefined>;
/** Specifies the styles (colors, font, size, etc.) for the runner. */
readonly styles?: IAutoscrollStyles | Promise<IAutoscrollStyles | undefined>;
/** Specifies the localization (locale and translation) information. */
readonly l10n?: TL10n | Promise<TL10n | undefined>;
/** Specifies the initial view mode of the runner. */
readonly view?: TRunnerViews;
/** Specifies the display mode of the runner. */
readonly display?: TAutoscrollDisplay;
/** Try to store sessions in the local store to preserve persistency on navigation between multiple pages that host the runner. */
readonly persistent?: boolean;
/** Specifies a license code for the runner. */
readonly license?: string | Promise<string | undefined>;
/** Removes all Tripetto branding when a valid license is supplied. */
readonly removeBranding?: boolean;
/** Specifies a custom class name for the runner element. */
readonly className?: string;
/** Specifies the inline style for the runner element. */
readonly customStyle?: CSSProperties;
/**
* Specifies custom CSS rules.
* To specify rules for a specific block, use this selector: [data-block="<block identifier>"] { ... }
*/
readonly customCSS?: string;
/** Specifies the attachments handler. */
readonly attachments?: IRunnerAttachments;
/** Specifies the preferred language (when no language is specified in the definition). */
readonly language?: string;
/** Provides locale information. */
readonly locale?: L10n.ILocale | ((locale: string) => L10n.ILocale | Promise<L10n.ILocale | undefined> | undefined);
/** Provides translations. */
readonly translations?:
| L10n.TTranslation
| L10n.TTranslation[]
| ((
language: string,
name: string,
version: string
) => L10n.TTranslation | L10n.TTranslation[] | Promise<L10n.TTranslation | L10n.TTranslation[] | undefined> | undefined);
/** Reference to a builder instance to enable live preview for the builder. */
readonly builder?: IBuilderInstance;
/** Specifies a function that is invoked when the runner is ready. */
readonly onReady?: (instance?: Instance) => void;
/** Specifies a function that is invoked when the runner is touched by a user. */
readonly onTouch?: () => void;
/** Specifies a function that is invoked when the user performs an action. */
readonly onAction?: (
type: "start" | "stage" | "unstage" | "focus" | "blur" | "pause" | "complete",
definition: {
readonly fingerprint: string;
readonly name: string;
},
block?: {
readonly id: string;
readonly name: string;
readonly alias?: string;
}
) => void;
/** Invoked when data can be imported into the instance. */
readonly onImport?: (instance: Instance) => void;
/** Invoked when there is a change. */
readonly onChange?: (instance: Instance) => void;
/** Invoked when there is a data change. */
readonly onData?: (instance: Instance) => void;
/** Specifies a function that is invoked when the runner wants to pause. */
readonly onPause?: TAutoscrollPause;
/** Specifies a function that is invoked when the runner submits data. */
readonly onSubmit?: (
instance: Instance,
language: string,
locale: string,
namespace?: string
) => Promise<string | undefined> | boolean | void;
/** Invoked when the runner is completed (after the data is submitted). */
readonly onComplete?: (instance: Instance, id?: string) => void;
/** Invoked when the runner wants to reload the definition. */
readonly onReload?: () => IDefinition | Promise<IDefinition>;
/** Specifies a function that is invoked when an edit action is requested. */
readonly onEdit?: (type: "prologue" | "epilogue" | "styles" | "l10n" | "block", id?: string) => void;
/** Specifies a function that is invoked when the runner is destroyed. */
readonly onDestroy?: () => void;
}
export interface IAutoscrollRunner extends IAutoscrollController {
readonly destroy: () => void;
}
export const AutoscrollRunner: (props: IAutoscrollProps) => import("react/jsx-runtime").JSX.Element;
/**
* Bootstraps a new runner.
* @param props Specifies the properties for the runner.
* @returns Returns a promise to the runner controller.
*/
export const run: (props: IAutoscroll) => Promise<IAutoscrollRunner>;
/** Namespace identifier for the runner. */
export const namespace: string;
export { color } from "@tripetto/runner-fabric/color";
export { ButtonFabric } from "@tripetto/runner-fabric/components/button";
export { CheckboxFabric } from "@tripetto/runner-fabric/components/checkbox";
export { CheckboxesFabric, ICheckbox } from "@tripetto/runner-fabric/components/checkboxes";
export { DateTimeFabric } from "@tripetto/runner-fabric/components/datetime";
export { DropdownFabric, IDropdownFabricOption } from "@tripetto/runner-fabric/components/dropdown";
export { EmailFabric } from "@tripetto/runner-fabric/components/email";
export { FileFabric, FileThumbnailFabric, IFileController, IFileService } from "@tripetto/runner-fabric/components/file";
export { InputFabric } from "@tripetto/runner-fabric/components/input";
export { MatrixFabric, IMatrixColumn, IMatrixRow } from "@tripetto/runner-fabric/components/matrix";
export { MultiSelectFabric, IMultiSelectOption } from "@tripetto/runner-fabric/components/multi-select";
export { MultipleChoiceFabric, IMultipleChoiceButton } from "@tripetto/runner-fabric/components/multiple-choice";
export { NumberFabric } from "@tripetto/runner-fabric/components/number";
export { PasswordFabric } from "@tripetto/runner-fabric/components/password";
export { PhoneNumberFabric } from "@tripetto/runner-fabric/components/phone-number";
export { PictureChoiceFabric, IPictureChoiceOption } from "@tripetto/runner-fabric/components/picture-choice";
export { RadiobuttonsFabric, IRadiobutton } from "@tripetto/runner-fabric/components/radiobuttons";
export { RatingFabric, RatingShapes } from "@tripetto/runner-fabric/components/rating";
export { RequiredIndicatorFabric } from "@tripetto/runner-fabric/components/required-indicator";
export { ScaleFabric, IScaleNumeric, IScaleOption } from "@tripetto/runner-fabric/components/scale";
export { TextFabric } from "@tripetto/runner-fabric/components/text";
export { TextareaFabric } from "@tripetto/runner-fabric/components/textarea";
export { URLFabric } from "@tripetto/runner-fabric/components/url";
export { YesNoFabric, IYesNo } from "@tripetto/runner-fabric/components/yes-no";
export { styled };
export { css, keyframes } from "styled-components";
}