Pressability: Create `usePressability` Hook
Summary: Creates `usePressability`, a hook to simplify using `Pressability` from functional components. Changelog: [Internal] Reviewed By: yungsters Differential Revision: D18742613 fbshipit-source-id: 55cf48ad60a16a6a5c2c3fa2785f61f784a46b45
This commit is contained in:
Родитель
4e31fbd39c
Коммит
4bbbe6a5ba
|
@ -147,7 +147,7 @@ export type PressabilityConfig = $ReadOnly<{|
|
|||
onStartShouldSetResponder_DEPRECATED?: ?() => boolean,
|
||||
|}>;
|
||||
|
||||
type EventHandlers = $ReadOnly<{|
|
||||
export type EventHandlers = $ReadOnly<{|
|
||||
onBlur: (event: BlurEvent) => void,
|
||||
onClick: (event: PressEvent) => void,
|
||||
onFocus: (event: FocusEvent) => void,
|
||||
|
|
|
@ -0,0 +1,43 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @flow strict-local
|
||||
* @format
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
import Pressability, {
|
||||
type EventHandlers,
|
||||
type PressabilityConfig,
|
||||
} from './Pressability.js';
|
||||
import {useEffect, useRef} from 'react';
|
||||
|
||||
export default function usePressability(
|
||||
config: PressabilityConfig,
|
||||
): EventHandlers {
|
||||
const pressabilityRef = useRef<?Pressability>(null);
|
||||
if (pressabilityRef.current == null) {
|
||||
pressabilityRef.current = new Pressability(config);
|
||||
}
|
||||
const pressability = pressabilityRef.current;
|
||||
|
||||
// On the initial mount, this is a no-op. On updates, `pressability` will be
|
||||
// re-configured to use the new configuration.
|
||||
useEffect(() => {
|
||||
pressability.configure(config);
|
||||
}, [config, pressability]);
|
||||
|
||||
// On unmount, reset pending state and timers inside `pressability`. This is
|
||||
// a separate effect because we do not want to reset when `config` changes.
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
pressability.reset();
|
||||
};
|
||||
}, [pressability]);
|
||||
|
||||
return pressability.getEventHandlers();
|
||||
}
|
Загрузка…
Ссылка в новой задаче