Skip to content

Commit

Permalink
fix: refactor hooks: useBodyScrollLock, usePortalContainer, useVirtua…
Browse files Browse the repository at this point in the history
…lElementRef
  • Loading branch information
NikitaCG committed Oct 3, 2023
1 parent 6ad4a78 commit a6c65b9
Show file tree
Hide file tree
Showing 16 changed files with 85 additions and 12 deletions.
2 changes: 1 addition & 1 deletion src/components/Modal/Modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import React from 'react';

import {CSSTransition} from 'react-transition-group';

import {useBodyScrollLock} from '../../hooks/useBodyScrollLock';
import {Portal} from '../Portal';
import type {DOMProps, QAProps} from '../types';
import {FocusTrap} from '../utils/FocusTrap';
import {block} from '../utils/cn';
import {getCSSTransitionClassNames} from '../utils/transition';
import {useBodyScrollLock} from '../utils/useBodyScrollLock';
import {useLayer} from '../utils/useLayer';
import type {LayerCloseReason, LayerExtendableProps} from '../utils/useLayer';
import {useRestoreFocus} from '../utils/useRestoreFocus';
Expand Down
2 changes: 1 addition & 1 deletion src/components/Popup/__stories__/Popup.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import React from 'react';

import type {Meta, StoryFn} from '@storybook/react';

import {useVirtualElementRef} from '../../../hooks/useVirtualElementRef';
import {Button} from '../../Button';
import {TextInput} from '../../controls';
import {useVirtualElementRef} from '../../utils/useVirtualElementRef';
import {Popup} from '../Popup';
import type {PopupPlacement, PopupProps} from '../Popup';

Expand Down
2 changes: 1 addition & 1 deletion src/components/Portal/Portal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';

import ReactDOM from 'react-dom';

import {usePortalContainer} from '../utils/usePortalContainer';
import {usePortalContainer} from '../../hooks/usePortalContainer/usePortalContainer';

export interface PortalProps {
container?: HTMLElement;
Expand Down
1 change: 1 addition & 0 deletions src/components/Portal/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from './Portal';
export * from '../../hooks/usePortalContainer/PortalProvider';
4 changes: 0 additions & 4 deletions src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,9 @@ export * from './utils/class-transform';
export * from './utils/event-broker';
export {getComponentName} from './utils/getComponentName';
export * from './utils/withEventBrokerDomHandlers';
export * from './utils/useBodyScrollLock';
export * from './utils/useEventBroker';
export * from './utils/useLayer';
export * from './utils/useVirtualElementRef';
export {Lang, configure} from './utils/configure';
export * from './utils/PortalProvider';
export * from './utils/usePortalContainer';
export * from './utils/useSelect';
export * from './utils/useListNavigation';
export * from './utils/useForkRef';
Expand Down
3 changes: 3 additions & 0 deletions src/hooks/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
export * from './useOutsideClick';
export * from './useBodyScrollLock';
export * from './useVirtualElementRef';
export * from './usePortalContainer';
17 changes: 17 additions & 0 deletions src/hooks/useBodyScrollLock/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!--GITHUB_BLOCK-->

# useBodyScrollLock

<!--/GITHUB_BLOCK-->

```tsx
import {useBodyScrollLock} from '@gravity-ui/uikit';
```

The `useBodyScrollLock` hook helps to blocks scrolling on the body element.

## Properties

| Name | Description | Type | Default |
| :------ | :---------- | :-------: | :-----: |
| enabled | Enable flag | `boolean` | |
2 changes: 2 additions & 0 deletions src/hooks/useBodyScrollLock/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export {useBodyScrollLock} from './useBodyScrollLock';
export type {UseBodyScrollLockProps} from './useBodyScrollLock';
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React from 'react';

export interface BodyScrollLockProps {
export interface UseBodyScrollLockProps {
enabled: boolean;
}

let locks = 0;
let storedBodyStyle: string | undefined;

export function useBodyScrollLock({enabled}: BodyScrollLockProps) {
export function useBodyScrollLock({enabled}: UseBodyScrollLockProps) {
React.useLayoutEffect(() => {
if (enabled) {
locks++;
Expand Down
File renamed without changes.
17 changes: 17 additions & 0 deletions src/hooks/usePortalContainer/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!--GITHUB_BLOCK-->

# usePortalContainer

<!--/GITHUB_BLOCK-->

```tsx
import {usePortalContainer} from '@gravity-ui/uikit';
```

The `usePortalContainer` hook helps to create portal container

## Return

| Name | Description | Type |
| :-------- | :--------------------------- | :------------------: |
| container | Container element for portal | `HTMLElement - null` |
3 changes: 3 additions & 0 deletions src/hooks/usePortalContainer/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export {usePortalContainer} from './usePortalContainer';
export {PortalProvider} from './PortalProvider';
export type {UsePortalContainerReturnType} from './usePortalContainer';
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ import React from 'react';

import {PortalContext} from './PortalProvider';

export function usePortalContainer(): HTMLElement | null {
export type UsePortalContainerReturnType = HTMLElement | null;

export function usePortalContainer(): UsePortalContainerReturnType {
const context = React.useContext(PortalContext);

let defaultContainer = null;
Expand Down
24 changes: 24 additions & 0 deletions src/hooks/useVirtualElementRef/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!--GITHUB_BLOCK-->

# useVirtualElementRef

<!--/GITHUB_BLOCK-->

```tsx
import {useVirtualElementRef} from '@gravity-ui/uikit';
```

The `useVirtualElementRef` hook helps to create virtual element for popup

## Properties

| Name | Description | Type | Default |
| :------------- | :-------------------------------------------------- | :----------------------------------------: | :-----: |
| rect | Position of virtual element in relation to viewport | `{top, bottom, left, right}: {[x]:number}` | |
| contextElement | DOM-context of virtual element | `Element` | |

## Return

| Name | Description | Type |
| :--- | :----------------------- | :----------------------: |
| ref | Virtual element ref link | `React.MutableRefObject` |
6 changes: 6 additions & 0 deletions src/hooks/useVirtualElementRef/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export {useVirtualElementRef} from './useVirtualElementRef';
export type {
VirtualElementRect,
UseVirtualElementRefProps,
UseVirtualElementRefReturnType,
} from './useVirtualElementRef';
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,19 @@ export interface UseVirtualElementRefProps {
rect?: VirtualElementRect | null;

/**
* DOM-context of virual element
* DOM-context of virtual element
*/
contextElement?: Element;
}

export type UseVirtualElementRefReturnType = React.MutableRefObject<VirtualElement>;

const initialPosition = {top: 0, right: 0, bottom: 0, left: 0};

// React hook for creating virtual element for popup
export function useVirtualElementRef(
props: UseVirtualElementRefProps = {},
): React.RefObject<VirtualElement> {
): UseVirtualElementRefReturnType {
const {rect, contextElement} = props;
const rectRef = React.useRef(initialPosition);

Expand Down

0 comments on commit a6c65b9

Please sign in to comment.