UNPKG

@tripetto/runner-autoscroll

Version:

Autoscroll UI for running Tripetto forms and surveys.

499 lines (490 loc) 24.3 kB
/*! 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"; }