@asgardeo/react
Version:
React implementation of Asgardeo JavaScript SDK.
129 lines (128 loc) • 3.79 kB
TypeScript
/**
* 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;