Skip to content

Commit fbe7f10

Browse files
ethansharethanshar
committed
update menu structure
1 parent b3145ce commit fbe7f10

File tree

2 files changed

+91
-62
lines changed

2 files changed

+91
-62
lines changed

‎demo/src/screens/MainScreen.js

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
55
import {StyleSheet, FlatList, ViewPropTypes} from 'react-native';
66
import {Navigation} from 'react-native-navigation';
77
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
8-
import {Assets, Colors, View, Text, TextField, Image, TabController} from 'react-native-ui-lib'; //eslint-disable-line
8+
import {Assets, Colors, View, Text, TouchableOpacity, TextField, Image, TabController} from 'react-native-ui-lib'; //eslint-disable-line
99
import {navigationData} from './MenuStructure';
1010

1111
const settingsIcon = require('../assets/icons/settings.png');
@@ -51,7 +51,7 @@ class MainScreen extends Component {
5151
onSearchBoxBlur = () => {
5252
this.closeSearchBox();
5353
this.filterExplorerScreens('');
54-
}
54+
};
5555

5656
getMenuData = () => {
5757
return this.props.navigationData || navigationData;
@@ -153,7 +153,7 @@ class MainScreen extends Component {
153153
rightButtonProps={{iconSource: Assets.icons.search, style: {marginRight: 12}}}
154154
/>
155155
);
156-
}
156+
};
157157

158158
renderItem = ({item}) => {
159159
const {renderItem} = this.props;
@@ -162,21 +162,32 @@ class MainScreen extends Component {
162162
return renderItem({item}, this.openScreen);
163163
}
164164

165-
return (
166-
<View centerV row marginB-10>
167-
<Image source={chevronIcon} style={{tintColor: Colors.dark10}} supportRTL/>
168-
<Text
169-
style={[item.deprecate && styles.entryTextDeprecated]}
170-
dark10
171-
marginL-10
172-
text50
165+
if (item.screen) {
166+
return (
167+
<TouchableOpacity
168+
centerV
169+
row
170+
spread
171+
paddingH-s5
172+
paddingV-s2
173173
onPress={() => this.openScreen(item)}
174174
onLongPress={() => this.setDefaultScreen(item)}
175+
activeBackgroundColor={Colors.blue40}
176+
activeOpacity={1}
175177
>
176-
{item.title}
177-
</Text>
178-
</View>
179-
);
178+
<Text style={[item.deprecate && styles.entryTextDeprecated]} dark10 text50>
179+
{item.title}
180+
</Text>
181+
<Image source={chevronIcon} style={{tintColor: Colors.dark10}} supportRTL/>
182+
</TouchableOpacity>
183+
);
184+
} else {
185+
return (
186+
<View paddingH-s5 marginV-s1 height={20} bg-grey80>
187+
<Text text80M>{item.title}</Text>
188+
</View>
189+
);
190+
}
180191
};
181192

