Skip to content

Commit 6e4535b

Browse files
M-i-k-e-lM-i-k-e-l
authored
Feat/page control with different sized dots (#640)
* PageControl - different size dots * PageControl - different size dots - refactor * PageControl - different size dots - remove unused state * Reset screen when number of pages is changed * Change picker to slider + fix slider in ExampleScreenPresenter * Refactor renderTouchableOpacity renderIndicator * margin right\left --> horizontal * Remove ThemeManager.primaryColor * Change compColor to activeColor * Change new Array to _.times * Change size to allow array and remove mediumSize & smallSize * Change size to allow array and remove mediumSize & smallSize (2) * Add the new pageControl to the PageControlScreen * Improve onPagePress
1 parent 2a40f02 commit 6e4535b

File tree

5 files changed

+275
-84
lines changed

5 files changed

+275
-84
lines changed

‎demo/src/screens/ExampleScreenPresenter.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export function renderColorOption(title,
5656
);
5757
}
5858

59-
export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, initial = 0}) {
59+
export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, initial = 0, sliderText = ''}) {
6060
const value = this.state[key];
6161
return (
6262
<View marginV-s2>
@@ -74,7 +74,7 @@ export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, ini
7474
onValueChange={value => this.setState({[key]: value})}
7575
/>
7676
<Text marginL-s4 text70>
77-
text{value}
77+
{sliderText}{value}
7878
</Text>
7979
</View>
8080
</View>

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

Lines changed: 60 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,91 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
33
import {StyleSheet, ScrollView} from 'react-native';
4-
import {Constants, Spacings, View, Text, Carousel, Image} from 'react-native-ui-lib'; // eslint-disable-line
5-
4+
import {Constants, Spacings, View, Text, Carousel, Image, Colors} from 'react-native-ui-lib';
5+
import {renderBooleanOption, renderSliderOption} from '../ExampleScreenPresenter';
66

77
const INITIAL_PAGE = 2;
8-
const WIDTH = Constants.screenWidth - (Spacings.s5 * 2);
8+
const WIDTH = Constants.screenWidth - Spacings.s5 * 2;
99
const IMAGES = [
1010
'https://images.pexels.com/photos/1212487/pexels-photo-1212487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
1111
'https://images.pexels.com/photos/1366630/pexels-photo-1366630.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
1212
'https://images.pexels.com/photos/1477459/pexels-photo-1477459.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
1313
'https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
1414
];
1515

16+
const BACKGROUND_COLORS = [
17+
Colors.red50,
18+
Colors.yellow20,
19+
Colors.purple50,
20+
Colors.green50,
21+
Colors.cyan50,
22+
Colors.purple20,
23+
Colors.blue60,
24+
Colors.red10,
25+
Colors.green20,
26+
Colors.purple60
27+
];
28+
1629
class CarouselScreen extends Component {
1730
state = {
31+
limitShownPages: false,
32+
numberOfPagesShown: 7,
1833
currentPage: INITIAL_PAGE
1934
};
2035

21-
onChangePage(index) {
22-
this.setState({currentPage: index});
23-
}
36+
onChangePage = currentPage => {
37+
this.setState({currentPage});
38+
};
2439

2540
onPagePress = index => {
2641
this.carousel.goToPage(index, true);
2742
};
2843

44+
toggleLimitShownPages = limitShownPages => {
45+
this.setState({limitShownPages});
46+
};
47+
48+
setNumberOfPagesShown = ({value: numberOfPagesShown}) => {
49+
this.setState({numberOfPagesShown, currentPage: INITIAL_PAGE});
50+
};
51+
2952
render() {
53+
const {limitShownPages, numberOfPagesShown} = this.state;
54+
3055
return (
3156
<ScrollView>
32-
<Text text30 margin-20>Carousel</Text>
57+
<Text text30 margin-20>
58+
Carousel
59+
</Text>
60+
<View marginH-20>
61+
{renderBooleanOption.call(this, 'Limit number of pages shown in page control', 'limitShownPages')}
62+
{renderSliderOption.call(this, 'Number of pages shown', 'numberOfPagesShown', {
63+
min: 5,
64+
max: 10,
65+
step: 1,
66+
initial: 7
67+
})}
68+
</View>
3369

3470
<Carousel
71+
key={numberOfPagesShown}
3572
migrate
3673
ref={r => (this.carousel = r)}
3774
// loop
38-
onChangePage={index => this.onChangePage(index)}
75+
onChangePage={this.onChangePage}
3976
pageWidth={WIDTH}
4077
// itemSpacings={Spacings.s3}
4178
initialPage={INITIAL_PAGE}
42-
containerStyle={{height: 160/* , flex: 1 */}}
79+
containerStyle={{height: 160}}
4380
pageControlPosition={'under'}
44-
pageControlProps={{onPagePress: this.onPagePress}}
81+
pageControlProps={{onPagePress: this.onPagePress, limitShownPages}}
4582
// showCounter
4683
>
47-
<Page bg-red50>
48-
<Text margin-15>PAGE 0</Text>
49-
</Page>
50-
<Page bg-yellow20>
51-
<Text margin-15>PAGE 1</Text>
52-
</Page>
53-
<Page bg-purple50>
54-
<Text margin-15>PAGE 2</Text>
55-
</Page>
56-
<Page bg-green50>
57-
<Text margin-15>PAGE 3</Text>
58-
</Page>
59-
<Page bg-cyan50>
60-
<Text margin-15>PAGE 4</Text>
61-
</Page>
62-
<Page bg-purple20>
63-
<Text margin-15>PAGE 5</Text>
64-
</Page>
65-
<Page bg-blue60>
66-
<Text margin-15>PAGE 6</Text>
67-
</Page>
84+
{_.map([...Array(numberOfPagesShown)], (item, index) => (
85+
<Page style={{backgroundColor: BACKGROUND_COLORS[index]}} key={index}>
86+
<Text margin-15>PAGE {index}</Text>
87+
</Page>
88+
))}
6889
</Carousel>
6990

7091
<View margin-20 center /*style={{...StyleSheet.absoluteFillObject}} */ pointerEvents="none">
@@ -82,7 +103,9 @@ class CarouselScreen extends Component {
82103
uri: image
83104
}}
84105
/>
85-
<Text white text50>Image {index}</Text>
106+
<Text white text50>
107+
Image {index}
108+
</Text>
86109
</View>
87110
);
88111
})}
@@ -93,15 +116,18 @@ class CarouselScreen extends Component {
93116
}
94117
}
95118

