Skip to content

Commit

Permalink
Use useEffect to set styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshwooding
joshwooding committed Apr 28, 2019
1 parent c800aa0 commit e06a006
Showing 1 changed file with 70 additions and 78 deletions.
148 changes: 70 additions & 78 deletions packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) {
} = props;

const [maybeSwiping, setMaybeSwiping] = React.useState(false);
const [position, setPosition] = React.useState();
const swipeInstance = React.useRef({
isSwiping: null,
});
Expand All @@ -85,55 +86,6 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) {
document.body.removeEventListener('touchcancel', handleBodyTouchEndRef.current);
}, []);

const setPosition = React.useCallback(
(translate, options = {}) => {
const { mode = null, changeTransition = true } = options;

const anchorRtl = getAnchor(theme, anchor);
const rtlTranslateMultiplier = ['right', 'bottom'].indexOf(anchorRtl) !== -1 ? 1 : -1;
const horizontalSwipe = isHorizontal(anchor);

const transform = horizontalSwipe
? `translate(${rtlTranslateMultiplier * translate}px, 0)`
: `translate(0, ${rtlTranslateMultiplier * translate}px)`;
const drawerStyle = paperRef.current.style;
drawerStyle.webkitTransform = transform;
drawerStyle.transform = transform;

let transition = '';

if (mode) {
transition = theme.transitions.create(
'all',
getTransitionProps(
{
timeout: transitionDuration,
},
{
mode,
},
),
);
}

if (changeTransition) {
drawerStyle.webkitTransition = transition;
drawerStyle.transition = transition;
}

if (!disableBackdropTransition && !hideBackdrop) {
const backdropStyle = backdropRef.current.style;
backdropStyle.opacity = 1 - translate / getMaxTranslate(horizontalSwipe, paperRef.current);

if (changeTransition) {
backdropStyle.webkitTransition = transition;
backdropStyle.transition = transition;
}
}
},
[anchor, disableBackdropTransition, hideBackdrop, theme, transitionDuration],
);

const handleBodyTouchEnd = React.useCallback(
event => {
nodeThatClaimedTheSwipe = null;
Expand Down Expand Up @@ -169,9 +121,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) {
onClose();
} else {
// Reset the position, the swipe was aborted.
setPosition(0, {
mode: 'exit',
});
setPosition({ translate: 0, mode: 'exit' });
}

return;
Expand All @@ -181,22 +131,10 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) {
onOpen();
} else {
// Reset the position, the swipe was aborted.
setPosition(getMaxTranslate(horizontal, paperRef.current), {
mode: 'enter',
});
setPosition({ translate: getMaxTranslate(horizontal, paperRef.current), mode: 'enter' });
}
},
[
anchor,
hysteresis,
minFlingVelocity,
onClose,
onOpen,
open,
removeBodyTouchListeners,
setPosition,
theme,
],
[anchor, hysteresis, minFlingVelocity, onClose, onOpen, open, removeBodyTouchListeners, theme],
);

const handleBodyTouchMove = React.useCallback(
Expand All @@ -205,7 +143,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) {
if (!paperRef.current) return;

const anchorRtl = getAnchor(theme, anchor);
const horizontalSwipe = isHorizontal(anchor);
const horizontalSwipe = isHorizontal(anchorRtl);

const currentX = calculateCurrentX(anchorRtl, event.touches);
const currentY = calculateCurrentY(anchorRtl, event.touches);
Expand Down Expand Up @@ -286,9 +224,9 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) {
if (event.cancelable) {
event.preventDefault();
}
setPosition(translate);
setPosition({ translate });
},
[setPosition, handleBodyTouchEnd, anchor, disableDiscovery, open, swipeAreaWidth, theme],
[handleBodyTouchEnd, anchor, disableDiscovery, open, swipeAreaWidth, theme],
);

const handleBodyTouchStart = React.useCallback(
Expand All @@ -299,7 +237,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) {
}

const anchorRtl = getAnchor(theme, anchor);
const horizontalSwipe = isHorizontal(anchor);
const horizontalSwipe = isHorizontal(anchorRtl);

const currentX = calculateCurrentX(anchorRtl, event.touches);
const currentY = calculateCurrentY(anchorRtl, event.touches);
Expand All @@ -324,13 +262,10 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) {
setMaybeSwiping(true);
if (!open && paperRef.current) {
// The ref may be null when a parent component updates while swiping.
setPosition(
const newTranslate =
getMaxTranslate(horizontalSwipe, paperRef.current) +
(disableDiscovery ? 20 : -swipeAreaWidth),
{
changeTransition: false,
},
);
(disableDiscovery ? 20 : -swipeAreaWidth);
setPosition({ translate: newTranslate, changeTransition: false });
}

swipeInstance.current.velocity = 0;
Expand All @@ -345,7 +280,6 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) {
handleBodyTouchEndRef.current = handleBodyTouchEnd;
},
[
setPosition,
handleBodyTouchEnd,
handleBodyTouchMove,
anchor,
Expand All @@ -364,7 +298,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) {
return () => {
document.body.removeEventListener('touchstart', handleBodyTouchStart);
};
}, [variant, handleBodyTouchStart]);
}, [handleBodyTouchStart, variant]);

React.useEffect(
() => () => {
Expand All @@ -384,6 +318,64 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(props, ref) {
}
}, [open]);

React.useEffect(() => {
if (!paperRef.current) return;

const { translate, mode = null, changeTransition = true } = position;

if (translate == null) return;

const anchorRtl = getAnchor(theme, anchor);
const rtlTranslateMultiplier = ['right', 'bottom'].indexOf(anchorRtl) !== -1 ? 1 : -1;
const horizontalSwipe = isHorizontal(anchorRtl);

const transform = horizontalSwipe
? `translate(${rtlTranslateMultiplier * translate}px, 0)`
: `translate(0, ${rtlTranslateMultiplier * translate}px)`;
const drawerStyle = paperRef.current.style;
drawerStyle.webkitTransform = transform;
drawerStyle.transform = transform;

let transition = '';

if (mode) {
transition = theme.transitions.create(
'all',
getTransitionProps(
{
timeout: transitionDuration,
},
{
mode,
},
),
);
}

if (changeTransition) {
drawerStyle.webkitTransition = transition;
drawerStyle.transition = transition;
}

if (!disableBackdropTransition && !hideBackdrop) {
const backdropStyle = backdropRef.current.style;
backdropStyle.opacity = 1 - translate / getMaxTranslate(horizontalSwipe, paperRef.current);

if (changeTransition) {
backdropStyle.webkitTransition = transition;
backdropStyle.transition = transition;
}
}
}, [
anchor,
disableBackdropTransition,
hideBackdrop,
position,
theme,
theme.transitions,
transitionDuration,
]);

const handleBackdropRef = React.useCallback(instance => {
// #StrictMode ready
backdropRef.current = ReactDOM.findDOMNode(instance);
Expand Down

0 comments on commit e06a006

Please sign in to comment.