UNPKG

3.14 kBTypeScriptView Raw
1import * as React from 'react';
2import { DrawerProps } from '../Drawer';
3
4export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'open'> {
5 /**
6 * If set to true, the swipe event will open the drawer even if the user begins the swipe on one of the drawer's children.
7 * This can be useful in scenarios where the drawer is partially visible.
8 * You can customize it further with a callback that determines which children the user can drag over to open the drawer
9 * (for example, to ignore other elements that handle touch move events, like sliders).
10 *
11 * @param {TouchEvent} event The 'touchstart' event
12 * @param {HTMLDivElement} swipeArea The swipe area element
13 * @param {HTMLDivElement} paper The drawer's paper element
14 *
15 * @default false
16 */
17 allowSwipeInChildren?:
18 | boolean
19 | ((event: TouchEvent, swipeArea: HTMLDivElement, paper: HTMLDivElement) => boolean);
20 /**
21 * Disable the backdrop transition.
22 * This can improve the FPS on low-end devices.
23 * @default false
24 */
25 disableBackdropTransition?: boolean;
26 /**
27 * If `true`, touching the screen near the edge of the drawer will not slide in the drawer a bit
28 * to promote accidental discovery of the swipe gesture.
29 * @default false
30 */
31 disableDiscovery?: boolean;
32 /**
33 * If `true`, swipe to open is disabled. This is useful in browsers where swiping triggers
34 * navigation actions. Swipe to open is disabled on iOS browsers by default.
35 * @default typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent)
36 */
37 disableSwipeToOpen?: boolean;
38 /**
39 * Affects how far the drawer must be opened/closed to change its state.
40 * Specified as percent (0-1) of the width of the drawer
41 * @default 0.52
42 */
43 hysteresis?: number;
44 /**
45 * Defines, from which (average) velocity on, the swipe is
46 * defined as complete although hysteresis isn't reached.
47 * Good threshold is between 250 - 1000 px/s
48 * @default 450
49 */
50 minFlingVelocity?: number;
51 /**
52 * Callback fired when the component requests to be closed.
53 *
54 * @param {React.SyntheticEvent<{}>} event The event source of the callback.
55 */
56 onClose: React.ReactEventHandler<{}>;
57 /**
58 * Callback fired when the component requests to be opened.
59 *
60 * @param {React.SyntheticEvent<{}>} event The event source of the callback.
61 */
62 onOpen: React.ReactEventHandler<{}>;
63 /**
64 * If `true`, the component is shown.
65 * @default false
66 */
67 open?: boolean;
68 /**
69 * The element is used to intercept the touch events on the edge.
70 */
71 SwipeAreaProps?: object;
72 /**
73 * The width of the left most (or right most) area in `px` that
74 * the drawer can be swiped open from.
75 * @default 20
76 */
77 swipeAreaWidth?: number;
78}
79
80/**
81 *
82 * Demos:
83 *
84 * - [Drawer](https://mui.com/material-ui/react-drawer/)
85 *
86 * API:
87 *
88 * - [SwipeableDrawer API](https://mui.com/material-ui/api/swipeable-drawer/)
89 * - inherits [Drawer API](https://mui.com/material-ui/api/drawer/)
90 */
91declare const SwipeableDrawer: React.JSXElementConstructor<SwipeableDrawerProps>;
92
93export default SwipeableDrawer;
94
\No newline at end of file