Skip to content

Commit 350ca3d

Browse files
committed
add local hook, useRef for handler and keyCode
1 parent 563a111 commit 350ca3d

File tree

6 files changed

+18
-24
lines changed

6 files changed

+18
-24
lines changed

.storybook/main.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,12 +79,6 @@ module.exports = {
7979
...extraRules,
8080
];
8181

82-
config.module.rules.push({
83-
test: /\.mjs$/,
84-
include: /node_modules/,
85-
type: 'javascript/auto',
86-
});
87-
8882
config.resolve.alias = {
8983
...config.resolve.alias,
9084
'@shopify/polaris': path.resolve(__dirname, '..', 'src'),

package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,6 @@
8181
"@shopify/polaris-tokens": "^3.0.0",
8282
"@types/react": "^16.9.12",
8383
"@types/react-dom": "^16.9.4",
84-
"@shopify/react-hooks": "^1.13.0",
8584
"@types/react-transition-group": "^4.4.0",
8685
"focus-visible": "^5.2.0",
8786
"lodash": "^4.17.4",

src/components/Autocomplete/components/ComboBox/ComboBox.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useState, useEffect, useLayoutEffect, useCallback} from 'react';
1+
import React, {useState, useEffect, useCallback} from 'react';
22

33
import {useUniqueId} from '../../../../utilities/unique-id';
44
import {useToggle} from '../../../../utilities/use-toggle';
@@ -8,7 +8,7 @@ import {Popover, PopoverProps} from '../../../Popover';
88
import {ActionListItemDescriptor, Key} from '../../../../types';
99
import {KeypressListener} from '../../../KeypressListener';
1010
import {EventListener} from '../../../EventListener';
11-
import {isServer} from '../../../../utilities/target';
11+
import {useIsomorphicLayoutEffect} from '../../../../utilities/use-isomorphic-layout-effect';
1212

1313
import {ComboBoxContext} from './context';
1414
import styles from './ComboBox.scss';
@@ -71,8 +71,6 @@ export function ComboBox({
7171
setFalse: forcePopoverActiveFalse,
7272
} = useToggle(false);
7373

74-
const useIsomorphicLayoutEffect = isServer ? useEffect : useLayoutEffect;
75-
7674
const id = useUniqueId('ComboBox', idProp);
7775

7876
const getActionsWithIds = useCallback(

src/components/KeypressListener/KeypressListener.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {useCallback, useEffect, useRef} from 'react';
2-
import {useIsomorphicLayoutEffect} from '@shopify/react-hooks';
32

3+
import {useIsomorphicLayoutEffect} from '../../utilities/use-isomorphic-layout-effect';
44
import type {Key} from '../../types';
55

66
export interface KeypressListenerProps {
@@ -16,20 +16,18 @@ export function KeypressListener({
1616
handler,
1717
keyEvent = 'keyup',
1818
}: KeypressListenerProps) {
19-
const handlerRef = useRef(handler);
19+
const tracked = useRef({handler, keyCode});
2020

21-
const handleKeyEvent = useCallback(
22-
(event: KeyboardEvent) => {
23-
if (event.keyCode === keyCode) {
24-
handlerRef.current(event);
25-
}
26-
},
27-
[keyCode],
28-
);
21+
const handleKeyEvent = useCallback((event: KeyboardEvent) => {
22+
const {handler, keyCode} = tracked.current;
23+
if (event.keyCode === keyCode) {
24+
handler(event);
25+
}
26+
}, []);
2927

3028
useIsomorphicLayoutEffect(() => {
31-
handlerRef.current = handler;
32-
}, [handler]);
29+
tracked.current = {handler, keyCode};
30+
}, [handler, keyCode]);
3331

3432
useEffect(() => {
3533
document.addEventListener(keyEvent, handleKeyEvent);
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import {useEffect, useLayoutEffect} from 'react';
2+
3+
import {isServer} from './target';
4+
5+
export const useIsomorphicLayoutEffect = isServer ? useEffect : useLayoutEffect;

yarn.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2380,7 +2380,7 @@
23802380
dependencies:
23812381
tslib "^1.14.1"
23822382

2383-
"@shopify/react-hooks@^1.11.2", "@shopify/react-hooks@^1.13.0":
2383+
"@shopify/react-hooks@^1.11.2":
23842384
version "1.13.1"
23852385
resolved "https://registry.yarnpkg.com/@shopify/react-hooks/-/react-hooks-1.13.1.tgz#0756205f29e5320920f9dcaae8b057bb34f0e21f"
23862386
integrity sha512-i1/HKdpsuNXRi5MoZp2nciw0UtqAWEmV25Moq689X8GrfQLAGuxu97HV1V0TUx9PODlyfJsfuHyepEG+TRSjNA==

0 commit comments

Comments
 (0)