@asgardeo/nextjs
Version:
Next.js implementation of Asgardeo JavaScript SDK.
102 lines • 5.39 kB
JavaScript
/**
* 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.
*/
'use client';
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { BaseOrganizationSwitcher, BuildingAlt, useOrganization, useTranslation, } from '@asgardeo/react';
import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
import { CreateOrganization } from '../CreateOrganization/CreateOrganization';
import OrganizationProfile from '../OrganizationProfile/OrganizationProfile';
import OrganizationList from '../OrganizationList/OrganizationList';
/**
* OrganizationSwitcher component that provides organization switching functionality.
* This component automatically retrieves organizations from the OrganizationContext.
* You can also override the organizations, currentOrganization, and onOrganizationSwitch
* by passing them as props.
*
* @example
* ```tsx
* import { OrganizationSwitcher } from '@asgardeo/react';
*
* // Basic usage - uses OrganizationContext
* <OrganizationSwitcher />
*
* // With custom organization switch handler
* <OrganizationSwitcher
* onOrganizationSwitch={(org) => {
* console.log('Switching to:', org.name);
* // Custom logic here
* }}
* />
*
* // With fallback for unauthenticated users
* <OrganizationSwitcher
* fallback={<div>Please sign in to view organizations</div>}
* />
* ```
*/
export const OrganizationSwitcher = ({ currentOrganization: propCurrentOrganization, fallback = _jsx(_Fragment, {}), onOrganizationSwitch: propOnOrganizationSwitch, organizations: propOrganizations, ...props }) => {
const { isSignedIn } = useAsgardeo();
const { currentOrganization: contextCurrentOrganization, myOrganizations: contextOrganizations, switchOrganization, isLoading, error, } = useOrganization();
const [isCreateOrgOpen, setIsCreateOrgOpen] = useState(false);
const [isProfileOpen, setIsProfileOpen] = useState(false);
const [isOrganizationListOpen, setIsOrganizationListOpen] = useState(false);
const { t } = useTranslation();
if (!isSignedIn && fallback) {
return fallback;
}
if (!isSignedIn) {
return _jsx(_Fragment, {});
}
const organizations = propOrganizations || contextOrganizations || [];
const currentOrganization = propCurrentOrganization || contextCurrentOrganization;
const onOrganizationSwitch = propOnOrganizationSwitch || switchOrganization;
const handleManageOrganizations = () => {
setIsOrganizationListOpen(true);
};
const handleManageOrganization = () => {
setIsProfileOpen(true);
};
const defaultMenuItems = [];
if (currentOrganization) {
defaultMenuItems.push({
icon: _jsx(BuildingAlt, {}),
label: t('organization.switcher.manage.organizations'),
onClick: handleManageOrganizations,
});
}
defaultMenuItems.push({
icon: (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 5v14m-7-7h14" }) })),
label: t('organization.switcher.create.organization'),
onClick: () => setIsCreateOrgOpen(true),
});
const menuItems = props.menuItems ? [...defaultMenuItems, ...props.menuItems] : defaultMenuItems;
return (_jsxs(_Fragment, { children: [_jsx(BaseOrganizationSwitcher, { organizations: organizations, currentOrganization: currentOrganization, onOrganizationSwitch: onOrganizationSwitch, loading: isLoading, error: error, menuItems: menuItems, onManageProfile: handleManageOrganization, ...props }), _jsx(CreateOrganization, { mode: "popup", open: isCreateOrgOpen, onOpenChange: setIsCreateOrgOpen, onSuccess: (org) => {
if (org && onOrganizationSwitch) {
onOrganizationSwitch(org);
}
setIsCreateOrgOpen(false);
} }), currentOrganization && (_jsx(OrganizationProfile, { organizationId: currentOrganization.id, mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen, cardLayout: true, loadingFallback: _jsx("div", { children: t('organization.profile.loading') }), errorFallback: _jsx("div", { children: t('organization.profile.error') }) })), _jsx(OrganizationList, { mode: "popup", open: isOrganizationListOpen, onOpenChange: setIsOrganizationListOpen, title: t('organization.switcher.manage.organizations'), onOrganizationSelect: (organization) => {
if (onOrganizationSwitch) {
onOrganizationSwitch(organization);
}
setIsOrganizationListOpen(false);
} })] }));
};
export default OrganizationSwitcher;
//# sourceMappingURL=OrganizationSwitcher.js.map