Skip to content

Commit

Permalink
feat(plasma-new-hope): Added prop 'portal' into Dropdown component
Browse files Browse the repository at this point in the history
  • Loading branch information
@shuga2704
shuga2704 committed Jul 3, 2024
1 parent 6068211 commit acc2f13
Show file tree
Hide file tree
Showing 5 changed files with 136 additions and 30 deletions.
51 changes: 23 additions & 28 deletions packages/plasma-new-hope/src/components/Dropdown/Dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { useHashMaps } from './hooks/useHashMaps';
/**
* Выпадающий список.
*/
export const dropdownRoot = (Root: RootProps<HTMLDivElement, DropdownProps>) =>
export const dropdownRoot = (Root: RootProps<HTMLDivElement, Omit<DropdownProps, 'items'>>) =>
forwardRef<HTMLDivElement, DropdownProps>(
(
{
Expand All @@ -42,6 +42,7 @@ export const dropdownRoot = (Root: RootProps<HTMLDivElement, DropdownProps>) =>
trigger = 'click',
variant = 'normal',
hasArrow = true,
portal,
...rest
},
ref,
Expand Down Expand Up @@ -85,32 +86,26 @@ export const dropdownRoot = (Root: RootProps<HTMLDivElement, DropdownProps>) =>
};

return (
<Root
className={cx(className, classes.dropdownRoot)}
ref={ref}
view={view}
size={size}
items={items}
{...rest}
<StyledPopover
isOpen={isCurrentListOpen}
onToggle={handleGlobalToggle}
offset={offset}
placement={getPlacements(placement)}
trigger={trigger}
closeOnOverlayClick={closeOnOverlayClick}
isFocusTrapped={false}
target={childrenWithProps(children, {
role: 'combobox',
'aria-controls': 'tree_level_1',
'aria-expanded': isCurrentListOpen,
'aria-activedescendant': getActiveDescendant(),
onKeyDown,
})}
preventOverflow={false}
usePortal={Boolean(portal)}
frame={portal}
>
<StyledPopover
isOpen={isCurrentListOpen}
usePortal={false}
onToggle={handleGlobalToggle}
offset={offset}
placement={getPlacements(placement)}
trigger={trigger}
closeOnOverlayClick={closeOnOverlayClick}
isFocusTrapped={false}
target={childrenWithProps(children, {
role: 'combobox',
'aria-controls': 'tree_level_1',
'aria-expanded': isCurrentListOpen,
'aria-activedescendant': getActiveDescendant(),
onKeyDown,
})}
preventOverflow={false}
>
<Root className={cx(className, classes.dropdownRoot)} ref={ref} view={view} size={size} {...rest}>
<Ul
listHeight={listHeight}
listOverflow={listOverflow}
Expand Down Expand Up @@ -143,8 +138,8 @@ export const dropdownRoot = (Root: RootProps<HTMLDivElement, DropdownProps>) =>
/>
))}
</Ul>
</StyledPopover>
</Root>
</Root>
</StyledPopover>
);
},
);
Expand Down
5 changes: 5 additions & 0 deletions packages/plasma-new-hope/src/components/Dropdown/Dropdown.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,11 @@ export interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
* @default normal
*/
variant?: 'normal' | 'tight';
/**
* Портал для выпадающего списка. Принимает id контейнера или ref.
*/
portal?: string | React.RefObject<HTMLElement>;

/**
* Обработчик клика по item.
* @deprecated использовать onItemSelect.
Expand Down
3 changes: 2 additions & 1 deletion packages/plasma-new-hope/src/components/Popover/Popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,8 +115,9 @@ export const popoverRoot = (Root: RootProps<HTMLDivElement, PopoverProps>) =>
if (isOpen && closeOnOverlayClick && onToggle) {
const targetIsRoot = event.target === rootRef.current;
const rootHasTarget = rootRef.current?.contains(event.target as Element);
const popoverRootHasTarget = popoverRef.current?.contains(event.target as Element);

if (!targetIsRoot && !rootHasTarget) {
if (!targetIsRoot && !rootHasTarget && !popoverRootHasTarget) {
onToggle(false, event);
}
}
Expand Down
54 changes: 53 additions & 1 deletion website/plasma-web-docs/docs/components/Dropdown.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,6 @@ type Items = Array<{
},
];


return (
<div style={{ height:"300px" }}>
<Dropdown
Expand All @@ -320,6 +319,59 @@ type Items = Array<{
}
```
</TabItem>

<TabItem value="portal" label="Portal">
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.\
Для такой реализации имеется пропс `portal`, который принимает либо `ref` либо `id` html-тега.

```tsx live
import React, { useRef } from 'react';
import { Select } from '@salutejs/plasma-web';

export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];

const ref = useRef(null)

return (
<div style={{ height: '300px' }} ref={ref}>
<Dropdown items={items} portal={ref}>
<Button text="Список стран" />
</Dropdown>
</div>
);
}
```
</TabItem>
</Tabs>

## Клавиатурная навигация
Expand Down
53 changes: 53 additions & 0 deletions website/sdds-serv-docs/docs/components/Dropdown.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,6 +318,59 @@ type Items = Array<{
}
```
</TabItem>

<TabItem value="portal" label="Portal">
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.\
Для такой реализации имеется пропс `portal`, который принимает либо `ref` либо `id` html-тега.

```tsx live
import React, { useRef } from 'react';
import { Select } from '@salutejs/sdds-serv';

export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];

const ref = useRef(null)

return (
<div style={{ height: '300px' }} ref={ref}>
<Dropdown items={items} portal={ref}>
<Button text="Список стран" />
</Dropdown>
</div>
);
}
```
</TabItem>
</Tabs>

## Клавиатурная навигация
Expand Down

0 comments on commit acc2f13

Please sign in to comment.