unicorn-demo-app 7.31.0 → 7.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -7,6 +7,7 @@ import {Navigation} from 'react-native-navigation';
|
|
|
7
7
|
import {
|
|
8
8
|
Assets,
|
|
9
9
|
Colors,
|
|
10
|
+
Typography,
|
|
10
11
|
Spacings,
|
|
11
12
|
View,
|
|
12
13
|
Text,
|
|
@@ -19,7 +20,7 @@ import {
|
|
|
19
20
|
Dividers
|
|
20
21
|
} from 'react-native-ui-lib'; //eslint-disable-line
|
|
21
22
|
import {navigationData} from './MenuStructure';
|
|
22
|
-
import Storage, {DEFAULT_SCREEN} from '../storage';
|
|
23
|
+
import Storage, {DEFAULT_SCREEN, RECENT_SCREENS} from '../storage';
|
|
23
24
|
|
|
24
25
|
const settingsIcon = require('../assets/icons/settings.png');
|
|
25
26
|
const chevronIcon = require('../assets/icons/chevronRight.png');
|
|
@@ -52,12 +53,15 @@ class MainScreen extends Component {
|
|
|
52
53
|
constructor(props) {
|
|
53
54
|
super(props);
|
|
54
55
|
|
|
56
|
+
const recentScreens = Storage.getString(RECENT_SCREENS);
|
|
57
|
+
|
|
55
58
|
const data = props.navigationData || navigationData;
|
|
56
59
|
this.state = {
|
|
57
60
|
currentPage: 0,
|
|
58
61
|
filteredNavigationData: data,
|
|
59
62
|
chipsLabels: _.map(data, section => section.title),
|
|
60
63
|
sectionsData: _.map(data, section => ({title: section.title, data: section.screens})),
|
|
64
|
+
recentScreens: recentScreens ? JSON.parse(recentScreens) : [],
|
|
61
65
|
selectedSection: 0,
|
|
62
66
|
faderStart: false,
|
|
63
67
|
faderEnd: true
|
|
@@ -155,8 +159,21 @@ class MainScreen extends Component {
|
|
|
155
159
|
this.openScreen({customValue: item});
|
|
156
160
|
};
|
|
157
161
|
|
|
162
|
+
updateRecentScreens(screen) {
|
|
163
|
+
const {recentScreens} = this.state;
|
|
164
|
+
recentScreens.unshift(screen);
|
|
165
|
+
const uniqueArr = [...new Set(recentScreens.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
|
|
166
|
+
|
|
167
|
+
Storage.set(RECENT_SCREENS, JSON.stringify(uniqueArr));
|
|
168
|
+
|
|
169
|
+
this.setState({
|
|
170
|
+
recentScreens: uniqueArr
|
|
171
|
+
});
|
|
172
|
+
}
|
|
173
|
+
|
|
158
174
|
openScreen = ({customValue: row}) => {
|
|
159
175
|
this.closeSearchBox();
|
|
176
|
+
this.updateRecentScreens(row);
|
|
160
177
|
|
|
161
178
|
setTimeout(() => {
|
|
162
179
|
this.pushScreen(row);
|
|
@@ -303,6 +320,34 @@ class MainScreen extends Component {
|
|
|
303
320
|
return <SectionHeader section={section}/>;
|
|
304
321
|
};
|
|
305
322
|
|
|
323
|
+
renderRecentScreens = () => {
|
|
324
|
+
const {recentScreens} = this.state;
|
|
325
|
+
|
|
326
|
+
if (recentScreens.length > 0) {
|
|
327
|
+
return (
|
|
328
|
+
<View row paddingV-s2 paddingH-s5 centerV>
|
|
329
|
+
<Text text90BO marginR-s2>
|
|
330
|
+
Recent:
|
|
331
|
+
</Text>
|
|
332
|
+
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
|
|
333
|
+
{recentScreens.map(screen => {
|
|
334
|
+
return (
|
|
335
|
+
<Chip
|
|
336
|
+
marginR-s2
|
|
337
|
+
label={screen.title}
|
|
338
|
+
key={screen.title}
|
|
339
|
+
onPress={this.openScreen}
|
|
340
|
+
customValue={screen}
|
|
341
|
+
labelStyle={Typography.text100BO}
|
|
342
|
+
/>
|
|
343
|
+
);
|
|
344
|
+
})}
|
|
345
|
+
</ScrollView>
|
|
346
|
+
</View>
|
|
347
|
+
);
|
|
348
|
+
}
|
|
349
|
+
};
|
|
350
|
+
|
|
306
351
|
renderItem = ({item}) => {
|
|
307
352
|
const {renderItem} = this.props;
|
|
308
353
|
|
|
@@ -337,12 +382,10 @@ class MainScreen extends Component {
|
|
|
337
382
|
|
|
338
383
|
render() {
|
|
339
384
|
const {containerStyle} = this.props;
|
|
340
|
-
const {filteredNavigationData, filterText} = this.state;
|
|
385
|
+
const {filteredNavigationData, filterText, chipsLabels, sectionsData} = this.state;
|
|
341
386
|
const showNoResults = _.isEmpty(filteredNavigationData) && !!filterText;
|
|
342
387
|
const showResults = !_.isEmpty(filteredNavigationData) && !!filterText;
|
|
343
388
|
const showSectionList = !filterText;
|
|
344
|
-
const chipsLabels = this.state.chipsLabels;
|
|
345
|
-
const sectionsData = this.state.sectionsData;
|
|
346
389
|
|
|
347
390
|
return (
|
|
348
391
|
<View testID="demo_main_screen" flex style={containerStyle} useSafeArea>
|
|
@@ -366,6 +409,8 @@ class MainScreen extends Component {
|
|
|
366
409
|
</View>
|
|
367
410
|
)}
|
|
368
411
|
|
|
412
|
+
{this.renderRecentScreens()}
|
|
413
|
+
|
|
369
414
|
{showSectionList && (
|
|
370
415
|
<SectionList
|
|
371
416
|
sections={sectionsData}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _ from 'lodash';
|
|
2
2
|
import React, {Component} from 'react';
|
|
3
3
|
import {StyleSheet, I18nManager} from 'react-native';
|
|
4
|
-
import {Colors, View, Text, Picker, Incubator, Switch} from 'react-native-ui-lib'; //eslint-disable-line
|
|
4
|
+
import {Colors, View, Text, Picker, Incubator, Switch, Spacings} from 'react-native-ui-lib'; //eslint-disable-line
|
|
5
5
|
import {navigationData} from './MenuStructure';
|
|
6
6
|
import Storage, {DEFAULT_SCREEN, IS_RTL} from '../storage';
|
|
7
7
|
|
|
@@ -66,10 +66,15 @@ class SettingsScreen extends Component {
|
|
|
66
66
|
const {extraSettingsUI} = this.props;
|
|
67
67
|
const filteredScreens = _.filter(screens, screen => !_.isUndefined(screen.value));
|
|
68
68
|
|
|
69
|
+
const _extraSettingsUI = extraSettingsUI?.();
|
|
70
|
+
|
|
69
71
|
return (
|
|
70
72
|
<View flex padding-25 bg-grey80>
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
+
<Text text40 marginB-s5>
|
|
74
|
+
Settings
|
|
75
|
+
</Text>
|
|
76
|
+
|
|
77
|
+
<View style={styles.block}>
|
|
73
78
|
<Text text70 marginB-20>
|
|
74
79
|
Set default screen to open on app startup
|
|
75
80
|
</Text>
|
|
@@ -82,31 +87,27 @@ class SettingsScreen extends Component {
|
|
|
82
87
|
onChange={this.setDefaultScreen}
|
|
83
88
|
items={filteredScreens}
|
|
84
89
|
/>
|
|
90
|
+
</View>
|
|
85
91
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
<View center margin-5 padding-10>
|
|
93
|
-
<Text text70>{isRTL ? 'RIGHT to LEFT' : 'LEFT to RIGHT'}</Text>
|
|
94
|
-
</View>
|
|
95
|
-
|
|
96
|
-
<View row spread centerV style={[{padding: 12, borderTopWidth: 1}, styles.block]}>
|
|
97
|
-
<Switch value={isRTL} onValueChange={this.onDirectionChange}/>
|
|
98
|
-
<Text text80 grey20>
|
|
99
|
-
Force RTL
|
|
100
|
-
</Text>
|
|
101
|
-
</View>
|
|
92
|
+
<View style={styles.block} marginT-s4>
|
|
93
|
+
<View row spread centerV>
|
|
94
|
+
<Text text80 grey20>
|
|
95
|
+
Force RTL
|
|
96
|
+
</Text>
|
|
97
|
+
<Switch value={isRTL} onValueChange={this.onDirectionChange}/>
|
|
102
98
|
</View>
|
|
103
99
|
|
|
104
|
-
|
|
100
|
+
<View center marginT-5>
|
|
101
|
+
<Text text70>{isRTL ? 'RIGHT to LEFT' : 'LEFT to RIGHT'}</Text>
|
|
102
|
+
</View>
|
|
105
103
|
</View>
|
|
106
104
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
105
|
+
{_extraSettingsUI && (
|
|
106
|
+
<View marginT-s4 style={styles.block}>
|
|
107
|
+
{_extraSettingsUI}
|
|
108
|
+
</View>
|
|
109
|
+
)}
|
|
110
|
+
|
|
110
111
|
<Incubator.Toast
|
|
111
112
|
visible={showRefreshMessage}
|
|
112
113
|
message={`Default screen set to: ${defaultScreen?.label}. Please refresh the app.`}
|
|
@@ -118,8 +119,10 @@ class SettingsScreen extends Component {
|
|
|
118
119
|
|
|
119
120
|
const styles = StyleSheet.create({
|
|
120
121
|
block: {
|
|
121
|
-
|
|
122
|
-
|
|
122
|
+
borderWidth: 1,
|
|
123
|
+
borderColor: Colors.$outlineNeutral,
|
|
124
|
+
backgroundColor: Colors.grey80,
|
|
125
|
+
padding: Spacings.s3
|
|
123
126
|
}
|
|
124
127
|
});
|
|
125
128
|
|
|
@@ -7459,6 +7459,290 @@ exports[`TextField Screen renders screen 1`] = `
|
|
|
7459
7459
|
</View>
|
|
7460
7460
|
</View>
|
|
7461
7461
|
</View>
|
|
7462
|
+
<Text
|
|
7463
|
+
$textPrimary={true}
|
|
7464
|
+
marginB-s1={true}
|
|
7465
|
+
style={
|
|
7466
|
+
[
|
|
7467
|
+
{
|
|
7468
|
+
"backgroundColor": "transparent",
|
|
7469
|
+
"color": "#20303C",
|
|
7470
|
+
"writingDirection": "ltr",
|
|
7471
|
+
},
|
|
7472
|
+
undefined,
|
|
7473
|
+
{
|
|
7474
|
+
"color": "#5A48F5",
|
|
7475
|
+
},
|
|
7476
|
+
undefined,
|
|
7477
|
+
undefined,
|
|
7478
|
+
{
|
|
7479
|
+
"marginBottom": 4,
|
|
7480
|
+
},
|
|
7481
|
+
undefined,
|
|
7482
|
+
undefined,
|
|
7483
|
+
undefined,
|
|
7484
|
+
undefined,
|
|
7485
|
+
]
|
|
7486
|
+
}
|
|
7487
|
+
>
|
|
7488
|
+
leading/trailing accessory overflow (innerFlexBehavior)
|
|
7489
|
+
</Text>
|
|
7490
|
+
<View
|
|
7491
|
+
style={
|
|
7492
|
+
[
|
|
7493
|
+
undefined,
|
|
7494
|
+
undefined,
|
|
7495
|
+
undefined,
|
|
7496
|
+
undefined,
|
|
7497
|
+
undefined,
|
|
7498
|
+
undefined,
|
|
7499
|
+
undefined,
|
|
7500
|
+
undefined,
|
|
7501
|
+
undefined,
|
|
7502
|
+
]
|
|
7503
|
+
}
|
|
7504
|
+
>
|
|
7505
|
+
<View
|
|
7506
|
+
style={
|
|
7507
|
+
[
|
|
7508
|
+
undefined,
|
|
7509
|
+
undefined,
|
|
7510
|
+
undefined,
|
|
7511
|
+
undefined,
|
|
7512
|
+
undefined,
|
|
7513
|
+
undefined,
|
|
7514
|
+
undefined,
|
|
7515
|
+
undefined,
|
|
7516
|
+
[
|
|
7517
|
+
{},
|
|
7518
|
+
undefined,
|
|
7519
|
+
undefined,
|
|
7520
|
+
undefined,
|
|
7521
|
+
],
|
|
7522
|
+
]
|
|
7523
|
+
}
|
|
7524
|
+
>
|
|
7525
|
+
<View
|
|
7526
|
+
row={true}
|
|
7527
|
+
spread={true}
|
|
7528
|
+
style={
|
|
7529
|
+
[
|
|
7530
|
+
undefined,
|
|
7531
|
+
undefined,
|
|
7532
|
+
undefined,
|
|
7533
|
+
undefined,
|
|
7534
|
+
undefined,
|
|
7535
|
+
{},
|
|
7536
|
+
{},
|
|
7537
|
+
{
|
|
7538
|
+
"flexDirection": "row",
|
|
7539
|
+
"justifyContent": "space-between",
|
|
7540
|
+
},
|
|
7541
|
+
undefined,
|
|
7542
|
+
]
|
|
7543
|
+
}
|
|
7544
|
+
/>
|
|
7545
|
+
<View
|
|
7546
|
+
centerV={true}
|
|
7547
|
+
row={true}
|
|
7548
|
+
style={
|
|
7549
|
+
[
|
|
7550
|
+
undefined,
|
|
7551
|
+
undefined,
|
|
7552
|
+
undefined,
|
|
7553
|
+
undefined,
|
|
7554
|
+
undefined,
|
|
7555
|
+
{},
|
|
7556
|
+
{},
|
|
7557
|
+
{
|
|
7558
|
+
"alignItems": "center",
|
|
7559
|
+
"flexDirection": "row",
|
|
7560
|
+
},
|
|
7561
|
+
[
|
|
7562
|
+
{},
|
|
7563
|
+
[
|
|
7564
|
+
[
|
|
7565
|
+
{
|
|
7566
|
+
"borderBottomColor": "#E8ECF0",
|
|
7567
|
+
"borderBottomWidth": 1,
|
|
7568
|
+
"paddingBottom": 8,
|
|
7569
|
+
},
|
|
7570
|
+
undefined,
|
|
7571
|
+
],
|
|
7572
|
+
undefined,
|
|
7573
|
+
],
|
|
7574
|
+
],
|
|
7575
|
+
]
|
|
7576
|
+
}
|
|
7577
|
+
>
|
|
7578
|
+
<View
|
|
7579
|
+
style={
|
|
7580
|
+
[
|
|
7581
|
+
undefined,
|
|
7582
|
+
undefined,
|
|
7583
|
+
undefined,
|
|
7584
|
+
{
|
|
7585
|
+
"flex": 1,
|
|
7586
|
+
},
|
|
7587
|
+
undefined,
|
|
7588
|
+
{},
|
|
7589
|
+
{},
|
|
7590
|
+
{},
|
|
7591
|
+
undefined,
|
|
7592
|
+
]
|
|
7593
|
+
}
|
|
7594
|
+
>
|
|
7595
|
+
<TextInput
|
|
7596
|
+
accessibilityState={
|
|
7597
|
+
{
|
|
7598
|
+
"disabled": false,
|
|
7599
|
+
}
|
|
7600
|
+
}
|
|
7601
|
+
editable={true}
|
|
7602
|
+
onBlur={[Function]}
|
|
7603
|
+
onChangeText={[Function]}
|
|
7604
|
+
onFocus={[Function]}
|
|
7605
|
+
placeholder="Placeholder"
|
|
7606
|
+
placeholderTextColor="#6E7881"
|
|
7607
|
+
style={
|
|
7608
|
+
[
|
|
7609
|
+
{
|
|
7610
|
+
"flexGrow": 1,
|
|
7611
|
+
"paddingBottom": 0,
|
|
7612
|
+
"paddingTop": 0,
|
|
7613
|
+
"textAlign": "left",
|
|
7614
|
+
},
|
|
7615
|
+
{
|
|
7616
|
+
"color": "#20303C",
|
|
7617
|
+
},
|
|
7618
|
+
[
|
|
7619
|
+
{},
|
|
7620
|
+
undefined,
|
|
7621
|
+
{
|
|
7622
|
+
"fontFamily": "System",
|
|
7623
|
+
"fontSize": 16,
|
|
7624
|
+
"fontWeight": "400",
|
|
7625
|
+
"height": 24,
|
|
7626
|
+
"lineHeight": undefined,
|
|
7627
|
+
},
|
|
7628
|
+
undefined,
|
|
7629
|
+
],
|
|
7630
|
+
false,
|
|
7631
|
+
]
|
|
7632
|
+
}
|
|
7633
|
+
underlineColorAndroid="transparent"
|
|
7634
|
+
validateOnBlur={true}
|
|
7635
|
+
value="Abcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*"
|
|
7636
|
+
/>
|
|
7637
|
+
</View>
|
|
7638
|
+
<Image
|
|
7639
|
+
accessibilityRole="image"
|
|
7640
|
+
accessible={false}
|
|
7641
|
+
source={
|
|
7642
|
+
{
|
|
7643
|
+
"testUri": "../../../demo/src/assets/icons/search.png",
|
|
7644
|
+
}
|
|
7645
|
+
}
|
|
7646
|
+
style={
|
|
7647
|
+
[
|
|
7648
|
+
undefined,
|
|
7649
|
+
undefined,
|
|
7650
|
+
undefined,
|
|
7651
|
+
false,
|
|
7652
|
+
undefined,
|
|
7653
|
+
]
|
|
7654
|
+
}
|
|
7655
|
+
/>
|
|
7656
|
+
</View>
|
|
7657
|
+
<View
|
|
7658
|
+
row={true}
|
|
7659
|
+
spread={true}
|
|
7660
|
+
style={
|
|
7661
|
+
[
|
|
7662
|
+
undefined,
|
|
7663
|
+
undefined,
|
|
7664
|
+
undefined,
|
|
7665
|
+
undefined,
|
|
7666
|
+
undefined,
|
|
7667
|
+
{},
|
|
7668
|
+
{},
|
|
7669
|
+
{
|
|
7670
|
+
"flexDirection": "row",
|
|
7671
|
+
"justifyContent": "space-between",
|
|
7672
|
+
},
|
|
7673
|
+
undefined,
|
|
7674
|
+
]
|
|
7675
|
+
}
|
|
7676
|
+
>
|
|
7677
|
+
<View
|
|
7678
|
+
style={
|
|
7679
|
+
[
|
|
7680
|
+
undefined,
|
|
7681
|
+
undefined,
|
|
7682
|
+
undefined,
|
|
7683
|
+
{
|
|
7684
|
+
"flex": 1,
|
|
7685
|
+
},
|
|
7686
|
+
undefined,
|
|
7687
|
+
{},
|
|
7688
|
+
{},
|
|
7689
|
+
{},
|
|
7690
|
+
undefined,
|
|
7691
|
+
]
|
|
7692
|
+
}
|
|
7693
|
+
>
|
|
7694
|
+
<Text
|
|
7695
|
+
$textDangerLight={true}
|
|
7696
|
+
style={
|
|
7697
|
+
[
|
|
7698
|
+
{
|
|
7699
|
+
"backgroundColor": "transparent",
|
|
7700
|
+
"color": "#20303C",
|
|
7701
|
+
"writingDirection": "ltr",
|
|
7702
|
+
},
|
|
7703
|
+
undefined,
|
|
7704
|
+
{
|
|
7705
|
+
"color": "#FC3D2F",
|
|
7706
|
+
},
|
|
7707
|
+
undefined,
|
|
7708
|
+
undefined,
|
|
7709
|
+
{},
|
|
7710
|
+
undefined,
|
|
7711
|
+
undefined,
|
|
7712
|
+
undefined,
|
|
7713
|
+
[
|
|
7714
|
+
{
|
|
7715
|
+
"flexShrink": 1,
|
|
7716
|
+
"minHeight": 20,
|
|
7717
|
+
},
|
|
7718
|
+
[
|
|
7719
|
+
undefined,
|
|
7720
|
+
undefined,
|
|
7721
|
+
],
|
|
7722
|
+
],
|
|
7723
|
+
]
|
|
7724
|
+
}
|
|
7725
|
+
testID="undefined.validationMessage"
|
|
7726
|
+
/>
|
|
7727
|
+
</View>
|
|
7728
|
+
<View
|
|
7729
|
+
style={
|
|
7730
|
+
[
|
|
7731
|
+
undefined,
|
|
7732
|
+
undefined,
|
|
7733
|
+
undefined,
|
|
7734
|
+
undefined,
|
|
7735
|
+
undefined,
|
|
7736
|
+
undefined,
|
|
7737
|
+
undefined,
|
|
7738
|
+
undefined,
|
|
7739
|
+
undefined,
|
|
7740
|
+
]
|
|
7741
|
+
}
|
|
7742
|
+
/>
|
|
7743
|
+
</View>
|
|
7744
|
+
</View>
|
|
7745
|
+
</View>
|
|
7462
7746
|
</View>
|
|
7463
7747
|
<KeyboardTrackingViewTemp
|
|
7464
7748
|
pointerEvents="none"
|
|
@@ -508,6 +508,18 @@ export default class TextFieldScreen extends Component {
|
|
|
508
508
|
</Text>
|
|
509
509
|
<TextField placeholder="minutes" preset={preset}/>
|
|
510
510
|
</View>
|
|
511
|
+
|
|
512
|
+
<Text marginB-s1 $textPrimary>
|
|
513
|
+
leading/trailing accessory overflow (innerFlexBehavior)
|
|
514
|
+
</Text>
|
|
515
|
+
<View>
|
|
516
|
+
<TextField
|
|
517
|
+
placeholder="Placeholder"
|
|
518
|
+
value="Abcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*"
|
|
519
|
+
trailingAccessory={<Icon source={Assets.icons.demo.search}/>}
|
|
520
|
+
innerFlexBehavior
|
|
521
|
+
/>
|
|
522
|
+
</View>
|
|
511
523
|
</>
|
|
512
524
|
);
|
|
513
525
|
}
|