[docs] Fix the latest regressions (#461)

oliviertassinari · Sep 1, 2018 · eb19f50 · eb19f50
1 parent 01f419c
commit eb19f50
Show file tree

Hide file tree

Showing 21 changed files with 218 additions and 306 deletions.
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -75,7 +75,6 @@ const styles = theme => ({
     borderRadius: theme.shape.borderRadius,
     backgroundColor:
       theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
-    display: 'flex',
     justifyContent: 'center',
     paddingTop: theme.spacing.unit * 2,
     paddingBottom: theme.spacing.unit * 2,

diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
@@ -35,7 +35,7 @@ const styles = theme => ({
 
 const demoRegexp = /^"demo": "(.*)"/;
 const SOURCE_CODE_ROOT_URL =
-  'https://github.com/oliviertassinari/react-swipeable-views/tree/master/';
+  'https://github.com/oliviertassinari/react-swipeable-views/tree/master';
 
 function MarkdownDocs(props, context) {
   const { classes, demos, disableAd, markdown, markdownLocation: markdownLocationProp } = props;

diff --git a/docs/src/modules/components/SupportTouch.js b/docs/src/modules/components/SupportTouch.js
diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js
@@ -2,8 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import find from 'lodash/find';
 import { withRouter } from 'next/router';
-import pure from 'recompose/pure';
-import wrapDisplayName from 'recompose/wrapDisplayName';
 import AppWrapper from 'docs/src/modules/components/AppWrapper';
 
 const pages = [
@@ -52,7 +50,7 @@ const pages = [
 function findActivePage(currentPages, router) {
   const activePage = find(currentPages, page => {
     if (page.children) {
-      return router.pathname.indexOf(page.pathname) === 0;
+      return router.pathname.indexOf(`${page.pathname}/`) === 0;
     }
 
     // Should be an exact match if no children
@@ -71,10 +69,7 @@ function findActivePage(currentPages, router) {
   return activePage;
 }
 
-function withRoot(BaseComponent) {
-  // Prevent rerendering
-  const PureBaseComponent = pure(BaseComponent);
-
+function withRoot(Component) {
   class WithRoot extends React.Component {
     getChildContext() {
       const { router } = this.props;
@@ -93,48 +88,27 @@ function withRoot(BaseComponent) {
     }
 
     render() {
-      const { sheetsRegistry, ...other } = this.props;
-
+      const { pageContext, ...other } = this.props;
       return (
-        <AppWrapper sheetsRegistry={sheetsRegistry}>
-          <PureBaseComponent initialProps={other} />
-        </AppWrapper>
+        <React.StrictMode>
+          <AppWrapper pageContext={pageContext}>
+            <Component initialProps={other} />
+          </AppWrapper>
+        </React.StrictMode>
       );
     }
   }
 
   WithRoot.propTypes = {
+    pageContext: PropTypes.object,
     router: PropTypes.object.isRequired,
-    sheetsRegistry: PropTypes.object,
   };
 
   WithRoot.childContextTypes = {
     pages: PropTypes.array,
     activePage: PropTypes.object,
   };
 
-  WithRoot.getInitialProps = ctx => {
-    let initialProps = {};
-
-    if (BaseComponent.getInitialProps) {
-      const baseComponentInitialProps = BaseComponent.getInitialProps(ctx);
-      initialProps = {
-        ...baseComponentInitialProps,
-        ...initialProps,
-      };
-    }
-
-    if (process.browser) {
-      return initialProps;
-    }
-
-    return initialProps;
-  };
-
-  if (process.env.NODE_ENV !== 'production') {
-    WithRoot.displayName = wrapDisplayName(BaseComponent, 'withRoot');
-  }
-
   return withRouter(WithRoot);
 }
 

diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js
@@ -10,11 +10,7 @@ export function titleize(string) {
 
   return string
     .split('-')
-    .map(word => word.split(''))
-    .map(letters => {
-      const first = letters.shift();
-      return [first.toUpperCase(), ...letters].join('');
-    })
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ');
 }
 
@@ -25,9 +21,25 @@ export function pageToTitle(page) {
 
   const name = page.pathname.replace(/.*\//, '');
 
-  if (page.pathname.indexOf('/api') === 0) {
+  if (page.pathname.indexOf('/api/') !== -1) {
     return upperFirst(camelCase(name));
   }
 
   return titleize(name);
 }
+
+export function getDependencies(raw) {
+  const deps = {
+    'react-dom': 'latest',
+    react: 'latest',
+  };
+  const re = /^import\s.*\sfrom\s+'([^']+)'/gm;
+  let m;
+  // eslint-disable-next-line no-cond-assign
+  while ((m = re.exec(raw))) {
+    // handle scope names
+    const name = m[1].charAt(0) === '@' ? m[1].split('/', 2).join('/') : m[1].split('/', 1)[0];
+    deps[name] = deps[name] || 'latest';
+  }
+  return deps;
+}
diff --git a/docs/src/pages/demos/DemoAnimateHeight.js b/docs/src/pages/demos/DemoAnimateHeight.js
@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import SwipeableViews from 'react-swipeable-views';
-import SupportTouch from 'docs/src/modules/components/SupportTouch';
 
 const styles = {
   slide: {
@@ -68,19 +67,17 @@ Slide4.contextTypes = {
 
 function DemoAnimateHeight() {
   return (
-    <SupportTouch>
-      <SwipeableViews animateHeight>
-        <div style={Object.assign({}, styles.slide, styles.slide1)}>{list.slice(0, 10)}</div>
-        <div style={Object.assign({}, styles.slide, styles.slide2)}>
-          {'This slide has a max-height limit:'}
-          <br />
-          <br />
-          {list.slice(0, 7)}
-        </div>
-        <div style={Object.assign({}, styles.slide, styles.slide3)}>{list.slice(0, 7)}</div>
-        <Slide4 />
-      </SwipeableViews>
-    </SupportTouch>
+    <SwipeableViews animateHeight>
+      <div style={Object.assign({}, styles.slide, styles.slide1)}>{list.slice(0, 10)}</div>
+      <div style={Object.assign({}, styles.slide, styles.slide2)}>
+        {'This slide has a max-height limit:'}
+        <br />
+        <br />
+        {list.slice(0, 7)}
+      </div>
+      <div style={Object.assign({}, styles.slide, styles.slide3)}>{list.slice(0, 7)}</div>
+      <Slide4 />
+    </SwipeableViews>
   );
 }
 

diff --git a/docs/src/pages/demos/DemoAutoPlay.js b/docs/src/pages/demos/DemoAutoPlay.js
@@ -2,7 +2,6 @@ import React from 'react';
 import SwipeableViews from 'react-swipeable-views';
 import { autoPlay } from 'react-swipeable-views-utils';
 import Pagination from 'docs/src/modules/components/Pagination';
-import SupportTouch from 'docs/src/modules/components/SupportTouch';
 
 const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
 
@@ -41,16 +40,14 @@ class DemoAutoPlay extends React.Component {
     const { index } = this.state;
 
     return (
-      <SupportTouch>
-        <div style={styles.root}>
-          <AutoPlaySwipeableViews index={index} onChangeIndex={this.handleChangeIndex}>
-            <div style={Object.assign({}, styles.slide, styles.slide1)}>slide n°1</div>
-            <div style={Object.assign({}, styles.slide, styles.slide2)}>slide n°2</div>
-            <div style={Object.assign({}, styles.slide, styles.slide3)}>slide n°3</div>
-          </AutoPlaySwipeableViews>
-          <Pagination dots={3} index={index} onChangeIndex={this.handleChangeIndex} />
-        </div>
-      </SupportTouch>
+      <div style={styles.root}>
+        <AutoPlaySwipeableViews index={index} onChangeIndex={this.handleChangeIndex}>
+          <div style={Object.assign({}, styles.slide, styles.slide1)}>slide n°1</div>
+          <div style={Object.assign({}, styles.slide, styles.slide2)}>slide n°2</div>
+          <div style={Object.assign({}, styles.slide, styles.slide3)}>slide n°3</div>
+        </AutoPlaySwipeableViews>
+        <Pagination dots={3} index={index} onChangeIndex={this.handleChangeIndex} />
+      </div>
     );
   }
 }

diff --git a/docs/src/pages/demos/DemoAxis.js b/docs/src/pages/demos/DemoAxis.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import SwipeableViews from 'react-swipeable-views';
-import SupportTouch from 'docs/src/modules/components/SupportTouch';
 
 const styles = {
   slideContainer: {
@@ -29,15 +28,13 @@ const styles = {
 
 function DemoAxis() {
   return (
-    <SupportTouch>
-      <SwipeableViews containerStyle={styles.slideContainer} axis="y" resistance>
-        <div style={Object.assign({}, styles.slide, styles.slide1)}>slide n°1</div>
-        <div style={Object.assign({}, styles.slide, styles.slide2)}>slide n°2</div>
-        <div style={styles.scroll}>
-          <div style={Object.assign({}, styles.slide, styles.slide3)}>slide n°3</div>
-        </div>
-      </SwipeableViews>
-    </SupportTouch>
+    <SwipeableViews containerStyle={styles.slideContainer} axis="y" resistance>
+      <div style={Object.assign({}, styles.slide, styles.slide1)}>slide n°1</div>
+      <div style={Object.assign({}, styles.slide, styles.slide2)}>slide n°2</div>
+      <div style={styles.scroll}>
+        <div style={Object.assign({}, styles.slide, styles.slide3)}>slide n°3</div>
+      </div>
+    </SwipeableViews>
   );
 }
 

diff --git a/docs/src/pages/demos/DemoCircular.js b/docs/src/pages/demos/DemoCircular.js
@@ -2,7 +2,6 @@ import React from 'react';
 import SwipeableViews from 'react-swipeable-views';
 import { virtualize } from 'react-swipeable-views-utils';
 import { mod } from 'react-swipeable-views-core';
-import SupportTouch from 'docs/src/modules/components/SupportTouch';
 
 const VirtualizeSwipeableViews = virtualize(SwipeableViews);
 
@@ -54,11 +53,7 @@ function slideRenderer(params) {
 }
 
 function DemoSimple() {
-  return (
-    <SupportTouch>
-      <VirtualizeSwipeableViews slideRenderer={slideRenderer} />
-    </SupportTouch>
-  );
+  return <VirtualizeSwipeableViews slideRenderer={slideRenderer} />;
 }
 
 export default DemoSimple;