[react-events] Rename hook exports (#16533)

For example, 'useHoverResponder' becomes 'useHover'

Author: necolas

packages/react-events/docs/ContextMenu.md

@@ -0,0 +1,54 @@
+# ContextMenu
+
+The `useContextMenu` hooks responds to context-menu events.
+
+```js
+// Example
+const Button = (props) => {
+  const contextmenu = useContextMenu({
+    disabled,
+    onContextMenu,
+    preventDefault
+  });
+
+  return (
+    <div listeners={contextmenu}>
+      {props.children}
+    </div>
+  );
+};
+```
+
+## Types
+
+```js
+type ContextMenuEvent = {
+  altKey: boolean,
+  buttons: 0 | 1 | 2,
+  ctrlKey: boolean,
+  metaKey: boolean,
+  pageX: number,
+  pageY: number,
+  pointerType: PointerType,
+  shiftKey: boolean,
+  target: Element,
+  timeStamp: number,
+  type: 'contextmenu',
+  x: number,
+  y: number,
+}
+```
+
+## Props
+
+### disabled: boolean = false
+
+Disables the responder.
+
+### onContextMenu: (e: ContextMenuEvent) => void
+
+Called when the user performs a gesture to display a context menu.
+
+### preventDefault: boolean = true
+
+Prevents the native behavior (i.e., context menu).

packages/react-events/docs/Focus.md

@@ -1,29 +1,29 @@
 # Focus
 
-The `Focus` module responds to focus and blur events on its child. Focus events
+The `useFocus` hook responds to focus and blur events on its child. Focus events
 are dispatched for all input types, with the exception of `onFocusVisibleChange`
 which is only dispatched when focusing with a keyboard.
 
-Focus events do not propagate between `Focus` event responders.
+Focus events do not propagate between `useFocus` event responders.
 
 ```js
 // Example
 const Button = (props) => {
-  const [ focusVisible, setFocusVisible ] = useState(false);
+  const [ isFocusVisible, setFocusVisible ] = useState(false);
+  const focus = useFocus({
+    onBlur={props.onBlur}
+    onFocus={props.onFocus}
+    onFocusVisibleChange={setFocusVisible}
+  });
 
   return (
-    <Focus
-      onBlur={props.onBlur}
-      onFocus={props.onFocus}
-      onFocusVisibleChange={setFocusVisible}
+    <button
+      children={props.children}
+      listeners={focus}
+      style={{
+        ...(isFocusVisible && focusVisibleStyles)
+      }}
     >
-      <button
-        children={props.children}
-        style={{
-          ...(focusVisible && focusVisibleStyles)
-        }}
-      >
-    </Focus>
   );
 };
 ```
@@ -33,6 +33,8 @@ const Button = (props) => {
 ```js
 type FocusEvent = {
   target: Element,
+  pointerType: 'mouse' | 'touch' | 'pen' | 'keyboard',
+  timeStamp: number,
   type: 'blur' | 'focus' | 'focuschange' | 'focusvisiblechange'
 }
 ```
@@ -41,7 +43,7 @@ type FocusEvent = {
 
 ### disabled: boolean = false
 
-Disables all `Focus` events.
+Disables the responder.
 
 ### onBlur: (e: FocusEvent) => void
 

packages/react-events/docs/FocusWithin.md

@@ -1,48 +1,39 @@
 # FocusWithin
 
-The `FocusWithin` module responds to focus and blur events on its child. Focus events
+The `useFocusWithin` hooks responds to focus and blur events on its child. Focus events
 are dispatched for all input types, with the exception of `onFocusVisibleChange`
 which is only dispatched when focusing with a keyboard.
 
-Focus events do not propagate between `FocusWithin` event responders.
+Focus events do not propagate between `useFocusWithin` event responders.
 
 ```js
 // Example
 const Button = (props) => {
-  const [ focusWithin, updateFocusWithin ] = useState(false);
-  const [ focusWithinVisible, updateFocusWithinVisible ] = useState(false);
+  const [ isFocusWithin, updateFocusWithin ] = useState(false);
+  const [ isFocusWithinVisible, updateFocusWithinVisible ] = useState(false);
+  const focusWithin = useFocusWithin({
+    onFocusWithinChange={updateFocusWithin}
+    onFocusWithinVisibleChange={updateFocusWithinVisible}
+  });
 
   return (
-    <FocusWithin
-      onFocusWithinChange={updateFocusWithin}
-      onFocusWithinVisibleChange={updateFocusWithinVisible}
+    <button
+      children={props.children}
+      listeners={focusWithin}
+      style={{
+        ...(isFocusWithin && focusWithinStyles),
+        ...(isFocusWithinVisible && focusWithinVisibleStyles)
+      }}
     >
-      <button
-        children={props.children}
-        style={{
-          ...(focusWithin && focusWithinStyles),
-          ...(focusWithinVisible && focusWithinVisibleStyles)
-        }}
-      >
-    </FocusWithin>
   );
 };
 ```
 
-## Types
-
-```js
-type FocusEvent = {
-  target: Element,
-  type: 'focuswithinchange' | 'focuswithinvisiblechange'
-}
-```
-
 ## Props
 
 ### disabled: boolean = false
 
-Disables all `FocusWithin` events.
+Disables the responder.
 
 ### onFocusWithinChange: boolean => void
 

packages/react-events/docs/Hover.md

@@ -1,45 +1,57 @@
 # Hover
 
-The `Hover` module responds to hover events on the element it wraps. Hover
+The `useHover` hook responds to hover events on the element it wraps. Hover
 events are only dispatched for `mouse` and `pen` pointer types. Hover begins
 when the pointer enters the element's bounds and ends when the pointer leaves.
 
-Hover events do not propagate between `Hover` event responders.
+Hover events do not propagate between `useHover` event responders.
 
 ```js
 // Example
 const Link = (props) => (
-  const [ hovered, setHovered ] = useState(false);
+  const [ isHovered, setHovered ] = useState(false);
+  const hover = useHover({
+    onHoverChange: setHovered
+  });
+
   return (
-    <Hover onHoverChange={setHovered}>
-      <a
-        {...props}
-        href={props.href}
-        style={{
-          ...props.style,
-          textDecoration: hovered ? 'underline': 'none'
-        }}
-      />
-    </Hover>
+    <a
+      {...props}
+      href={props.href}
+      listeners={hover}
+      style={{
+        ...props.style,
+        textDecoration: isHovered ? 'underline': 'none'
+      }}
+    />
   );
 );
 ```
 
 ## Types
 
 ```js
-type HoverEvent = {
-  pointerType: 'mouse' | 'pen',
+type HoverEventType = 'hoverstart' | 'hoverend' | 'hoverchange' | 'hovermove';
+
+type HoverEvent = {|
+  clientX: number,
+  clientY: number,
+  pageX: number,
+  pageY: number,
+  pointerType: PointerType,
   target: Element,
-  type: 'hoverstart' | 'hoverend' | 'hovermove' | 'hoverchange'
-}
+  timeStamp: number,
+  type: HoverEventType,
+  x: number,
+  y: number,
+|};
 ```
 
 ## Props
 
 ### disabled: boolean
 
-Disables all `Hover` events.
+Disables the responder.
 
 ### onHoverChange: boolean => void
 

packages/react-events/docs/Press.md

@@ -1,33 +1,34 @@
 # Press
 
-The `Press` module responds to press events on the element it wraps. Press
+The `usePress` hook responds to press events on the element it wraps. Press
 events are dispatched for `mouse`, `pen`, `touch`, `trackpad`, and `keyboard`
 pointer types. Press events are only dispatched for keyboards when pressing the
 Enter or Spacebar keys. If `onPress` is not called, this signifies that the
 press ended outside of the element hit bounds (i.e., the user aborted the
 press).
 
-Press events do not propagate between `Press` event responders.
+Press events do not propagate between `usePress` event responders.
 
 ```js
 // Example
 const Button = (props) => (
-  const [ pressed, setPressed ] = useState(false);
+  const [ isPressed, setPressed ] = useState(false);
+  const press = usePress({
+    onPress={props.onPress}
+    onPressChange={setPressed}
+  });
+
   return (
-    <Press
-      onPress={props.onPress}
-      onPressChange={setPressed}
-    >
-      <div
-        {...props}
-        role="button"
-        tabIndex={0}
-        style={
-          ...buttonStyles,
-          ...(pressed && pressedStyles)
-        }}
-      />
-    </Press>
+    <div
+      {...props}
+      listeners={press}
+      role="button"
+      tabIndex={0}
+      style={
+        ...buttonStyles,
+        ...(isPressed && pressedStyles)
+      }}
+    />
   );
 );
 ```
@@ -37,6 +38,7 @@ const Button = (props) => (
 ```js
 type PressEvent = {
   altKey: boolean,
+  buttons: 0 | 1 | 4,
   ctrlKey: boolean,
   defaultPrevented: boolean,
   metaKey: boolean,
@@ -76,7 +78,7 @@ type PressOffset = {
 
 ### disabled: boolean = false
 
-Disables all `Press` events.
+Disables the responder.
 
 ### onPress: (e: PressEvent) => void
 

packages/react-events/src/dom/ContextMenu.js

@@ -120,7 +120,7 @@ export const ContextMenuResponder = React.unstable_createResponder(
   contextMenuImpl,
 );
 
-export function useContextMenuResponder(
+export function useContextMenu(
   props: ContextMenuProps,
 ): ReactEventResponderListener<any, any> {
   return React.unstable_useResponder(ContextMenuResponder, props);

packages/react-events/src/dom/Drag.js

@@ -244,7 +244,7 @@ export const DragResponder = React.unstable_createResponder(
   dragResponderImpl,
 );
 
-export function useDragResponder(
+export function useDrag(
   props: DragProps,
 ): ReactEventResponderListener<any, any> {
   return React.unstable_useResponder(DragResponder, props);

packages/react-events/src/dom/Focus.js

@@ -348,7 +348,7 @@ export const FocusResponder = React.unstable_createResponder(
   focusResponderImpl,
 );
 
-export function useFocusResponder(
+export function useFocus(
   props: FocusProps,
 ): ReactEventResponderListener<any, any> {
   return React.unstable_useResponder(FocusResponder, props);
@@ -485,7 +485,7 @@ export const FocusWithinResponder = React.unstable_createResponder(
   focusWithinResponderImpl,
 );
 
-export function useFocusWithinResponder(
+export function useFocusWithin(
   props: FocusWithinProps,
 ): ReactEventResponderListener<any, any> {
   return React.unstable_useResponder(FocusWithinResponder, props);

packages/react-events/src/dom/Hover.js

@@ -341,7 +341,7 @@ export const HoverResponder = React.unstable_createResponder(
   hasPointerEvents ? hoverResponderImpl : hoverResponderFallbackImpl,
 );
 
-export function useHoverResponder(
+export function useHover(
   props: HoverProps,
 ): ReactEventResponderListener<any, any> {
   return React.unstable_useResponder(HoverResponder, props);

packages/react-events/src/dom/Input.js

@@ -215,7 +215,7 @@ export const InputResponder = React.unstable_createResponder(
   inputResponderImpl,
 );
 
-export function useInputResponder(
+export function useInput(
   props: InputResponderProps,
 ): ReactEventResponderListener<any, any> {
   return React.unstable_useResponder(InputResponder, props);