@jescon-technologies/react-native-ui-kit 0.0.10 → 0.0.11

package/src/CommonStyle/{componentStyle.tsx → componentStyle.ts}

@@ -1,4 +1,4 @@
-import { StyleSheet, Dimensions, Platform, PixelRatio, Text } from 'react-native';
+import { StyleSheet, Dimensions, Platform, PixelRatio, Text, ViewStyle, TextStyle, ImageStyle } from 'react-native';
 import { colors, fontWeight } from './commonStyle';
 
 const {
@@ -7,8 +7,106 @@ const {
 } = Dimensions.get('window');
 
 const scale = SCREEN_WIDTH / 320;
-var radio_height = 20;
-export function normalize(size) {
+const radio_height = 20;
+
+// Type definitions for component styles
+interface ComponentStylesType {
+  textinput: ViewStyle;
+  viewstyle: ViewStyle;
+  textstyle: TextStyle;
+  headerTitle: TextStyle;
+  headerSubTitle: TextStyle;
+  component_Icon: ImageStyle;
+  group_Button: ViewStyle;
+  group_Button_BadgeStyle: ViewStyle;
+  media_Gallery_Container: ViewStyle;
+  group_Button_Badge_TextStyle: TextStyle;
+  group_Button_Badge_ContainerStyle: ViewStyle;
+  no_data_found_text: TextStyle;
+  footer_Icon: ImageStyle;
+  footer_Icon_Text: TextStyle;
+  header_section_conatiner_style: ViewStyle;
+  header_section_child_container_style: ViewStyle;
+  header_left_menu_icon_container: ViewStyle;
+  header_right_menu_icon_container: ViewStyle;
+  header_menu_icon: ImageStyle;
+  result_view_child_container: ViewStyle;
+  result_view_heading_container: ViewStyle;
+  result_view_display_Text: TextStyle;
+  result_view_viewgraph_container: ViewStyle;
+  result_view_viewgraph_text: TextStyle;
+  result_view_range_container: ViewStyle;
+  result_view_unit_Text: TextStyle;
+  result_view_range_child_container: ViewStyle;
+  result_view_range_Text: TextStyle;
+  result_view_value_container: ViewStyle;
+  profilecard_dataContainer: ViewStyle;
+  profilecard_left: ViewStyle;
+  profilecard_right: ViewStyle;
+  profilecard_end_view: ViewStyle;
+  profilecard_end_child_view: ViewStyle;
+  profilecard_end_button: ViewStyle;
+  profilecard_end_button_icon: ImageStyle;
+  profilecard_content_left: ViewStyle;
+  profilecard_content_right: ViewStyle;
+  profilecard_image: ImageStyle;
+  profilecard_profilecontent_heading1: TextStyle;
+  profilecard_profilecontent_heading2: TextStyle;
+  profilecard_onlinestatus_badgecontainer: ViewStyle;
+  profilecard_subheading_container: ViewStyle;
+  profilecard_subheading_left_container: ViewStyle;
+  profilecard_subheading_right_container: ViewStyle;
+  profilecard_hiddenitem_container: ViewStyle;
+  profilecard_hiddenitem_Child_container: ViewStyle;
+  profilecard_hiddenitem_inner_container: ViewStyle;
+  profilecard_hiddenitem_left_displaytext: TextStyle;
+  profilecard_hiddenitem_left_displayvalue: TextStyle;
+  profilecard_hiddenitem_right_displaytext: TextStyle;
+  profilecard_hiddenitem_right_displayvalue: TextStyle;
+  doctorText: TextStyle;
+  input_Text: TextStyle;
+  select_TextStyle: TextStyle;
+  buttonStyle: ViewStyle;
+  buttonText: TextStyle;
+  label_underIcon: TextStyle;
+  item_TitleLabel: TextStyle;
+  item_DOB: TextStyle;
+  view_Display_Text: ViewStyle;
+  radioContainer: ViewStyle;
+  outerRadioButton: ViewStyle;
+  radioButtonText: TextStyle;
+  innerRadioButton: ViewStyle;
+  View_row_center: ViewStyle;
+  View_row_flexstart: ViewStyle;
+  View_row_flexend: ViewStyle;
+  View_row_spacearound: ViewStyle;
+  View_col_spacearound: ViewStyle;
+  View_col_center: ViewStyle;
+  View_col_flexstart: ViewStyle;
+  View_col_flexend: ViewStyle;
+  mediaoverlay_containerstyle: ViewStyle;
+  mediaoverlay_childrenwrapperstyle: ViewStyle;
+  mediaoverlay_topline: ViewStyle;
+  mediaoverlay_icon: ImageStyle;
+  popup_containerStyle: ViewStyle;
+  popup_heading: TextStyle;
+  mediaoverlay_iconundertext: TextStyle;
+  alertHttpstatusText: TextStyle;
+  alertCaptionText: TextStyle;
+  alertMessageText: TextStyle;
+  alertContentText: TextStyle;
+  errorMoreButton: TextStyle;
+  searchTextbox_View: ViewStyle;
+  searchTextbox: TextStyle;
+  searchIcon: ImageStyle;
+  searchButton: ViewStyle;
+  searchButtonText: TextStyle;
+  errorMsgText: TextStyle;
+  [key: string]: any; // Index signature for any additional styles
+}
+
+// Utility Functions
+export function normalize(size: number): number {
   const newSize = scale < 1.5 ? size * scale : size * 1.6;
   if (Platform.OS === 'ios') {
     return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2;
@@ -17,19 +115,18 @@ export function normalize(size) {
   }
 }
 
-export function width(itemwidth) {
+export function width(itemwidth: number): number {
   return SCREEN_WIDTH * (itemwidth / 100);
 }
 
-export function height(itemheight) {
+export function height(itemheight: number): number {
   return SCREEN_HEIGHT * (itemheight / 100);
 }
 
-const ComponentStyles = StyleSheet.create({
+const ComponentStyles = StyleSheet.create<ComponentStylesType>({
   textinput: {
     fontSize: normalize(15),
     color: colors.color_componentText,
-    // ...ComponentStyles.input_Text,
     width: width(20),
     marginLeft: '1%',
     marginRight: '1%',
@@ -40,62 +137,68 @@ const ComponentStyles = StyleSheet.create({
     fontStyle: 'normal',
     textAlign: 'left',
     borderWidth: 1,
-    marginVertical:5,
-    borderColor:'lightgrey',
+    marginVertical: 5,
+    borderColor: 'lightgrey',
   },
   viewstyle: {
     justifyContent: 'center',
     alignContent: 'center',
     alignItems: 'center',
     flexDirection: 'row',
-    // width: width(10)
   },
   textstyle: {
     fontSize: normalize(10),
-    // width : '50%'
   },
   headerTitle: {
-    fontSize: normalize(13), color: '#fff', fontWeight: fontWeight.fontWeight_Normal,
+    fontSize: normalize(13),
+    color: '#fff',
+    fontWeight: fontWeight.fontWeight_Normal,
   },
   headerSubTitle: {
-    fontSize: normalize(11), color: '#fff', fontWeight: fontWeight.fontWeight_Normal,
+    fontSize: normalize(11),
+    color: '#fff',
+    fontWeight: fontWeight.fontWeight_Normal,
   },
-
   component_Icon: {
     height: 25,
     width: 25,
     resizeMode: 'contain',
   },
   group_Button: {
-    width: 22, height: 22,
+    width: 22,
+    height: 22,
     justifyContent: 'center',
   },
   group_Button_BadgeStyle: {
     backgroundColor: 'rgba(0,0,0,0)',
     opacity: 0.7,
     borderRadius: 100,
-    borderWidth: 1, borderColor: 'gray',
-
+    borderWidth: 1,
+    borderColor: 'gray',
   },
   media_Gallery_Container: {
-    flex: 1, justifyContent: 'center',
+    flex: 1,
+    justifyContent: 'center',
     alignItems: 'center',
     margin: 1,
   },
   group_Button_Badge_TextStyle: {
     color: colors.color_StatusBar,
-    fontSize: 10, fontWeight: 'bold',
-
+    fontSize: 10,
+    fontWeight: 'bold',
   },
   group_Button_Badge_ContainerStyle: {
-    position: 'absolute', top: -3, left: -5,
+    position: 'absolute',
+    top: -3,
+    left: -5,
   },
   no_data_found_text: {
     fontSize: normalize(12),
     color: colors.color_componentText,
-    fontWeight: '800', alignItems: 'center', justifyContent: 'center',
+    fontWeight: '800',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  //footer
   footer_Icon: {
     height: 25,
     width: 25,
@@ -103,27 +206,27 @@ const ComponentStyles = StyleSheet.create({
     alignSelf: 'center',
     opacity: 0.9,
   },
-
   footer_Icon_Text: {
     textAlign: 'center',
     fontSize: normalize(6),
   },
-  //Header style
   header_section_conatiner_style: {
-
     backgroundColor: colors.color_Header,
     justifyContent: 'flex-end',
     padding: 10,
   },
   header_section_child_container_style: {
-    flexDirection: 'row', justifyContent: 'space-between',
-    margin: 1, alignItems: 'flex-end',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    margin: 1,
+    alignItems: 'flex-end',
     paddingTop: Platform.OS === 'ios' ? '6%' : '3%',
   },
   header_left_menu_icon_container: {
-    // backgroundColor: '#F9AA33',
     borderColor: '#000',
-    borderRadius: 5, borderWidth: 0.8, justifyContent: 'center',
+    borderRadius: 5,
+    borderWidth: 0.8,
+    justifyContent: 'center',
   },
   header_right_menu_icon_container: {
     borderColor: '#000',
@@ -131,19 +234,21 @@ const ComponentStyles = StyleSheet.create({
     justifyContent: 'center',
   },
   header_menu_icon: {
-    height: 27, width: 27, margin: 5,
+    height: 27,
+    width: 27,
+    margin: 5,
   },
-  // Result Report (ResultView, ResultViewDateWise, )
   result_view_child_container: {
-    flexDirection: 'row', alignItems: 'center',
-    justifyContent: 'center', borderBottomWidth: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomWidth: 1,
     borderColor: colors.color_componentBordercolor,
     width: '100%',
-
   },
   result_view_heading_container: {
-    width: '19%', marginLeft: '1%',
-
+    width: '19%',
+    marginLeft: '1%',
   },
   result_view_display_Text: {
     fontSize: normalize(12),
@@ -154,27 +259,32 @@ const ComponentStyles = StyleSheet.create({
     marginTop: '1%',
   },
   result_view_viewgraph_text: {
-    color: '#943126', fontStyle: 'italic',
+    color: '#943126',
+    fontStyle: 'italic',
   },
   result_view_range_container: {
-    width: '9%', alignItems: 'flex-start',
+    width: '9%',
+    alignItems: 'flex-start',
   },
   result_view_unit_Text: {
     fontSize: normalize(10),
-    color: 'black',//"#606266",
+    color: 'black',
     fontWeight: 'bold',
   },
   result_view_range_child_container: {
-    width: '100%', flexDirection: 'column',
-    marginTop: '1%', alignItems: 'center',
+    width: '100%',
+    flexDirection: 'column',
+    marginTop: '1%',
+    alignItems: 'center',
   },
   result_view_range_Text: {
     fontSize: normalize(10),
-    color: '#4D5656',//"#606266",
+    color: '#4D5656',
     fontWeight: 'normal',
   },
   result_view_value_container: {
-    width: '68%', marginLeft: '1%',
+    width: '68%',
+    marginLeft: '1%',
     flexDirection: 'row',
     borderLeftWidth: 0.5,
     borderColor: colors.color_componentBordercolor,
@@ -188,21 +298,23 @@ const ComponentStyles = StyleSheet.create({
   profilecard_left: {
     width: '5%',
     backgroundColor: 'yellow',
-    // width: orientation.portrait ? width * 0.35 : width * 0.30,
   },
   profilecard_right: {
-    flex: 1, justifyContent: 'flex-start', paddingLeft: 10, paddingTop: 0,
-    // alignItems: 'center',
+    flex: 1,
+    justifyContent: 'flex-start',
+    paddingLeft: 10,
+    paddingTop: 0,
   },
   profilecard_end_view: {
     width: '25%',
     alignItems: 'flex-end',
-    // alignItems: 'center', justifyContent: 'center',
     borderRadius: 10,
   },
   profilecard_end_child_view: {
     height: 75,
-    justifyContent: 'space-around', width: '100%', alignItems: 'center',
+    justifyContent: 'space-around',
+    width: '100%',
+    alignItems: 'center',
   },
   profilecard_end_button: {
     width: Dimensions.get('screen').width * 0.3,
@@ -212,30 +324,33 @@ const ComponentStyles = StyleSheet.create({
     justifyContent: 'center',
   },
   profilecard_end_button_icon: {
-    width: '100%', height: '100%', resizeMode: 'contain',
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
   },
   profilecard_content_left: {
-    justifyContent: 'space-around', alignItems: 'center',
+    justifyContent: 'space-around',
+    alignItems: 'center',
   },
   profilecard_content_right: {
     width: '90%',
-    justifyContent: 'flex-end', alignItems: 'center',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
   },
   profilecard_image: {
-    height: normalize(50), width: '100%', resizeMode: 'contain',
-
+    height: normalize(50),
+    width: '100%',
+    resizeMode: 'contain',
   },
   profilecard_profilecontent_heading1: {
     fontSize: normalize(13),
     fontWeight: 'normal',
     color: colors.color_profilecard_heading1,
-
   },
   profilecard_profilecontent_heading2: {
     fontSize: normalize(17),
     fontWeight: 'bold',
     color: colors.color_profilecard_heading2,
-
   },
   profilecard_onlinestatus_badgecontainer: {
     position: 'absolute',
@@ -246,25 +361,22 @@ const ComponentStyles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     width: '98%',
-
   },
   profilecard_subheading_left_container: {
     width: '50%',
-    justifyContent: 'flex-end', alignItems: 'flex-end',
-
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
   },
   profilecard_subheading_right_container: {
-    // width: orientation.portrait ? width * 0.28 : width * 0.27,
     width: '49%',
     paddingLeft: '1%',
-
   },
   profilecard_hiddenitem_container: {
     flexDirection: 'row',
     width: '100%',
     height: normalize(60),
     marginVertical: normalize(2),
-    alignItems:'center',
+    alignItems: 'center',
     justifyContent: 'space-evenly',
   },
   profilecard_hiddenitem_Child_container: {
@@ -276,25 +388,34 @@ const ComponentStyles = StyleSheet.create({
     width: '100%',
   },
   profilecard_hiddenitem_left_displaytext: {
-    marginTop: 1, marginLeft: 5,
-    textAlign: 'left', fontSize: normalize(8),
+    marginTop: 1,
+    marginLeft: 5,
+    textAlign: 'left',
+    fontSize: normalize(8),
     fontWeight: 'bold',
     color: '#606266',
   },
   profilecard_hiddenitem_left_displayvalue: {
-    marginTop: 1, marginLeft: 12,
-    textAlign: 'left', fontSize: normalize(10),
+    marginTop: 1,
+    marginLeft: 12,
+    textAlign: 'left',
+    fontSize: normalize(10),
     fontWeight: 'bold',
     color: '#0C4F60',
   },
   profilecard_hiddenitem_right_displaytext: {
-    marginTop: 0, marginRight: 5,
-    textAlign: 'right', fontSize: normalize(8),
+    marginTop: 0,
+    marginRight: 5,
+    textAlign: 'right',
+    fontSize: normalize(8),
     fontWeight: 'bold',
     color: '#606266',
   },
   profilecard_hiddenitem_right_displayvalue: {
-    marginTop: 1, marginRight: 12, textAlign: 'right', fontSize: normalize(10),
+    marginTop: 1,
+    marginRight: 12,
+    textAlign: 'right',
+    fontSize: normalize(10),
     fontWeight: 'bold',
     color: '#0C4F60',
   },
@@ -302,7 +423,6 @@ const ComponentStyles = StyleSheet.create({
     fontSize: normalize(16),
     fontWeight: 'bold',
   },
-
   input_Text: {
     fontSize: normalize(14),
     color: colors.color_componentText,
@@ -330,30 +450,18 @@ const ComponentStyles = StyleSheet.create({
   item_TitleLabel: {
     fontSize: normalize(10),
     color: colors.color_dark_grey,
-    // fontWeight:fontWeight.fontWeight_600
-    // padding:5,
-    // paddingBottom:0,
   },
   item_DOB: {
     fontSize: normalize(10),
     fontWeight: 'bold',
-    // color: colors.color_dark_grey,
-    // fontWeight:fontWeight.fontWeight_600
-    // padding:5,
-    // paddingBottom:0,
   },
   view_Display_Text: {
-    // justifyContent: 'center',
     width: '100%',
-    // paddingLeft: Dimensions.get("window").width * 0.005
   },
-
   radioContainer: {
     flexGrow: 1,
     flexDirection: 'row',
-    width:'20%',
-    // padding: 10
-    // paddingRight:20,
+    width: '20%',
     paddingVertical: 5,
   },
   outerRadioButton: {
@@ -373,8 +481,6 @@ const ComponentStyles = StyleSheet.create({
     borderRadius: radio_height / 2,
     backgroundColor: 'darkblue',
   },
-
-  //alignment//
   View_row_center: {
     justifyContent: 'center',
     alignContent: 'center',
@@ -423,8 +529,6 @@ const ComponentStyles = StyleSheet.create({
     alignContent: 'flex-end',
     alignItems: 'flex-end',
   },
-
-  //alignment ends here//
   mediaoverlay_containerstyle: {
     position: 'absolute',
     left: 0,
@@ -432,19 +536,13 @@ const ComponentStyles = StyleSheet.create({
     elevation: 999,
     alignItems: 'center',
     zIndex: 10000,
-    // backgroundColor:'rgba(0,0,0,0)',
     backgroundColor: 'rgba(0, 0, 0, 0.50)',
     justifyContent: 'flex-end',
-    // height:Dimensions.get("window").height ,
     flex: 1,
   },
   mediaoverlay_childrenwrapperstyle: {
-    // width:Dimensions.get("window").width,
-    // backgroundColor:'red',
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
-    // height:Dimensions.get("window").height*0.30,
-    // padding:Dimensions.get("window").height*0.01,
     marginBottom: 0,
   },
   mediaoverlay_topline: {
@@ -453,7 +551,10 @@ const ComponentStyles = StyleSheet.create({
     width: Dimensions.get('window').width * 0.10,
   },
   mediaoverlay_icon: {
-    width: 35, height: 35, justifyContent: 'center', resizeMode: 'contain',
+    width: 35,
+    height: 35,
+    justifyContent: 'center',
+    resizeMode: 'contain',
   },
   popup_containerStyle: {
     backgroundColor: 'rgba(0, 0, 0, 0.65)',
@@ -497,7 +598,6 @@ const ComponentStyles = StyleSheet.create({
     fontWeight: 'bold',
     textAlign: 'center',
   },
-
   searchTextbox_View: {
     flexDirection: 'row',
     borderWidth: 0,
@@ -505,24 +605,29 @@ const ComponentStyles = StyleSheet.create({
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
     borderRadius: 7,
-    // margin: Dimensions.get("window").height * 0.002,
     marginBottom: Dimensions.get('window').height * 0.003,
     height: 35,
-    // width:'100%',
     backgroundColor: '#f1f3f6',
-    // backgroundColor:colors.color_componentBgcolor,
-    marginTop: 0,padding:5,
+    marginTop: 0,
+    padding: 5,
   },
   searchTextbox: {
     color: 'black',
-    width: '100%', marginLeft: '1%', marginRight: '1%',
-    fontWeight:'bold',
+    width: '100%',
+    marginLeft: '1%',
+    marginRight: '1%',
+    fontWeight: 'bold',
     fontSize: normalize(18),
     textAlign: 'justify',
-    padding: 0, height: '100%', marginBottom: -(Dimensions.get('window').height * 0.003),
+    padding: 0,
+    height: '100%',
+    marginBottom: -(Dimensions.get('window').height * 0.003),
   },
   searchIcon: {
-    width: 20, height: 20, margin: 5, resizeMode: 'contain',
+    width: 20,
+    height: 20,
+    margin: 5,
+    resizeMode: 'contain',
   },
   searchButton: {
     height: 35,
@@ -542,4 +647,5 @@ const ComponentStyles = StyleSheet.create({
     color: colors.color_error_msg_Text,
   },
 });
-export default ComponentStyles;
+
+export default ComponentStyles;