unicorn-demo-app 7.41.1 → 7.42.0-snapshot.6978
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
|
@@ -38,6 +38,7 @@ export const navigationData = {
|
|
|
38
38
|
{title: 'Page Control', tags: 'page', screen: 'unicorn.components.PageControlScreen'},
|
|
39
39
|
{title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'},
|
|
40
40
|
{title: 'ScrollBar', tags: 'scroll bar gradient', screen: 'unicorn.components.ScrollBarScreen'},
|
|
41
|
+
{title: 'SearchInputScreen', tags: 'search input', screen: 'unicorn.components.SearchInputScreen'},
|
|
41
42
|
{
|
|
42
43
|
title: 'Shared Transition',
|
|
43
44
|
tags: 'shared transition element',
|
|
@@ -99,16 +100,18 @@ export const navigationData = {
|
|
|
99
100
|
{title: 'Conversation List', tags: 'list conversation', screen: 'unicorn.lists.ConversationListScreen'},
|
|
100
101
|
{title: 'Drawer', tags: 'drawer', screen: 'unicorn.components.DrawerScreen'},
|
|
101
102
|
{title: 'SortableList', tags: 'sortable list drag', screen: 'unicorn.components.SortableListScreen'},
|
|
102
|
-
{
|
|
103
|
+
{
|
|
104
|
+
title: 'HorizontalSortableList',
|
|
105
|
+
tags: 'sortable horizontal list drag',
|
|
106
|
+
screen: 'unicorn.components.HorizontalSortableListScreen'
|
|
107
|
+
},
|
|
103
108
|
{title: 'GridList', tags: 'grid list', screen: 'unicorn.components.GridListScreen'},
|
|
104
109
|
{title: 'SortableGridList', tags: 'sort grid list drag', screen: 'unicorn.components.SortableGridListScreen'}
|
|
105
110
|
]
|
|
106
111
|
},
|
|
107
112
|
Charts: {
|
|
108
113
|
title: 'Charts',
|
|
109
|
-
screens: [
|
|
110
|
-
{title: 'PieChart', tags: 'pie chart data', screen: 'unicorn.components.PieChartScreen'}
|
|
111
|
-
]
|
|
114
|
+
screens: [{title: 'PieChart', tags: 'pie chart data', screen: 'unicorn.components.PieChartScreen'}]
|
|
112
115
|
},
|
|
113
116
|
LayoutsAndTemplates: {
|
|
114
117
|
title: 'Layouts & Templates',
|
|
@@ -120,7 +123,11 @@ export const navigationData = {
|
|
|
120
123
|
{title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
|
|
121
124
|
{title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
|
|
122
125
|
{title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
|
|
123
|
-
{
|
|
126
|
+
{
|
|
127
|
+
title: 'TabControllerWithStickyHeader',
|
|
128
|
+
tags: 'tabbar controller native sticky header',
|
|
129
|
+
screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'
|
|
130
|
+
},
|
|
124
131
|
{title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
|
|
125
132
|
{
|
|
126
133
|
title: 'withScrollEnabler',
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import React, {useCallback, useRef, useState} from 'react';
|
|
2
|
+
import {Alert} from 'react-native';
|
|
3
|
+
import {Colors, View, Text, Switch, SearchInput, SearchInputRef, Button, Icon, Assets} from 'react-native-ui-lib';
|
|
4
|
+
|
|
5
|
+
const SearchInputScreen = () => {
|
|
6
|
+
const [showCancelBtn, setShowCancelBtn] = useState(false);
|
|
7
|
+
const [showLoader, setShowLoader] = useState(false);
|
|
8
|
+
const [showCustomRightElement, setShowCustomRightElement] = useState(false);
|
|
9
|
+
const searchInput = useRef<SearchInputRef>();
|
|
10
|
+
|
|
11
|
+
const onChangeText = (text: string) => {
|
|
12
|
+
console.log('UILIB text: ', text);
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
const onDismiss = useCallback(() => {
|
|
16
|
+
Alert.alert('Cancel was pressed');
|
|
17
|
+
}, []);
|
|
18
|
+
|
|
19
|
+
const customRightElement = (
|
|
20
|
+
<View center marginH-s2>
|
|
21
|
+
<Icon source={Assets.icons.demo.check}/>
|
|
22
|
+
</View>
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<View style={{marginVertical: 5}}>
|
|
27
|
+
<Text center h3 $textDefault margin-5>
|
|
28
|
+
SearchInput
|
|
29
|
+
</Text>
|
|
30
|
+
|
|
31
|
+
<View>
|
|
32
|
+
<SearchInput
|
|
33
|
+
showLoader={showLoader}
|
|
34
|
+
ref={searchInput}
|
|
35
|
+
testID={'searchInput'}
|
|
36
|
+
value=""
|
|
37
|
+
placeholder="Search"
|
|
38
|
+
onDismiss={showCancelBtn ? onDismiss : undefined}
|
|
39
|
+
cancelButtonProps={{label: 'Cancel'}}
|
|
40
|
+
customRightElement={showCustomRightElement ? customRightElement : undefined}
|
|
41
|
+
/>
|
|
42
|
+
<View marginV-s2>
|
|
43
|
+
<SearchInput
|
|
44
|
+
showLoader={showLoader}
|
|
45
|
+
invertColors
|
|
46
|
+
value={''}
|
|
47
|
+
placeholder="Search with inverted colors"
|
|
48
|
+
style={{backgroundColor: Colors.$backgroundNeutralHeavy}}
|
|
49
|
+
onDismiss={showCancelBtn ? onDismiss : undefined}
|
|
50
|
+
cancelButtonProps={{label: 'Cancel'}}
|
|
51
|
+
onChangeText={onChangeText}
|
|
52
|
+
customRightElement={showCustomRightElement ? customRightElement : undefined}
|
|
53
|
+
/>
|
|
54
|
+
</View>
|
|
55
|
+
<SearchInput
|
|
56
|
+
showLoader={showLoader}
|
|
57
|
+
value={''}
|
|
58
|
+
placeholder="Search with custom colors"
|
|
59
|
+
onDismiss={showCancelBtn ? onDismiss : undefined}
|
|
60
|
+
cancelButtonProps={{label: 'Cancel'}}
|
|
61
|
+
onChangeText={onChangeText}
|
|
62
|
+
style={{backgroundColor: Colors.purple20}}
|
|
63
|
+
placeholderTextColor={Colors.white}
|
|
64
|
+
containerStyle={{color: Colors.white}}
|
|
65
|
+
customRightElement={showCustomRightElement ? customRightElement : undefined}
|
|
66
|
+
/>
|
|
67
|
+
</View>
|
|
68
|
+
|
|
69
|
+
<View marginV-s2>
|
|
70
|
+
<Text center h3 $textDefault margin-5>
|
|
71
|
+
Search Input Presets:
|
|
72
|
+
</Text>
|
|
73
|
+
<View margin-s2>
|
|
74
|
+
<Text marginL-s3 marginV-s2>
|
|
75
|
+
Default:
|
|
76
|
+
</Text>
|
|
77
|
+
<SearchInput
|
|
78
|
+
showLoader={showLoader}
|
|
79
|
+
testID={'searchInput'}
|
|
80
|
+
value=""
|
|
81
|
+
placeholder="Search"
|
|
82
|
+
onDismiss={showCancelBtn ? onDismiss : undefined}
|
|
83
|
+
cancelButtonProps={{label: 'Cancel'}}
|
|
84
|
+
customRightElement={showCustomRightElement ? customRightElement : undefined}
|
|
85
|
+
/>
|
|
86
|
+
</View>
|
|
87
|
+
<Text marginL-s3 marginV-s2>
|
|
88
|
+
Prominent:
|
|
89
|
+
</Text>
|
|
90
|
+
<SearchInput
|
|
91
|
+
showLoader={showLoader}
|
|
92
|
+
testID={'searchInput'}
|
|
93
|
+
value=""
|
|
94
|
+
placeholder="Search"
|
|
95
|
+
onDismiss={showCancelBtn ? onDismiss : undefined}
|
|
96
|
+
cancelButtonProps={{label: 'Cancel'}}
|
|
97
|
+
preset={'prominent'}
|
|
98
|
+
customRightElement={showCustomRightElement ? customRightElement : undefined}
|
|
99
|
+
/>
|
|
100
|
+
</View>
|
|
101
|
+
|
|
102
|
+
<View marginT-s8 marginH-s3>
|
|
103
|
+
<Text bodyBold>Settings:</Text>
|
|
104
|
+
<View row marginV-s2>
|
|
105
|
+
<Switch
|
|
106
|
+
value={showCancelBtn}
|
|
107
|
+
onValueChange={value => setShowCancelBtn(value)}
|
|
108
|
+
onColor={Colors.$iconSuccessLight}
|
|
109
|
+
/>
|
|
110
|
+
<Text marginL-s4>Toggle cancel button</Text>
|
|
111
|
+
</View>
|
|
112
|
+
<View row marginV-s2>
|
|
113
|
+
<Switch
|
|
114
|
+
value={showCustomRightElement}
|
|
115
|
+
onValueChange={value => setShowCustomRightElement(value)}
|
|
116
|
+
onColor={Colors.$iconSuccessLight}
|
|
117
|
+
/>
|
|
118
|
+
<Text marginL-s4>Toggle Custom right element</Text>
|
|
119
|
+
</View>
|
|
120
|
+
<View row marginV-s2>
|
|
121
|
+
<Switch value={showLoader} onValueChange={value => setShowLoader(value)} onColor={Colors.$iconSuccessLight}/>
|
|
122
|
+
<Text marginL-s4>Toggle loader</Text>
|
|
123
|
+
</View>
|
|
124
|
+
<View padding-10 marginV-s1>
|
|
125
|
+
<Text>Actions: on the first example</Text>
|
|
126
|
+
<View row spread marginV-s1>
|
|
127
|
+
<Button size={Button.sizes.small} label={'Blur'} onPress={() => searchInput?.current?.blur()}/>
|
|
128
|
+
<Button size={Button.sizes.small} label={'Focus'} onPress={() => searchInput?.current?.focus()}/>
|
|
129
|
+
<Button size={Button.sizes.small} label={'Clear'} onPress={() => searchInput?.current?.clear()}/>
|
|
130
|
+
</View>
|
|
131
|
+
</View>
|
|
132
|
+
</View>
|
|
133
|
+
</View>
|
|
134
|
+
);
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
export default SearchInputScreen;
|
|
@@ -42,6 +42,7 @@ export function registerScreens(registrar) {
|
|
|
42
42
|
registrar('unicorn.components.RadioButtonScreen', () => require('./RadioButtonScreen').default);
|
|
43
43
|
registrar('unicorn.components.ScrollBarScreen', () => require('./ScrollBarScreen').default);
|
|
44
44
|
registrar('unicorn.components.SectionsWheelPickerScreen', () => require('./SectionsWheelPickerScreen').default);
|
|
45
|
+
registrar('unicorn.components.SearchInputScreen', () => require('./SearchInputScreen').default);
|
|
45
46
|
registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
|
|
46
47
|
registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
|
|
47
48
|
registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
|
|
@@ -53,7 +54,8 @@ export function registerScreens(registrar) {
|
|
|
53
54
|
registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
|
|
54
55
|
registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);
|
|
55
56
|
registrar('unicorn.components.TabControllerScreen', () => require('./TabControllerScreen').default);
|
|
56
|
-
registrar('unicorn.components.TabControllerWithStickyHeaderScreen',
|
|
57
|
+
registrar('unicorn.components.TabControllerWithStickyHeaderScreen',
|
|
58
|
+
() => require('./TabControllerWithStickyHeaderScreen').default);
|
|
57
59
|
registrar('unicorn.components.TextFieldScreen', () => require('./TextFieldScreen').default);
|
|
58
60
|
registrar('unicorn.components.TextScreen', () => require('./TextScreen').default);
|
|
59
61
|
registrar('unicorn.components.ToastsScreen', () => require('./ToastsScreen').default);
|