Skip to content

Commit

Permalink
[react-events] Rename hook exports (#16533)
Browse files Browse the repository at this point in the history
For example, 'useHoverResponder' becomes 'useHover'
  • Loading branch information
necolas authored Aug 22, 2019
1 parent 2f03aa6 commit 474b650
Show file tree
Hide file tree
Showing 24 changed files with 259 additions and 200 deletions.
54 changes: 54 additions & 0 deletions packages/react-events/docs/ContextMenu.md
Original file line number Diff line number Diff line change
@@ -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).
32 changes: 17 additions & 15 deletions packages/react-events/docs/Focus.md
Original file line number Diff line number Diff line change
@@ -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>
);
};
```
Expand All @@ -33,6 +33,8 @@ const Button = (props) => {
```js
type FocusEvent = {
target: Element,
pointerType: 'mouse' | 'touch' | 'pen' | 'keyboard',
timeStamp: number,
type: 'blur' | 'focus' | 'focuschange' | 'focusvisiblechange'
}
```
Expand All @@ -41,7 +43,7 @@ type FocusEvent = {

### disabled: boolean = false

Disables all `Focus` events.
Disables the responder.

### onBlur: (e: FocusEvent) => void

Expand Down
41 changes: 16 additions & 25 deletions packages/react-events/docs/FocusWithin.md
Original file line number Diff line number Diff line change
@@ -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

Expand Down
48 changes: 30 additions & 18 deletions packages/react-events/docs/Hover.md
Original file line number Diff line number Diff line change
@@ -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

Expand Down
38 changes: 20 additions & 18 deletions packages/react-events/docs/Press.md
Original file line number Diff line number Diff line change
@@ -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)
}}
/>
);
);
```
Expand All @@ -37,6 +38,7 @@ const Button = (props) => (
```js
type PressEvent = {
altKey: boolean,
buttons: 0 | 1 | 4,
ctrlKey: boolean,
defaultPrevented: boolean,
metaKey: boolean,
Expand Down Expand Up @@ -76,7 +78,7 @@ type PressOffset = {

### disabled: boolean = false

Disables all `Press` events.
Disables the responder.

### onPress: (e: PressEvent) => void

Expand Down
2 changes: 1 addition & 1 deletion packages/react-events/src/dom/ContextMenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-events/src/dom/Drag.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions packages/react-events/src/dom/Focus.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-events/src/dom/Hover.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-events/src/dom/Input.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-events/src/dom/Keyboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ export const KeyboardResponder = React.unstable_createResponder(
keyboardResponderImpl,
);

export function useKeyboardResponder(
export function useKeyboard(
props: KeyboardProps,
): ReactEventResponderListener<any, any> {
return React.unstable_useResponder(KeyboardResponder, props);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-events/src/dom/Press.js
Original file line number Diff line number Diff line change
Expand Up @@ -850,7 +850,7 @@ export const PressResponder = React.unstable_createResponder(
pressResponderImpl,
);

export function usePressResponder(
export function usePress(
props: PressProps,
): ReactEventResponderListener<any, any> {
return React.unstable_useResponder(PressResponder, props);
Expand Down
Loading

0 comments on commit 474b650

Please sign in to comment.