Skip to content

Commit 58ad34d

Browse files
ethansharethanshar
committed
Merge branch 'master' into release
2 parents 17859b7 + a76f59a commit 58ad34d

File tree

27 files changed

+358
-159
lines changed

27 files changed

+358
-159
lines changed

‎demo/src/demoApp.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ function getDefaultNavigationStyle() {
7979
},
8080
layout: {
8181
backgroundColor: Colors.white,
82-
orientation: ['portrait'],
82+
orientation: ['portrait', 'landscape']
8383
},
8484
topBar: {
8585
visible: true,

‎demo/src/screens/MainScreen.js

Lines changed: 75 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,31 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
3+
import PropTypes from 'prop-types';
34
import autobind from 'react-autobind';
4-
import {StyleSheet, FlatList} from 'react-native';
5+
import {StyleSheet, FlatList, ViewPropTypes} from 'react-native';
56
import {Navigation} from 'react-native-navigation';
6-
import {ThemeManager, Constants, Assets, Colors, View, Text, Button, Carousel, TextField, Image} from 'react-native-ui-lib'; //eslint-disable-line
7+
import {
8+
ThemeManager,
9+
Constants,
10+
Assets,
11+
Colors,
12+
View,
13+
Text,
14+
Button,
15+
Carousel,
16+
TextField,
17+
Image,
18+
} from 'react-native-ui-lib'; //eslint-disable-line
719
import {navigationData} from './MenuStructure';
820

21+
export default class MainScreen extends Component {
22+
static propTypes = {
23+
containerStyle: ViewPropTypes.style,
24+
renderItem: PropTypes.func,
25+
renderSectionTitle: PropTypes.func,
26+
pageStyle: ViewPropTypes.style,
27+
};
928

10-
export default class UiLibExplorerMenu extends Component {
1129
constructor(props) {
1230
super(props);
1331
autobind(this);
@@ -34,9 +52,7 @@ export default class UiLibExplorerMenu extends Component {
3452

3553
/** Events */
3654
onChangePage(newPage) {
37-
this.setState({
38-
currentPage: newPage,
39-
});
55+
this.setState({currentPage: newPage});
4056
}
4157

4258
onSearchBoxBlur() {
@@ -65,7 +81,7 @@ export default class UiLibExplorerMenu extends Component {
6581
};
6682
}
6783

68-
navigationButtonPressed = (event) => {
84+
navigationButtonPressed = event => {
6985
const {buttonId} = event;
7086
const data = this.getMenuData();
7187

@@ -77,6 +93,7 @@ export default class UiLibExplorerMenu extends Component {
7793
});
7894
break;
7995
case 'uilib.searchButton':
96+
this.input.focus();
8097
this.toggleTopBar(false);
8198
break;
8299
default:
@@ -123,7 +140,7 @@ export default class UiLibExplorerMenu extends Component {
123140
}
124141

125142
/** Actions */
126-
toggleTopBar = (shouldShow) => {
143+
toggleTopBar = shouldShow => {
127144
Navigation.mergeOptions(this.props.componentId, {
128145
topBar: {
129146
visible: shouldShow,
@@ -134,14 +151,16 @@ export default class UiLibExplorerMenu extends Component {
134151

135152
closeSearchBox() {
136153
this.toggleTopBar(true);
154+
this.input.blur();
137155
}
138156

139157
openScreen(row) {
140158
this.closeSearchBox();
141-
setImmediate(() => {
159+
160+
setTimeout(() => {
142161
this.filterExplorerScreens('');
143-
});
144-
this.pushScreen(row);
162+
this.pushScreen(row);
163+
}, 0);
145164
}
146165

147166
filterExplorerScreens(filterText) {
@@ -152,7 +171,7 @@ export default class UiLibExplorerMenu extends Component {
152171
filteredNavigationData = data;
153172
} else {
154173
_.each(data, (menuSection, menuSectionKey) => {
155-
const filteredMenuSection = _.filter(menuSection.screens, (menuItem) => {
174+
const filteredMenuSection = _.filter(menuSection.screens, menuItem => {
156175
const {title, description, tags} = menuItem;
157176
return (
158177
_.includes(_.lowerCase(title), _.toLower(filterText)) ||
@@ -178,12 +197,11 @@ export default class UiLibExplorerMenu extends Component {
178197
return (
179198
<View row spread style={{height: Constants.isIOS ? (Constants.isIphoneX ? 80 : 60) : 56}}>
180199
<TextField
181-
ref={r => (this.toggledSearch = r)}
200+
ref={r => (this.input = r)}
201+
value={this.state.filterText}
182202
placeholder="Search your component.."
183203
onChangeText={this.filterExplorerScreens}
184204
onBlur={this.onSearchBoxBlur}
185-
onDismiss={this.onSearchBoxBlur}
186-
value={this.state.filterText}
187205
style={{
188206
marginTop: Constants.isIOS ? Constants.statusBarHeight + 10 : 14,
189207
marginLeft: 16,
@@ -196,17 +214,23 @@ export default class UiLibExplorerMenu extends Component {
196214
style={{marginRight: 16, marginTop: Constants.isIOS ? Constants.statusBarHeight : 0}}
197215
iconSource={Assets.icons.search}
198216
size={'small'}
199-
onPress={this.onSearchBoxBlur}
200217
backgroundColor={'transparent'}
218+
onPress={this.onSearchBoxBlur}
201219
/>
202220
</View>
203221
);
204222
}
205223

206224
renderItem({item}) {
225+
const {renderItem} = this.props;
226+
227+
if (renderItem) {
228+
return renderItem({item}, this.openScreen);
229+
}
230+
207231
return (
208232
<View centerV row paddingL-20 marginB-10>
209-
<Image source={Assets.icons.chevronRight} style={{tintColor: Colors.dark10}} supportRTL/>
233+
<Image source={Assets.icons.chevronRight} style={{tintColor: Colors.dark10}} supportRTL />
210234
<Text
211235
style={[item.deprecate && styles.entryTextDeprecated]}
212236
dark10
@@ -254,7 +278,24 @@ export default class UiLibExplorerMenu extends Component {
254278
);
255279
}
256280

281+
renderSectionTitle(title) {
282+
const {renderSectionTitle} = this.props;
283+
284+
if (renderSectionTitle) {
285+
return renderSectionTitle(title);
286+
}
287+
288+
return (
289+
<View style={styles.pageTitleContainer}>
290+
<Text text40 style={{alignSelf: 'flex-start'}}>
291+
{title}
292+
</Text>
293+
</View>
294+
);
295+
}
296+
257297
renderCarousel(data) {
298+
const {renderItem, pageStyle} = this.props;
258299
const dividerTransforms = [-10, -55, -20];
259300
const dividerWidths = ['60%', '75%', '90%'];
260301
const keys = _.keys(data);
@@ -263,10 +304,8 @@ export default class UiLibExplorerMenu extends Component {
263304
<Carousel onChangePage={this.onChangePage} ref={carousel => (this.carousel = carousel)}>
264305
{_.map(data, (section, key) => {
265306
return (
266-
<View key={key} style={styles.page}>
267-
<View style={styles.pageTitleContainer}>
268-
<Text text40 style={{alignSelf: 'flex-start'}}>{section.title}</Text>
269-
</View>
307+
<View key={key} style={[styles.page, pageStyle]}>
308+
{this.renderSectionTitle(section.title)}
270309
<View
271310
style={[
272311
styles.pageTitleExtraDivider,
@@ -275,7 +314,12 @@ export default class UiLibExplorerMenu extends Component {
275314
]}
276315
/>
277316
<View flex>
278-
<FlatList data={section.screens} keyExtractor={item => item.title} renderItem={this.renderItem} />
317+
<FlatList
318+
showsVerticalScrollIndicator={false}
319+
data={section.screens}
320+
keyExtractor={item => item.title}
321+
renderItem={this.renderItem}
322+
/>
279323
</View>
280324
</View>
281325
);
@@ -288,26 +332,25 @@ export default class UiLibExplorerMenu extends Component {
288332
const flatData = _.flatMap(data);
289333

290334
return (
291-
<View paddingH-24>
292-
<FlatList
293-
keyboardShouldPersistTaps='always'
294-
data={flatData}
295-
keyExtractor={(item, index) => index.toString()}
296-
renderItem={this.renderItem}
297-
/>
298-
</View>
335+
<FlatList
336+
keyboardShouldPersistTaps="always"
337+
data={flatData}
338+
keyExtractor={(item, index) => index.toString()}
339+
renderItem={this.renderItem}
340+
/>
299341
);
300342
}
301343

302344
render() {
345+
const {containerStyle} = this.props;
303346
const {filteredNavigationData, filterText} = this.state;
304347
const showNoResults = _.isEmpty(filteredNavigationData) && !!filterText;
305348
const showResults = !_.isEmpty(filteredNavigationData) && !!filterText;
306349
const showCarousel = !filterText;
307350
const data = this.getMenuData();
308351

309352
return (
310-
<View testID="demo_main_screen" flex bg-dark80>
353+
<View testID="demo_main_screen" flex bg-dark80 style={containerStyle}>
311354
{this.renderHeader()}
312355
{showNoResults && (
313356
<View paddingH-24>
@@ -347,7 +390,7 @@ const styles = StyleSheet.create({
347390
},
348391
pageTitleExtraDivider: {
349392
marginTop: 5,
350-
marginBottom: 22,
393+
// marginBottom: 22,
351394
},
352395
entryTextDeprecated: {
353396
textDecorationLine: 'line-through',

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default class HintsScreen extends Component {
1919

2020
toggleHintPosition = () => {
2121
this.setState({
22-
showBottomHint: !this.state.showBottomHint,
22+
showBottomHint: !this.state.showBottomHint
2323
});
2424
};
2525

@@ -31,24 +31,24 @@ export default class HintsScreen extends Component {
3131
targetPosition,
3232
useShortMessage,
3333
useSideTip,
34-
useTargetFrame,
34+
useTargetFrame
3535
} = this.state;
3636
const targetFrame = {x: 140, y: 100, width: 10, height: 10};
3737
const message = useShortMessage
3838
? 'Add other cool and useful stuff.'
3939
: 'Add other cool and useful stuff through adding apps to your visitors to enjoy.';
4040

4141
return (
42-
<View flex>
42+
<View>
4343
<View
4444
flex
4545
padding-20
46-
paddingT-110
46+
paddingT-120
4747
bg-dark80
4848
style={{zIndex: 10}}
4949
key={useTargetFrame ? 'withTargetFrame' : 'withElement'}
5050
>
51-
{/* <Button bg-purple30 label="Background" style={{position: 'absolute', right: 50, bottom: 100}} /> */}
51+
{/* <Button bg-purple30 label="Background" style={{position: 'absolute', right: 50, bottom: 100}}/> */}
5252
<Hint
5353
visible={showHint}
5454
// color={Colors.orange30}
@@ -93,7 +93,7 @@ export default class HintsScreen extends Component {
9393
top: targetFrame.y,
9494
left: targetFrame.x,
9595
width: targetFrame.width,
96-
height: targetFrame.height,
96+
height: targetFrame.height
9797
}}
9898
/>
9999
)}
@@ -108,9 +108,9 @@ export default class HintsScreen extends Component {
108108
onValueChange={value => this.setState({targetPosition: value})}
109109
>
110110
<Text marginR-10>Button Position:</Text>
111-
<RadioButton value={'flex-start'} label={'Left'} marginR-10 />
112-
<RadioButton value={'center'} label={'Center'} marginR-10 />
113-
<RadioButton value={'flex-end'} label={'Right'} marginR-10 />
111+
<RadioButton value={'flex-start'} label={'Left'} marginR-10/>
112+
<RadioButton value={'center'} label={'Center'} marginR-10/>
113+
<RadioButton value={'flex-end'} label={'Right'} marginR-10/>
114114
</RadioGroup>
115115

116116
<RadioGroup
@@ -121,28 +121,28 @@ export default class HintsScreen extends Component {
121121
onValueChange={value => this.setState({useSideTip: value})}
122122
>
123123
<Text marginR-10>Tip:</Text>
124-
<RadioButton value={null} label={'Default'} marginR-10 />
125-
<RadioButton value label={'Side Tip'} marginR-10 />
126-
<RadioButton value={false} label={'Middle Tip'} marginR-10 />
124+
<RadioButton value={null} label={'Default'} marginR-10/>
125+
<RadioButton value label={'Side Tip'} marginR-10/>
126+
<RadioButton value={false} label={'Middle Tip'} marginR-10/>
127127
</RadioGroup>
128128

129129
<View row centerV marginV-10>
130-
<Switch value={showBottomHint} onValueChange={this.toggleHintPosition} />
130+
<Switch value={showBottomHint} onValueChange={this.toggleHintPosition}/>
131131
<Text marginL-10>Toggle Hint Position</Text>
132132
</View>
133133

134134
<View row centerV marginV-10>
135-
<Switch value={useShortMessage} onValueChange={() => this.setState({useShortMessage: !useShortMessage})} />
135+
<Switch value={useShortMessage} onValueChange={() => this.setState({useShortMessage: !useShortMessage})}/>
136136
<Text marginL-10>Toggle Message</Text>
137137
</View>
138138

139139
<View row centerV marginV-10>
140-
<Switch value={showIcon} onValueChange={value => this.setState({showIcon: value})} />
140+
<Switch value={showIcon} onValueChange={value => this.setState({showIcon: value})}/>
141141
<Text marginL-10>Toggle Icon</Text>
142142
</View>
143143

144144
<View row centerV marginV-10>
145-
<Switch value={useTargetFrame} onValueChange={value => this.setState({useTargetFrame: value})} />
145+
<Switch value={useTargetFrame} onValueChange={value => this.setState({useTargetFrame: value})}/>
146146
<Text marginL-10>Use random position</Text>
147147
</View>
148148
</View>

‎demo/src/screens/styleScreens/SpacingsScreen.js

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
1+
import _ from 'lodash';
12
import React, {Component} from 'react';
23
import {ScrollView} from 'react-native';
3-
import _ from 'lodash';
4-
import {View, Text, Colors, Spacings} from 'react-native-ui-lib'; //eslint-disable-line
4+
import {View, Text, Spacings} from 'react-native-ui-lib'; //eslint-disable-line
55

6-
class SpacingsScreen extends Component {
7-
state = {};
6+
7+
export default class SpacingsScreen extends Component {
8+
89
render() {
910
return (
1011
<ScrollView showsVerticalScrollIndicator={false}>
1112
<View padding-18>
1213
<Text text30 dark10 marginB-20>Spacings</Text>
1314
<View>
1415
{_.map(Spacings, (value, key) => {
16+
if (!_.isNumber(value)) {
17+
return;
18+
}
19+
1520
return (
1621
<View key={key} marginB-12>
1722
<View row spread bottom>
18-
<Text text60 dark10>
19-
{key}
20-
</Text>
23+
<Text text60 dark10>{key}</Text>
2124
<Text dark30 text90>{value}</Text>
2225
</View>
23-
<View height={value} bg-red80 right />
26+
<View height={value} bg-red80 right/>
2427
</View>
2528
);
2629
})}
@@ -30,5 +33,3 @@ class SpacingsScreen extends Component {
3033
);
3134
}
3235
}
33-
34-
export default SpacingsScreen;

0 commit comments

Comments
 (0)