Skip to content

Commit df863f5

Browse files
imdevanimdevan
authored
Merge pull request #16 from imdevan/update-theme
2 parents 7525d9a + d18f70b commit df863f5

File tree

4 files changed

+114
-32
lines changed

4 files changed

+114
-32
lines changed

‎examples/App.tsx‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,46 @@ const EXAMPLES: ExampleProps[] = [{
1414
title: "Multiple Select Badge Mode",
1515
description: "Multiple select example - with badges",
1616
multiple: true,
17-
dropdownProps: {mode: "BADGE"},
17+
dropdownProps: {mode: "BADGE", showBadgeDot: false},
18+
},{
19+
title: "Multiple Select Badge Mode with Dots",
20+
description: "Multiple select example - with badges and dots",
21+
multiple: true,
22+
dropdownProps: {mode: "BADGE", showBadgeDot: true},
23+
},{
24+
title: "Customized Multiple Select Badge Mode",
25+
description: "Multiple select example - with badges",
26+
multiple: true,
27+
dropdownProps: {
28+
mode: "BADGE",
29+
showBadgeDot: false,
30+
badgeDotStyle: {},
31+
badgeColors: '#d5c4a1', // Badge Colors currentlly overwites badgeStyle background color
32+
placeholderStyle: {color: '#83a598'},
33+
badgeStyle: {
34+
// background: '#d5c4a1',
35+
borderColor: '#282828',
36+
borderWidth: 2,
37+
borderStyle: 'solid',
38+
},
39+
badgeTextStyle: {
40+
color: '#282828'
41+
},
42+
style: {
43+
backgroundColor: '#fbf1c7',
44+
borderColor: '#b16286',
45+
cursor: 'pointer'
46+
},
47+
customItemContainerStyle: {
48+
},
49+
listItemContainerStyle: {
50+
backgroundColor: '#fbf1c7',
51+
borderColor: '#b16286'
52+
},
53+
listItemLabelStyle: {
54+
color: '#b16286'
55+
},
56+
},
1857
},{
1958
title: "Autoscroll Example",
2059
description: "This is the default dropdown picker - with autoscroll",

‎src/components/Picker.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ function Picker({
149149
searchable = false,
150150
searchContainerStyle = {},
151151
searchPlaceholder = null,
152-
searchPlaceholderTextColor = Colors.GREY,
152+
searchPlaceholderTextColor = Colors.GREY, // Todo: this default should come from the theme?
153153
searchTextInputProps = {},
154154
searchTextInputStyle = {},
155155
searchWithRegionalAccents = false,

‎src/themes/dark/index.js‎

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { StyleSheet } from 'react-native';
2-
32
import Colors from '../../constants/colors';
43

54
export const ICONS = {
@@ -9,6 +8,28 @@ export const ICONS = {
98
CLOSE: require('./icons/close.png'),
109
};
1110

11+
12+
/**
13+
* Pulled out colors for clairity and easeier rework
14+
*/
15+
export const THEME = {
16+
badgeDotBackgroundColor: Colors.GREY,
17+
badgeBackgroundColor: Colors.ALTO,
18+
dropDownContainerBackgroundColor: Colors.EBONY_CLAY,
19+
dropDownContainerBorderColor: Colors.BLACK,
20+
itemSeparatorBackgroundColor: Colors.SHUTTLE_GREY,
21+
labelColor: Colors.HEATHER,
22+
ListItemLabelColor: Colors.HEATHER,
23+
modalContentContainerBackgroundColor: Colors.EBONY_CLAY,
24+
modalTitleColor: Colors.HEATHER,
25+
listMessageTextColor: Colors.HEATHER,
26+
searchContainerBorderBottomColor: Colors.SHUTTLE_GREY,
27+
searchTextInputBorderColor: Colors.SHUTTLE_GREY,
28+
searchTextInputColor: Colors.WHITE,
29+
backgroundColor: Colors.EBONY_CLAY,
30+
borderColor: Colors.BLACK
31+
}
32+
1233
export default StyleSheet.create({
1334
arrowIcon: {
1435
height: 20,
@@ -18,7 +39,7 @@ export default StyleSheet.create({
1839
marginLeft: 10,
1940
},
2041
badgeDotStyle: {
21-
backgroundColor: Colors.GREY,
42+
backgroundColor: THEME.badgeDotBackgroundColor,
2243
borderRadius: 10 / 2,
2344
height: 10,
2445
marginRight: 8,
@@ -29,7 +50,7 @@ export default StyleSheet.create({
2950
},
3051
badgeStyle: {
3152
alignItems: 'center',
32-
backgroundColor: Colors.ALTO,
53+
backgroundColor: THEME.badgeBackgroundColor,
3354
borderRadius: 10,
3455
flexDirection: 'row',
3556
paddingHorizontal: 10,
@@ -50,8 +71,8 @@ export default StyleSheet.create({
5071
fontStyle: 'italic',
5172
},
5273
dropDownContainer: {
53-
backgroundColor: Colors.EBONY_CLAY,
54-
borderColor: Colors.BLACK,
74+
backgroundColor: THEME.dropDownContainerBackgroundColor,
75+
borderColor: THEME.dropDownContainerBorderColor,
5576
borderRadius: 8,
5677
borderWidth: 1,
5778
overflow: 'hidden',
@@ -66,7 +87,7 @@ export default StyleSheet.create({
6687
},
6788
extendableBadgeItemContainer: {
6889
marginEnd: 7,
69-
marginVertical: 3,
90+
marginVertical: 3
7091
},
7192
flatListContentContainer: {
7293
flexGrow: 1,
@@ -75,11 +96,11 @@ export default StyleSheet.create({
7596
marginRight: 10,
7697
},
7798
itemSeparator: {
78-
backgroundColor: Colors.SHUTTLE_GREY,
99+
backgroundColor: THEME.itemSeparatorBackgroundColor,
79100
height: 1,
80101
},
81102
label: {
82-
color: Colors.HEATHER,
103+
color: THEME.labelColor,
83104
flex: 1,
84105
},
85106
labelContainer: {
@@ -105,7 +126,7 @@ export default StyleSheet.create({
105126
paddingHorizontal: 10,
106127
},
107128
listItemLabel: {
108-
color: Colors.HEATHER,
129+
color: THEME.ListItemLabelColor,
109130
flex: 1,
110131
},
111132
listMessageContainer: {
@@ -115,30 +136,30 @@ export default StyleSheet.create({
115136
padding: 10,
116137
},
117138
listMessageText: {
118-
color: Colors.HEATHER,
139+
color: THEME.listMessageTextColor,
119140
},
120141
listParentContainer: {},
121142
listParentLabel: {},
122143
modalContentContainer: {
123-
backgroundColor: Colors.EBONY_CLAY,
144+
backgroundColor: THEME.modalContentContainerBackgroundColor,
124145
flexGrow: 1,
125146
},
126147
modalTitle: {
127-
color: Colors.HEATHER,
148+
color: THEME.modalTitleColor,
128149
fontSize: 18,
129150
},
130151
searchContainer: {
131152
alignItems: 'center',
132-
borderBottomColor: Colors.SHUTTLE_GREY,
153+
borderBottomColor: THEME.searchContainerBorderBottomColor,
133154
borderBottomWidth: 1,
134155
flexDirection: 'row',
135156
padding: 10,
136157
},
137158
searchTextInput: {
138-
borderColor: Colors.SHUTTLE_GREY,
159+
borderColor: THEME.searchTextInputBorderColor,
139160
borderRadius: 8,
140161
borderWidth: 1,
141-
color: Colors.WHITE,
162+
color: THEME.searchTextInputColor,
142163
flexGrow: 1,
143164
flexShrink: 1,
144165
margin: 0,
@@ -149,8 +170,8 @@ export default StyleSheet.create({
149170
selectedItemLabel: {},
150171
style: {
151172
alignItems: 'center',
152-
backgroundColor: Colors.EBONY_CLAY,
153-
borderColor: Colors.BLACK,
173+
backgroundColor: THEME.backgroundColor,
174+
borderColor: THEME.borderColor,
154175
borderRadius: 8,
155176
borderWidth: 1,
156177
flexDirection: 'row',

‎src/themes/light/index.js‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,27 @@ export const ICONS = {
99
CLOSE: require('./icons/close.png'),
1010
};
1111

12+
/**
13+
* Pulled out colors for clairity and easeier rework
14+
*/
15+
export const THEME = {
16+
badgeDotBackgroundColor: Colors.GREY,
17+
badgeBackgroundColor: Colors.ALTO,
18+
dropDownContainerBackgroundColor: Colors.WHITE,
19+
dropDownContainerBorderColor: Colors.BLACK,
20+
itemSeparatorBackgroundColor: Colors.BLACK,
21+
labelColor: Colors.BLACK,
22+
listItemLabelColor: Colors.BLACK,
23+
modalContentContainerBackgroundColor: Colors.WHITE,
24+
modalTitleColor: Colors.BLACK,
25+
listMessageTextColor: Colors.BLACK, // not currently used
26+
searchContainerBorderBottomColor: Colors.BLACK,
27+
searchTextInputBorderColor: Colors.BLACK,
28+
searchTextInputColor: Colors.BLACK,
29+
backgroundColor: Colors.WHITE,
30+
borderColor: Colors.BLACK
31+
}
32+
1233
export default StyleSheet.create({
1334
arrowIcon: {
1435
height: 20,
@@ -18,7 +39,7 @@ export default StyleSheet.create({
1839
marginLeft: 10,
1940
},
2041
badgeDotStyle: {
21-
backgroundColor: Colors.GREY,
42+
backgroundColor: THEME.badgeDotBackgroundColor,
2243
borderRadius: 10 / 2,
2344
height: 10,
2445
marginRight: 8,
@@ -29,7 +50,7 @@ export default StyleSheet.create({
2950
},
3051
badgeStyle: {
3152
alignItems: 'center',
32-
backgroundColor: Colors.ALTO,
53+
backgroundColor: THEME.badgeBackgroundColor,
3354
borderRadius: 10,
3455
flexDirection: 'row',
3556
paddingHorizontal: 10,
@@ -50,8 +71,8 @@ export default StyleSheet.create({
5071
fontStyle: 'italic',
5172
},
5273
dropDownContainer: {
53-
backgroundColor: Colors.WHITE,
54-
borderColor: Colors.BLACK,
74+
backgroundColor: THEME.dropDownContainerBackgroundColor,
75+
borderColor: THEME.dropDownContainerBorderColor,
5576
borderRadius: 8,
5677
borderWidth: 1,
5778
overflow: 'hidden',
@@ -75,11 +96,11 @@ export default StyleSheet.create({
7596
marginRight: 10,
7697
},
7798
itemSeparator: {
78-
backgroundColor: Colors.BLACK,
99+
backgroundColor: THEME.itemSeparatorBackgroundColor,
79100
height: 1,
80101
},
81102
label: {
82-
color: Colors.BLACK,
103+
color: THEME.labelColor,
83104
flex: 1,
84105
},
85106
labelContainer: {
@@ -105,7 +126,7 @@ export default StyleSheet.create({
105126
paddingHorizontal: 10,
106127
},
107128
listItemLabel: {
108-
color: Colors.BLACK,
129+
color: THEME.listItemLabelColor,
109130
flex: 1,
110131
},
111132
listMessageContainer: {
@@ -118,24 +139,25 @@ export default StyleSheet.create({
118139
listParentContainer: {},
119140
listParentLabel: {},
120141
modalContentContainer: {
142+
// TODO: add background color
121143
flexGrow: 1,
122144
},
123145
modalTitle: {
124-
color: Colors.BLACK,
146+
color: THEME.modalTitleColor,
125147
fontSize: 18,
126148
},
127149
searchContainer: {
128150
alignItems: 'center',
129-
borderBottomColor: Colors.BLACK,
151+
borderBottomColor: THEME.searchContainerBorderBottomColor,
130152
borderBottomWidth: 1,
131153
flexDirection: 'row',
132154
padding: 10,
133155
},
134156
searchTextInput: {
135-
borderColor: Colors.BLACK,
157+
borderColor: THEME.searchTextInputBorderColor,
136158
borderRadius: 8,
137159
borderWidth: 1,
138-
color: Colors.BLACK,
160+
color: THEME.searchTextInputColor,
139161
flexGrow: 1,
140162
flexShrink: 1,
141163
margin: 0,
@@ -146,8 +168,8 @@ export default StyleSheet.create({
146168
selectedItemLabel: {},
147169
style: {
148170
alignItems: 'center',
149-
backgroundColor: Colors.WHITE,
150-
borderColor: Colors.BLACK,
171+
backgroundColor: THEME.backgroundColor,
172+
borderColor: THEME.borderColor,
151173
borderRadius: 8,
152174
borderWidth: 1,
153175
flexDirection: 'row',

0 commit comments

Comments
 (0)