UNPKG

@asgardeo/react

Version:
129 lines (128 loc) 3.79 kB
/** * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com). * * WSO2 LLC. licenses this file to you under the Apache License, * Version 2.0 (the "License"); you may not use this file except * in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ import { AllOrganizationsApiResponse, Organization } from '@asgardeo/browser'; import { FC, ReactNode } from 'react'; export interface OrganizationWithSwitchAccess extends Organization { canSwitch: boolean; } /** * Props interface for the BaseOrganizationList component. */ export interface BaseOrganizationListProps { /** * Additional CSS class names to apply to the container */ className?: string; /** * List of organizations discoverable to the signed-in user. */ allOrganizations: AllOrganizationsApiResponse; /** * List of organizations associated to the signed-in user. */ myOrganizations: Organization[]; /** * Error message to display */ error?: string | null; /** * Function called when "Load More" is clicked */ fetchMore?: () => Promise<void>; /** * Whether there are more organizations to load */ hasMore?: boolean; /** * Whether the initial data is loading */ isLoading?: boolean; /** * Whether more data is being loaded */ isLoadingMore?: boolean; /** * Function called when refresh is requested */ onRefresh?: () => Promise<void>; /** * Custom renderer for when no organizations are found */ renderEmpty?: () => ReactNode; /** * Custom renderer for the error state */ renderError?: (error: string) => ReactNode; /** * Custom renderer for the load more button */ renderLoadMore?: (onLoadMore: () => Promise<void>, isLoading: boolean) => ReactNode; /** * Custom renderer for the loading state */ renderLoading?: () => ReactNode; /** * Custom renderer for each organization item */ renderOrganization?: (organization: OrganizationWithSwitchAccess, index: number) => ReactNode; /** * Function called when an organization is selected/clicked */ onOrganizationSelect?: (organization: OrganizationWithSwitchAccess) => void; /** * Inline styles to apply to the container */ style?: React.CSSProperties; /** * Display mode: 'inline' for normal display, 'popup' for modal dialog */ mode?: 'inline' | 'popup'; /** * Function called when popup open state changes (only used in popup mode) */ onOpenChange?: (open: boolean) => void; /** * Whether the popup is open (only used in popup mode) */ open?: boolean; /** * Title for the popup dialog (only used in popup mode) */ title?: string; /** * Whether to show the organization status in the list */ showStatus?: boolean; } /** * BaseOrganizationList component displays a list of organizations with pagination support. * This component serves as the base for framework-specific implementations. * * @example * ```tsx * <BaseOrganizationList * data={organizations} * isLoading={isLoading} * hasMore={hasMore} * fetchMore={fetchMore} * error={error} * /> * ``` */ export declare const BaseOrganizationList: FC<BaseOrganizationListProps>; export default BaseOrganizationList;