-
Notifications
You must be signed in to change notification settings - Fork 142
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(fuselage):
MenuV2 behavior (#1089)
Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>
- Loading branch information
1 parent
779ba02
commit a0e4bb9
Showing
8 changed files
with
157 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
packages/fuselage/src/components/Dropdown/DropdownDesktopWrapper.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import type { UsePositionOptions } from '@rocket.chat/fuselage-hooks'; | ||
| import { usePosition } from '@rocket.chat/fuselage-hooks'; | ||
| import type { ReactNode, Ref, RefObject } from 'react'; | ||
| import React, { forwardRef } from 'react'; | ||
|
|
||
| import { DropdownDesktop } from './DropdownDesktop'; | ||
|
|
||
| export const DropdownDesktopWrapper = forwardRef( | ||
| function DropdownDesktopWrapper<T extends HTMLElement, R extends HTMLElement>( | ||
| { | ||
| children, | ||
| reference, | ||
| placement = 'bottom-start', | ||
| ...props | ||
| }: { | ||
| reference: RefObject<T>; | ||
| placement?: UsePositionOptions['placement']; | ||
| children: ReactNode; | ||
| }, | ||
| ref: Ref<R> | ||
| ) { | ||
| const { style } = usePosition(reference, ref as RefObject<R>, { | ||
| placement, | ||
| }); | ||
|
|
||
| return ( | ||
| <DropdownDesktop style={style} children={children} ref={ref} {...props} /> | ||
| ); | ||
| } | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { useBreakpoints } from '@rocket.chat/fuselage-hooks'; | ||
| import React from 'react'; | ||
| import { usePopover } from 'react-aria'; | ||
| import type { AriaPopoverProps } from 'react-aria'; | ||
| import type { OverlayTriggerState } from 'react-stately'; | ||
|
|
||
| import { DropdownDesktop } from '../../Dropdown/DropdownDesktop'; | ||
| import { DropdownMobile } from '../../Dropdown/DropdownMobile'; | ||
|
|
||
| interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> { | ||
| children: React.ReactNode; | ||
| state: OverlayTriggerState; | ||
| } | ||
|
|
||
| function MenuPopover({ children, state, offset = 4, ...props }: PopoverProps) { | ||
| const popoverRef = React.useRef(null); | ||
| const { popoverProps } = usePopover( | ||
| { | ||
| ...props, | ||
| offset, | ||
| popoverRef, | ||
| }, | ||
| state | ||
| ); | ||
|
|
||
| const breakpoints = useBreakpoints(); | ||
| const isMobile = !breakpoints.includes('sm'); | ||
|
|
||
| if (isMobile) { | ||
| const mobileProps = { ...popoverProps, style: { bottom: 0, left: 0 } }; | ||
| return <DropdownMobile children={children} {...mobileProps} />; | ||
| } | ||
|
|
||
| return ( | ||
| <DropdownDesktop children={children} ref={popoverRef} {...popoverProps} /> | ||
| ); | ||
| } | ||
| export default MenuPopover; |
61 changes: 61 additions & 0 deletions
61
packages/fuselage/src/components/Menu/V2/helpers/helpers.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import type { UsePositionOptions } from '@rocket.chat/fuselage-hooks'; | ||
|
|
||
| type ReactAriaPlacement = | ||
| | 'bottom' | ||
| | 'bottom left' | ||
| | 'bottom right' | ||
| | 'bottom start' | ||
| | 'bottom end' | ||
| | 'top' | ||
| | 'top left' | ||
| | 'top right' | ||
| | 'top start' | ||
| | 'top end' | ||
| | 'left' | ||
| | 'left top' | ||
| | 'left bottom' | ||
| | 'start' | ||
| | 'start top' | ||
| | 'start bottom' | ||
| | 'right' | ||
| | 'right top' | ||
| | 'right bottom' | ||
| | 'end' | ||
| | 'end top' | ||
| | 'end bottom'; | ||
|
|
||
| export const getPlacement = ( | ||
| placement: UsePositionOptions['placement'] | ||
| ): ReactAriaPlacement => { | ||
| // switch case for placement from usePosition placement to react-aria | ||
| switch (placement) { | ||
| case 'bottom': | ||
| return 'bottom'; | ||
|
|
||
| case 'bottom-start': | ||
| return 'bottom start'; | ||
| case 'bottom-end': | ||
| return 'bottom end'; | ||
| case 'top': | ||
| return 'top'; | ||
|
|
||
| case 'top-start': | ||
| return 'top start'; | ||
| case 'top-end': | ||
| return 'top end'; | ||
| case 'left': | ||
| return 'left'; | ||
| case 'left-start': | ||
| return 'left top'; | ||
| case 'left-end': | ||
| return 'left bottom'; | ||
| case 'right': | ||
| return 'right'; | ||
| case 'right-start': | ||
| return 'right top'; | ||
| case 'right-end': | ||
| return 'right bottom'; | ||
| default: | ||
| return 'bottom start'; | ||
| } | ||
| }; |