Refactor theme and add custom theme example

examples/App.tsx

@@ -14,7 +14,46 @@ const EXAMPLES: ExampleProps[] = [{
   title: "Multiple Select Badge Mode",
   description: "Multiple select example - with badges",
   multiple: true,
-  dropdownProps: {mode: "BADGE"},
+  dropdownProps: {mode: "BADGE", showBadgeDot: false},
+},{
+  title: "Multiple Select Badge Mode with Dots",
+  description: "Multiple select example - with badges and dots",
+  multiple: true,
+  dropdownProps: {mode: "BADGE", showBadgeDot: true},
+},{
+  title: "Customized Multiple Select Badge Mode",
+  description: "Multiple select example - with badges",
+  multiple: true,
+  dropdownProps: {
+    mode: "BADGE", 
+    showBadgeDot: false,
+    badgeDotStyle: {},
+    badgeColors: '#d5c4a1', // Badge Colors currentlly overwites badgeStyle background color
+    placeholderStyle: {color: '#83a598'},
+    badgeStyle: {
+      // background: '#d5c4a1',
+      borderColor: '#282828',
+      borderWidth: 2, 
+      borderStyle: 'solid',
+    },
+    badgeTextStyle: {
+      color: '#282828'
+    },
+    style: {
+      backgroundColor: '#fbf1c7',
+      borderColor: '#b16286',
+      cursor: 'pointer'
+    },
+    customItemContainerStyle: {
+    },
+    listItemContainerStyle: {
+      backgroundColor: '#fbf1c7',
+      borderColor: '#b16286'
+    },
+    listItemLabelStyle: {
+      color: '#b16286'
+    },
+  },
 },{
   title: "Autoscroll Example",
   description: "This is the default dropdown picker - with autoscroll",

src/components/Picker.js

@@ -149,7 +149,7 @@ function Picker({
   searchable = false,
   searchContainerStyle = {},
   searchPlaceholder = null,
-  searchPlaceholderTextColor = Colors.GREY,
+  searchPlaceholderTextColor = Colors.GREY, // Todo: this default should come from the theme? 
   searchTextInputProps = {},
   searchTextInputStyle = {},
   searchWithRegionalAccents = false,

src/themes/dark/index.js

@@ -1,5 +1,4 @@
 import { StyleSheet } from 'react-native';
-
 import Colors from '../../constants/colors';
 
 export const ICONS = {
@@ -9,6 +8,28 @@ export const ICONS = {
   CLOSE: require('./icons/close.png'),
 };
 
+
+/**
+ *  Pulled out colors for clairity and easeier rework
+ */
+export const THEME = {
+  badgeDotBackgroundColor: Colors.GREY,
+  badgeBackgroundColor: Colors.ALTO,
+  dropDownContainerBackgroundColor: Colors.EBONY_CLAY,
+  dropDownContainerBorderColor: Colors.BLACK,
+  itemSeparatorBackgroundColor: Colors.SHUTTLE_GREY,
+  labelColor: Colors.HEATHER,
+  ListItemLabelColor: Colors.HEATHER,
+  modalContentContainerBackgroundColor: Colors.EBONY_CLAY,
+  modalTitleColor: Colors.HEATHER,
+  listMessageTextColor: Colors.HEATHER,
+  searchContainerBorderBottomColor: Colors.SHUTTLE_GREY,
+  searchTextInputBorderColor: Colors.SHUTTLE_GREY,
+  searchTextInputColor: Colors.WHITE,
+  backgroundColor: Colors.EBONY_CLAY,
+  borderColor: Colors.BLACK
+}
+
 export default StyleSheet.create({
   arrowIcon: {
     height: 20,
@@ -18,7 +39,7 @@ export default StyleSheet.create({
     marginLeft: 10,
   },
   badgeDotStyle: {
-    backgroundColor: Colors.GREY,
+    backgroundColor: THEME.badgeDotBackgroundColor,
     borderRadius: 10 / 2,
     height: 10,
     marginRight: 8,
@@ -29,7 +50,7 @@ export default StyleSheet.create({
   },
   badgeStyle: {
     alignItems: 'center',
-    backgroundColor: Colors.ALTO,
+    backgroundColor: THEME.badgeBackgroundColor,
     borderRadius: 10,
     flexDirection: 'row',
     paddingHorizontal: 10,
@@ -50,8 +71,8 @@ export default StyleSheet.create({
     fontStyle: 'italic',
   },
   dropDownContainer: {
-    backgroundColor: Colors.EBONY_CLAY,
-    borderColor: Colors.BLACK,
+    backgroundColor: THEME.dropDownContainerBackgroundColor,
+    borderColor: THEME.dropDownContainerBorderColor,
     borderRadius: 8,
     borderWidth: 1,
     overflow: 'hidden',
@@ -66,7 +87,7 @@ export default StyleSheet.create({
   },
   extendableBadgeItemContainer: {
     marginEnd: 7,
-    marginVertical: 3,
+    marginVertical: 3
   },
   flatListContentContainer: {
     flexGrow: 1,
@@ -75,11 +96,11 @@ export default StyleSheet.create({
     marginRight: 10,
   },
   itemSeparator: {
-    backgroundColor: Colors.SHUTTLE_GREY,
+    backgroundColor: THEME.itemSeparatorBackgroundColor,
     height: 1,
   },
   label: {
-    color: Colors.HEATHER,
+    color: THEME.labelColor,
     flex: 1,
   },
   labelContainer: {
@@ -105,7 +126,7 @@ export default StyleSheet.create({
     paddingHorizontal: 10,
   },
   listItemLabel: {
-    color: Colors.HEATHER,
+    color: THEME.ListItemLabelColor,
     flex: 1,
   },
   listMessageContainer: {
@@ -115,30 +136,30 @@ export default StyleSheet.create({
     padding: 10,
   },
   listMessageText: {
-    color: Colors.HEATHER,
+    color: THEME.listMessageTextColor,
   },
   listParentContainer: {},
   listParentLabel: {},
   modalContentContainer: {
-    backgroundColor: Colors.EBONY_CLAY,
+    backgroundColor: THEME.modalContentContainerBackgroundColor,
     flexGrow: 1,
   },
   modalTitle: {
-    color: Colors.HEATHER,
+    color: THEME.modalTitleColor,
     fontSize: 18,
   },
   searchContainer: {
     alignItems: 'center',
-    borderBottomColor: Colors.SHUTTLE_GREY,
+    borderBottomColor: THEME.searchContainerBorderBottomColor,
     borderBottomWidth: 1,
     flexDirection: 'row',
     padding: 10,
   },
   searchTextInput: {
-    borderColor: Colors.SHUTTLE_GREY,
+    borderColor: THEME.searchTextInputBorderColor,
     borderRadius: 8,
     borderWidth: 1,
-    color: Colors.WHITE,
+    color: THEME.searchTextInputColor,
     flexGrow: 1,
     flexShrink: 1,
     margin: 0,
@@ -149,8 +170,8 @@ export default StyleSheet.create({
   selectedItemLabel: {},
   style: {
     alignItems: 'center',
-    backgroundColor: Colors.EBONY_CLAY,
-    borderColor: Colors.BLACK,
+    backgroundColor: THEME.backgroundColor,
+    borderColor: THEME.borderColor,
     borderRadius: 8,
     borderWidth: 1,
     flexDirection: 'row',

src/themes/light/index.js

@@ -9,6 +9,27 @@ export const ICONS = {
   CLOSE: require('./icons/close.png'),
 };
 
+/**
+ *  Pulled out colors for clairity and easeier rework
+ */
+export const THEME = {
+  badgeDotBackgroundColor: Colors.GREY,
+  badgeBackgroundColor: Colors.ALTO,
+  dropDownContainerBackgroundColor: Colors.WHITE,
+  dropDownContainerBorderColor: Colors.BLACK,
+  itemSeparatorBackgroundColor: Colors.BLACK,
+  labelColor: Colors.BLACK,
+  listItemLabelColor: Colors.BLACK,
+  modalContentContainerBackgroundColor: Colors.WHITE,
+  modalTitleColor: Colors.BLACK,
+  listMessageTextColor: Colors.BLACK, // not currently used
+  searchContainerBorderBottomColor: Colors.BLACK,
+  searchTextInputBorderColor: Colors.BLACK,
+  searchTextInputColor: Colors.BLACK,
+  backgroundColor: Colors.WHITE,
+  borderColor: Colors.BLACK
+}
+
 export default StyleSheet.create({
   arrowIcon: {
     height: 20,
@@ -18,7 +39,7 @@ export default StyleSheet.create({
     marginLeft: 10,
   },
   badgeDotStyle: {
-    backgroundColor: Colors.GREY,
+    backgroundColor: THEME.badgeDotBackgroundColor,
     borderRadius: 10 / 2,
     height: 10,
     marginRight: 8,
@@ -29,7 +50,7 @@ export default StyleSheet.create({
   },
   badgeStyle: {
     alignItems: 'center',
-    backgroundColor: Colors.ALTO,
+    backgroundColor: THEME.badgeBackgroundColor,
     borderRadius: 10,
     flexDirection: 'row',
     paddingHorizontal: 10,
@@ -50,8 +71,8 @@ export default StyleSheet.create({
     fontStyle: 'italic',
   },
   dropDownContainer: {
-    backgroundColor: Colors.WHITE,
-    borderColor: Colors.BLACK,
+    backgroundColor: THEME.dropDownContainerBackgroundColor,
+    borderColor: THEME.dropDownContainerBorderColor,
     borderRadius: 8,
     borderWidth: 1,
     overflow: 'hidden',
@@ -75,11 +96,11 @@ export default StyleSheet.create({
     marginRight: 10,
   },
   itemSeparator: {
-    backgroundColor: Colors.BLACK,
+    backgroundColor: THEME.itemSeparatorBackgroundColor,
     height: 1,
   },
   label: {
-    color: Colors.BLACK,
+    color: THEME.labelColor,
     flex: 1,
   },
   labelContainer: {
@@ -105,7 +126,7 @@ export default StyleSheet.create({
     paddingHorizontal: 10,
   },
   listItemLabel: {
-    color: Colors.BLACK,
+    color: THEME.listItemLabelColor,
     flex: 1,
   },
   listMessageContainer: {
@@ -118,24 +139,25 @@ export default StyleSheet.create({
   listParentContainer: {},
   listParentLabel: {},
   modalContentContainer: {
+    // TODO: add background color
     flexGrow: 1,
   },
   modalTitle: {
-    color: Colors.BLACK,
+    color: THEME.modalTitleColor,
     fontSize: 18,
   },
   searchContainer: {
     alignItems: 'center',
-    borderBottomColor: Colors.BLACK,
+    borderBottomColor: THEME.searchContainerBorderBottomColor,
     borderBottomWidth: 1,
     flexDirection: 'row',
     padding: 10,
   },
   searchTextInput: {
-    borderColor: Colors.BLACK,
+    borderColor: THEME.searchTextInputBorderColor,
     borderRadius: 8,
     borderWidth: 1,
-    color: Colors.BLACK,
+    color: THEME.searchTextInputColor,
     flexGrow: 1,
     flexShrink: 1,
     margin: 0,
@@ -146,8 +168,8 @@ export default StyleSheet.create({
   selectedItemLabel: {},
   style: {
     alignItems: 'center',
-    backgroundColor: Colors.WHITE,
-    borderColor: Colors.BLACK,
+    backgroundColor: THEME.backgroundColor,
+    borderColor: THEME.borderColor,
     borderRadius: 8,
     borderWidth: 1,
     flexDirection: 'row',