@asgardeo/nextjs
Version:
Next.js implementation of Asgardeo JavaScript SDK.
106 lines • 4.34 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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { BaseUserDropdown } from '@asgardeo/react';
import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
import UserProfile from '../UserProfile/UserProfile';
/**
* UserDropdown component displays a user avatar with a dropdown menu.
* When clicked, it shows a popover with customizable menu items.
* This component is the React-specific implementation that uses the BaseUserDropdown
* and automatically retrieves the user data from Asgardeo context.
*
* Supports render props for complete customization of the dropdown appearance and behavior.
*
* @example
* ```tsx
* // Basic usage - will use user from Asgardeo context
* <UserDropdown menuItems={[
* { label: 'Profile', onClick: () => {} },
* { label: 'Settings', href: '/settings' },
* { label: 'Sign Out', onClick: () => {} }
* ]} />
*
* // With custom configuration
* <UserDropdown
* showTriggerLabel={true}
* avatarSize={40}
* fallback={<div>Please sign in</div>}
* />
*
* // Using render props for complete customization
* <UserDropdown>
* {({ user, isLoading, openProfile, signOut }) => (
* <div>
* <button onClick={openProfile}>
* {user?.name || 'Loading...'}
* </button>
* <button onClick={signOut}>Logout</button>
* </div>
* )}
* </UserDropdown>
*
* // Using partial render props
* <UserDropdown
* renderTrigger={({ user, openProfile }) => (
* <button onClick={openProfile} className="custom-trigger">
* Welcome, {user?.name}!
* </button>
* )}
* />
* ```
*/
const UserDropdown = ({ children, renderTrigger, renderDropdown, onSignOut, ...rest }) => {
const { user, isLoading, signOut } = useAsgardeo();
const [isProfileOpen, setIsProfileOpen] = useState(false);
const handleManageProfile = () => {
setIsProfileOpen(true);
};
const handleSignOut = () => {
signOut();
onSignOut && onSignOut();
};
const closeProfile = () => {
setIsProfileOpen(false);
};
// Prepare render props data
const renderProps = {
user,
isLoading: isLoading,
openProfile: handleManageProfile,
signOut: handleSignOut,
isProfileOpen,
closeProfile,
};
// If children render prop is provided, use it for complete customization
if (children) {
return (_jsxs(_Fragment, { children: [children(renderProps), _jsx(UserProfile, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })] }));
}
// If partial render props are provided, customize specific parts
if (renderTrigger || renderDropdown) {
// This would require significant changes to BaseUserDropdown to support partial customization
// For now, we'll provide a simple implementation that shows how it could work
return (_jsxs(_Fragment, { children: [renderTrigger ? (renderTrigger(renderProps)) : (_jsx(BaseUserDropdown, { user: user, isLoading: isLoading, onManageProfile: handleManageProfile, onSignOut: handleSignOut, ...rest })), _jsx(UserProfile, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })] }));
}
// Default behavior - use BaseUserDropdown as before
return (_jsxs(_Fragment, { children: [_jsx(BaseUserDropdown, { user: user, isLoading: isLoading, onManageProfile: handleManageProfile, onSignOut: handleSignOut, ...rest }), isProfileOpen && _jsx(UserProfile, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })] }));
};
export default UserDropdown;
//# sourceMappingURL=UserDropdown.js.map