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.

Sign up for GitHub

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

[SwipeableDrawer] Remove internal accesses in the tests #15469

Merged
merged 11 commits into from
May 8, 2019
Merged

[SwipeableDrawer] Remove internal accesses in the tests #15469

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fa9049d
[SwipeableDrawer] Convert to function component
joshwooding Apr 24, 2019
dbb63fd
alternative
oliviertassinari Apr 27, 2019
e14a553
A few changes
joshwooding Apr 28, 2019
81b121f
Fix some tests
joshwooding May 6, 2019
a4a4ee2
Fix more tests
joshwooding May 6, 2019
6a49299
Fix even more tests
joshwooding May 6, 2019
94315b2
Fix drawer tests
joshwooding May 6, 2019
de92e06
Use openRef inside useCallback
joshwooding May 6, 2019
f37d40a
Merge branch 'next' into swipeabledrawer-function-component
joshwooding May 7, 2019
be73565
[test] Green
oliviertassinari May 8, 2019
fa4d8c0
Merge branch 'next' into swipeabledrawer-function-component
oliviertassinari May 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions packages/material-ui/src/Drawer/Drawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,14 +88,12 @@ const oppositeDirection = {
bottom: 'up',
};

export function isHorizontal(props) {
return ['left', 'right'].indexOf(props.anchor) !== -1;
export function isHorizontal(anchor) {
return ['left', 'right'].indexOf(anchor) !== -1;
}

export function getAnchor(props) {
return props.theme.direction === 'rtl' && isHorizontal(props)
? oppositeDirection[props.anchor]
: props.anchor;
export function getAnchor(theme, anchor) {
return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
}

const defaultTransitionDuration = { enter: duration.enteringScreen, exit: duration.leavingScreen };
Expand Down Expand Up @@ -130,7 +128,7 @@ const Drawer = React.forwardRef(function Drawer(props, ref) {
mounted.current = true;
}, []);

const anchor = getAnchor({ anchor: anchorProp, theme });
const anchor = getAnchor(theme, anchorProp);
const drawer = (
<Paper
elevation={variant === 'temporary' ? elevation : 0}
Expand Down
28 changes: 12 additions & 16 deletions packages/material-ui/src/Drawer/Drawer.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,32 +262,28 @@ describe('<Drawer />', () => {

describe('isHorizontal', () => {
it('should recognize left and right as horizontal swiping directions', () => {
assert.strictEqual(isHorizontal({ anchor: 'left' }), true);
assert.strictEqual(isHorizontal({ anchor: 'right' }), true);
assert.strictEqual(isHorizontal({ anchor: 'top' }), false);
assert.strictEqual(isHorizontal({ anchor: 'bottom' }), false);
assert.strictEqual(isHorizontal('left'), true);
assert.strictEqual(isHorizontal('right'), true);
assert.strictEqual(isHorizontal('top'), false);
assert.strictEqual(isHorizontal('bottom'), false);
});
});

describe('getAnchor', () => {
it('should return the anchor', () => {
const theme = createMuiTheme({
direction: 'ltr',
});
const theme = { direction: 'ltr' };

assert.strictEqual(getAnchor({ anchor: 'left', theme }), 'left');
assert.strictEqual(getAnchor({ anchor: 'right', theme }), 'right');
assert.strictEqual(getAnchor({ anchor: 'top', theme }), 'top');
assert.strictEqual(getAnchor({ anchor: 'bottom', theme }), 'bottom');
assert.strictEqual(getAnchor(theme, 'left'), 'left');
assert.strictEqual(getAnchor(theme, 'right'), 'right');
assert.strictEqual(getAnchor(theme, 'top'), 'top');
assert.strictEqual(getAnchor(theme, 'bottom'), 'bottom');
});

it('should switch left/right if RTL is enabled', () => {
const theme = createMuiTheme({
direction: 'rtl',
});
const theme = { direction: 'rtl' };

assert.strictEqual(getAnchor({ anchor: 'left', theme }), 'right');
assert.strictEqual(getAnchor({ anchor: 'right', theme }), 'left');
assert.strictEqual(getAnchor(theme, 'left'), 'right');
assert.strictEqual(getAnchor(theme, 'right'), 'left');
});
});
});
2 changes: 1 addition & 1 deletion packages/material-ui/src/SwipeableDrawer/SwipeArea.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const SwipeArea = React.forwardRef(function SwipeArea(props, ref) {
className={clsx(classes.root, classes[`anchor${capitalize(anchor)}`], className)}
ref={ref}
style={{
[isHorizontal(props) ? 'width' : 'height']: width,
[isHorizontal(anchor) ? 'width' : 'height']: width,
}}
{...other}
/>
Expand Down
20 changes: 10 additions & 10 deletions packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,11 +85,11 @@ class SwipeableDrawer extends React.Component {
}

getMaxTranslate() {
return isHorizontal(this.props) ? this.paperRef.clientWidth : this.paperRef.clientHeight;
return isHorizontal(this.props.anchor) ? this.paperRef.clientWidth : this.paperRef.clientHeight;
}

getTranslate(current) {
const start = isHorizontal(this.props) ? this.startX : this.startY;
const start = isHorizontal(this.props.anchor) ? this.startX : this.startY;
return Math.min(
Math.max(this.props.open ? start - current : this.getMaxTranslate() + start - current, 0),
this.getMaxTranslate(),
Expand All @@ -99,9 +99,9 @@ class SwipeableDrawer extends React.Component {
setPosition(translate, options = {}) {
const { mode = null, changeTransition = true } = options;

const anchor = getAnchor(this.props);
const anchor = getAnchor(this.props.theme, this.props.anchor);
const rtlTranslateMultiplier = ['right', 'bottom'].indexOf(anchor) !== -1 ? 1 : -1;
const transform = isHorizontal(this.props)
const transform = isHorizontal(this.props.anchor)
? `translate(${rtlTranslateMultiplier * translate}px, 0)`
: `translate(0, ${rtlTranslateMultiplier * translate}px)`;
const drawerStyle = this.paperRef.style;
Expand Down Expand Up @@ -147,7 +147,7 @@ class SwipeableDrawer extends React.Component {
}

const { disableDiscovery, disableSwipeToOpen, open, swipeAreaWidth } = this.props;
const anchor = getAnchor(this.props);
const anchor = getAnchor(this.props.theme, this.props.anchor);
const currentX =
anchor === 'right'
? document.body.offsetWidth - event.touches[0].pageX
Expand All @@ -161,7 +161,7 @@ class SwipeableDrawer extends React.Component {
if (disableSwipeToOpen || event.target !== this.swipeAreaRef.current) {
return;
}
if (isHorizontal(this.props)) {
if (isHorizontal(this.props.anchor)) {
if (currentX > swipeAreaWidth) {
return;
}
Expand Down Expand Up @@ -196,8 +196,8 @@ class SwipeableDrawer extends React.Component {
// the ref may be null when a parent component updates while swiping
if (!this.paperRef) return;

const anchor = getAnchor(this.props);
const horizontalSwipe = isHorizontal(this.props);
const anchor = getAnchor(this.props.theme, this.props.anchor);
const horizontalSwipe = isHorizontal(this.props.anchor);

const currentX =
anchor === 'right'
Expand Down Expand Up @@ -284,9 +284,9 @@ class SwipeableDrawer extends React.Component {

this.isSwiping = null;

const anchor = getAnchor(this.props);
const anchor = getAnchor(this.props.theme, this.props.anchor);
let current;
if (isHorizontal(this.props)) {
if (isHorizontal(this.props.anchor)) {
current =
anchor === 'right'
? document.body.offsetWidth - event.changedTouches[0].pageX
Expand Down
Loading