Added theme config support for picker and dateTimePicker (#6054)

Author: Vivek Kozhisseri

source/community/reactnative/src/components/inputs/choice-set/choice-set-input.js

@@ -165,8 +165,8 @@ export class ChoiceSetInput extends React.Component {
 					onPress={onPress}
 					accessible={true}
 					accessibilityRole={'button'}
-					accessibilityState={{expanded: this.state.isPickerSelected}}
-					>
+					accessibilityState={{ expanded: this.state.isPickerSelected }}
+				>
 					<View style={this.styleConfig.dropdown}>
 						<Text
 							style={[this.styleConfig.dropdownText, this.styleConfig.defaultFontConfig]}
@@ -182,26 +182,25 @@ export class ChoiceSetInput extends React.Component {
 					</View>
 				</TouchableOpacity>}
 				{((Platform.OS === Constants.PlatformIOS) ? this.state.isPickerSelected : true) &&
-					<View style={styles.pickerContainer}>
-						<Picker
-							mode={'dropdown'}
-							selectedValue={this.getPickerInitialValue(addInputItem)}
-							onValueChange={
-								(itemValue) => {
-									this.setState({
-										selectedPickerValue: itemValue,
-										isError: false
-									})
-									addInputItem(this.id, { value: itemValue, errorState: false });
-								}}>
-							{this.choices.map((item, key) => (
-								<Picker.Item
-									label={item.title}
-									value={item.value} key={key}
-								/>)
-							)}
-						</Picker>
-					</View>
+					<Picker
+						mode={'dropdown'}
+						itemStyle={this.styleConfig.picker}
+						selectedValue={this.getPickerInitialValue(addInputItem)}
+						onValueChange={
+							(itemValue) => {
+								this.setState({
+									selectedPickerValue: itemValue,
+									isError: false
+								})
+								addInputItem(this.id, { value: itemValue, errorState: false });
+							}}>
+						{this.choices.map((item, key) => (
+							<Picker.Item
+								label={item.title}
+								value={item.value} key={key}
+							/>)
+						)}
+					</Picker>
 				}
 			</View>
 		)
@@ -326,13 +325,6 @@ const styles = StyleSheet.create({
 	choiceSetView: {
 		marginTop: 3
 	},
-	pickerContainer: {
-		borderWidth: 1,
-		backgroundColor: Constants.LightGreyColor,
-		borderColor: Constants.LightGreyColor,
-		borderRadius: 5,
-		marginHorizontal: 2
-	},
 	button: {
 		height: 30,
 		width: 30,

source/community/reactnative/src/components/inputs/picker-input.js

@@ -84,7 +84,7 @@ export class PickerInput extends React.Component {
 					<ElementWrapper configManager={this.props.configManager} style={styles.elementWrapper} json={this.payload} isError={this.state.isError} isFirst={this.props.isFirst}>
 						<InputLabel configManager={this.props.configManager} isRequired={this.isRequired} label={label} />
 						<TouchableOpacity style={styles.inputWrapper} onPress={this.props.showPicker}
-						accessibilityRole='button'>
+							accessibilityRole='button'>
 							{/* added extra view to fix touch event in ios . */}
 							<View
 								accessible={true}
@@ -109,7 +109,7 @@ export class PickerInput extends React.Component {
 							visible={this.props.modalVisible}
 							onRequestClose={this.props.handleModalClose}>
 							<View style={[styles.overlay, modalOverlayStyle]}>
-								<View style={[styles.modal, modalStyle]}>
+								<View style={[this.styleConfig.dateTimePicker, modalStyle]}>
 									<View style={[styles.modalBtnContainer, modalBtnContainer]}>
 										<Button
 											style={[modalButtonStyle]}
@@ -124,6 +124,7 @@ export class PickerInput extends React.Component {
 										value={this.props.chosenDate || new Date()}
 										minimumDate={this.props.minDate}
 										maximumDate={this.props.maxDate}
+										textColor={this.styleConfig.dateTimePicker.textColor}
 										onChange={(event, date) => this.props.handleDateChange(date)} />
 								</View>
 							</View>
@@ -162,11 +163,6 @@ const styles = StyleSheet.create({
 		alignItems: Constants.CenterString,
 		justifyContent: Constants.FlexEnd
 	},
-	modal: {
-		backgroundColor: Constants.WhiteColor,
-		height: 260,
-		width: Constants.FullWidth
-	},
 	modalBtnContainer: {
 		width: Constants.FullWidth,
 		alignItems: Constants.CenterString,

source/community/reactnative/src/styles/style-config.js

@@ -81,6 +81,12 @@ export class StyleConfig {
 			},
 			dropdownText: {
 				...this.themeConfig.dropdownText[Platform.OS]
+			},
+			picker: {
+				...this.themeConfig.picker[Platform.OS]
+			},
+			dateTimePicker: {
+				...this.themeConfig.dateTimePicker[Platform.OS]
 			}
 		};
 		return styles;

source/community/reactnative/src/utils/enums.js

@@ -186,4 +186,6 @@ export const ThemeElement = Object.freeze({
 	CheckBoxText: "checkBoxText",
 	Dropdown: "dropdown",
 	DropdownText: "dropdownText",
+	Picker: "picker",
+	DateTimePicker: "dateTimePicker"
 });

source/community/reactnative/src/utils/theme-config.js

@@ -14,10 +14,13 @@ export class ThemeConfig {
         this.checkBoxText = new Config(ThemeElement.CheckBoxText, obj);
         this.dropdown = new Config(ThemeElement.Dropdown, obj);
         this.dropdownText = new Config(ThemeElement.DropdownText, obj);
+        this.picker = new Config(ThemeElement.Picker, obj);
+        this.dateTimePicker = new Config(ThemeElement.DateTimePicker, obj)
     }
 }
 
 // Each instance of this class holds config of specific element type 
+// this class holds config of specific element type 
 class Config {
     constructor(type, customConfig = {}) {
         this.type = type;
@@ -125,6 +128,20 @@ export const defaultThemeConfig = {
         marginTop: 10,
         marginLeft: 8,
         height: 30,
-    }
+    },
+    picker: {
+        borderWidth: 1,
+        backgroundColor: Constants.LightGreyColor,
+        borderColor: Constants.LightGreyColor,
+        color: Constants.BlackColor,
+        borderRadius: 5,
+        marginHorizontal: 2
+    },
+    dateTimePicker: {
+        backgroundColor: Constants.WhiteColor,
+        height: 260,
+        width: Constants.FullWidth,
+        textColor: Constants.BlackColor
+    },
 
 }