@asgardeo/react
Version:
React implementation of Asgardeo JavaScript SDK.
120 lines (119 loc) • 4.45 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 { FC, ReactElement } from 'react';
import { BaseOrganizationProfileProps } from './BaseOrganizationProfile';
/**
* Props for the OrganizationProfile component.
* Extends BaseOrganizationProfileProps but makes the organization prop optional
* since it will be fetched using the organizationId
*/
export type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organization' | 'mode'> & {
/**
* Component to show when there's an error loading organization data.
*/
errorFallback?: ReactElement;
/**
* Component to show while loading organization data.
*/
loadingFallback?: ReactElement;
/**
* Display mode for the component.
*/
mode?: 'default' | 'popup';
/**
* Callback fired when the popup should be closed (only used in popup mode).
*/
onOpenChange?: (open: boolean) => void;
/**
* Callback fired when the organization should be updated.
*/
onUpdate?: (payload: any) => Promise<void>;
/**
* Whether the popup is open (only used in popup mode).
*/
open?: boolean;
/**
* The ID of the organization to fetch and display.
*/
organizationId: string;
/**
* Custom title for the popup dialog (only used in popup mode).
*/
popupTitle?: string;
};
/**
* OrganizationProfile component displays organization information in a
* structured and styled format. It automatically fetches organization details
* using the provided organization ID and displays them using BaseOrganizationProfile.
*
* The component supports editing functionality, allowing users to modify organization
* fields inline. Updates are automatically synced with the backend via the SCIM2 API.
*
* This component is the React-specific implementation that automatically
* retrieves the organization data from Asgardeo API.
*
* @example
* ```tsx
* // Basic usage with editing enabled (default)
* <OrganizationProfile organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1" />
*
* // Read-only mode
* <OrganizationProfile
* organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
* editable={false}
* />
*
* // With card layout and custom fallbacks
* <OrganizationProfile
* organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
* cardLayout={true}
* loadingFallback={<div>Loading organization...</div>}
* errorFallback={<div>Failed to load organization</div>}
* fallback={<div>No organization data available</div>}
* />
*
* // With custom fields configuration and update callback
* <OrganizationProfile
* organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
* fields={[
* { key: 'id', label: 'Organization ID', editable: false },
* { key: 'name', label: 'Organization Name', editable: true },
* { key: 'description', label: 'Description', editable: true, render: (value) => value || 'No description' },
* { key: 'created', label: 'Created Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
* { key: 'lastModified', label: 'Last Modified Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
* { key: 'attributes', label: 'Custom Attributes', editable: true }
* ]}
* onUpdate={async (payload) => {
* console.log('Organization updated:', payload);
* // payload contains the updated field values
* // The component automatically converts these to patch operations
* }}
* />
*
* // In popup mode
* <OrganizationProfile
* organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
* mode="popup"
* open={isOpen}
* onOpenChange={setIsOpen}
* popupTitle="Edit Organization Profile"
* />
* ```
*/
declare const OrganizationProfile: FC<OrganizationProfileProps>;
export default OrganizationProfile;