Skip to content

Commit b0e37e6

Browse files
ethansharethanshar
committed
Merge branch 'master' into feat/WheelPicker
2 parents 61273bf + 9f516cd commit b0e37e6

File tree

50 files changed

+1396
-935
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1396
-935
lines changed

‎demo/src/screens/componentScreens/AvatarsScreen.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,18 @@ const examples = [
9898
title: 'Empty Gravatar',
9999
backgroundColor: Colors.red60,
100100
source: {uri: 'https://www.gravatar.com/avatar/2497473d558a37020c558bf26e380a7c?d=blank'}
101+
},
102+
{
103+
title: 'With custom badge label',
104+
label: 'LD',
105+
backgroundColor: Colors.red60,
106+
badgePosition: 'BOTTOM_RIGHT',
107+
badgeProps: {
108+
label: '+2',
109+
size: 'large',
110+
borderWidth: 1.5,
111+
borderColor: Colors.white,
112+
}
101113
}
102114
];
103115

‎demo/src/screens/componentScreens/CarouselScreen.js renamed to ‎demo/src/screens/componentScreens/CarouselScreen.tsx

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,21 @@ const BACKGROUND_COLORS = [
3434
Colors.purple60
3535
];
3636

37-
class CarouselScreen extends Component {
38-
constructor(props) {
37+
interface Props {}
38+
39+
interface State {
40+
orientation: typeof Constants.orientation;
41+
width: number;
42+
limitShownPages: boolean;
43+
numberOfPagesShown: number;
44+
currentPage: number;
45+
autoplay: boolean;
46+
}
47+
48+
class CarouselScreen extends Component<Props ,State> {
49+
carousel = React.createRef<typeof Carousel>();
50+
51+
constructor(props: Props) {
3952
super(props);
4053

4154
this.state = {
@@ -69,12 +82,14 @@ class CarouselScreen extends Component {
6982
return Constants.windowWidth - Spacings.s5 * 2;
7083
};
7184

72-
onChangePage = (currentPage) => {
85+
onChangePage = (currentPage: number) => {
7386
this.setState({currentPage});
7487
};
7588

76-
onPagePress = (index) => {
77-
this.carousel.goToPage(index, true);
89+
onPagePress = (index: number) => {
90+
if (this.carousel && this.carousel.current) {
91+
this.carousel.current.goToPage(index, true);
92+
}
7893
};
7994

8095
render() {
@@ -108,8 +123,7 @@ class CarouselScreen extends Component {
108123

109124
<Carousel
110125
key={numberOfPagesShown}
111-
migrate
112-
ref={(r) => (this.carousel = r)}
126+
ref={this.carousel}
113127
//loop
114128
autoplay={autoplay}
115129
onChangePage={this.onChangePage}
@@ -118,7 +132,7 @@ class CarouselScreen extends Component {
118132
containerMarginHorizontal={Spacings.s2}
119133
initialPage={INITIAL_PAGE}
120134
containerStyle={{height: 160}}
121-
pageControlPosition={'under'}
135+
pageControlPosition={Carousel.pageControlPositions.UNDER}
122136
pageControlProps={{onPagePress: this.onPagePress, limitShownPages}}
123137
// showCounter
124138
allowAccessibleLayout
@@ -172,6 +186,7 @@ class CarouselScreen extends Component {
172186
}
173187
}
174188

189+
// @ts-ignore
175190
const Page = ({children, style, ...others}) => {
176191
return (
177192
<View {...others} style={[styles.page, style]}>

‎demo/src/screens/componentScreens/CheckboxScreen.tsx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React, {Component} from 'react';
2-
import {Checkbox, Assets, Text, View, Colors} from 'react-native-ui-lib'; //eslint-disable-line
3-
2+
import {Checkbox, Assets, Text, View, Colors, Spacings} from 'react-native-ui-lib'; //eslint-disable-line
43

54
class CheckboxScreen extends Component {
65
state = {
76
value1: false,
87
value2: false,
98
value3: true,
109
value4: true,
11-
value5: false
10+
value5: false,
11+
value6: false
1212
};
1313

1414
render() {
@@ -21,6 +21,13 @@ class CheckboxScreen extends Component {
2121
onValueChange={value1 => this.setState({value1})}
2222
style={{marginBottom: 20}}
2323
/>
24+
<Checkbox
25+
value={this.state.value6}
26+
label={'With label'}
27+
color={Colors.green20}
28+
onValueChange={value6 => this.setState({value6})}
29+
containerStyle={{marginBottom: 20, marginLeft: 75}}
30+
/>
2431
<Checkbox
2532
value={this.state.value2}
2633
onValueChange={value2 => this.setState({value2})}
@@ -40,7 +47,9 @@ class CheckboxScreen extends Component {
4047
style={{marginBottom: 20}}
4148
/>
4249
<View row marginB-20>
43-
<Text text70 centerV>Disabled: </Text>
50+
<Text text70 centerV>
51+
Disabled:{' '}
52+
</Text>
4453
<Checkbox
4554
disabled
4655
value={this.state.value5}

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

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -60,16 +60,24 @@ export default class ColorPickerScreen extends Component {
6060
return (
6161
<ScrollView style={styles.container} contentContainerStyle={{paddingBottom: 20}}>
6262
<View center bg-white marginV-10>
63-
<Text text60 margin-10 style={{color}}>Selected Color: {color}</Text>
63+
<Text text60 margin-10 style={{color}}>
64+
Selected Color: {color}
65+
</Text>
6466
<View center marginB-10 style={{height: 50, width: 200, backgroundColor: color}}>
65-
<Text text60 style={{color: textColor}}>{color}</Text>
67+
<Text text60 style={{color: textColor}}>
68+
{color}
69+
</Text>
6670
</View>
6771
</View>
6872
<View bg-white>
69-
<Text text60 marginL-20 marginB-4 marginT-24>Theme Color</Text>
73+
<Text text60 marginL-20 marginB-4 marginT-24>
74+
Theme Color
75+
</Text>
7076
<Text marginL-20>Choose a color for your place’s theme.</Text>
71-
<ColorPalette value={paletteValue} onValueChange={this.onPaletteValueChange} colors={colors}/>
72-
<Text marginL-20 marginT-16>Custom Colors</Text>
77+
<ColorPalette value={paletteValue} onValueChange={this.onPaletteValueChange} colors={colors} />
78+
<Text marginL-20 marginT-16>
79+
Custom Colors
80+
</Text>
7381
<ColorPicker
7482
initialColor={color}
7583
colors={customColors}
@@ -82,11 +90,19 @@ export default class ColorPickerScreen extends Component {
8290
</View>
8391

8492
<View marginV-10 bg-white>
85-
<Text center text60 marginT-10>Color Name</Text>
93+
<Text center text60 marginT-10>
94+
Color Name
95+
</Text>
8696
<View spread row margin-10 style={{backgroundColor: nearestColor}}>
87-
<Text margin-5 text70 style={{color: textColor}}>{nearestColor}</Text>
88-
<Text margin-5 text60 style={{color: textColor}}>{colorName}</Text>
89-
<Text margin-5 text70 style={{color: textColor}}>{isMapped}</Text>
97+
<Text margin-5 text70 style={{color: textColor}}>
98+
{nearestColor}
99+
</Text>
100+
<Text margin-5 text60 style={{color: textColor}}>
101+
{colorName}
102+
</Text>
103+
<Text margin-5 text70 style={{color: textColor}}>
104+
{isMapped}
105+
</Text>
90106
</View>
91107
</View>
92108
</ScrollView>

‎demo/src/screens/componentScreens/ExpandableSectionScreen.tsx

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from 'lodash';
22
import React, {PureComponent} from 'react';
3-
import {ScrollView, StyleSheet, TouchableOpacity} from 'react-native';
4-
import {Card, Text, Image, ListItem, Carousel, Spacings, View, ExpandableSection} from 'react-native-ui-lib';
3+
import {ScrollView, StyleSheet} from 'react-native';
4+
import {Card, Text, Image, ListItem, Carousel, Spacings, View, ExpandableSection, Switch} from 'react-native-ui-lib';
55

66
const cardImage2 = require('../../assets/images/empty-state.jpg');
77
const cardImage = require('../../assets/images/card-example.jpg');
@@ -43,7 +43,8 @@ const elements = [
4343

4444
class ExpandableSectionScreen extends PureComponent {
4545
state = {
46-
expanded: false
46+
expanded: false,
47+
top: false
4748
};
4849

4950
onExpand() {
@@ -52,14 +53,21 @@ class ExpandableSectionScreen extends PureComponent {
5253
});
5354
}
5455

56+
getChevron() {
57+
if (this.state.expanded) {
58+
return this.state.top ? chevronDown : chevronUp;
59+
}
60+
return this.state.top ? chevronUp : chevronDown;
61+
}
62+
5563
getHeaderElement() {
5664
return (
5765
<View>
5866
<Text margin-10 dark10 text60>
5967
ExpandableSection's sectionHeader
6068
</Text>
6169
<View style={styles.header}>
62-
<Image style={styles.icon} source={!this.state.expanded ? chevronUp : chevronDown} />
70+
<Image style={styles.icon} source={this.getChevron()} />
6371
</View>
6472
</View>
6573
);
@@ -80,11 +88,27 @@ class ExpandableSectionScreen extends PureComponent {
8088
}
8189

8290
render() {
83-
const {expanded} = this.state;
91+
const {expanded, top} = this.state;
8492

8593
return (
8694
<ScrollView>
87-
<ExpandableSection expanded={expanded} sectionHeader={this.getHeaderElement()} onPress={() => this.onExpand()}>
95+
<View row center margin-20>
96+
<Text dark10 text70 marginR-10>
97+
Open section on top
98+
</Text>
99+
<Switch
100+
value={this.state.top}
101+
onValueChange={() => {
102+
this.setState({top: !this.state.top});
103+
}}
104+
></Switch>
105+
</View>
106+
<ExpandableSection
107+
top={top}
108+
expanded={expanded}
109+
sectionHeader={this.getHeaderElement()}
110+
onPress={() => this.onExpand()}
111+
>
88112
{this.getBodyElement()}
89113
</ExpandableSection>
90114
<ListItem>

‎demo/src/screens/componentScreens/PageControlScreen.js renamed to ‎demo/src/screens/componentScreens/PageControlScreen.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default class PageControlScreen extends Component {
2222
this.setState({currentPage: this.state.currentPage + 1});
2323
}
2424

25-
onPagePress = (index) => {
25+
onPagePress = (index: number) => {
2626
this.setState({currentPage: index});
2727
}
2828

‎generatedTypes/commons/forwardRef.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@ export interface ForwardRefInjectedProps {
55
*/
66
forwardedRef: any;
77
}
8-
export default function forwardRef(WrappedComponent: React.ComponentType<any>): React.ComponentType<any>;
8+
export default function forwardRef<P = any>(WrappedComponent: React.ComponentType<P>): React.ComponentType<P>;

‎generatedTypes/commons/withScrollEnabler.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { LayoutChangeEvent } from 'react-native';
3-
export declare type ScrollEnablerProps = {
3+
declare type ScrollEnablerProps = {
44
onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
55
onLayout: (event: LayoutChangeEvent) => void;
66
scrollEnabled: boolean;

‎generatedTypes/commons/withScrollReached.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
3-
export declare type ScrollReachedProps = {
3+
declare type ScrollReachedProps = {
44
onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
55
/**
66
* Is the scroll at the start (or equal\smaller than the threshold if one was given)

0 commit comments

Comments
 (0)