@asgardeo/react
Version:
React implementation of Asgardeo JavaScript SDK.
154 lines (153 loc) • 5.11 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 { OrganizationDetails } from '@asgardeo/browser';
import { FC, ReactElement } from 'react';
export interface BaseOrganizationProfileProps {
/**
* Callback fired when the cancel button is clicked (only used in editable mode).
*/
cancelButtonText?: string;
/**
* Whether to display the profile in a card layout.
*/
cardLayout?: boolean;
/**
* CSS class name for styling the component.
*/
className?: string;
/**
* Whether the organization profile is editable.
*/
editable?: boolean;
/**
* Component to render when no organization data is available.
*/
fallback?: ReactElement;
/**
* Array of field configurations to display. Each field specifies what organization data to show.
*/
fields?: Array<{
key: keyof OrganizationDetails | 'attributes';
label: string;
editable?: boolean;
render?: (value: any, organization: OrganizationDetails) => React.ReactNode;
}>;
/**
* Display mode for the component.
*/
mode?: 'inline' | 'popup';
/**
* Callback fired when a field value changes.
*/
onChange?: (field: string, value: any) => void;
/**
* Callback fired when the popup should be closed (only used in popup mode).
*/
onOpenChange?: (open: boolean) => void;
/**
* Callback fired when the form is submitted (only used in editable mode).
*/
onSubmit?: (data: any) => 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 organization details to display.
*/
organization?: OrganizationDetails | null;
/**
* Text for the save button (only used in editable mode).
*/
saveButtonText?: string;
/**
* Custom title for the profile.
*/
title?: string;
}
/**
* BaseOrganizationProfile component displays organization information in a
* structured and styled format. It shows organization details such as name,
* description, status, and other available information with support for inline editing.
*
* This is the base component that can be used in any context where you have
* an organization object available. It provides editing capabilities similar to
* the UserProfile component, allowing users to modify organization fields directly.
*
* @example
* ```tsx
* // Basic usage
* <BaseOrganizationProfile organization={organizationData} />
*
* // With editing enabled and update handler
* <BaseOrganizationProfile
* organization={organizationData}
* editable={true}
* onUpdate={async (payload) => {
* await updateOrganizationAPI(orgId, payload);
* }}
* />
*
* // With card layout and custom title
* <BaseOrganizationProfile
* organization={organizationData}
* cardLayout={true}
* title="Organization Details"
* fallback={<div>No organization data available</div>}
* />
*
* // With custom fields configuration
* <BaseOrganizationProfile
* organization={organizationData}
* 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: 'attributes', label: 'Custom Attributes', editable: true }
* ]}
* onUpdate={handleUpdate}
* />
*
* // In popup mode
* <BaseOrganizationProfile
* organization={organizationData}
* mode="popup"
* open={isOpen}
* onOpenChange={setIsOpen}
* title="Edit Organization"
* />
* ```
* <BaseOrganizationProfile
* organization={organizationData}
* fields={[
* { key: 'id', label: 'Organization ID' },
* { key: 'name', label: 'Organization Name' },
* { key: 'description', label: 'Description', render: (value) => value || 'No description' },
* { key: 'created', label: 'Created Date', render: (value) => new Date(value).toLocaleDateString() },
* { key: 'attributes', label: 'Custom Attributes' }
* ]}
* />
* ```
*/
declare const BaseOrganizationProfile: FC<BaseOrganizationProfileProps>;
export default BaseOrganizationProfile;