Merge pull request #69 from alvarotrigo/dev

Merging dev branch 0.1.3
alvarotrigo · Nov 19, 2018 · 14cb562 · 14cb562
2 parents 4cc6e7f + dd3ad96
commit 14cb562
Show file tree

Hide file tree

Showing 14 changed files with 3,460 additions and 12,004 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 <p align="center">Official React wrapper for the <a target="_blank" href="https://github.com/alvarotrigo/fullPage.js/">fullpage.js library</a></p>
 
 <p align="center">
-  <img src="https://img.shields.io/badge/react--fullpage-v0.1.2-brightgreen.svg" alt="react-fullpage version" />
+  <img src="https://img.shields.io/badge/react--fullpage-v0.1.3-brightgreen.svg" alt="react-fullpage version" />
 </p>
 
 - [Demo online](https://alvarotrigo.com/react-fullpage/) | [CodeSandbox](https://codesandbox.io/s/m34yq5q0qx)

diff --git a/components/ReactFullpage/index.js b/components/ReactFullpage/index.js
@@ -25,59 +25,65 @@ class ReactFullpage extends React.Component {
       throw new Error('must provide render prop to <ReactFullpage />');
     }
 
-    this.state = { initialized: false };
+    this.state = {
+      initialized: false,
+    };
   }
 
   componentDidMount() {
-    const { $, v2compatible = false } = this.props;
     const opts = this.buildOptions();
 
-    if (v2compatible) {
-      if (!$ || $ instanceof window.jQuery === false) {
-        throw new Error('Must provide $ (jQuery) as a prop if using v2 API');
-      }
-
-      $(document).ready(() => {
-        // eslint-disable-line
-        $('#fullpage').fullpage(opts);
-      });
-    } else if (Fullpage) {
+    if (Fullpage) {
       this.init(opts);
       this.markInitialized();
     }
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (prevState.initialized === this.state.initialized) {
+    const newSectionCount = this.getSectionCount();
+    const newSlideCount = this.getSlideCount();
+    const { sectionCount, slideCount } = this.state;
+
+    /* TODO: add a list of fullpage.js specific props to subscribe too
+      similar to how callbacks are handled)
+    */
+
+    if (this.props.sectionsColor !== prevProps.sectionsColor) {
+      console.log('rebuilding due to a change in fullpage.js props');
+      // NOTE: if fullpage props have changed we need to rebuild
+      this.destroy();
+      this.init(this.buildOptions());
       return;
     }
 
-    const { props, fpUtils } = this;
-    const slideSelector = props.slideSelector || '.slide';
-    const sectionSelector = props.sectionSelector || '.section';
-
-    const activeSection = document.querySelector(`${sectionSelector}.active`);
-    const activeSectionIndex = activeSection ? fpUtils.index(activeSection): -1;
-    const activeSlide = document.querySelector(`${sectionSelector}.active${slideSelector}.active`);
-    const activeSlideIndex = activeSlide ? fpUtils.index(activeSlide) : -1;
-
-    this.destroy();
-
-    if (activeSectionIndex > -1) {
-      fpUtils.addClass(document.querySelectorAll(sectionSelector)[activeSectionIndex], 'active');
-    }
-
-    if (activeSlideIndex > -1) {
-      fpUtils.addClass(activeSlide, 'active');
+    if (sectionCount === newSectionCount && slideCount === newSlideCount) {
+      return;
     }
 
+    console.log('rebuilding due to a change in fullpage.js sections/slides');
+    // NOTE: if sections have changed we need to rebuild
+    this.destroy();
     this.init(this.buildOptions());
   }
 
   componentWillUnmount() {
     this.destroy();
   }
 
+  getSectionCount() {
+    const { sectionSelector = '.section' } = this.props;
+    return document
+      .querySelectorAll(sectionSelector)
+      .length;
+  }
+
+  getSlideCount() {
+    const { slideSelector = '.slide' } = this.props;
+    return document
+      .querySelectorAll(slideSelector)
+      .length;
+  }
+
   init(opts) {
     new Fullpage('#fullpage', opts); // eslint-disable-line
     this.fullpageApi = window.fullpage_api;
@@ -87,22 +93,34 @@ class ReactFullpage extends React.Component {
 
   destroy() {
     // NOTE: need to check for init to support SSR
-    if (!this.state.initialized) return;
-
-    this.fullpageApi.destroy('all');
+    if (typeof window !== 'undefined') {
+      this
+        .fullpageApi
+        .destroy('all');
+    }
   }
 
   markInitialized() {
-    this.setState({ initialized: true });
+    this.setState({
+      initialized: true,
+      sectionCount: this.getSectionCount(),
+      slideCount: this.getSlideCount(),
+    });
   }
 
   buildOptions() {
-    const filterCb = key => !!Object.keys(this.props).find(cb => cb === key);
+    const filterCb = key => !!Object
+      .keys(this.props)
+      .find(cb => cb === key);
     const registered = fullpageCallbacks.filter(filterCb);
     const listeners = registered.reduce((result, key) => {
-      const agg = { ...result };
+      const agg = {
+        ...result,
+      };
       agg[key] = (...args) => {
-        const newArgs = [key, ...args];
+        const newArgs = [
+          key, ...args,
+        ];
         this.update(...newArgs);
       };
 
@@ -116,10 +134,10 @@ class ReactFullpage extends React.Component {
   }
 
   update(lastEvent, ...args) {
-    const { v2compatible = false } = this.props;
-
     let state = {
       ...this.state,
+      sectionCount: this.getSectionCount(),
+      getSlideCount: this.getSlideCount(),
     };
 
     const makeState = callbackParameters => ({
@@ -128,89 +146,43 @@ class ReactFullpage extends React.Component {
       lastEvent,
     });
 
-    const fromArgs = argList =>
-      argList.reduce((result, key, i) => {
-        const value = args[i];
-        result[key] = value; // eslint-disable-line
-        return result;
-      }, {});
-
-    // TODO: change all fromArgs to constants After-*
-    if (v2compatible) {
-      // NOTE: remapping callback args for v2
-      // https://github.com/alvarotrigo/fullPage.js#callbacks
-      switch (lastEvent) {
-        // After-*
-        case 'afterLoad':
-          state = makeState(fromArgs(['anchorLink', 'index']));
-          break;
-
-        case 'afterResponsive':
-          state = makeState(fromArgs(['isResponsive']));
-          break;
-
-        case 'afterSlideLoad':
-          state = makeState(fromArgs(['anchorLink', 'index', 'slideAnchor', 'slideIndex']));
-          break;
+    const fromArgs = argList => argList.reduce((result, key, i) => {
+      const value = args[i];
+      result[key] = value; // eslint-disable-line
+      return result;
+    }, {});
 
-        // On-*
-        case 'onLeave':
-          state = makeState(fromArgs(['index', 'nextIndex', 'direction']));
-          break;
-
-        case 'onSlideLeave':
-          state = makeState(fromArgs([
-            'anchorLink',
-            'index',
-            'slideIndex',
-            'direction',
-            'nextSlideIndex',
-          ]));
-          break;
-
-        default:
-          break;
-      }
-    } else {
-      // NOTE: remapping callback args to v3
-      // https://github.com/alvarotrigo/fullPage.js#callbacks
-      switch (lastEvent) {
-        // After-*
-        case 'afterLoad':
-          state = makeState(fromArgs(['origin', 'destination', 'direction']));
-          break;
-
-        // TODO: update accoding to new API
-        case 'afterResize':
-          state = makeState(fromArgs(['']));
-          break;
-
-        case 'afterResponsive':
-          state = makeState(fromArgs(['isResponsive']));
-          break;
-
-        case 'afterSlideLoad':
-          state = makeState(fromArgs(['section', 'origin', 'destination', 'direction']));
-          break;
+    // NOTE: remapping callback args to v3
+    // https://github.com/alvarotrigo/fullPage.js#callbacks
+    switch (lastEvent) {
+      // After-*
+      case 'afterLoad':
+        state = makeState(fromArgs(['origin', 'destination', 'direction']));
+        break;
+
+      case 'afterResize':
+        state = makeState(fromArgs(['']));
+        break;
+
+      case 'afterResponsive':
+        state = makeState(fromArgs(['isResponsive']));
+        break;
+
+      case 'afterSlideLoad':
+        state = makeState(fromArgs(['section', 'origin', 'destination', 'direction']));
+        break;
 
         // On-*
-        case 'onLeave':
-          state = makeState(fromArgs(['origin', 'destination', 'direction']));
-          break;
-
-        case 'onSlideLeave':
-          state = makeState(fromArgs([
-            'section',
-            'origin',
-            'slideIndex',
-            'destination',
-            'direction',
-          ]));
-          break;
-
-        default:
-          break;
-      }
+      case 'onLeave':
+        state = makeState(fromArgs(['origin', 'destination', 'direction']));
+        break;
+
+      case 'onSlideLeave':
+        state = makeState(fromArgs(['section', 'origin', 'slideIndex', 'destination', 'direction']));
+        break;
+
+      default:
+        break;
     }
 
     this.setState(state, () => {
@@ -221,10 +193,7 @@ class ReactFullpage extends React.Component {
   render() {
     return (
       <div id="fullpage">
-        {this.state.initialized
-          ? this.props.render(this)
-          : <div className="section fp-section active" />
-        }
+        {this.props.render(this)}
       </div>
     );
   }

diff --git a/components/Wrapper/index.js b/components/Wrapper/index.js
@@ -2,6 +2,6 @@
 
 import React, { Fragment } from 'react';
 
-const Wrapper = ({ children }) => <Fragment>{children}</Fragment>;
+const Wrapper = ({ children }) => <Fragment>{children}</Fragment>
 
 export default Wrapper;
diff --git a/components/index.js b/components/index.js
@@ -11,7 +11,6 @@ export default (() => {
     exported = require('./ReactFullpageShell').default;
   }
 
-  console.log({ exported })
   exported.Wrapper = Wrapper;
 
   return exported;