96-
const Page = ({children, ...others}) => {
119+
const Page = ({children, style, ...others}) => {
97120
return (
98-
<View {...others} style={styles.page}>
121+
<View {...others} style={[styles.page, style]}>
99122
{children}
100123
</View>
101124
);
102125
};
103126

104127
const styles = StyleSheet.create({
128+
picker: {
129+
marginHorizontal: 20
130+
},
105131
page: {
106132
flex: 1,
107133
borderWidth: 1,

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

Lines changed: 73 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,104 @@
11
import React, {Component} from 'react';
22
import {ScrollView, StyleSheet} from 'react-native';
3-
import {PageControl, Colors, Constants} from 'react-native-ui-lib';//eslint-disable-line
3+
import {PageControl, Colors, View, Button, Text} from 'react-native-ui-lib';
4+
import {renderBooleanOption, renderSliderOption} from '../ExampleScreenPresenter';
45

56
const containerStyle = {
6-
marginBottom: 40,
7+
marginBottom: 40
78
};
89

910
export default class PageControlScreen extends Component {
11+
state = {
12+
currentPage: 0,
13+
limitShownPages: false,
14+
numberOfPagesShown: 7
15+
};
16+
17+
prevPage = () => {
18+
this.setState({currentPage: this.state.currentPage - 1});
19+
}
20+
21+
nextPage = () => {
22+
this.setState({currentPage: this.state.currentPage + 1});
23+
}
24+
25+
onPagePress = (index) => {
26+
this.setState({currentPage: index});
27+
}
1028

1129
render() {
30+
const {currentPage, limitShownPages, numberOfPagesShown} = this.state;
31+
1232
return (
13-
<ScrollView contentContainerStyle={styles.container}>
33+
<ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
1434
<PageControl containerStyle={containerStyle} numOfPages={2} currentPage={0}/>
1535
<PageControl containerStyle={containerStyle} numOfPages={5} currentPage={2}/>
1636
<PageControl containerStyle={containerStyle} numOfPages={3} currentPage={2} color={Colors.red40}/>
1737
<PageControl containerStyle={containerStyle} numOfPages={10} currentPage={4} color={Colors.purple40}/>
18-
<PageControl containerStyle={containerStyle} numOfPages={10} currentPage={5} color={Colors.violet40} size={20}/>
19-
<PageControl containerStyle={containerStyle} numOfPages={10} currentPage={6} color={Colors.orange40} size={20}/>
2038
<PageControl
21-
containerStyle={containerStyle} numOfPages={10} currentPage={6} inactiveColor={Colors.dark70}
39+
containerStyle={containerStyle}
40+
numOfPages={10}
41+
currentPage={5}
42+
color={Colors.violet40}
43+
size={20}
44+
/>
45+
<PageControl
46+
containerStyle={containerStyle}
47+
numOfPages={10}
48+
currentPage={6}
49+
color={Colors.orange40}
50+
size={20}
2251
/>
52+
<PageControl containerStyle={containerStyle} numOfPages={10} currentPage={6} inactiveColor={Colors.dark70}/>
2353
<PageControl
24-
containerStyle={containerStyle} numOfPages={10} currentPage={6} inactiveColor={Colors.dark70}
54+
containerStyle={containerStyle}
55+
numOfPages={10}
56+
currentPage={6}
57+
inactiveColor={Colors.dark70}
2558
enlargeActive
2659
/>
2760
<PageControl
28-
containerStyle={containerStyle} numOfPages={10} currentPage={6} inactiveColor={Colors.dark70} enlargeActive
61+
containerStyle={containerStyle}
62+
numOfPages={10}
63+
currentPage={6}
64+
inactiveColor={Colors.dark70}
65+
enlargeActive
2966
spacing={10}
3067
/>
68+
<View marginH-20 width={'100%'}>
69+
{renderBooleanOption.call(this, 'Limit number of pages shown in page control', 'limitShownPages')}
70+
{renderSliderOption.call(this, 'Number of pages shown', 'numberOfPagesShown', {
71+
min: 5,
72+
max: 10,
73+
step: 1,
74+
initial: 7
75+
})}
76+
77+
<PageControl
78+
size={12}
79+
spacing={8}
80+
limitShownPages={limitShownPages}
81+
containerStyle={containerStyle}
82+
inactiveColor={Colors.dark60}
83+
color={Colors.dark20}
84+
numOfPages={numberOfPagesShown}
85+
currentPage={currentPage}
86+
onPagePress={this.onPagePress}
87+
/>
88+
<View row flex spread centerV>
89+
<Button label={'Prev page'} onPress={this.prevPage} disabled={currentPage === 0}/>
90+
<Text>{currentPage}</Text>
91+
<Button label={'Next page'} onPress={this.nextPage} disabled={currentPage === numberOfPagesShown - 1}/>
92+
</View>
93+
</View>
3194
</ScrollView>
3295
);
3396
}
3497
}
3598

3699
const styles = StyleSheet.create({
37100
container: {
38-
flex: 1,
39-
flexDirection: 'column',
40-
justifyContent: 'flex-start',
41101
alignItems: 'center',
42-
padding: 25,
43-
},
102+
padding: 25
103+
}
44104
});

‎demo/src/screens/componentScreens/TextFieldScreen/BasicTextFieldScreen.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@ export default class BasicTextFieldScreen extends Component {
9191
min: 30,
9292
max: 100,
9393
step: 10,
94-
initial: 70
94+
initial: 70,
95+
sliderText: 'text'
9596
})}
9697
{renderBooleanOption.call(this, 'Multiline', 'multiline')}
9798
{renderBooleanOption.call(this, 'Disabled', 'disabled')}

0 commit comments

Comments
 (0)