@transact-open-ux/react/dist/providers/PageProvider.d.ts

Library to integrate React with Transact Open UX

import React, { ComponentType, ConsumerProps, FunctionComponent } from "react";
import { CurrentPageMeta, navigateAction } from "../types";
export interface PageProviderState {
    /**
     * The name of the current page displayed
     */
    currentPage?: string;
    /**
     * An Object that contains the currently displayed page's meta data.
     *
     * This can be used to populate current page information around your app.
     *
     * `{
     *   id: "AboutYou",
     *   label: "About You",
     *   stepNumber: 1,
     *   offMenu: false
     * }`
     *
     */
    currentPageMeta?: CurrentPageMeta | object;
    /**
     * A boolean property that can be used to show/hide or disable/enable a back button.
     *
     * When the Transact Application Framework is enabled, the value will be based on the data returned from Transact Manager.
     *
     * Otherwise it will be `true` IF the current page is the first page in navPages.
     */
    disableBack?: boolean;
    /**
     * A boolean property that can be used to show/hide or disable/enable a submit button.
     *
     * When the Transact Application Framework is enabled, the value will be based on the data returned from Transact Manager.
     *
     * Otherwise it will be `true` IF the current page is NOT the last page in navPages.
     */
    disableSubmit?: boolean;
    /**
     * Returns the formApi set via the TransactForm component.
     * If you are not using the TransactForm component and have not set this up manually, this will be undefined.
     */
    getFormApi?: any;
    /**
     * Navigates to the page found with the page id or number provided.
     * @param pageIdOrNum
     * @param performFormUpdate
     * @param skipValidation
     */
    goToPage?: (pageIdOrNum: string | number, skipValidation?: boolean, performFormUpdate?: boolean) => void;
    /**
     * Gets the currently displayed page, this is used by the <PageController /> component
     *
     * It is recommended you use the <PageController /> component to render the pages
     */
    getCurrentPage?: () => React.ReactElement<any> | null;
    /**
     * A map of all pages, keys are either the id set to the page or the page index
     */
    pageMap?: {
        index?: number;
        page?: React.ReactElement<any> | null;
    };
    /**
     * An array of all pages, including offMenu pages.
     */
    pages?: Array<React.ReactElement<any>>;
    /**
     * The current page index
     */
    index?: number;
    /**
     * A function that is used in the `<PageController/>` component to initialize the pages and the page validation function.
     *
     * It is recommended you use the `<PageController/>` component to initialize your pages.
     */
    initPages?: (pages: React.ReactChild[], validateFn: () => Promise<boolean>) => void;
    /**
     * An array of pages that are part of the navigation.
     * These are `<Page/>` components that do not have an offMenu prop.
     */
    navPages?: Array<React.ReactElement<any>>;
    /**
     * A function that allows you to navigate between pages via the narrative or by sequential navigation
     *
     * Before navigating, the method will ensure that the form is valid before moving forward.
     * If the form is not valid, a resolved promise will be returned with false as the value.
     *
     * Use navigate("forward") to go forward and navigate("back") to go back.
     * If no value is provided the action will default to "forward"
     */
    navigate?: (action: navigateAction) => Promise<any>;
    /**
     * A boolean property which indicates whether Transact Application Framework support is enabled
     */
    tafEnabled?: boolean;
    validatePage?: () => boolean;
}
export interface PageProviderProps {
    /**
     * The content of the Page Provider.
     */
    children: React.ReactNode;
    /**
     *  A boolean property that when true will skip validation on navigate.
     *  Use this if you only want to validate on submit.
     */
    skipValidate?: boolean;
}
/**
 * A component that surrounds your entire app and handles all the page logic.
 * <br>
 * This page logic includes Transact Application Framework support, page change logic, validation and meta data.
 * <br>
 * This component needs to be wrapped within the `TransactProvider` component.
 *
 * ## Example
 * Wrapping your root App component
 * ```jsx
 * import { TransactProvider, PageProvider } from '@transact-open-ux/react';
 * import App from './App';
 *
 * ReactDOM.render(
 *  <TransactProvider>
 *    <PageProvider>
 *     <App />
 *    </PageProvider>
 *  </TransactProvider>,
 * document.getElementById('root')
 * );
 * ```
 */
declare const PageProvider: FunctionComponent<PageProviderProps>;
/**
 * A component that can access the page state via render props from inside a `<PageProvider/>` component.
 *
 * ## Example
 *
 * Creating a navigation bar component
 *
 * ```jsx
 * import { PageConsumer } from '@transact-open-ux/react';
 *
 * export default function NavBar() {
 *  return (
 *   <PageConsumer>
 *     {({ navigate, disableSubmit }) => (
 *       <div>
 *         <button onClick={() => navigate("back")} type="button">Back</button>
 *         {DisableSubmit ? (
 *           <button onClick={() => navigate("forward")} type="button">Next</button>
 *         ) : (
 *           <button type="submit">Submit</button>
 *         )}
 *       </div>
 *     )}
 *   </PageConsumer>;
 *  )
 * }
 * ```
 */
declare const PageConsumer: ComponentType<ConsumerProps<PageProviderState>>;
declare const usePageContext: () => PageProviderState;
export { PageConsumer, PageProvider, usePageContext };