Skip to content

Commit fa6b6e2

Browse files
Inbal-Tishethanshar
Inbal-Tish
authored and
ethanshar
committed
Feat/carousel landscape (#475)
* Constants - adding support for orientation event * Carousel - refactor and add support for orientation change; fix for Carousel-related components (ActionBar's demo screen, MainScreen) * lint fix * edit tests * Moving changes to new component and adding migrate prop * switching class names
1 parent 2a2b85b commit fa6b6e2

File tree

8 files changed

+347
-76
lines changed

8 files changed

+347
-76
lines changed

‎demo/src/screens/MainScreen.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,7 @@ export default class MainScreen extends Component {
301301
const keys = _.keys(data);
302302

303303
return (
304-
<Carousel onChangePage={this.onChangePage} ref={carousel => (this.carousel = carousel)}>
304+
<Carousel migrate onChangePage={this.onChangePage} ref={carousel => (this.carousel = carousel)}>
305305
{_.map(data, (section, key) => {
306306
return (
307307
<View key={key} style={[styles.page, pageStyle]}>
@@ -379,7 +379,6 @@ const styles = StyleSheet.create({
379379
justifyContent: 'center',
380380
},
381381
page: {
382-
width: Constants.screenWidth,
383382
flex: 1,
384383
paddingLeft: 24,
385384
},

‎demo/src/screens/componentScreens/ActionBarScreen.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
33
import {Alert, StyleSheet} from 'react-native';
4-
import {Constants, Colors, Typography, View, ActionBar, PageControl, Carousel} from 'react-native-ui-lib'; //eslint-disable-line
4+
import {Colors, Typography, View, ActionBar, PageControl, Carousel} from 'react-native-ui-lib'; //eslint-disable-line
55
import cameraSelected from '../../assets/icons/cameraSelected.png';
66
import video from '../../assets/icons/video.png';
77
import tags from '../../assets/icons/tags.png';
@@ -27,6 +27,7 @@ export default class ActionBarScreen extends Component {
2727
size={15}
2828
/>
2929
<Carousel
30+
migrate
3031
onChangePage={currentPage => this.setState({currentPage})}
3132
initialPage={this.state.currentPage}
3233
>
@@ -90,12 +91,10 @@ export default class ActionBarScreen extends Component {
9091

9192
const styles = StyleSheet.create({
9293
page: {
93-
width: Constants.screenWidth,
94-
flex: 1,
94+
flex: 1
9595
},
9696
pageControl: {
97-
zIndex: 1,
98-
width: Constants.screenWidth,
97+
zIndex: 1
9998
},
10099
absoluteContainer: {
101100
position: 'absolute',

‎src/components/carousel/CarouselPresenter-Deprecated.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import _ from 'lodash';
2+
import {Constants} from '../../helpers';
3+
4+
5+
export function getDirectionOffset(offset, props) {
6+
let fixedOffset = offset;
7+
8+
if (Constants.isRTL && Constants.isAndroid) {
9+
const {loop, pageWidth} = props;
10+
const totalWidth = ((getChildrenLength(props) - 1) + (loop ? 2 : 0)) * pageWidth;
11+
fixedOffset = Math.abs(totalWidth - offset);
12+
}
13+
14+
return fixedOffset;
15+
}
16+
17+
export function getChildrenLength(props) {
18+
const length = _.get(props, 'children.length') || 0;
19+
return length;
20+
}
21+
22+
export function calcOffset(props, state) {
23+
const {currentPage} = state;
24+
const {pageWidth, loop} = props;
25+
26+
const actualCurrentPage = loop ? currentPage + 1 : currentPage;
27+
28+
let offset = pageWidth * actualCurrentPage;
29+
offset = getDirectionOffset(offset, props);
30+
31+
return offset;
32+
}
33+
34+
export function calcPageIndex(offset, props) {
35+
const pagesCount = getChildrenLength(props);
36+
const {pageWidth, loop} = props;
37+
const pageIndexIncludingClonedPages = Math.round(offset / pageWidth);
38+
39+
let actualPageIndex;
40+
if (loop) {
41+
actualPageIndex = (pageIndexIncludingClonedPages + (pagesCount - 1)) % pagesCount;
42+
} else {
43+
actualPageIndex = Math.min(pagesCount - 1, pageIndexIncludingClonedPages);
44+
}
45+
46+
return actualPageIndex;
47+
}
48+
49+
export function isOutOfBounds(offset, props) {
50+
const {pageWidth} = props;
51+
const length = getChildrenLength(props);
52+
const minLimit = 1;
53+
const maxLimit = ((length + 1) * pageWidth) - 1;
54+
55+
return !_.inRange(offset, minLimit, maxLimit);
56+
}
57+
58+
// todo: need to support more cases of page width in loop mode
59+
export function calcCarouselWidth(props) {
60+
const {pageWidth, loop} = props;
61+
let length = getChildrenLength(props);
62+
length = loop ? length + 2 : length;
63+
return pageWidth * length;
64+
}

‎src/components/carousel/CarouselPresenter.js

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,15 @@
11
import _ from 'lodash';
22
import {Constants} from '../../helpers';
33

4-
export function getDirectionOffset(offset, props) {
5-
let fixedOffset = offset;
6-
7-
if (Constants.isRTL && Constants.isAndroid) {
8-
const {loop, pageWidth} = props;
9-
const totalWidth = ((getChildrenLength(props) - 1) + (loop ? 2 : 0)) * pageWidth;
10-
fixedOffset = Math.abs(totalWidth - offset);
11-
}
12-
13-
return fixedOffset;
14-
}
154

165
export function getChildrenLength(props) {
176
const length = _.get(props, 'children.length') || 0;
187
return length;
198
}
209

2110
export function calcOffset(props, state) {
22-
const {currentPage} = state;
23-
const {pageWidth, loop} = props;
11+
const {currentPage, pageWidth} = state;
12+
const {loop} = props;
2413

2514
const actualCurrentPage = loop ? currentPage + 1 : currentPage;
2615

@@ -30,9 +19,21 @@ export function calcOffset(props, state) {
3019
return offset;
3120
}
3221

33-
export function calcPageIndex(offset, props) {
22+
export function getDirectionOffset(offset, props, pageWidth) {
23+
let fixedOffset = offset;
24+
25+
if (Constants.isRTL && Constants.isAndroid) {
26+
const {loop} = props;
27+
const totalWidth = ((getChildrenLength(props) - 1) + (loop ? 2 : 0)) * pageWidth;
28+
fixedOffset = Math.abs(totalWidth - offset);
29+
}
30+
31+
return fixedOffset;
32+
}
33+
34+
export function calcPageIndex(offset, props, pageWidth) {
3435
const pagesCount = getChildrenLength(props);
35-
const {pageWidth, loop} = props;
36+
const {loop} = props;
3637
const pageIndexIncludingClonedPages = Math.round(offset / pageWidth);
3738

3839
let actualPageIndex;
@@ -45,16 +46,15 @@ export function calcPageIndex(offset, props) {
4546
return actualPageIndex;
4647
}
4748

48-
export function isOutOfBounds(offset, props) {
49-
const {pageWidth} = props;
49+
export function isOutOfBounds(offset, props, pageWidth) {
5050
const length = getChildrenLength(props);
5151
const minLimit = 1;
5252
const maxLimit = ((length + 1) * pageWidth) - 1;
5353

5454
return !_.inRange(offset, minLimit, maxLimit);
5555
}
5656

57-
// todo: need to support more cases of page width in loop mode
57+
// TODO: need to support more cases of page width in loop mode
5858
export function calcCarouselWidth(props) {
5959
const {pageWidth, loop} = props;
6060
let length = getChildrenLength(props);

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

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,52 +2,52 @@ import * as uut from '../CarouselPresenter';
22

33
describe('Carousel presenter', () => {
44
it('should getChildrenLength', () => {
5-
expect(uut.getChildrenLength({children: [{}, {}, {}]})).toBe(3);
6-
expect(uut.getChildrenLength({children: [{}]})).toBe(1);
7-
expect(uut.getChildrenLength({})).toBe(0);
5+
expect(uut.getChildrenLength({migrate: true, children: [{}, {}, {}]})).toBe(3);
6+
expect(uut.getChildrenLength({migrate: true, children: [{}]})).toBe(1);
7+
expect(uut.getChildrenLength({migrate: true})).toBe(0);
88
});
99

1010
describe('calcOffset', () => {
1111
it('should calcOffset (default mode)', () => {
12-
expect(uut.calcOffset({pageWidth: 120, children: [{}, {}, {}]}, {currentPage: 0})).toBe(0);
13-
expect(uut.calcOffset({pageWidth: 120, children: [{}, {}, {}]}, {currentPage: 1})).toBe(120);
14-
expect(uut.calcOffset({pageWidth: 120, children: [{}, {}, {}]}, {currentPage: 2})).toBe(240);
12+
expect(uut.calcOffset({migrate: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 0})).toBe(0);
13+
expect(uut.calcOffset({migrate: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 1})).toBe(120);
14+
expect(uut.calcOffset({migrate: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 2})).toBe(240);
1515
});
1616

1717
it('should calcOffset (loop mode)', () => {
18-
expect(uut.calcOffset({loop: true, pageWidth: 120, children: [{}, {}, {}]}, {currentPage: 0})).toBe(120);
19-
expect(uut.calcOffset({loop: true, pageWidth: 120, children: [{}, {}, {}]}, {currentPage: 1})).toBe(240);
20-
expect(uut.calcOffset({loop: true, pageWidth: 120, children: [{}, {}, {}]}, {currentPage: 2})).toBe(360);
18+
expect(uut.calcOffset({migrate: true, loop: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 0})).toBe(120);
19+
expect(uut.calcOffset({migrate: true, loop: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 1})).toBe(240);
20+
expect(uut.calcOffset({migrate: true, loop: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 2})).toBe(360);
2121
});
2222
});
2323

2424
describe('calcPageIndex', () => {
2525
it('should calcPageIndex', () => {
26-
expect(uut.calcPageIndex(120, {pageWidth: 120, children: [{}, {}, {}]})).toBe(1);
27-
expect(uut.calcPageIndex(245, {pageWidth: 120, children: [{}, {}, {}]})).toBe(2);
28-
expect(uut.calcPageIndex(481, {pageWidth: 120, children: [{}, {}, {}]})).toBe(2);
29-
expect(uut.calcPageIndex(5, {pageWidth: 120, children: [{}, {}, {}]})).toBe(0);
26+
expect(uut.calcPageIndex(120, {migrate: true, children: [{}, {}, {}]}, 120)).toBe(1);
27+
expect(uut.calcPageIndex(245, {migrate: true, children: [{}, {}, {}]}, 120)).toBe(2);
28+
expect(uut.calcPageIndex(481, {migrate: true, children: [{}, {}, {}]}, 120)).toBe(2);
29+
expect(uut.calcPageIndex(5, {migrate: true, children: [{}, {}, {}]}, 120)).toBe(0);
3030
});
3131

3232
it('should calcPageIndex (loop mode)', () => {
33-
expect(uut.calcPageIndex(120, {loop: true, pageWidth: 120, children: [{}, {}, {}]})).toBe(0);
34-
expect(uut.calcPageIndex(245, {loop: true, pageWidth: 120, children: [{}, {}, {}]})).toBe(1);
35-
expect(uut.calcPageIndex(481, {loop: true, pageWidth: 120, children: [{}, {}, {}]})).toBe(0);
36-
expect(uut.calcPageIndex(5, {loop: true, pageWidth: 120, children: [{}, {}, {}]})).toBe(2);
33+
expect(uut.calcPageIndex(120, {migrate: true, loop: true, children: [{}, {}, {}]}, 120)).toBe(0);
34+
expect(uut.calcPageIndex(245, {migrate: true, loop: true, children: [{}, {}, {}]}, 120)).toBe(1);
35+
expect(uut.calcPageIndex(481, {migrate: true, loop: true, children: [{}, {}, {}]}, 120)).toBe(0);
36+
expect(uut.calcPageIndex(5, {migrate: true, loop: true, children: [{}, {}, {}]}, 120)).toBe(2);
3737
});
3838
});
3939

4040
it('should return isOutsideLimits', () => {
41-
expect(uut.isOutOfBounds(120, {pageWidth: 120, children: [{}, {}, {}]})).toBe(false);
42-
expect(uut.isOutOfBounds(1125, {pageWidth: 375, children: [{}, {}, {}, {}]})).toBe(false);
43-
expect(uut.isOutOfBounds(0, {pageWidth: 120, children: [{}, {}, {}]})).toBe(true);
44-
expect(uut.isOutOfBounds(481, {pageWidth: 120, children: [{}, {}, {}]})).toBe(true);
45-
expect(uut.isOutOfBounds(1875, {pageWidth: 375, children: [{}, {}, {}, {}]})).toBe(true);
41+
expect(uut.isOutOfBounds(120, {migrate: true, children: [{}, {}, {}]}, 120)).toBe(false);
42+
expect(uut.isOutOfBounds(1125, {migrate: true, children: [{}, {}, {}, {}]}, 375)).toBe(false);
43+
expect(uut.isOutOfBounds(0, {migrate: true, children: [{}, {}, {}]}, 120)).toBe(true);
44+
expect(uut.isOutOfBounds(481, {migrate: true, children: [{}, {}, {}]}, 120)).toBe(true);
45+
expect(uut.isOutOfBounds(1875, {migrate: true, children: [{}, {}, {}, {}]}, 375)).toBe(true);
4646
});
4747

4848
it('should calcCarouselWidth', () => {
49-
expect(uut.calcCarouselWidth({pageWidth: 70, children: [{}, {}, {}]})).toBe(210);
50-
expect(uut.calcCarouselWidth({pageWidth: 50, children: [{}, {}, {}]})).toBe(150);
51-
expect(uut.calcCarouselWidth({pageWidth: 150, loop: true, children: [{}, {}, {}]})).toBe(750);
49+
expect(uut.calcCarouselWidth({migrate: true, pageWidth: 70, children: [{}, {}, {}]})).toBe(210);
50+
expect(uut.calcCarouselWidth({migrate: true, pageWidth: 50, children: [{}, {}, {}]})).toBe(150);
51+
expect(uut.calcCarouselWidth({migrate: true, pageWidth: 150, loop: true, children: [{}, {}, {}]})).toBe(750);
5252
});
5353
});

0 commit comments

Comments
 (0)