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:
Eli White 2020-01-28 15:11:53 -08:00 коммит произвёл Facebook Github Bot
Родитель 4e31fbd39c
Коммит 4bbbe6a5ba
2 изменённых файлов: 44 добавлений и 1 удалений

Просмотреть файл

@ -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();
}