From 8a7223a6bd237c6b7156f51b8ded018cad321c98 Mon Sep 17 00:00:00 2001 From: Michael Walker Date: Sat, 10 Nov 2018 13:07:55 -0800 Subject: [PATCH 1/5] Removed dummy section, added checks for dynamic changes --- components/ReactFullpage/index.js | 198 ++++++++++++------------------ components/Wrapper/index.js | 2 +- components/index.js | 1 - example/src/index.js | 116 ++++++++++++----- 4 files changed, 163 insertions(+), 154 deletions(-) diff --git a/components/ReactFullpage/index.js b/components/ReactFullpage/index.js index 5dd989d..01e2198 100644 --- a/components/ReactFullpage/index.js +++ b/components/ReactFullpage/index.js @@ -25,52 +25,32 @@ class ReactFullpage extends React.Component { throw new Error('must provide render prop to '); } - 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) { + componentDidUpdate() { + const newSectionCount = this.getSectionCount(); + const newSlideCount = this.getSlideCount(); + const { sectionCount, slideCount } = this.state; + console.log({ sectionCount, newSectionCount }) + + if (sectionCount === newSectionCount && slideCount === newSlideCount) { 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; - + // NOTE: if sections have changed we need to rebuild this.destroy(); - - if (activeSectionIndex > -1) { - fpUtils.addClass(document.querySelectorAll(sectionSelector)[activeSectionIndex], 'active'); - } - - if (activeSlideIndex > -1) { - fpUtils.addClass(activeSlide, 'active'); - } - this.init(this.buildOptions()); } @@ -78,6 +58,18 @@ class ReactFullpage extends React.Component { this.destroy(); } + getSectionCount() { + return document + .querySelectorAll('.section') + .length; + } + + getSlideCount() { + return document + .querySelectorAll('.slide') + .length; + } + init(opts) { new Fullpage('#fullpage', opts); // eslint-disable-line this.fullpageApi = window.fullpage_api; @@ -87,22 +79,35 @@ 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 }); + console.log('marking initialized'); + 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 +121,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 +133,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; - }, {}); + 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; + // 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 'afterResponsive': - state = makeState(fromArgs(['isResponsive'])); - break; + case 'afterResize': + state = makeState(fromArgs([''])); + break; - case 'afterSlideLoad': - state = makeState(fromArgs(['anchorLink', 'index', 'slideAnchor', 'slideIndex'])); - break; + case 'afterResponsive': + state = makeState(fromArgs(['isResponsive'])); + break; + + case 'afterSlideLoad': + state = makeState(fromArgs(['section', 'origin', 'destination', 'direction'])); + break; // On-* - case 'onLeave': - state = makeState(fromArgs(['index', 'nextIndex', 'direction'])); - break; + case 'onLeave': + state = makeState(fromArgs(['origin', 'destination', 'direction'])); + break; - case 'onSlideLeave': - state = makeState(fromArgs([ - 'anchorLink', - 'index', - 'slideIndex', - 'direction', - 'nextSlideIndex', - ])); - break; + case 'onSlideLeave': + state = makeState(fromArgs(['section', 'origin', 'slideIndex', 'destination', 'direction'])); + 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; - - // On-* - case 'onLeave': - state = makeState(fromArgs(['origin', 'destination', 'direction'])); - break; - - case 'onSlideLeave': - state = makeState(fromArgs([ - 'section', - 'origin', - 'slideIndex', - 'destination', - 'direction', - ])); - break; - - default: - break; - } + default: + break; } this.setState(state, () => { @@ -221,10 +180,7 @@ class ReactFullpage extends React.Component { render() { return (
- {this.state.initialized - ? this.props.render(this) - :
- } + {this.props.render(this)}
); } diff --git a/components/Wrapper/index.js b/components/Wrapper/index.js index ec56fd2..14fd874 100644 --- a/components/Wrapper/index.js +++ b/components/Wrapper/index.js @@ -2,6 +2,6 @@ import React, { Fragment } from 'react'; -const Wrapper = ({ children }) => {children}; +const Wrapper = ({ children }) => {children} export default Wrapper; diff --git a/components/index.js b/components/index.js index 542cd46..c46ff5f 100644 --- 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; diff --git a/example/src/index.js b/example/src/index.js index 4b7d2ba..5241995 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -1,47 +1,101 @@ -/* eslint-disable import/no-extraneous-dependencies */ import React from 'react'; import ReactDOM from 'react-dom'; import ReactFullpage from '../../components'; -import 'fullpage.js/vendors/scrolloverflow'; // Optional. When using scrollOverflow:true +// NOTE: works fine without scroll overflow extension but breaks when included (classList of undefined) +// import 'fullpage.js/vendors/scrolloverflow'; // Optional. When using scrollOverflow:true + +class App extends React.Component { + constructor(props) { + super(props); + this.state = { + fullpages: [ + { + text: 'section 1', + id: Math.random(), + }, + ], + }; + } -class Fullpage extends React.Component { onLeave(origin, destination, direction) { - // arguments are mapped in order of fullpage.js callback arguments - // do something with the event + console.log('onLeave', { origin, destination, direction }); + // arguments are mapped in order of fullpage.js callback arguments do something + // with the event + } + + handleAddSection() { + this.setState((state) => { + const { fullpages } = state; + const { length } = fullpages; + fullpages.push({ + text: `section ${length + 1}`, + id: Math.random(), + }); + + return { + fullpages: [...fullpages], + }; + }); + } + + handleRemoveSection() { + this.setState((state) => { + const { fullpages } = state; + const newPages = [...fullpages]; + newPages.pop(); + + return { fullpages: newPages }; + }); } render() { - return ( - { - console.log('render prop change', state); + const { fullpages } = this.state; - return ( + if (!fullpages.length) { + return null; + } + + const Menu = () => ( +
+
    +
  • + + +
    • +
+
+ ); + + return ( +
+ + ( -
-

Section 1

- -
-
-
Slide 1
-
Slide 2
-
Slide 3
-
-
-

Section 3

-
+ {fullpages.map(({ text, id }) => ( +
+

{text}

+
+ ))} - ); - }} - /> + )} + /> +
); } } -ReactDOM.render(, document.getElementById('react-root')); +const rootElement = document.getElementById('react-root'); +ReactDOM.render(, rootElement); From 0d32d7c0e6c798d8933982764218cd57a7828d68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alvaro=20Trigo=20Lo=CC=81pez?= Date: Mon, 12 Nov 2018 18:20:09 +0100 Subject: [PATCH 2/5] - Examples: removed unnecessary CSS stylesheet and adding it in the bundle file #63 --- example/dist/index.html | 3 - example/dist/main.js | 42 +- example/package-lock.json | 2095 ++++++++++++++++++++----------------- example/package.json | 2 + example/webpack.config.js | 16 + 5 files changed, 1184 insertions(+), 974 deletions(-) diff --git a/example/dist/index.html b/example/dist/index.html index 05d86f6..ef73178 100644 --- a/example/dist/index.html +++ b/example/dist/index.html @@ -9,9 +9,6 @@ - - -