diff --git a/docs/pages/api/swipeable-drawer.md b/docs/pages/api/swipeable-drawer.md index 881038ed5cfe79..6e02412d824ab1 100644 --- a/docs/pages/api/swipeable-drawer.md +++ b/docs/pages/api/swipeable-drawer.md @@ -33,7 +33,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | onClose * | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | | onOpen * | func | | Callback fired when the component requests to be opened.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | | open * | bool | | If `true`, the drawer is open. | -| SwipeAreaProps | object | | Props applied to the swipe area element. | +| SwipeAreaProps | object | | The element is used to intercept the touch events on the edge. | | swipeAreaWidth | number | 20 | The width of the left most (or right most) area in pixels where the drawer can be swiped open from. | | transitionDuration | number
| { enter?: number, exit?: number }
| { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js index 0d59b867193cc9..4dad5c18eb9bac 100644 --- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js +++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ReactDOM from 'react-dom'; import { elementTypeAcceptingRef } from '@material-ui/utils'; +import { getThemeProps } from '@material-ui/styles'; import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer'; import ownerDocument from '../utils/ownerDocument'; import useEventCallback from '../utils/useEventCallback'; @@ -121,7 +122,9 @@ const transitionDurationDefault = { enter: duration.enteringScreen, exit: durati const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; -const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) { +const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) { + const theme = useTheme(); + const props = getThemeProps({ name: 'MuiSwipeableDrawer', props: { ...inProps }, theme }); const { anchor = 'left', disableBackdropTransition = false, @@ -142,7 +145,6 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) { ...other } = props; - const theme = useTheme(); const [maybeSwiping, setMaybeSwiping] = React.useState(false); const swipeInstance = React.useRef({ isSwiping: null, @@ -615,7 +617,7 @@ SwipeableDrawer.propTypes = { style: PropTypes.object, }), /** - * Props applied to the swipe area element. + * The element is used to intercept the touch events on the edge. */ SwipeAreaProps: PropTypes.object, /** diff --git a/packages/material-ui/src/styles/props.d.ts b/packages/material-ui/src/styles/props.d.ts index 1ea5598e0222af..b6a9b0fd96efe7 100644 --- a/packages/material-ui/src/styles/props.d.ts +++ b/packages/material-ui/src/styles/props.d.ts @@ -81,6 +81,7 @@ import { StepLabelProps } from '../StepLabel'; import { StepperProps } from '../Stepper'; import { StepProps } from '../Step'; import { SvgIconProps } from '../SvgIcon'; +import { SwipeableDrawerProps } from '../SwipeableDrawer'; import { SwitchProps } from '../Switch'; import { TableBodyProps } from '../TableBody'; import { TableCellProps } from '../TableCell'; @@ -186,6 +187,7 @@ export interface ComponentsPropsList { MuiStepLabel: StepLabelProps; MuiStepper: StepperProps; MuiSvgIcon: SvgIconProps; + MuiSwipeableDrawer: SwipeableDrawerProps; MuiSwitch: SwitchProps; MuiTab: TabProps; MuiTable: TableProps;