Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: refactor hooks to use callbackref #1246

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

chore: refactor hooks to use callbackref #1246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
65e56da
first commit
ggazzo Dec 15, 2023
3369ea7
lets get down
ggazzo Dec 15, 2023
b4690ba
..
ggazzo Dec 20, 2023
0a178f4
..
ggazzo Dec 20, 2023
623c834
fix types
ggazzo Dec 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"pegjs"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
"source.fixAll.eslint": "explicit"
},
"editor.formatOnSave": true,
"[typescript]": {
Expand Down
48 changes: 24 additions & 24 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,27 @@
![Pull requests](https://img.shields.io/github/issues-pr/RocketChat/fuselage?style=flat-square)
![GitHub commit activity](https://img.shields.io/github/commit-activity/m/RocketChat/fuselage?style=flat-square)

| Package | Description | Version | Dependencies |
| ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| 📦 [`@rocket.chat/css-in-js`](/packages/css-in-js) | Toolset to transpile and use CSS on runtime | [![npm](https://img.shields.io/npm/v/@rocket.chat/css-in-js?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-in-js) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-in-js?style=flat-square) |
| 📦 [`@rocket.chat/css-supports`](/packages/css-supports) | Memoized and SSR-compatible facade of CSS.supports API | [![npm](https://img.shields.io/npm/v/@rocket.chat/css-supports?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-supports) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-supports?style=flat-square) |
| 📦 [`@rocket.chat/emitter`](/packages/emitter) | Event Emitter by Rocket.Chat | [![npm](https://img.shields.io/npm/v/@rocket.chat/emitter?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/emitter) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/emitter?style=flat-square) |
| 📦 [`@rocket.chat/eslint-config-alt`](/packages/eslint-config-alt) | ESLint configuration for Rocket.Chat repositories | [![npm](https://img.shields.io/npm/v/@rocket.chat/eslint-config-alt?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/eslint-config-alt) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/eslint-config-alt?style=flat-square) |
| 📦 [`@rocket.chat/fuselage`](/packages/fuselage) | Rocket.Chat's React Components Library | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage?style=flat-square) |
| 📦 [`@rocket.chat/fuselage-hooks`](/packages/fuselage-hooks) | React hooks for Fuselage, Rocket.Chat's design system and UI toolkit | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-hooks?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-hooks) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-hooks?style=flat-square) |
| 📦 [`@rocket.chat/fuselage-polyfills`](/packages/fuselage-polyfills) | A bundle of useful poly/ponyfills used by fuselage | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-polyfills?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-polyfills) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-polyfills?style=flat-square) |
| 📦 [`@rocket.chat/fuselage-toastbar`](/packages/fuselage-toastbar) | Fuselage ToastBar component | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-toastbar?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-toastbar) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-toastbar?style=flat-square) |
| 📦 [`@rocket.chat/fuselage-tokens`](/packages/fuselage-tokens) | Design tokens for Fuselage, Rocket.Chat's design system | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-tokens?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-tokens) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-tokens?style=flat-square) |
| 📦 [`@rocket.chat/icons`](/packages/icons) | Rocket.Chat's Icons | [![npm](https://img.shields.io/npm/v/@rocket.chat/icons?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/icons?style=flat-square) |
| 📦 [`@rocket.chat/layout`](/packages/layout) | Shared Application Layout Components | [![npm](https://img.shields.io/npm/v/@rocket.chat/layout?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/layout) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/layout?style=flat-square) |
| 📦 [`@rocket.chat/logo`](/packages/logo) | Rocket.Chat logo package | [![npm](https://img.shields.io/npm/v/@rocket.chat/logo?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/logo) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/logo?style=flat-square) |
| 📦 [`@rocket.chat/memo`](/packages/memo) | Memoization utilities | [![npm](https://img.shields.io/npm/v/@rocket.chat/memo?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/memo) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/memo?style=flat-square) |
| 📦 [`@rocket.chat/message-parser`](/packages/message-parser) | Rocket.Chat parser for messages | [![npm](https://img.shields.io/npm/v/@rocket.chat/message-parser?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/message-parser) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/message-parser?style=flat-square) |
| 📦 [`@rocket.chat/mp3-encoder`](/packages/mp3-encoder) | A LAME encoder to be used in web workers | [![npm](https://img.shields.io/npm/v/@rocket.chat/mp3-encoder?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/mp3-encoder) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/mp3-encoder?style=flat-square) |
| 📦 [`@rocket.chat/onboarding-ui`](/packages/onboarding-ui) | Set of components and functions for the onboarding experience on Rocket.Chat | [![npm](https://img.shields.io/npm/v/@rocket.chat/onboarding-ui?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/onboarding-ui) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/onboarding-ui?style=flat-square) |
| 📦 [`@rocket.chat/peggy-loader`](/packages/peggy-loader) | Peggy loader for webpack | [![npm](https://img.shields.io/npm/v/@rocket.chat/peggy-loader?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/peggy-loader) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/peggy-loader?style=flat-square) |
| 📦 [`@rocket.chat/prettier-config`](/packages/prettier-config) | Prettier configuration for Rocket.Chat repositories | [![npm](https://img.shields.io/npm/v/@rocket.chat/prettier-config?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/prettier-config) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/prettier-config?style=flat-square) |
| 📦 [`@rocket.chat/string-helpers`](/packages/string-helpers) | Helper functions for string manipulation | [![npm](https://img.shields.io/npm/v/@rocket.chat/string-helpers?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/string-helpers) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/string-helpers?style=flat-square) |
| 📦 [`@rocket.chat/styled`](/packages/styled) | A simple styled API for React components | [![npm](https://img.shields.io/npm/v/@rocket.chat/styled?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/styled) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/styled?style=flat-square) |
| 📦 [`@rocket.chat/stylis-logical-props-middleware`](/packages/stylis-logical-props-middleware) | Stylis middleware to handle CSS Logical Properties and their fallbacks | [![npm](https://img.shields.io/npm/v/@rocket.chat/stylis-logical-props-middleware?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/stylis-logical-props-middleware) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/stylis-logical-props-middleware?style=flat-square) |
| 📦 [`@rocket.chat/ui-kit`](/packages/ui-kit) | Interactive UI elements for Rocket.Chat Apps | [![npm](https://img.shields.io/npm/v/@rocket.chat/ui-kit?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/ui-kit) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/ui-kit?style=flat-square) |
| Package | Description | Version | Dependencies |
|---------|-------------|---------|--------------|
| 📦 [`@rocket.chat/css-in-js`](/packages/css-in-js) | Toolset to transpile and use CSS on runtime | [![npm](https://img.shields.io/npm/v/@rocket.chat/css-in-js?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-in-js) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-in-js?style=flat-square) |
| 📦 [`@rocket.chat/css-supports`](/packages/css-supports) | Memoized and SSR-compatible facade of CSS.supports API | [![npm](https://img.shields.io/npm/v/@rocket.chat/css-supports?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-supports) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-supports?style=flat-square) |
| 📦 [`@rocket.chat/emitter`](/packages/emitter) | Event Emitter by Rocket.Chat | [![npm](https://img.shields.io/npm/v/@rocket.chat/emitter?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/emitter) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/emitter?style=flat-square) |
| 📦 [`@rocket.chat/eslint-config-alt`](/packages/eslint-config-alt) | ESLint configuration for Rocket.Chat repositories | [![npm](https://img.shields.io/npm/v/@rocket.chat/eslint-config-alt?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/eslint-config-alt) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/eslint-config-alt?style=flat-square) |
| 📦 [`@rocket.chat/fuselage`](/packages/fuselage) | Rocket.Chat's React Components Library | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage?style=flat-square) |
| 📦 [`@rocket.chat/fuselage-hooks`](/packages/fuselage-hooks) | React hooks for Fuselage, Rocket.Chat's design system and UI toolkit | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-hooks?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-hooks) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-hooks?style=flat-square) |
| 📦 [`@rocket.chat/fuselage-polyfills`](/packages/fuselage-polyfills) | A bundle of useful poly/ponyfills used by fuselage | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-polyfills?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-polyfills) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-polyfills?style=flat-square) |
| 📦 [`@rocket.chat/fuselage-toastbar`](/packages/fuselage-toastbar) | Fuselage ToastBar component | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-toastbar?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-toastbar) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-toastbar?style=flat-square) |
| 📦 [`@rocket.chat/fuselage-tokens`](/packages/fuselage-tokens) | Design tokens for Fuselage, Rocket.Chat's design system | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-tokens?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-tokens) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-tokens?style=flat-square) |
| 📦 [`@rocket.chat/icons`](/packages/icons) | Rocket.Chat's Icons | [![npm](https://img.shields.io/npm/v/@rocket.chat/icons?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/icons?style=flat-square) |
| 📦 [`@rocket.chat/layout`](/packages/layout) | Shared Application Layout Components | [![npm](https://img.shields.io/npm/v/@rocket.chat/layout?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/layout) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/layout?style=flat-square) |
| 📦 [`@rocket.chat/logo`](/packages/logo) | Rocket.Chat logo package | [![npm](https://img.shields.io/npm/v/@rocket.chat/logo?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/logo) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/logo?style=flat-square) |
| 📦 [`@rocket.chat/memo`](/packages/memo) | Memoization utilities | [![npm](https://img.shields.io/npm/v/@rocket.chat/memo?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/memo) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/memo?style=flat-square) |
| 📦 [`@rocket.chat/message-parser`](/packages/message-parser) | Rocket.Chat parser for messages | [![npm](https://img.shields.io/npm/v/@rocket.chat/message-parser?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/message-parser) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/message-parser?style=flat-square) |
| 📦 [`@rocket.chat/mp3-encoder`](/packages/mp3-encoder) | A LAME encoder to be used in web workers | [![npm](https://img.shields.io/npm/v/@rocket.chat/mp3-encoder?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/mp3-encoder) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/mp3-encoder?style=flat-square) |
| 📦 [`@rocket.chat/onboarding-ui`](/packages/onboarding-ui) | Set of components and functions for the onboarding experience on Rocket.Chat | [![npm](https://img.shields.io/npm/v/@rocket.chat/onboarding-ui?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/onboarding-ui) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/onboarding-ui?style=flat-square) |
| 📦 [`@rocket.chat/peggy-loader`](/packages/peggy-loader) | Peggy loader for webpack | [![npm](https://img.shields.io/npm/v/@rocket.chat/peggy-loader?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/peggy-loader) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/peggy-loader?style=flat-square) |
| 📦 [`@rocket.chat/prettier-config`](/packages/prettier-config) | Prettier configuration for Rocket.Chat repositories | [![npm](https://img.shields.io/npm/v/@rocket.chat/prettier-config?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/prettier-config) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/prettier-config?style=flat-square) |
| 📦 [`@rocket.chat/string-helpers`](/packages/string-helpers) | Helper functions for string manipulation | [![npm](https://img.shields.io/npm/v/@rocket.chat/string-helpers?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/string-helpers) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/string-helpers?style=flat-square) |
| 📦 [`@rocket.chat/styled`](/packages/styled) | A simple styled API for React components | [![npm](https://img.shields.io/npm/v/@rocket.chat/styled?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/styled) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/styled?style=flat-square) |
| 📦 [`@rocket.chat/stylis-logical-props-middleware`](/packages/stylis-logical-props-middleware) | Stylis middleware to handle CSS Logical Properties and their fallbacks | [![npm](https://img.shields.io/npm/v/@rocket.chat/stylis-logical-props-middleware?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/stylis-logical-props-middleware) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/stylis-logical-props-middleware?style=flat-square) |
| 📦 [`@rocket.chat/ui-kit`](/packages/ui-kit) | Interactive UI elements for Rocket.Chat Apps | [![npm](https://img.shields.io/npm/v/@rocket.chat/ui-kit?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/ui-kit) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/ui-kit?style=flat-square) |
4 changes: 3 additions & 1 deletion packages/fuselage-hooks/src/useElementIsVisible.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { useDebouncedState, useSafely } from '@rocket.chat/fuselage-hooks';
import type { RefObject } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';

import { useDebouncedState } from './useDebouncedState';
import { useSafely } from './useSafely';

declare global {
interface Window {
DISABLE_ANIMATION: boolean;
Expand Down
Loading
Loading