@cometchat/chat-uikit-react/dist/types/components/CometChatUsers/CometChatUsers.d.ts

Ready-to-use Chat UI Components for React(Javascript/Web)

import { JSX } from "react";
import { UsersManager } from "./controller";
import { SelectionMode, States } from "../../Enums/Enums";
import { CometChatOption } from "../../modals/CometChatOption";
export interface UsersProps {
    /**
     * Hides the default search bar.
     *
     * @defaultValue `false`
     */
    hideSearch?: boolean;
    /**
     * Displays an alphabetical section header for the user list.
     *
     * @defaultValue `true`
     */
    showSectionHeader?: boolean;
    /**
     * Hides both the default and custom error view passed in `errorView` prop.
     *
     * @defaultValue `false`
     */
    hideError?: boolean;
    /**
     * Disables the loading state while fetching users.
     *
     * @defaultValue `false`
     */
    disableLoadingState?: boolean;
    /**
     * Hides the user's online/offline status indicator.
     *
     * @remarks If set to `true`, the status indicator of the default list item view is not displayed.
     * @defaultValue `false`
     */
    hideUserStatus?: boolean;
    /**
     * User to highlight.
     *
     * @remarks This prop is used if `activeUser` prop is not provided.
     */
    activeUser?: CometChat.User;
    /**
     * Request builder to fetch users.
     *
     * @defaultValue Default request builder having the limit set to `30`.
     */
    usersRequestBuilder?: CometChat.UsersRequestBuilder;
    /**
     * Request builder with search parameters to fetch users.
     *
     * @remarks If the search input is not empty, the search keyword of this request builder is set to the text in the search input.
     */
    searchRequestBuilder?: CometChat.UsersRequestBuilder;
    /**
     * The search keyword used to filter the user list.
     *
     * @defaultValue `""`
     */
    searchKeyword?: string;
    /**
     * The property on the user object used to extract the section header character.
     *
     * @remarks This property will be used to extract the section header character from the user object.
     * @defaultValue `getName`
     */
    sectionHeaderKey?: keyof CometChat.User;
    /**
     * A function that returns a list of actions available when hovering over a user item.
     * @param user - An instance of `CometChat.User` representing the selected user.
     * @returns An array of `CometChatOption` objects.
     */
    options?: (user: CometChat.User) => CometChatOption[];
    /**
     * Selection mode to use for the default trailing view.
     *
     * @defaultValue `SelectionMode.none`
     */
    selectionMode?: SelectionMode;
    /**
     * Callback function invoked when a user is selected.
     *
     * @remarks This prop works only if `selectionMode` is not set to `SelectionMode.none`.
     * @param user - An instance of `CometChat.User` representing the selected user.
     * @param selected - A boolean indicating whether the user is selected.
     * @returns void
     */
    onSelect?: (user: CometChat.User, selected: boolean) => void;
    /**
     * Callback function invoked when a user item is clicked.
     *
     * @param user - An instance of `CometChat.User` representing the clicked user.
     * @returns void
     */
    onItemClick?: (user: CometChat.User) => void;
    /**
     * Callback function invoked when an error occurs in the component.
     * @param error - An instance of `CometChat.CometChatException` representing the error.
     * @returns void
     */
    onError?: ((error: CometChat.CometChatException) => void) | null;
    /**
     * Callback function to be executed when the user list is empty.
     * @returns void
     */
    onEmpty?: () => void;
    /**
     * A custom component to render in the top-right corner of the user list.
     */
    headerView?: JSX.Element;
    /**
     * A custom view to display during the loading state.
     */
    loadingView?: JSX.Element;
    /**
     * A custom view to display when an error occurs.
     */
    errorView?: JSX.Element;
    /**
     * A custom view to display when no users are available in the list.
     */
    emptyView?: JSX.Element;
    /**
     * A custom view to render for each user in the fetched list.
     *
     * @param user - An instance of `CometChat.User` representing the user.
     * @returns A JSX element to be rendered as the user item.
     */
    itemView?: (user: CometChat.User) => JSX.Element;
    /**
     * A function that renders a JSX element to display the leading view.
     *
     * @param user - An instance of `CometChat.User` representing the user.
     * @returns A JSX element to be rendered as the leading view.
     */
    leadingView?: (user: CometChat.User) => JSX.Element;
    /**
     * A custom function to render the title view of a user.
     *
     * @param user - An instance of `CometChat.User` representing the user.
     * @returns A JSX element to be rendered as the title view.
     */
    titleView?: (user: CometChat.User) => JSX.Element;
    /**
     * A custom view to render the subtitle for each user.
     *
     * @param user - An instance of `CometChat.User` representing the user.
     * @returns A JSX element to be rendered as the subtitle view.
     */
    subtitleView?: (user: CometChat.User) => JSX.Element;
    /**
     * A function that renders a JSX element to display the trailing view.
     *
     * @param user - An instance of `CometChat.User` representing the user.
     * @returns A JSX element to be rendered as the trailing view.
     */
    trailingView?: (user: CometChat.User) => JSX.Element;
}
type State = {
    searchText: string;
    userList: CometChat.User[];
    fetchState: States;
    isFirstReload: boolean;
    disableLoadingState: boolean;
};
export type Action = {
    type: "setSearchText";
    searchText: State["searchText"];
} | {
    type: "appendUsers";
    users: CometChat.User[];
    removeOldUsers?: boolean;
    usersManager?: UsersManager | null;
    onEmpty?: () => void;
} | {
    type: "setFetchState";
    fetchState: States;
} | {
    type: "setUserList";
    userList: CometChat.User[];
} | {
    type: "updateUser";
    user: CometChat.User;
} | {
    type: "setIsFirstReload";
    isFirstReload: boolean;
};
/**
 * Renders a scrollable list of users that has been created in a CometChat app
 */
export declare function CometChatUsers(props: UsersProps): import("react/jsx-runtime").JSX.Element;
export {};