[SwipeableDrawer] Fix SSR issue on iOS

.size-limit.js

@@ -27,7 +27,7 @@ module.exports = [
  name: 'The size of all the modules of material-ui.',
  webpack: true,
  path: 'packages/material-ui/build/index.js',
- limit: '95.2 KB',
+ limit: '95.4 KB',
  },
  {
  name: 'The main bundle of the docs',

docs/src/modules/components/AppDrawer.js

@@ -118,7 +118,7 @@ function AppDrawer(props, context) {
 
  return (
  <div className={className}>
- <Hidden lgUp={!disablePermanent}>
+ <Hidden lgUp={!disablePermanent} implementation="js">
  <SwipeableDrawer
  classes={{
  paper: classNames(classes.paper, 'algolia-drawer'),

docs/src/modules/components/HomeBackers.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import NoSSR from '@material-ui/docs/NoSSR';
+import NoSSR from '@material-ui/core/NoSSR';
 import MarkdownElement from '@material-ui/docs/MarkdownElement';
 
 const styles = theme => ({

docs/src/modules/components/HomeSteps.js

@@ -10,7 +10,7 @@ import FileDownloadIcon from '@material-ui/docs/svgIcons/FileDownload';
 import BuildIcon from '@material-ui/icons/Build'; // eslint-disable-line import/no-unresolved
 import WhatshotIcon from '@material-ui/icons/Whatshot';
 import MarkdownElement from '@material-ui/docs/MarkdownElement';
-import NoSSR from '@material-ui/docs/NoSSR';
+import NoSSR from '@material-ui/core/NoSSR';
 import Link from 'docs/src/modules/components/Link';
 
 const styles = theme => ({

docs/src/pages/demos/autocomplete/IntegrationReactSelect.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import Select from 'react-select';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import NoSSR from '@material-ui/docs/NoSSR';
+import NoSSR from '@material-ui/core/NoSSR';
 import TextField from '@material-ui/core/TextField';
 import Chip from '@material-ui/core/Chip';
 import MenuItem from '@material-ui/core/MenuItem';

packages/material-ui-docs/src/index.js

@@ -1,3 +1,2 @@
 export { default as MarkdownElement } from './MarkdownElement';
-export { default as NoSSR } from './NoSSR';
 export { default as NProgressBar } from './NProgressBar';

packages/material-ui/src/NoSSR/NoSSR.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+export interface NoSSRProps {
+ children: React.ReactNode;
+ fallback?: React.ReactNode;
+}
+
+declare const NoSSR: React.ComponentType<NoSSRProps>;
+
+export default NoSSR;

packages/material-ui-docs/src/NoSSR/NoSSR.js → packages/material-ui/src/NoSSR/NoSSR.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import exactProp from '../utils/exactProp';
 
 const Fallback = () => null;
 
@@ -32,6 +33,8 @@ NoSSR.propTypes = {
  fallback: PropTypes.node,
 };
 
+NoSSR.propTypes = exactProp(NoSSR.propTypes);
+
 NoSSR.defaultProps = {
  fallback: <Fallback />,
 };

packages/material-ui/src/NoSSR/NoSSR.test.js

@@ -0,0 +1,53 @@
+// @flow
+
+import React from 'react';
+import { assert } from 'chai';
+import { createMount, createShallow } from '../test-utils';
+import NoSSR from './NoSSR';
+
+describe('<NoSSR />', () => {
+ let mount;
+ let shallow;
+
+ before(() => {
+ mount = createMount();
+ shallow = createShallow({ disableLifecycleMethods: true });
+ });
+
+ after(() => {
+ mount.cleanUp();
+ });
+
+ describe('server side rendering', () => {
+ it('should not render the children as the width is unknown', () => {
+ const wrapper = shallow(
+ <NoSSR>
+ <span>Hello</span>
+ </NoSSR>,
+ );
+ assert.strictEqual(wrapper.name(), 'Fallback');
+ });
+ });
+
+ describe('mounted', () => {
+ it('should render the children', () => {
+ const wrapper = mount(
+ <NoSSR>
+ <span>Hello</span>
+ </NoSSR>,
+ );
+ assert.strictEqual(wrapper.find('span').length, 1);
+ });
+ });
+
+ describe('prop: fallback', () => {
+ it('should render the fallback', () => {
+ const wrapper = shallow(
+ <NoSSR fallback="fallback">
+ <span>Hello</span>
+ </NoSSR>,
+ );
+ assert.strictEqual(wrapper.text(), 'fallback');
+ });
+ });
+});

packages/material-ui/src/NoSSR/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './NoSSR';
+export * from './NoSSR';

packages/material-ui/src/SwipeableDrawer/SwipeArea.js

@@ -11,21 +11,21 @@ export const styles = theme => ({
  position: 'fixed',
  top: 0,
  left: 0,
- height: '100vh',
+ bottom: 0,
  zIndex: theme.zIndex.drawer - 1,
  },
- discoveryAnchorLeft: {
+ anchorLeft: {
  right: 'auto',
  },
- discoveryAnchorRight: {
+ anchorRight: {
  left: 'auto',
  right: 0,
  },
- discoveryAnchorTop: {
+ anchorTop: {
  bottom: 'auto',
  right: 0,
  },
- discoveryAnchorBottom: {
+ anchorBottom: {
  top: 'auto',
  bottom: 0,
  right: 0,
@@ -36,13 +36,13 @@ export const styles = theme => ({
  * @ignore - internal component.
  */
 function SwipeArea(props) {
- const { anchor, classes, swipeAreaWidth, ...other } = props;
+ const { anchor, classes, width, ...other } = props;
 
  return (
  <div
- className={classNames(classes.root, classes[`discoveryAnchor${capitalize(anchor)}`])}
+ className={classNames(classes.root, classes[`anchor${capitalize(anchor)}`])}
  style={{
- [isHorizontal(props) ? 'width' : 'height']: swipeAreaWidth,
+ [isHorizontal(props) ? 'width' : 'height']: width,
  }}
  {...other}
  />
@@ -62,7 +62,7 @@ SwipeArea.propTypes = {
  * The width of the left most (or right most) area in pixels where the
  * drawer can be swiped open from.
  */
- swipeAreaWidth: PropTypes.number.isRequired,
+ width: PropTypes.number.isRequired,
 };
 
 export default withStyles(styles)(SwipeArea);

packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js

@@ -8,6 +8,7 @@ import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer';
 import { duration } from '../styles/transitions';
 import withTheme from '../styles/withTheme';
 import { getTransitionProps } from '../transitions/utils';
+import NoSSR from '../NoSSR';
 import SwipeArea from './SwipeArea';
 
 // This value is closed to what browsers are using internally to
@@ -332,6 +333,7 @@ class SwipeableDrawer extends React.Component {
 
  render() {
  const {
+ anchor,
  disableBackdropTransition,
  disableDiscovery,
  disableSwipeToOpen,
@@ -365,12 +367,15 @@ class SwipeableDrawer extends React.Component {
  },
  ref: this.handlePaperRef,
  }}
+ anchor={anchor}
  {...other}
  />
  {!disableDiscovery &&
  !disableSwipeToOpen &&
  variant === 'temporary' && (
- <SwipeArea anchor={other.anchor} swipeAreaWidth={swipeAreaWidth} />
+ <NoSSR>
+ <SwipeArea anchor={anchor} width={swipeAreaWidth} />
+ </NoSSR>
  )}
  </React.Fragment>
  );

packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js

@@ -50,25 +50,14 @@ describe('<SwipeableDrawer />', () => {
  theme={createMuiTheme()}
  />,
  );
- if (React.Fragment) {
- assert.strictEqual(wrapper.childAt(0).type(), Drawer);
- assert.strictEqual(wrapper.childAt(1).type(), SwipeArea);
- } else {
- assert.strictEqual(
- wrapper
- .childAt(0)
- .childAt(0)
- .type(),
- Drawer,
- );
- assert.strictEqual(
- wrapper
- .childAt(0)
- .childAt(1)
- .type(),
- SwipeArea,
- );
- }
+ assert.strictEqual(wrapper.childAt(0).type(), Drawer);
+ assert.strictEqual(
+ wrapper
+ .childAt(1)
+ .childAt(0)
+ .type(),
+ SwipeArea,
+ );
  wrapper.unmount();
  });
 

packages/material-ui/src/index.d.ts

@@ -141,6 +141,7 @@ export { default as MenuList } from './MenuList';
 export { default as MobileStepper } from './MobileStepper';
 export { default as Modal, ModalManager } from './Modal';
 export { default as NativeSelect } from './NativeSelect';
+export { default as NoSSR } from './NoSSR';
 export { default as Paper } from './Paper';
 export { default as Popover } from './Popover';
 export { default as Popper } from './Popper';

packages/material-ui/src/index.js

@@ -74,6 +74,7 @@ export { default as MenuList } from './MenuList';
 export { default as MobileStepper } from './MobileStepper';
 export { default as Modal, ModalManager } from './Modal';
 export { default as NativeSelect } from './NativeSelect';
+export { default as NoSSR } from './NoSSR';
 export { default as Paper } from './Paper';
 export { default as Popover } from './Popover';
 export { default as Popper } from './Popper';

packages/material-ui/src/withWidth/withWidth.test.js

@@ -35,7 +35,7 @@ describe('withWidth', () => {
  describe('server side rendering', () => {
  it('should not render the children as the width is unknown', () => {
  const wrapper = shallow(<EmptyWithWidth />);
- assert.strictEqual(wrapper.type(), null, 'should render nothing');
+ assert.strictEqual(wrapper.type(), null);
  });
  });