Merge pull request #94 from piotrzdziarski/1.3

1.3.0 improving stage indexes

README.md

@@ -37,7 +37,7 @@ function App() {
             </button>
             <FsLightbox
                 toggler={ toggler }
-                urls={ [
+                sourcesElements={ [
                     'https://i.imgur.com/fsyrScY.jpg',
                     'https://www.youtube.com/watch?v=xshEZzpS4CQ',
                     'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'

demo/DemoComponent.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import "./css/demo.css";
-import FsLightbox from '../index';
-import { TEST_YOUTUBE_URL, testVideoURL, testYoutubeURL } from "./demoData";
+import FsLightbox from '../src/FsLightbox.jsx';
+import { TEST_YOUTUBE_URL, TEST_VIDEO_URL } from "./demoData";
 
 class DemoComponent extends Component {
     constructor(props) {
@@ -42,12 +42,12 @@ class DemoComponent extends Component {
                 </div>
                 <FsLightbox
                     toggler={ this.state.toggler }
-                    urls={ [
+                    sources={ [
                         '../demo/images/5.jpg',
                         'https://escalante-mkt-imgs.s3-us-west-2.amazonaws.com/TimeSheets/screenshot1.png',
                         // "invalid",
                         TEST_YOUTUBE_URL,
-                        // testVideoURL,
+                        TEST_VIDEO_URL,
                         "https://images.pexels.com/photos/2118563/pexels-photo-2118563.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
                         "../demo/images/3.jpeg"
                     ] }
@@ -56,15 +56,18 @@ class DemoComponent extends Component {
                         'image'
                     ] }
                     videosPosters={ [
-                        // "../demo/images/1.jpeg"
+                        null,
+                        null,
+                        null,
+                        "../demo/images/1.jpeg"
                     ] }
                     disableLocalStorage={ true }
                     // onClose={ () => console.log('onClose') }
                     // onInit={ () => console.log('onInit') }
                     // onOpen={ () => console.log('onOpen') }
                     // onShow={ () => console.log('onShow') }
                 />
-                <FsLightbox toggler={ this.state.toggler2 } urls={ ["../demo/images/5.jpg"] }/>
+                <FsLightbox toggler={ this.state.toggler2 } sources={ ["../demo/images/5.jpg"] }/>
             </>
         );
     }

demo/DemoComponentHiddenLightbox.jsx

@@ -36,7 +36,7 @@ class DemoComponentHiddenLightbox extends Component {
                 </div>
                 <FsLightbox
                     isOpen={ this.state.toggler }
-                    urls={ [
+                    sources={ [
                         "../demo/images/1.jpeg",
                         "../demo/images/2.jpg",
                         "../demo/images/3.jpeg",
@@ -50,4 +50,4 @@ class DemoComponentHiddenLightbox extends Component {
     }
 }
 
-export default DemoComponentHiddenLightbox;
+export default DemoComponentHiddenLightbox;

src/FsLightbox.jsx

@@ -2,8 +2,8 @@ import "./core/styles/styles-injection";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Nav from "./components/nav/Nav.jsx";
-import SlideButtonLeft from "./components/slide-buttons/SlideButtonLeft.jsx";
-import SlideButtonRight from "./components/slide-buttons/SlideButtonRight.jsx";
+import SlideButtonPrevious from "./components/slide-buttons/SlideButtonPrevious.jsx";
+import SlideButtonNext from "./components/slide-buttons/SlideButtonNext.jsx";
 import SourceHoldersWrapper from "./components/sources/SourceHoldersWrapper.jsx";
 import { createRefsArrayForGivenNumber } from "./helpers/arrays/createRefsArrayForGivenNumber";
 import { setUpCore } from "./core/setUpCore";
@@ -13,40 +13,45 @@ import { runLightboxUnmountActions } from "./core/main-component/unmounting/runL
 import { Injector } from "./injection/Injector";
 import { EventsDispatcher } from "./core/main-component/EventsDispatcher";
 import { runLightboxMountedActions } from "./core/main-component/mounting/runLightboxMountedActions";
+import { getInitialCurrentIndex } from "./core/stage/getInitialCurrentIndex";
+import { getSourcesHoldersTransformersCollection } from "./core/collections/getSourcesHoldersTransformersCollection";
 
 class FsLightbox extends Component {
     constructor(props) {
         super(props);
         this.setUpData();
-        this.setUpSourcesData();
+        this.setUpStageIndexes();
         this.setUpStates();
         this.setUpGetters();
         this.setUpSetters();
         this.setUpElements();
-        this.setUpCollections();
         this.setUpInjector();
+        this.setUpCollections();
         this.setUpEventsDispatcher();
         this.setUpCore();
     }
 
     setUpData() {
         this.data = {
-            urls: this.props.urls,
-            totalSlides: this.props.urls.length,
-            slideOnLightboxOpen: (this.props.slide) ? this.props.slide : 1,
+            sources: (this.props.sources) ? this.props.sources : this.props.urls,
+            sourcesCount: null,
+            lastSourceIndex: null,
             isInitialized: false,
+            maxSourceWidth: 0,
+            maxSourceHeight: 0,
             scrollbarWidth: 0,
-            isSwipingSlides: false,
+            slideDistance: (this.props.slideDistance) ? this.props.slideDistance : 0.3
         };
+        this.data.sourcesCount = this.data.sources.length;
+        this.data.lastSourceIndex = this.data.sourcesCount - 1;
     }
 
-    setUpSourcesData() {
-        this.sourcesData = {
-            isSourceAlreadyInitializedArray: [],
-            videosPosters: (this.props.videosPosters) ? this.props.videosPosters : [],
-            maxSourceWidth: 0,
-            maxSourceHeight: 0,
-            slideDistance: (this.props.slideDistance) ? this.props.slideDistance : 0.3,
+
+    setUpStageIndexes() {
+        this.stageIndexes = {
+            previous: undefined,
+            current: getInitialCurrentIndex(this),
+            next: undefined
         };
     }
 
@@ -62,10 +67,10 @@ class FsLightbox extends Component {
         // - onUpdate - after setting it to method it will be called once component updates
         // (its called only one time - after first call its deleted)
         this.componentsStates = {
-            slide: {},
+            slideNumberUpdater: {},
             hasMovedWhileSwiping: {},
             isFullscreenOpen: {},
-            shouldSourceHolderBeUpdatedCollection: [],
+            shouldSourceHolderBeUpdatedCollection: []
         };
     }
 
@@ -90,14 +95,19 @@ class FsLightbox extends Component {
         this.elements = {
             container: React.createRef(),
             sourcesHoldersWrapper: React.createRef(),
-            sources: createRefsArrayForGivenNumber(this.data.totalSlides),
-            sourceHolders: createRefsArrayForGivenNumber(this.data.totalSlides),
+            sources: createRefsArrayForGivenNumber(this.data.sourcesCount),
+            sourcesHolders: createRefsArrayForGivenNumber(this.data.sourcesCount),
             sourcesComponents: {},
         };
     }
 
+    setUpInjector() {
+        this.injector = new Injector(this);
+    }
+
     setUpCollections() {
         this.collections = {
+            sourcesHoldersTransformers: getSourcesHoldersTransformersCollection(this),
             sourcesLoadHandlers: [],
             // after source load its size adjuster will be stored in this array so SourceSizeAdjusterIterator may use it
             sourceSizeAdjusters: [],
@@ -106,10 +116,6 @@ class FsLightbox extends Component {
         }
     }
 
-    setUpInjector() {
-        this.injector = new Injector(this);
-    }
-
     setUpEventsDispatcher() {
         this.eventsDispatcher = this.injector.injectDependency(EventsDispatcher);
     }
@@ -134,15 +140,16 @@ class FsLightbox extends Component {
             lightboxUpdater: {},
             scrollbarRecompensor: {},
             slideChanger: {},
+            slideNumberUpdater: {},
             slideSwiping: {
                 down: {},
                 move: {},
                 up: {}
             },
             sourceAnimator: {},
             sourceController: {},
-            sourceHoldersTransformer: {},
-            stage: {}
+            stageManager: {},
+            stageSourcesHoldersTransformer: {}
         };
         setUpCore(this);
     }
@@ -168,10 +175,10 @@ class FsLightbox extends Component {
                 <DownEventDetector fsLightbox={ this }/>
                 <SwipingInvisibleHover fsLightbox={ this }/>
                 <Nav fsLightbox={ this }/>
-                { (this.data.totalSlides > 1) ?
+                { (this.data.sourcesCount > 1) ?
                     <>
-                        <SlideButtonLeft fsLightbox={ this }/>
-                        <SlideButtonRight fsLightbox={ this }/>
+                        <SlideButtonPrevious fsLightbox={ this }/>
+                        <SlideButtonNext fsLightbox={ this }/>
                     </> : null
                 }
                 <SourceHoldersWrapper fsLightbox={ this }/>
@@ -182,16 +189,29 @@ class FsLightbox extends Component {
 
 FsLightbox.propTypes = {
     toggler: PropTypes.bool.isRequired,
-    urls: PropTypes.array.isRequired,
-    types: PropTypes.array,
-    disableLocalStorage: PropTypes.bool,
+    urls: PropTypes.array, // deprecated: 1.2.1
+    sources: PropTypes.array,
+
+    // slide number controlling
+    slide: PropTypes.number,
+    source: PropTypes.string,
+    sourceIndex: PropTypes.number,
+
+    // events
     onOpen: PropTypes.func,
     onClose: PropTypes.func,
     onInit: PropTypes.func,
     onShow: PropTypes.func,
-    slide: PropTypes.number,
-    slideDistance: PropTypes.number,
-    videosPosters: PropTypes.array
+
+    // types
+    disableLocalStorage: PropTypes.bool,
+    types: PropTypes.array,
+
+    // sources
+    videosPosters: PropTypes.array,
+
+    // preferences
+    slideDistance: PropTypes.number
 };
 
 export default FsLightbox;

src/components/nav/Nav.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Toolbar from "./toolbar/Toolbar.jsx";
 import SlideNumber from "./SlideNumber.jsx";
 
@@ -9,8 +8,4 @@ const Nav = ({ fsLightbox }) => (
         <SlideNumber fsLightbox={ fsLightbox }/>
     </div>
 );
-
-Nav.propTypes = {
-    fsLightbox: PropTypes.object.isRequired
-};
-export default Nav;
+export default Nav;

src/components/nav/SlideNumber.jsx

@@ -1,38 +1,28 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { ifOnUpdateExistsHandleItForState } from "../../helpers/state/ifOnUpdateExistsHandleItForState";
+import React, { useState } from 'react';
 
 const SlideNumber = (
     {
         fsLightbox: {
+            stageIndexes,
             data,
-            componentsStates: { slide: slideState },
+            componentsStates: {
+                slideNumberUpdater: slideNumberUpdaterState
+            },
         }
     }
 ) => {
-    const [slide, setSlide] = useState(data.slideOnLightboxOpen);
-    slideState.get = () => slide;
-    slideState.set = setSlide;
+    const [slideNumberUpdater, setSlideNumberUpdater] = useState(false);
+    slideNumberUpdaterState.get = () => slideNumberUpdater;
+    slideNumberUpdaterState.set = setSlideNumberUpdater;
 
-    useEffect(() => {
-        if (data.slideOnLightboxOpen !== slide) data.slideOnLightboxOpen = slide;
-        ifOnUpdateExistsHandleItForState(slideState);
-    }, [slide]);
-
-    if (data.totalSlides === 1) {
-        return null;
-    }
-
-    return (
-        <div className="fslightbox-slide-number-container fslightbox-flex-centered">
-            <div>{ slide }</div>
-            <div className="fslightbox-slash">/</div>
-            <div>{ data.totalSlides }</div>
-        </div>
-    );
-};
-
-SlideNumber.propTypes = {
-    fsLightbox: PropTypes.object.isRequired
+    return (data.sourcesCount === 1) ?
+        null :
+        (
+            <div className="fslightbox-slide-number-container fslightbox-flex-centered">
+                <div>{ stageIndexes.current + 1 }</div>
+                <div className="fslightbox-slash">/</div>
+                <div>{ data.sourcesCount }</div>
+            </div>
+        );
 };
-export default SlideNumber;
+export default SlideNumber;

src/components/nav/toolbar/Toolbar.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from "prop-types";
 import FullscreenButton from "./toolbar-buttons/FullscreenButton.jsx";
 import CloseButton from "./toolbar-buttons/CloseButton.jsx";
 
@@ -9,9 +8,4 @@ const Toolbar = ({ fsLightbox }) => (
         <CloseButton fsLightbox={ fsLightbox }/>
     </div>
 );
-
-Toolbar.propTypes = {
-    fsLightbox: PropTypes.object.isRequired,
-};
-
 export default Toolbar;

src/components/slide-buttons/SlideButtonRight.jsx → src/components/slide-buttons/SlideButtonNext.jsx

@@ -1,24 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Svg from "../helpers/Svg.jsx";
 
-/**
- * @param { FsLightbox.core.stage.getNextSlideNumber | Function } getNextSlideNumber
- * @param { FsLightbox.core.slideChanger.changeSlideTo | function(number) } changeSlideTo
- * @param changeSlideTo
- */
-const SlideButtonRight = (
+const SlideButtonNext = (
     {
         fsLightbox: {
+            stageIndexes,
             core: {
-                stage: { getNextSlideNumber },
                 slideChanger: { changeSlideTo }
             }
         }
     }
 ) => {
+    // TODO: update test
     const goToNextSlide = () => {
-        changeSlideTo(getNextSlideNumber());
+        changeSlideTo(stageIndexes.next + 1);
     };
 
     return (
@@ -34,9 +29,6 @@ const SlideButtonRight = (
             </div>
         </div>
     );
-}
-
-SlideButtonRight.propTypes = {
-    fsLightbox: PropTypes.object.isRequired
 };
-export default SlideButtonRight;
+
+export default SlideButtonNext;