Skip to content

Commit 868cb5b

Browse files
M-i-k-e-lM-i-k-e-l
committed
Merge branch 'master' into release
2 parents 4855afe + ef461a8 commit 868cb5b

Some content is hidden

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

60 files changed

+1207
-100
lines changed

‎demo/src/assets/icons/drag.png

161 Bytes
Loading

‎demo/src/assets/icons/drag@1.5x.png

211 Bytes
Loading

‎demo/src/assets/icons/drag@2x.png

279 Bytes
Loading

‎demo/src/assets/icons/drag@3x.png

405 Bytes
Loading

‎demo/src/assets/icons/drag@4x.png

587 Bytes
Loading

‎demo/src/configurations.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import {Assets, Colors, Typography, Spacings, Incubator} from 'react-native-ui-l
33
export const loadDemoConfigurations = () => {
44
Assets.loadAssetsGroup('icons.demo', {
55
chevronDown: require('./assets/icons/chevronDown.png'),
6+
chevronRight: require('./assets/icons/chevronRight.png'),
67
add: require('./assets/icons/add.png'),
78
camera: require('./assets/icons/cameraSelected.png'),
89
close: require('./assets/icons/close.png'),
910
dashboard: require('./assets/icons/dashboard.png'),
11+
drag: require('./assets/icons/drag.png'),
1012
image: require('./assets/icons/image.png'),
1113
plus: require('./assets/icons/plus.png'),
1214
refresh: require('./assets/icons/refresh.png'),

‎demo/src/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,9 @@ module.exports = {
111111
get SkeletonViewScreen() {
112112
return require('./screens/componentScreens/SkeletonViewScreen').default;
113113
},
114+
get SortableListScreen() {
115+
return require('./screens/componentScreens/SortableListScreen').default;
116+
},
114117
get StepperScreen() {
115118
return require('./screens/componentScreens/StepperScreen').default;
116119
},

‎demo/src/screens/MenuStructure.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@ export const navigationData = {
8383
{title: 'Basic List', tags: 'basic list', screen: 'unicorn.lists.BasicListScreen'},
8484
{title: 'Contacts List', tags: 'list contacts', screen: 'unicorn.lists.ContactsListScreen'},
8585
{title: 'Conversation List', tags: 'list conversation', screen: 'unicorn.lists.ConversationListScreen'},
86-
{title: 'Drawer', tags: 'drawer', screen: 'unicorn.components.DrawerScreen'}
86+
{title: 'Drawer', tags: 'drawer', screen: 'unicorn.components.DrawerScreen'},
87+
{title: 'SortableList', tags: 'sortable list drag', screen: 'unicorn.components.SortableListScreen'}
8788
]
8889
},
8990
LayoutsAndTemplates: {
@@ -96,6 +97,7 @@ export const navigationData = {
9697
{title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
9798
{title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
9899
{title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
100+
{title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
99101
{
100102
title: 'withScrollEnabler',
101103
tags: 'scroll enabled withScrollEnabler',

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export default class DialogScreen extends Component {
5050
];
5151

5252
this.state = {
53-
panDirection: PanningProvider.Directions.DOWN,
53+
panDirection: Dialog.directions.DOWN,
5454
position: 'bottom',
5555
scroll: this.SCROLL_TYPE.NONE,
5656
showHeader: true,
@@ -114,7 +114,7 @@ export default class DialogScreen extends Component {
114114
return (
115115
<Text color={Colors.$textDangerLight}>It is recommended to have pannable header with scrollable content</Text>
116116
);
117-
} else if (showHeader && panDirection !== PanningProvider.Directions.DOWN) {
117+
} else if (showHeader && panDirection !== Dialog.directions.DOWN) {
118118
return <Text color={Colors.$textDangerLight}>It is recommended to have pannable header with direction=down</Text>;
119119
}
120120
};
@@ -270,10 +270,10 @@ Scroll: ${scroll}`;
270270
<Text $textDefault>Panning Direction:</Text>
271271
<View row marginV-10>
272272
<RadioButton value={null} label={'None'}/>
273-
<RadioButton value={PanningProvider.Directions.UP} label={'Up'} marginL-10/>
274-
<RadioButton value={PanningProvider.Directions.DOWN} label={'Down'} marginL-10/>
275-
<RadioButton value={PanningProvider.Directions.LEFT} label={'Left'} marginL-10/>
276-
<RadioButton value={PanningProvider.Directions.RIGHT} label={'Right'} marginL-10/>
273+
<RadioButton value={Dialog.directions.UP} label={'Up'} marginL-10/>
274+
<RadioButton value={Dialog.directions.DOWN} label={'Down'} marginL-10/>
275+
<RadioButton value={Dialog.directions.LEFT} label={'Left'} marginL-10/>
276+
<RadioButton value={Dialog.directions.RIGHT} label={'Right'} marginL-10/>
277277
</View>
278278
</RadioGroup>
279279

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

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {longOptions} from './PickerScreenLongOptions';
2222

2323
const tagIcon = require('../../assets/icons/tags.png');
2424
const dropdown = require('../../assets/icons/chevronDown.png');
25+
const dropdownIcon = <Icon source={dropdown} tintColor={Colors.$iconDefault}/>;
2526

2627
const contacts = _.map(contactsData, (c, index) => ({...c, value: index, label: c.name}));
2728

@@ -56,7 +57,7 @@ export default class PickerScreen extends Component {
5657
dialogHeader: DialogProps['renderPannableHeader'] = props => {
5758
const {title} = props;
5859
return (
59-
<Text margin-15 text60>
60+
<Text margin-15 text60 $textDefault>
6061
{title}
6162
</Text>
6263
);
@@ -76,7 +77,7 @@ export default class PickerScreen extends Component {
7677
height="45%"
7778
bottom
7879
useSafeArea
79-
containerStyle={{backgroundColor: Colors.white}}
80+
containerStyle={{backgroundColor: Colors.$backgroundDefault}}
8081
renderPannableHeader={this.dialogHeader}
8182
panDirection={PanningProvider.Directions.DOWN}
8283
pannableHeaderProps={{title: 'Custom modal'}}
@@ -90,7 +91,9 @@ export default class PickerScreen extends Component {
9091
return (
9192
<ScrollView keyboardShouldPersistTaps="always">
9293
<View flex padding-20>
93-
<Text text40>Picker</Text>
94+
<Text text40 $textDefault>
95+
Picker
96+
</Text>
9497
<Picker
9598
placeholder="Favorite Language"
9699
floatingPlaceholder
@@ -103,6 +106,7 @@ export default class PickerScreen extends Component {
103106
searchPlaceholder={'Search a language'}
104107
searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
105108
// onSearchChange={value => console.warn('value', value)}
109+
migrateTextField
106110
>
107111
{_.map(longOptions, option => (
108112
<Picker.Item key={option.value} value={option} label={''} disabled={option.disabled}/>
@@ -115,7 +119,8 @@ export default class PickerScreen extends Component {
115119
onChange={items => this.setState({languages: items})}
116120
mode={Picker.modes.MULTI}
117121
selectionLimit={3}
118-
rightIconSource={dropdown}
122+
trailingAccessory={dropdownIcon}
123+
migrateTextField
119124
>
120125
{_.map(options, option => (
121126
<Picker.Item key={option.value} value={option} label={''} disabled={option.disabled}/>
@@ -152,12 +157,13 @@ export default class PickerScreen extends Component {
152157
</Picker>
153158

154159
<Picker
155-
title="Custom modal"
160+
label="Custom modal"
156161
placeholder="Pick multiple Languages"
157162
value={this.state.customModalValues}
158163
onChange={items => this.setState({customModalValues: items})}
159164
mode={Picker.modes.MULTI}
160-
rightIconSource={dropdown}
165+
trailingAccessory={dropdownIcon}
166+
migrateTextField
161167
renderCustomModal={this.renderDialog}
162168
>
163169
{_.map(options, option => (
@@ -171,7 +177,7 @@ export default class PickerScreen extends Component {
171177
))}
172178
</Picker>
173179

174-
<Text marginB-10 text70>
180+
<Text marginB-10 text70 $textDefault>
175181
Custom Picker:
176182
</Text>
177183
<Picker
@@ -180,8 +186,12 @@ export default class PickerScreen extends Component {
180186
renderPicker={(_value?: any, label?: string) => {
181187
return (
182188
<View row>
183-
<Icon style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon}/>
184-
<Text grey10 text80>
189+
<Icon
190+
style={{marginRight: 1, height: 16, resizeMode: 'contain'}}
191+
source={tagIcon}
192+
tintColor={Colors.$iconDefault}
193+
/>
194+
<Text $textDefault text80>
185195
{label} Posts
186196
</Text>
187197
</View>
@@ -193,11 +203,11 @@ export default class PickerScreen extends Component {
193203
))}
194204
</Picker>
195205

196-
<Text text60 marginT-s5>
206+
<Text text60 marginT-s5 $textDefault>
197207
Migrated Pickers
198208
</Text>
199209

200-
<Text marginT-20 marginB-10 text70>
210+
<Text marginT-20 marginB-10 text70 $textDefault>
201211
Custom Picker Items:
202212
</Text>
203213
<Picker
@@ -214,12 +224,12 @@ export default class PickerScreen extends Component {
214224
{contact ? (
215225
<>
216226
<Avatar size={30} source={{uri: contact?.thumbnail}}/>
217-
<Text text70 marginL-10>
227+
<Text text70 marginL-10 $textDefault>
218228
{contact?.name}
219229
</Text>
220230
</>
221231
) : (
222-
<Text text70 grey30>
232+
<Text text70 $textNeutral>
223233
Pick a contact
224234
</Text>
225235
)}
@@ -239,7 +249,7 @@ export default class PickerScreen extends Component {
239249
style={{
240250
height: 56,
241251
borderBottomWidth: 1,
242-
borderColor: Colors.grey80
252+
borderColor: Colors.$backgroundNeutral
243253
}}
244254
paddingH-15
245255
row
@@ -248,11 +258,11 @@ export default class PickerScreen extends Component {
248258
>
249259
<View row centerV>
250260
<Avatar size={35} source={{uri: contact?.thumbnail}}/>
251-
<Text marginL-10 text70 grey10>
261+
<Text marginL-10 text70 $textDefault>
252262
{contact?.name}
253263
</Text>
254264
</View>
255-
{props.isSelected && <Icon source={Assets.icons.check}/>}
265+
{props.isSelected && <Icon source={Assets.icons.check} tintColor={Colors.$iconDefault}/>}
256266
</View>
257267
);
258268
}}

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import _ from 'lodash';
2+
import React, {useCallback} from 'react';
3+
import {StyleSheet} from 'react-native';
4+
import {SortableList, View, TouchableOpacity, Text, Icon, Assets, Colors} from 'react-native-ui-lib';
5+
import {renderHeader} from '../ExampleScreenPresenter';
6+
7+
interface Item {
8+
originalIndex: number;
9+
}
10+
11+
const data = _.times(30, index => {
12+
return {
13+
originalIndex: index
14+
};
15+
});
16+
17+
const SortableListScreen = () => {
18+
const keyExtractor = useCallback((item: Item) => {
19+
return `${item.originalIndex}`;
20+
}, []);
21+
22+
const onOrderChange = useCallback((newData: Item[]) => {
23+
console.log('New order:', newData);
24+
}, []);
25+
26+
const renderItem = useCallback(({item, index: _index}: {item: Item; index: number}) => {
27+
return (
28+
<TouchableOpacity
29+
style={styles.itemContainer}
30+
onPress={() => console.log('Original index is', item.originalIndex)}
31+
// overriding the BG color to anything other than white will cause Android's elevation to fail
32+
// backgroundColor={Colors.red30}
33+
centerV
34+
marginH-page
35+
>
36+
<View flex row spread centerV>
37+
<Icon source={Assets.icons.demo.drag} tintColor={Colors.$iconDisabled}/>
38+
<Text center $textDefault>
39+
{item.originalIndex}
40+
</Text>
41+
<Icon source={Assets.icons.demo.chevronRight} tintColor={Colors.$iconDefault}/>
42+
</View>
43+
</TouchableOpacity>
44+
);
45+
}, []);
46+
47+
return (
48+
<View flex bg-$backgroundDefault>
49+
{renderHeader('Sortable List', {'margin-10': true})}
50+
<View flex useSafeArea>
51+
<SortableList data={data} renderItem={renderItem} keyExtractor={keyExtractor} onOrderChange={onOrderChange}/>
52+
</View>
53+
</View>
54+
);
55+
};
56+
57+
export default SortableListScreen;
58+
const styles = StyleSheet.create({
59+
itemContainer: {
60+
height: 52,
61+
borderColor: Colors.$outlineDefault,
62+
borderBottomWidth: 1
63+
}
64+
});

‎demo/src/screens/componentScreens/TabControllerScreen/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ class TabControllerScreen extends Component<{}, State> {
174174
// iconColor={'green'}
175175
// selectedIconColor={'blue'}
176176
enableShadow
177-
activeBackgroundColor={Colors.$backgroundGeneralLight}
177+
activeBackgroundColor={Colors.$backgroundPrimaryLight}
178178
centerSelected={centerSelected}
179179
>
180180
{/* {this.renderTabItems()} */}

0 commit comments

Comments
 (0)