Skip to content

Commit 2e34b85

Browse files
m-bertm-bert
authored
[docs] Components' props (#3990)
## Description This PR updated props listed in components: - `ReanimatedDrawerLayout` - `ReanimatedSwipeable` It also adds shared `MouseButton` component. ## Test plan Read docs 🤓
1 parent 1fafb43 commit 2e34b85

12 files changed

Lines changed: 208 additions & 166 deletions

File tree

‎packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx‎

Lines changed: 113 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
88

99
import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
1010

11+
import MouseButtonProp from '../gestures/\_shared/mouse-button.mdx';
12+
1113
:::info
1214
This component acts as a cross-platform replacement for React Native's [`DrawerLayoutAndroid`](http://reactnative.dev/docs/drawerlayoutandroid.html) component, written using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started). For detailed information on standard parameters, please refer to the [React Native documentation](http://reactnative.dev/docs/drawerlayoutandroid.html).
1315
:::
@@ -29,16 +31,101 @@ drawerType?: DrawerType;
2931
Specifies the way the drawer will be displayed.
3032
Accepts values of the `DrawerType` enum. Defaults to `FRONT`.
3133

32-
| `drawerType` | Description |
33-
| -- | -- |
34-
|`FRONT` | The drawer will be displayed above the content view. |
35-
|`BACK` | The drawer will be displayed below the content view, revealed by sliding away the content view. |
36-
|`SLIDE` | The drawer will appear attached to the content view, opening it slides both the drawer and the content view. |
34+
- `FRONT` The drawer will be displayed above the content view.
35+
- `BACK` The drawer will be displayed below the content view, revealed by sliding away the content view.
36+
- `SLIDE` The drawer will appear attached to the content view, opening it slides both the drawer and the content view.
3737

3838
| `FRONT` | `BACK` | `SLIDE` |
3939
| ----------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------- |
4040
| <img src={useBaseUrl('gifs/new-drawer-front.gif')} /> | <img src={useBaseUrl('gifs/new-drawer-back.gif')} /> | <img src={useBaseUrl('gifs/new-drawer-slide.gif')} /> |
4141

42+
### drawerBackgroundColor
43+
44+
```ts
45+
drawerBackgroundColor?: string;
46+
```
47+
48+
Color of the drawer's background.
49+
50+
### drawerWidth
51+
52+
```ts
53+
drawerWidth?: number;
54+
```
55+
56+
Width of the drawer. Defaults to `200`.
57+
58+
### drawerLockMode
59+
60+
<CollapsibleCode
61+
label="Show composed types definitions"
62+
expandedLabel="Hide composed types definitions"
63+
lineBounds={[0, 1]}
64+
src={`
65+
drawerLockMode?: DrawerLockMode;
66+
67+
export enum DrawerLockMode {
68+
UNLOCKED,
69+
LOCKED_CLOSED,
70+
LOCKED_OPEN,
71+
}
72+
`}/>
73+
74+
Specifies the lock mode of the drawer.
75+
76+
- `UNLOCKED` The drawer is unlocked and can be opened or closed by gestures.
77+
- `LOCKED_CLOSED` The drawer will move freely until it settles in a closed position, then the gestures will be disabled.
78+
- `LOCKED_OPEN` The drawer will move freely until it settles in an opened position, then the gestures will be disabled.
79+
80+
### keyboardDismissMode
81+
82+
<CollapsibleCode
83+
label="Show composed types definitions"
84+
expandedLabel="Hide composed types definitions"
85+
lineBounds={[0, 1]}
86+
src={`
87+
keyboardDismissMode?: DrawerKeyboardDismissMode;
88+
89+
export enum DrawerKeyboardDismissMode {
90+
NONE,
91+
ON_DRAG,
92+
}
93+
`}/>
94+
95+
Determines if system keyboard should be closed upon dragging the drawer.
96+
97+
### animationSpeed
98+
99+
```ts
100+
animationSpeed?: number;
101+
```
102+
103+
Speed of animation that will play when letting go, or dismissing the drawer.
104+
105+
### minSwipeDistance
106+
107+
```ts
108+
minSwipeDistance?: number;
109+
```
110+
111+
Minimal distance to swipe before the drawer starts moving.
112+
113+
### contentContainerStyle
114+
115+
```ts
116+
contentContainerStyle?: StyleProp<ViewStyle>;
117+
```
118+
119+
Style of the content view container.
120+
121+
### drawerContainerStyle
122+
123+
```ts
124+
drawerContainerStyle?: StyleProp<ViewStyle>;
125+
```
126+
127+
Style wrapping the drawer.
128+
42129
### edgeWidth
43130

