Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[react-events] Rename hook exports #16533

Merged
merged 1 commit into from Aug 22, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
54 changes: 54 additions & 0 deletions 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).
32 changes: 17 additions & 15 deletions 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>
);
};
```
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
@@ -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
@@ -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
@@ -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
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
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
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
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
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
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
Expand Up @@ -854,7 +854,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