@twilio/flex-ui/src/components/context/TaskContext.d.ts

Twilio Flex UI

import type { ChatChannelState, ConversationState } from "../../flex-ui-core/src";
import { Call } from "@twilio/voice-sdk";
import hoistNonReactStatics from "hoist-non-react-statics";
import React from "react";
import { TaskChannelDefinition } from "../../TaskChannelDefinition";
import { ITask } from "../../models";
import { ConferenceState } from "../../state/Conferences";
/**
 * Task Context interface
 * @typedef {object} TaskContextProps
 * @property {ITask} [task] - Task.
 * @property {Call} [call] - Call state of the task.
 * @property {ConferenceState} [conference] - Conference state of the task.
 * @property {TaskChannelDefinition} [channelDefinition] - Channel definition of the task.
 * @property {ConversationState.ConversationState} [conversation] - Conversation state of the task. Present if task is chat-based.
 * @memberof TaskContext
 */
export interface TaskContextProps {
    task?: ITask;
    call?: Call;
    conference?: ConferenceState;
    channelDefinition?: TaskChannelDefinition;
    conversation?: ConversationState.ConversationState;
    chatChannel?: ChatChannelState.ChannelState;
}
/**
 * Task Context
 * @class TaskContext
 * @category Framework / Context
 * @hideconstructor
 * @param {TaskContext.TaskContextProps} props
 * @example
 * import { TaskContext } from "@twilio/flex-ui";
 * <TaskContext.Consumer>
 *  {(context) => (
 *   <MyComponent
 *     task={context.task}
 *     call={context.call}
 *   />
 *  )}
 * </TaskContext.Consumer>
 */
export declare const TaskContext: React.Context<TaskContextProps>;
/**
 * Task Context Provider props interface
 * @typedef {object} TaskContextProviderProps
 * @property {string} taskSid - Sid of the task
 * @memberof TaskContextSource
 */
export interface TaskContextProviderProps {
    taskSid: string;
    children?: React.ReactNode;
}
/**
 * @class TaskContextSource
 * @classdesc Task Context Source component
 * @component
 * @hideconstructor
 * @param {TaskContextSource.TaskContextProviderProps} props properties to be passed to configure this component.
 * @category Framework
 * @private
 */
declare class TaskContextSource_ extends React.PureComponent<TaskContextProviderProps & TaskContextProps> {
    render(): JSX.Element;
}
export declare const TaskContextSource: import("react-redux").ConnectedComponent<typeof TaskContextSource_, import("react-redux").Omit<React.ClassAttributes<TaskContextSource_> & TaskContextProviderProps & TaskContextProps, "conference" | "call" | "task" | "channelDefinition" | "conversation" | "chatChannel"> & TaskContextProviderProps>;
/**
 * @category Components / Programmable
 * @name context-providers
 * @docName Context Providers
 * @classdesc When you're managing custom components in the Flex UI, you'll likely want to use data from Flex to render your component. For example, you might want your component to display information about the agent's active Task, or your component to inherit color and styling from the [Flex Theme](Theme) configuration instead of setting up unique branding for every component.
 */
/**
 * Flex includes a `withTaskContext()` helper function that adds data about the selected Task to your component. You can read about the properties of the [Task](ITask) object.
 * @name withTaskContext
 * @kind function
 * @memberOf context-providers
 * @param {React.ReactElement<any>} Component Any user-defined React Component.
 * @returns {React.ReactElement<any>} `withTaskContext()` creates a Higher order component which can read the properties of the [Task](ITask) object.
 * @example
 * import React from 'react';
 * import { withTaskContext } from '@twilio/flex-ui';
 * // Set text color to white
 * const TaskSIDText = {
 *   color: "#FFF"
 * };
 * class MyComponent extends React.Component {
 *   render() {
 *     // Retrieve Task details
 *     // (`task` will be undefined if there's no task selected in the UI)
 *     const { task } = this.props;
 *     // Render Task SID in component as a test
 *     return (
 *          <div style={TaskSIDText}>
 *              <p>First, make sure we can access the current Task data.</p>
 *              <p>Task SID: <span style={{ fontWeight: 'bold' }}>{task ? task.taskSid : 'No task selected'}</span></p>
 *          </div>
 *      );
 *   }
 * }
 *
 * // The withTaskContext() helper function creates a
 * // Higher-Order Component that uses the Context API
 * // to access Task data, then adds the Task data to
 * // the wrapped component.
 * export default withTaskContext(MyComponent);
 */
export declare function withTaskContext<C extends React.ComponentType<React.ComponentProps<C>>>(Component: C): {
    new (props: Omit<React.ComponentProps<C>, keyof TaskContextProps> | Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>): {
        render(): JSX.Element;
        context: any;
        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
        forceUpdate(callback?: () => void): void;
        readonly props: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>> & Readonly<{
            children?: React.ReactNode | undefined;
        }>;
        state: Readonly<{}>;
        refs: {
            [key: string]: React.ReactInstance;
        };
        componentDidMount?(): void;
        shouldComponentUpdate?(nextProps: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
        componentWillUnmount?(): void;
        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>, prevState: Readonly<{}>): any;
        componentDidUpdate?(prevProps: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>, prevState: Readonly<{}>, snapshot?: any): void;
        componentWillMount?(): void;
        UNSAFE_componentWillMount?(): void;
        componentWillReceiveProps?(nextProps: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>, nextContext: any): void;
        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>, nextContext: any): void;
        componentWillUpdate?(nextProps: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>, nextState: Readonly<{}>, nextContext: any): void;
        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>, nextState: Readonly<{}>, nextContext: any): void;
    };
    new (props: Omit<React.ComponentProps<C>, keyof TaskContextProps>, context: any): {
        render(): JSX.Element;
        context: any;
        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
        forceUpdate(callback?: () => void): void;
        readonly props: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>> & Readonly<{
            children?: React.ReactNode | undefined;
        }>;
        state: Readonly<{}>;
        refs: {
            [key: string]: React.ReactInstance;
        };
        componentDidMount?(): void;
        shouldComponentUpdate?(nextProps: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
        componentWillUnmount?(): void;
        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>, prevState: Readonly<{}>): any;
        componentDidUpdate?(prevProps: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>, prevState: Readonly<{}>, snapshot?: any): void;
        componentWillMount?(): void;
        UNSAFE_componentWillMount?(): void;
        componentWillReceiveProps?(nextProps: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>, nextContext: any): void;
        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>, nextContext: any): void;
        componentWillUpdate?(nextProps: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>, nextState: Readonly<{}>, nextContext: any): void;
        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<React.ComponentProps<C>, keyof TaskContextProps>>, nextState: Readonly<{}>, nextContext: any): void;
    };
    readonly displayName: string;
    contextType?: React.Context<any> | undefined;
} & hoistNonReactStatics.NonReactStatics<C, {}>;
export {};