44131
```ts
@@ -153,28 +240,7 @@ children?: ReactNode | ((openValue?: SharedValue<number>) => ReactNode);
153240

154241
Either a component rendered in the content view or a function. If `children` is a function, it receives an `openValue` parameter - [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) that indicates the progress of the drawer's opening or closing animation. This value equals `0` when the drawer is closed and `1` when it is fully opened. The drawer component can use this value to animate its children during the opening or closing process. This function must return a [`ReactNode`](https://reactnative.dev/docs/react-node).
155242

156-
<HeaderWithBadges platforms={['android', 'web']}>
157-
### mouseButton
158-
</HeaderWithBadges>
159-
160-
<CollapsibleCode
161-
label="Show composed types definitions"
162-
expandedLabel="Hide composed types definitions"
163-
lineBounds={[0, 1]}
164-
src={`
165-
mouseButton: MouseButton | SharedValue<MouseButton>;
166-
167-
enum MouseButton {
168-
LEFT,
169-
RIGHT,
170-
MIDDLE,
171-
BUTTON_4,
172-
BUTTON_5,
173-
ALL,
174-
}
175-
`}/>
176-
177-
Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
243+
<MouseButtonProp />
178244

179245
<HeaderWithBadges platforms={['web']}>
180246
### enableContextMenu
@@ -186,8 +252,27 @@ enableContextMenu: boolean;
186252

187253
Specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Default value is set to `false` if [`MouseButton.RIGHT`](#mousebutton-web--android-only) is specified.
188254

255+
<HeaderWithBadges platforms={['web']}>
256+
### userSelect
257+
</HeaderWithBadges>
258+
259+
```ts
260+
userSelect: 'none' | 'auto' | 'text';
261+
```
262+
263+
This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`.
264+
265+
<HeaderWithBadges platforms={['web']}>
266+
### activeCursor
267+
</HeaderWithBadges>
268+
269+
```ts
270+
activeCursor: ActiveCursor;
271+
```
272+
273+
This parameter allows to specify which cursor should be used when gesture activates. Supports all [CSS cursor values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/cursor#keyword) (e.g. `"grab"`, `"zoom-in"`). Default value is set to `"auto"`.
189274

190-
## Methods
275+
## Drawer ref methods
191276

192277
Using a reference to `ReanimatedDrawerLayout` allows you to manually trigger the opening and closing of the component.
193278

‎packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx‎

Lines changed: 38 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -252,41 +252,53 @@ enableTrackpadTwoFingerGesture?: boolean;
252252

253253
Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger the gesture.
254254

255-
<HeaderWithBadges platforms={['android', 'web']}>
256-
### mouseButton
257-
</HeaderWithBadges>
255+
### enabled
258256

259-
<CollapsibleCode
260-
label="Show composed types definitions"
261-
expandedLabel="Hide composed types definitions"
262-
lineBounds={[0, 1]}
263-
src={`
264-
mouseButton: MouseButton | SharedValue<MouseButton>;
265-
266-
enum MouseButton {
267-
LEFT,
268-
RIGHT,
269-
MIDDLE,
270-
BUTTON_4,
271-
BUTTON_5,
272-
ALL,
273-
}
274-
`}/>
257+
```ts
258+
enabled: boolean;
259+
```
275260

276-
Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
261+
Indicates whether `ReanimatedSwipeable` should be analyzing stream of touch events or not. Defaults to `true`.
277262

278-
<HeaderWithBadges platforms={['web']}>
279-
### enableContextMenu
280-
</HeaderWithBadges>
263+
### testID
281264

282265
```ts
283-
enableContextMenu: boolean;
266+
testID: string;
284267
```
285268

286-
Specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Default value is set to `false`.
269+
Sets a `testID` property, allowing for querying `ReanimatedSwipeable` for it in tests.
270+
271+
### hitSlop
272+
273+
<CollapsibleCode
274+
label="Show composed types definitions"
275+
expandedLabel="Hide composed types definitions"
276+
lineBounds={[0, 1]}
277+
collapsed={false}
278+
src={`
279+
hitSlop: HitSlop | SharedValue<HitSlop>;
280+
281+
type HitSlop =
282+
| number
283+
| null
284+
| undefined
285+
| Partial<
286+
Record<
287+
'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal',
288+
number
289+
>
290+
>
291+
| Record<'width' | 'left', number>
292+
| Record<'width' | 'right', number>
293+
| Record<'height' | 'top', number>
294+
| Record<'height' | 'bottom', number>;
295+
`}/>
287296

297+
This parameter enables control over what part of the connected view area can be used to begin recognizing the gesture.
298+
When a negative number is provided the bounds of the view will reduce the area by the given number of points in each of the sides evenly.
299+
See [hitSlop section](/docs/gestures/use-pan-gesture#hitslop) in `Pan` gesture for more details.
288300

289-
## Methods
301+
## Swipeable ref methods
290302

291303
Using a reference to `Swipeable` allows you to manually trigger the opening and closing of the component, as well as reset its swiping state.
292304

‎packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,9 @@ useAnimated: boolean;
139139

140140
Setting this property is set to `true` ensures that the [Animated API](/docs/fundamentals/animated-interactions) functions correctly when `useNativeDriver` is set to `false`. The default value is set to `false`.
141141

142+
<HeaderWithBadges platforms={['web']}>
142143
### activeCursor
144+
</HeaderWithBadges>
143145

144146
```ts
145147
activeCursor: ActiveCursor | SharedValue<ActiveCursor>;

‎packages/docs-gesture-handler/docs/gestures/_shared/mouse-button.mdx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import CollapsibleCode from '@site/src/components/CollapsibleCode';
2+
import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
3+
4+
<HeaderWithBadges platforms={['android', 'web']}>
5+
### mouseButton
6+
</HeaderWithBadges>
7+
8+
<CollapsibleCode
9+
label="Show composed types definitions"
10+
expandedLabel="Hide composed types definitions"
11+
lineBounds={[0, 1]}
12+
collapsed={false}
13+
src={`
14+
mouseButton: MouseButton | SharedValue<MouseButton>;
15+
16+
enum MouseButton {
17+
LEFT,
18+
RIGHT,
19+
MIDDLE,
20+
BUTTON_4,
21+
BUTTON_5,
22+
ALL,
23+
}
24+
`}/>
25+
26+
Allows users to choose which mouse buttons to respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.

‎packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx‎

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestur
1414

1515
import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
1616

17+
import MouseButtonProp from './\_shared/mouse-button.mdx';
18+
1719
<div className={webContainer}>
1820
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
1921
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
@@ -142,29 +144,7 @@ numberOfPointers: number | SharedValue<number>;
142144

143145
Determine exact number of points required to handle the fling gesture.
144146

145-
<HeaderWithBadges platforms={['android', 'web']}>
146-
### mouseButton
147-
</HeaderWithBadges>
148-
149-
<CollapsibleCode
150-
label="Show composed types definitions"
151-
expandedLabel="Hide composed types definitions"
152-
lineBounds={[0, 1]}
153-
collapsed={false}
154-
src={`
155-
mouseButton: MouseButton | SharedValue<MouseButton>;
156-
157-
enum MouseButton {
158-
LEFT,
159-
RIGHT,
160-
MIDDLE,
161-
BUTTON_4,
162-
BUTTON_5,
163-
ALL,
164-
}
165-
`}/>
166-
167-
Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
147+
<MouseButtonProp />
168148

169149
<BaseGestureConfig />
170150

‎packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx‎

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPre
1414

1515
import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
1616

17+
import MouseButtonProp from './\_shared/mouse-button.mdx';
18+
1719
<div className={webContainer}>
1820
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
1921
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
@@ -75,29 +77,7 @@ maxDistance: number | SharedValue<number>;
7577

7678
Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a long press gesture. If the finger travels further than the defined distance and the gesture hasn't yet activated, it will fail to recognize the gesture. The default value is 10.
7779

78-
<HeaderWithBadges platforms={['android', 'web']}>
79-
### mouseButton
80-
</HeaderWithBadges>
81-
82-
<CollapsibleCode
83-
label="Show composed types definitions"
84-
expandedLabel="Hide composed types definitions"
85-
lineBounds={[0, 1]}
86-
collapsed={false}
87-
src={`
88-
mouseButton: MouseButton | SharedValue<MouseButton>;
89-
90-
enum MouseButton {
91-
LEFT,
92-
RIGHT,
93-
MIDDLE,
94-
BUTTON_4,
95-
BUTTON_5,
96-
ALL,
97-
}
98-
`}/>
99-
100-
Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
80+
<MouseButtonProp />
10181

10282
<BaseGestureConfig />
10383

0 commit comments

Comments
 (0)