182193
renderSearchResults(data) {
@@ -185,8 +196,8 @@ class MainScreen extends Component {
185196
return (
186197
<FlatList
187198
keyboardShouldPersistTaps="always"
188-
contentContainerStyle={{padding: 20}}
189199
data={flatData}
200+
contentContainerStyle={{paddingTop: 20}}
190201
keyExtractor={(item, index) => index.toString()}
191202
renderItem={this.renderItem}
192203
/>
@@ -201,7 +212,7 @@ class MainScreen extends Component {
201212
{_.map(data, (section, key) => {
202213
return (
203214
<TabController.TabPage key={key} index={index++}>
204-
<View padding-s5 flex style={pageStyle}>
215+
<View paddingT-20 flex style={pageStyle}>
205216
<FlatList
206217
showsVerticalScrollIndicator={false}
207218
data={section.screens}

‎demo/src/screens/MenuStructure.js

Lines changed: 63 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const navigationData = {
2-
Presets: {
3-
title: 'Presets',
2+
Foundation: {
3+
title: 'Foundation',
44
screens: [
55
{title: 'Border Radius', tags: 'corener border radius circle', screen: 'unicorn.style.BorderRadiusesScreen'},
66
{title: 'Colors', tags: 'palette rgb hex', screen: 'unicorn.style.ColorsScreen'},
@@ -20,36 +20,27 @@ export const navigationData = {
2020
Components: {
2121
title: 'Components',
2222
screens: [
23+
{title: 'Text', tags: 'text', screen: 'unicorn.components.TextScreen'},
24+
{title: 'View', tags: 'view modifiers', screen: 'unicorn.components.ViewScreen'},
25+
{title: 'Image', tags: 'image cover overlay', screen: 'unicorn.components.ImageScreen'},
26+
{title: 'Button', tags: 'button cta', screen: 'unicorn.components.ButtonsScreen'},
27+
{title: ''},
2328
{title: 'Action Bar', tags: 'action bar floating bottom', screen: 'unicorn.components.ActionBarScreen'},
24-
{title: 'Action Sheet', tags: 'action sheet cross-platform', screen: 'unicorn.components.ActionSheetScreen'},
2529
{title: 'Avatars', tags: 'avatar contact', screen: 'unicorn.components.AvatarsScreen'},
2630
{title: 'Badges', tags: 'badge', screen: 'unicorn.components.BadgesScreen'},
27-
{title: 'Buttons', tags: 'button cta', screen: 'unicorn.components.ButtonsScreen'},
2831
{title: 'Cards', tags: 'cards feed', screen: 'unicorn.components.CardsScreen'},
29-
{title: 'Carousel', tags: 'carousel', screen: 'unicorn.components.CarouselScreen'},
3032
{title: 'Connection Status Bar', tags: 'connection status bar', screen: 'unicorn.components.ConnectionStatusBar'},
31-
{title: 'Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.components.DialogScreen'},
32-
{title: 'Drawer', tags: 'drawer', screen: 'unicorn.components.DrawerScreen'},
33-
{title: 'Floating Button', tags: 'floating button', screen: 'unicorn.components.FloatingButtonScreen'},
34-
{title: 'Feature Highlight', tags: 'feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
35-
{title: 'Hint', tags: 'hints tooltip', screen: 'unicorn.components.HintsScreen'},
36-
{title: 'Image', tags: 'image cover overlay', screen: 'unicorn.components.ImageScreen'},
37-
{title: 'KeyboardAwareScrollView', tags: 'KeyboardAwareScrollView', screen: 'unicorn.components.KeyboardAwareScrollViewScreen'},
38-
{title: 'Overlays', tags: 'overlay image', screen: 'unicorn.components.OverlaysScreen'},
33+
// {title: 'Overlays', tags: 'overlay image', screen: 'unicorn.components.OverlaysScreen'},
3934
{title: 'Page Control', tags: 'page', screen: 'unicorn.components.PageControlScreen'},
40-
{title: 'Pan Dismissible', tags: 'pan swipe drag dismiss', screen: 'unicorn.components.PanDismissibleScreen'},
41-
{title: 'Pan Listener', tags: 'pan swipe drag listener', screen: 'unicorn.components.PanListenerScreen'},
42-
{title: 'Pan Responder', tags: 'pan swipe drag responder', screen: 'unicorn.components.PanResponderScreen'},
35+
{title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'},
4336
{title: 'ScrollBar', tags: 'scroll bar gradient', screen: 'unicorn.components.ScrollBarScreen'},
44-
{title: 'Shared Transition', tags: 'shared transition element', screen: 'unicorn.components.SharedTransitionScreen'},
37+
{
38+
title: 'Shared Transition',
39+
tags: 'shared transition element',
40+
screen: 'unicorn.components.SharedTransitionScreen'
41+
},
4542
{title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'},
46-
{title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
47-
{title: 'TabBar', tags: 'tab bar', screen: 'unicorn.components.TabBarScreen'},
48-
{title: 'Text', tags: 'text', screen: 'unicorn.components.TextScreen'},
49-
{title: 'Toast', tags: 'toast top bottom snackbar', screen: 'unicorn.components.ToastsScreen'},
50-
{title: 'View', tags: 'view modifiers', screen: 'unicorn.components.ViewScreen'},
51-
{title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'},
52-
{title: 'Wizard', tags: 'wizard', screen: 'unicorn.components.WizardScreen'}
43+
{title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'}
5344
]
5445
},
5546
Form: {
@@ -69,48 +60,75 @@ export const navigationData = {
6960
{title: 'Masked Inputs', tags: 'text input form mask', screen: 'unicorn.components.MaskedInputScreen'}
7061
]
7162
},
63+
Overlays: {
64+
title: 'Overlays',
65+
screens: [
66+
{title: 'Action Sheet', tags: 'action sheet cross-platform', screen: 'unicorn.components.ActionSheetScreen'},
67+
{title: 'Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.components.DialogScreen'},
68+
{title: 'Feature Highlight', tags: 'feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
69+
{title: 'Floating Button', tags: 'floating button', screen: 'unicorn.components.FloatingButtonScreen'},
70+
{title: 'Hint', tags: 'hints tooltip', screen: 'unicorn.components.HintsScreen'},
71+
{title: 'Toast', tags: 'toast top bottom snackbar', screen: 'unicorn.components.ToastsScreen'}
72+
]
73+
},
74+
Lists: {
75+
title: 'Lists',
76+
screens: [
77+
{title: 'Basic List', tags: 'basic list', screen: 'unicorn.lists.BasicListScreen'},
78+
{title: 'Contacts List', tags: 'list contacts', screen: 'unicorn.lists.ContactsListScreen'},
79+
{title: 'Conversation List', tags: 'list conversation', screen: 'unicorn.lists.ConversationListScreen'},
80+
{title: 'Drawer', tags: 'drawer', screen: 'unicorn.components.DrawerScreen'}
81+
]
82+
},
83+
LayoutsAndTemplates: {
84+
title: 'Layouts & Templates',
85+
screens: [
86+
{title: 'Carousel', tags: 'carousel', screen: 'unicorn.components.CarouselScreen'},
87+
{title: 'Loading Screen', tags: 'loading screen', screen: 'unicorn.screens.LoadingScreen'},
88+
{title: 'Modal Screen', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
89+
{title: 'State Screen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
90+
{title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
91+
{title: 'TabBar', tags: 'tab bar', screen: 'unicorn.components.TabBarScreen'},
92+
{title: 'Wizard', tags: 'wizard', screen: 'unicorn.components.WizardScreen'}
93+
]
94+
},
7295
Native: {
7396
title: 'Native',
7497
screens: [
98+
{
99+
title: 'KeyboardAwareScrollView',
100+
tags: 'KeyboardAwareScrollView',
101+
screen: 'unicorn.components.KeyboardAwareScrollViewScreen'
102+
},
75103
{
76104
title: 'Highlight Overlay',
77105
tags: 'native overlay',
78106
screen: 'unicorn.nativeComponents.HighlightOverlayViewScreen'
79107
},
80108
{title: 'Wheel Picker', tags: 'wheel picker', screen: 'unicorn.nativeComponents.WheelPickerViewScreen'},
81109
{title: 'SafeArea Spacer', tags: 'native safe area', screen: 'unicorn.nativeComponents.SafeAreaSpacerViewScreen'},
82-
{title: 'KeyboardTracking (iOS)', tags: 'KeyboardTracking', screen: 'unicorn.nativeComponents.KeyboardTrackingViewScreen'},
110+
{
111+
title: 'KeyboardTracking (iOS)',
112+
tags: 'KeyboardTracking',
113+
screen: 'unicorn.nativeComponents.KeyboardTrackingViewScreen'
114+
},
83115
{title: 'KeyboardInput', tags: 'KeyboardInput', screen: 'unicorn.nativeComponents.KeyboardInputViewScreen'}
84116
]
85117
},
86-
Screens: {
87-
title: 'Screens',
88-
screens: [
89-
{title: 'Loading Screen', tags: 'loading screen', screen: 'unicorn.screens.LoadingScreen'},
90-
{title: 'Modal Screen', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
91-
{title: 'State Screen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'}
92-
]
93-
},
94-
Lists: {
95-
title: 'Lists',
96-
screens: [
97-
{title: 'Basic List', tags: 'basic list', screen: 'unicorn.lists.BasicListScreen'},
98-
{title: 'Contacts List', tags: 'list contacts', screen: 'unicorn.lists.ContactsListScreen'},
99-
{title: 'Conversation List', tags: 'list conversation', screen: 'unicorn.lists.ConversationListScreen'}
100-
]
101-
},
102-
Animations: {
103-
title: 'Animations',
118+
AnimationsAndGestures: {
119+
title: 'Animations & Gestures',
104120
screens: [
105121
{title: 'Animated Image', tags: 'animated image', screen: 'unicorn.components.AnimatedImageScreen'},
106122
{title: 'List Animations', tags: 'animated card', screen: 'unicorn.animations.ListAnimationsScreen'},
107123
{title: 'Card Animations', tags: 'animated card', screen: 'unicorn.animations.CardAnimationsScreen'},
108124
{title: 'Card Scanner', tags: 'card scanner process', screen: 'unicorn.animations.CardScannerScreen'},
109-
{title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'}
125+
{title: 'Pan Dismissible', tags: 'pan swipe drag dismiss', screen: 'unicorn.components.PanDismissibleScreen'},
126+
{title: 'Pan Listener', tags: 'pan swipe drag listener', screen: 'unicorn.components.PanListenerScreen'},
127+
{title: 'Pan Responder', tags: 'pan swipe drag responder', screen: 'unicorn.components.PanResponderScreen'}
110128
]
111129
},
112130
Incubator: {
113-
title: 'Incubator',
131+
title: 'Incubator (Experimental)',
114132
screens: [
115133
{title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'}
116134
]

0 commit comments

Comments
 (0)