Feat/carousel landscape

demo/src/screens/MainScreen.js

@@ -301,7 +301,7 @@ export default class MainScreen extends Component {
     const keys = _.keys(data);
 
     return (
-      <Carousel onChangePage={this.onChangePage} ref={carousel => (this.carousel = carousel)}>
+      <Carousel migrate onChangePage={this.onChangePage} ref={carousel => (this.carousel = carousel)}>
         {_.map(data, (section, key) => {
           return (
             <View key={key} style={[styles.page, pageStyle]}>
@@ -379,7 +379,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   page: {
-    width: Constants.screenWidth,
     flex: 1,
     paddingLeft: 24,
   },

demo/src/screens/componentScreens/ActionBarScreen.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert, StyleSheet} from 'react-native';
-import {Constants, Colors, Typography, View, ActionBar, PageControl, Carousel} from 'react-native-ui-lib'; //eslint-disable-line
+import {Colors, Typography, View, ActionBar, PageControl, Carousel} from 'react-native-ui-lib'; //eslint-disable-line
 import cameraSelected from '../../assets/icons/cameraSelected.png';
 import video from '../../assets/icons/video.png';
 import tags from '../../assets/icons/tags.png';
@@ -27,6 +27,7 @@ export default class ActionBarScreen extends Component {
           size={15}
         />
         <Carousel
+          migrate
           onChangePage={currentPage => this.setState({currentPage})}
           initialPage={this.state.currentPage}
         >
@@ -90,12 +91,10 @@ export default class ActionBarScreen extends Component {
 
 const styles = StyleSheet.create({
   page: {
-    width: Constants.screenWidth,
-    flex: 1,
+    flex: 1
   },
   pageControl: {
-    zIndex: 1,
-    width: Constants.screenWidth,
+    zIndex: 1
   },
   absoluteContainer: {
     position: 'absolute',

src/components/carousel/CarouselPresenter-Deprecated.js

@@ -0,0 +1,64 @@
+import _ from 'lodash';
+import {Constants} from '../../helpers';
+
+
+export function getDirectionOffset(offset, props) {
+  let fixedOffset = offset;
+
+  if (Constants.isRTL && Constants.isAndroid) {
+    const {loop, pageWidth} = props;
+    const totalWidth = ((getChildrenLength(props) - 1) + (loop ? 2 : 0)) * pageWidth;
+    fixedOffset = Math.abs(totalWidth - offset);
+  }
+
+  return fixedOffset;
+}
+
+export function getChildrenLength(props) {
+  const length = _.get(props, 'children.length') || 0;
+  return length;
+}
+
+export function calcOffset(props, state) {
+  const {currentPage} = state;
+  const {pageWidth, loop} = props;
+
+  const actualCurrentPage = loop ? currentPage + 1 : currentPage;
+
+  let offset = pageWidth * actualCurrentPage;
+  offset = getDirectionOffset(offset, props);
+
+  return offset;
+}
+
+export function calcPageIndex(offset, props) {
+  const pagesCount = getChildrenLength(props);
+  const {pageWidth, loop} = props;
+  const pageIndexIncludingClonedPages = Math.round(offset / pageWidth);
+
+  let actualPageIndex;
+  if (loop) {
+    actualPageIndex = (pageIndexIncludingClonedPages + (pagesCount - 1)) % pagesCount;
+  } else {
+    actualPageIndex = Math.min(pagesCount - 1, pageIndexIncludingClonedPages);
+  }
+
+  return actualPageIndex;
+}
+
+export function isOutOfBounds(offset, props) {
+  const {pageWidth} = props;
+  const length = getChildrenLength(props);
+  const minLimit = 1;
+  const maxLimit = ((length + 1) * pageWidth) - 1;
+
+  return !_.inRange(offset, minLimit, maxLimit);
+}
+
+// todo: need to support more cases of page width in loop mode
+export function calcCarouselWidth(props) {
+  const {pageWidth, loop} = props;
+  let length = getChildrenLength(props);
+  length = loop ? length + 2 : length;
+  return pageWidth * length;
+}

src/components/carousel/CarouselPresenter.js

@@ -1,26 +1,15 @@
 import _ from 'lodash';
 import {Constants} from '../../helpers';
 
-export function getDirectionOffset(offset, props) {
-  let fixedOffset = offset;
-
-  if (Constants.isRTL && Constants.isAndroid) {
-    const {loop, pageWidth} = props;
-    const totalWidth = ((getChildrenLength(props) - 1) + (loop ? 2 : 0)) * pageWidth;
-    fixedOffset = Math.abs(totalWidth - offset);
-  }
-
-  return fixedOffset;
-}
 
 export function getChildrenLength(props) {
   const length = _.get(props, 'children.length') || 0;
   return length;
 }
 
 export function calcOffset(props, state) {
-  const {currentPage} = state;
-  const {pageWidth, loop} = props;
+  const {currentPage, pageWidth} = state;
+  const {loop} = props;
 
   const actualCurrentPage = loop ? currentPage + 1 : currentPage;
 
@@ -30,9 +19,21 @@ export function calcOffset(props, state) {
   return offset;
 }
 
-export function calcPageIndex(offset, props) {
+export function getDirectionOffset(offset, props, pageWidth) {
+  let fixedOffset = offset;
+
+  if (Constants.isRTL && Constants.isAndroid) {
+    const {loop} = props;
+    const totalWidth = ((getChildrenLength(props) - 1) + (loop ? 2 : 0)) * pageWidth;
+    fixedOffset = Math.abs(totalWidth - offset);
+  }
+
+  return fixedOffset;
+}
+
+export function calcPageIndex(offset, props, pageWidth) {
   const pagesCount = getChildrenLength(props);
-  const {pageWidth, loop} = props;
+  const {loop} = props;
   const pageIndexIncludingClonedPages = Math.round(offset / pageWidth);
 
   let actualPageIndex;
@@ -45,16 +46,15 @@ export function calcPageIndex(offset, props) {
   return actualPageIndex;
 }
 
-export function isOutOfBounds(offset, props) {
-  const {pageWidth} = props;
+export function isOutOfBounds(offset, props, pageWidth) {
   const length = getChildrenLength(props);
   const minLimit = 1;
   const maxLimit = ((length + 1) * pageWidth) - 1;
 
   return !_.inRange(offset, minLimit, maxLimit);
 }
 
-// todo: need to support more cases of page width in loop mode
+// TODO: need to support more cases of page width in loop mode
 export function calcCarouselWidth(props) {
   const {pageWidth, loop} = props;
   let length = getChildrenLength(props);

src/components/carousel/__tests__/CarouselPresenter.spec.js

@@ -2,52 +2,52 @@ import * as uut from '../CarouselPresenter';
 
 describe('Carousel presenter', () => {
   it('should getChildrenLength', () => {
-    expect(uut.getChildrenLength({children: [{}, {}, {}]})).toBe(3);
-    expect(uut.getChildrenLength({children: [{}]})).toBe(1);
-    expect(uut.getChildrenLength({})).toBe(0);
+    expect(uut.getChildrenLength({migrate: true, children: [{}, {}, {}]})).toBe(3);
+    expect(uut.getChildrenLength({migrate: true, children: [{}]})).toBe(1);
+    expect(uut.getChildrenLength({migrate: true})).toBe(0);
   });
 
   describe('calcOffset', () => {
     it('should calcOffset (default mode)', () => {
-      expect(uut.calcOffset({pageWidth: 120, children: [{}, {}, {}]}, {currentPage: 0})).toBe(0);
-      expect(uut.calcOffset({pageWidth: 120, children: [{}, {}, {}]}, {currentPage: 1})).toBe(120);
-      expect(uut.calcOffset({pageWidth: 120, children: [{}, {}, {}]}, {currentPage: 2})).toBe(240);
+      expect(uut.calcOffset({migrate: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 0})).toBe(0);
+      expect(uut.calcOffset({migrate: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 1})).toBe(120);
+      expect(uut.calcOffset({migrate: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 2})).toBe(240);
     });
 
     it('should calcOffset (loop mode)', () => {
-      expect(uut.calcOffset({loop: true, pageWidth: 120, children: [{}, {}, {}]}, {currentPage: 0})).toBe(120);
-      expect(uut.calcOffset({loop: true, pageWidth: 120, children: [{}, {}, {}]}, {currentPage: 1})).toBe(240);
-      expect(uut.calcOffset({loop: true, pageWidth: 120, children: [{}, {}, {}]}, {currentPage: 2})).toBe(360);
+      expect(uut.calcOffset({migrate: true, loop: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 0})).toBe(120);
+      expect(uut.calcOffset({migrate: true, loop: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 1})).toBe(240);
+      expect(uut.calcOffset({migrate: true, loop: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 2})).toBe(360);
     });
   });
 
   describe('calcPageIndex', () => {
     it('should calcPageIndex', () => {
-      expect(uut.calcPageIndex(120, {pageWidth: 120, children: [{}, {}, {}]})).toBe(1);
-      expect(uut.calcPageIndex(245, {pageWidth: 120, children: [{}, {}, {}]})).toBe(2);
-      expect(uut.calcPageIndex(481, {pageWidth: 120, children: [{}, {}, {}]})).toBe(2);
-      expect(uut.calcPageIndex(5, {pageWidth: 120, children: [{}, {}, {}]})).toBe(0);
+      expect(uut.calcPageIndex(120, {migrate: true, children: [{}, {}, {}]}, 120)).toBe(1);
+      expect(uut.calcPageIndex(245, {migrate: true, children: [{}, {}, {}]}, 120)).toBe(2);
+      expect(uut.calcPageIndex(481, {migrate: true, children: [{}, {}, {}]}, 120)).toBe(2);
+      expect(uut.calcPageIndex(5, {migrate: true, children: [{}, {}, {}]}, 120)).toBe(0);
     });
 
     it('should calcPageIndex (loop mode)', () => {
-      expect(uut.calcPageIndex(120, {loop: true, pageWidth: 120, children: [{}, {}, {}]})).toBe(0);
-      expect(uut.calcPageIndex(245, {loop: true, pageWidth: 120, children: [{}, {}, {}]})).toBe(1);
-      expect(uut.calcPageIndex(481, {loop: true, pageWidth: 120, children: [{}, {}, {}]})).toBe(0);
-      expect(uut.calcPageIndex(5, {loop: true, pageWidth: 120, children: [{}, {}, {}]})).toBe(2);
+      expect(uut.calcPageIndex(120, {migrate: true, loop: true, children: [{}, {}, {}]}, 120)).toBe(0);
+      expect(uut.calcPageIndex(245, {migrate: true, loop: true, children: [{}, {}, {}]}, 120)).toBe(1);
+      expect(uut.calcPageIndex(481, {migrate: true, loop: true, children: [{}, {}, {}]}, 120)).toBe(0);
+      expect(uut.calcPageIndex(5, {migrate: true, loop: true, children: [{}, {}, {}]}, 120)).toBe(2);
     });
   });
 
   it('should return isOutsideLimits', () => {
-    expect(uut.isOutOfBounds(120, {pageWidth: 120, children: [{}, {}, {}]})).toBe(false);
-    expect(uut.isOutOfBounds(1125, {pageWidth: 375, children: [{}, {}, {}, {}]})).toBe(false);
-    expect(uut.isOutOfBounds(0, {pageWidth: 120, children: [{}, {}, {}]})).toBe(true);
-    expect(uut.isOutOfBounds(481, {pageWidth: 120, children: [{}, {}, {}]})).toBe(true);
-    expect(uut.isOutOfBounds(1875, {pageWidth: 375, children: [{}, {}, {}, {}]})).toBe(true);
+    expect(uut.isOutOfBounds(120, {migrate: true, children: [{}, {}, {}]}, 120)).toBe(false);
+    expect(uut.isOutOfBounds(1125, {migrate: true, children: [{}, {}, {}, {}]}, 375)).toBe(false);
+    expect(uut.isOutOfBounds(0, {migrate: true, children: [{}, {}, {}]}, 120)).toBe(true);
+    expect(uut.isOutOfBounds(481, {migrate: true, children: [{}, {}, {}]}, 120)).toBe(true);
+    expect(uut.isOutOfBounds(1875, {migrate: true, children: [{}, {}, {}, {}]}, 375)).toBe(true);
   });
 
   it('should calcCarouselWidth', () => {
-    expect(uut.calcCarouselWidth({pageWidth: 70, children: [{}, {}, {}]})).toBe(210);
-    expect(uut.calcCarouselWidth({pageWidth: 50, children: [{}, {}, {}]})).toBe(150);
-    expect(uut.calcCarouselWidth({pageWidth: 150, loop: true, children: [{}, {}, {}]})).toBe(750);
+    expect(uut.calcCarouselWidth({migrate: true, pageWidth: 70, children: [{}, {}, {}]})).toBe(210);
+    expect(uut.calcCarouselWidth({migrate: true, pageWidth: 50, children: [{}, {}, {}]})).toBe(150);
+    expect(uut.calcCarouselWidth({migrate: true, pageWidth: 150, loop: true, children: [{}, {}, {}]})).toBe(750);
   });
 });