@jescon-technologies/react-native-ui-kit 0.0.13 → 0.0.15

package/index.d.ts

@@ -3,13 +3,19 @@ export { default as AAlertIOS } from './src/Alerts/AAlertIOS';
 export { default as AAlert } from './src/Alerts/AAlert';
 export { default as ABlink } from './src/Alerts/ABlink';
 export { default as HIcons } from './src/Hoc/HIcons';
+export { default as HView } from './src/Hoc/HView';
+export { default as HShadowButton } from './src/Hoc/HShadowButton';
+export { default as Navigation } from './src/Navigation/PageNavigation';
+export { default as SSearchBar } from './src/StaticComponents/SSearchBar';
+export { default as SDateTimePicker } from './src/StaticComponents/SDateTimePicker';
+export { default as CFooterView } from './src/CustomComponents/CFooterView';
+export { default as CDetailView } from './src/CustomComponents/CDetailView';
+export { default as CContainerView } from './src/CustomComponents/CContainerView';
+export { default as HeaderBlock } from './src/CustomComponents/HeaderBlock';
+export { default as HDashboard } from './src/Hoc/HDashboard';
 export { default as NetworkServiceCall } from './src/Common/NetworkServiceCall';
+export { default as useNotifications } from './src/Handlers/NotificationsContext';
 export * from './src/Navigation/useNavigation';
 export { default as CBackHandler } from './src/CustomComponents/CBackHandler';
 export * from './src/CommonStyle/ComponentFunctions';
 export * from './src/CommonStyle/commonStyle';
-export { default as Loader } from './src/Custom/Loader';
-export { default as LoginLayout } from './src/Layout/LoginLayout';
-export { default as Splash } from './src/Screens/Splash';
-export { default as Login } from './src/Screens/Login';
-export { default as ForgotPassword } from './src/Screens/ForgotPassword';

package/index.js

@@ -3,13 +3,19 @@ export { default as AAlertIOS } from './src/Alerts/AAlertIOS';
 export { default as AAlert } from './src/Alerts/AAlert';
 export { default as ABlink } from './src/Alerts/ABlink';
 export { default as HIcons } from './src/Hoc/HIcons';
+export { default as HView } from './src/Hoc/HView';
+export { default as HShadowButton } from './src/Hoc/HShadowButton';
+export { default as Navigation } from './src/Navigation/PageNavigation';
+export { default as SSearchBar } from './src/StaticComponents/SSearchBar';
+export { default as SDateTimePicker } from './src/StaticComponents/SDateTimePicker';
+export { default as CFooterView } from './src/CustomComponents/CFooterView';
+export { default as CDetailView } from './src/CustomComponents/CDetailView';
+export { default as CContainerView } from './src/CustomComponents/CContainerView';
+export { default as HeaderBlock } from './src/CustomComponents/HeaderBlock';
+export { default as HDashboard } from './src/Hoc/HDashboard';
 export { default as NetworkServiceCall } from './src/Common/NetworkServiceCall';
+export { default as useNotifications } from './src/Handlers/NotificationsContext';
 export * from './src/Navigation/useNavigation';
 export { default as CBackHandler } from './src/CustomComponents/CBackHandler';
 export * from './src/CommonStyle/ComponentFunctions';
 export * from './src/CommonStyle/commonStyle';
-export { default as Loader } from './src/Custom/Loader';
-export { default as LoginLayout } from './src/Layout/LoginLayout';
-export { default as Splash } from './src/Screens/Splash';
-export { default as Login } from './src/Screens/Login';
-export { default as ForgotPassword } from './src/Screens/ForgotPassword';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jescon-technologies/react-native-ui-kit",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "A React Native module for Jescon Technologies that provides react-native-ui-kit",
   "main": "index.js",
   "types": "index.d.ts",

package/src/Common/Global.ts

@@ -0,0 +1,10 @@
+export class Global {
+  static AppTheme: Record<string, string> = {
+    primary_color: '#094485',
+    secondary_color: 'black',
+    text_color: '#fff',
+    heading_text_color: 'darkblue',
+    bg_button: '#fff',
+    icon_color: 'darkblue',
+  };
+}

package/src/Common/NetworkServiceCall.ts

@@ -1,6 +1,6 @@
 import axios, { Method, AxiosResponse, AxiosError } from 'axios';
 import { isConnected, notifyMessage, ValueCheck } from '../CommonStyle/ComponentFunctions';
-import { Global } from '../../../../../src/Common/Global';
+import { Global } from '../Common/Global';
 import { Platform } from 'react-native';
 
 // Type definitions

package/src/CommonStyle/ComponentFunctions.tsx

@@ -16,8 +16,7 @@ import {
     ImageStyle,
 } from 'react-native';
 import NetInfo from '@react-native-community/netinfo';
-import { Global } from '../../../../../src/Common/Global';
-import { APIURL } from '../../../../../src/Common/apiConstants';
+import { Global } from '../Common/Global';
 import React from 'react';
 
 const {
@@ -99,27 +98,6 @@ export function CShadowDynamic(
         };
 }
 
-// Loader Components
-export function LoaderIndicator(i?: any): React.JSX.Element {
-    return (
-        <View style={{
-            backgroundColor: '#ffffff',
-            padding: normalize(10),
-            paddingHorizontal: normalize(20),
-            borderRadius: 10,
-            alignItems: 'center',
-        }}>
-            <Image
-                style={{
-                    width: normalize(35),
-                    height: normalize(35),
-                }}
-                source={{ uri: `${APIURL}file/getCommonFile/image/heartpulse.gif` }}
-                resizeMode={Image.resizeMode.contain}
-            />
-        </View>
-    );
-}
 
 export function Loader(): React.JSX.Element {
     return (

package/src/Custom/CSliderMenu.tsx

@@ -0,0 +1,10 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+
+export default function CSliderMenu() {
+  return (
+    <View>
+      <Text>CSliderMenu</Text>
+    </View>
+  )
+}

package/src/Custom/OUserView.tsx

@@ -0,0 +1,10 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+
+export default function OUserView() {
+  return (
+    <View>
+      <Text>OUserView</Text>
+    </View>
+  )
+}

package/src/CustomComponents/CBackHandler.tsx

@@ -10,7 +10,7 @@ import {
   TextStyle,
   ViewStyle,
 } from 'react-native';
-import { Global } from '../../../../../src/Common/Global';
+import { Global } from '../Common/Global';
 import { normalize } from '../CommonStyle/componentStyle';
 import Svg, { Rect, Defs, LinearGradient, Stop } from 'react-native-svg';
 import HIcons from '../Hoc/HIcons';

package/src/CustomComponents/CContainerView.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Platform, StyleSheet, View, ViewStyle } from 'react-native';
+import { Global } from '../Common/Global';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface CContainerViewProps {
+  children?: React.ReactNode;
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+/**
+ * `100vh` is only valid on web (RN-web). On native, `height` must be a number
+ * or percentage — so we only apply it when running on web.
+ */
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: Global.AppTheme.primary_color,
+    ...(Platform.OS === 'web' ? { height: '100vh' as unknown as ViewStyle['height'] } : {}),
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const CContainerView: React.FC<CContainerViewProps> = ({ children }) => {
+  return <View style={styles.container}>{children}</View>;
+};
+
+export default CContainerView;

package/src/CustomComponents/CDetailView.tsx

@@ -0,0 +1,235 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  ImageBackground,
+  Platform,
+  Dimensions,
+  ViewStyle,
+  ImageStyle,
+  TextStyle,
+} from 'react-native';
+import { Global } from '../Common/Global';
+// import CSwipeCard from '../Components/CSwipeCard';
+import { normalize  } from '../CommonStyle/ComponentFunctions';
+import { useNavigation } from '../Navigation/PageNavigation';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface CDetailViewProps {
+  children?: React.ReactNode;
+  /** Overrides the default white background. */
+  backgroundColor?: string;
+  /** Remote image URL to display as background. */
+  bgimage?: string;
+  /** Hides the CSwipeCard header when true. */
+  hideCard?: boolean;
+}
+
+interface UserOption {
+  suoption?: number;
+  optiondetail?: Array<{
+    suoptiondetail?: number;
+    component?: string;
+    [key: string]: unknown;
+  }>;
+  [key: string]: unknown;
+}
+
+interface PatientDetails {
+  EditStatus?: boolean;
+  suavailability?: number;
+  type?: string | number;
+  keycode?: string | number;
+  [key: string]: unknown;
+}
+
+interface SwipeValue {
+  keyid?: string | number;
+  functionid?: string | number;
+  row?: string | number;
+  [key: string]: unknown;
+}
+
+// ---------------------------------------------------------------------------
+// Styles (static — dynamic backgroundColor is applied at usage site)
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  CDetailView: {
+    flex: 1,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.8,
+    shadowRadius: 2,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    width: '100%',
+  } as ViewStyle,
+  image: {
+    flex: 1,
+    width: Platform.OS === 'web' ? '88%' : '100%',
+    alignSelf: 'center',
+  } as ViewStyle,
+  productHeaderCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 2,
+  } as ViewStyle,
+  productImageContainer: {
+    width: normalize(50),
+    height: normalize(50),
+    borderRadius: 8,
+    backgroundColor: '#f8f9fa',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Global.AppTheme.primary_color + '40',
+    borderStyle: 'dashed',
+    overflow: 'hidden',
+  } as ViewStyle,
+  productImage: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 6,
+  } as ImageStyle,
+  imagePlaceholder: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  } as ViewStyle,
+  imageAddText: {
+    fontSize: normalize(6),
+    fontWeight: '700',
+    color: Global.AppTheme.primary_color,
+    marginTop: normalize(2),
+  } as TextStyle,
+  productInfoSection: {
+    flex: 1,
+    marginLeft: normalize(8),
+    justifyContent: 'center',
+  } as ViewStyle,
+  productMainTitle: {
+    fontSize: normalize(13),
+    fontWeight: '700',
+    color: '#1a1a2e',
+    marginBottom: 2,
+    lineHeight: normalize(16),
+  } as TextStyle,
+  productMetaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 1,
+  } as ViewStyle,
+  productMetaText: {
+    fontSize: normalize(10),
+    color: '#64748b',
+    marginLeft: normalize(4),
+    flex: 1,
+    fontWeight: '500',
+  } as TextStyle,
+  actionButton: {
+    borderRadius: 8,
+    borderWidth: 0.5,
+    height:
+      Platform.OS !== 'web'
+        ? Dimensions.get('screen').height * 0.04
+        : Dimensions.get('screen').height * 0.06,
+    width: Dimensions.get('screen').width * 0.06,
+    backgroundColor: '#fff',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: '1%',
+    borderColor: Global.AppTheme.primary_color,
+  } as ViewStyle,
+  optionText: {
+    fontSize: normalize(8),
+    fontWeight: 'bold',
+    color: Global.AppTheme.primary_color,
+    textAlign: 'center',
+  } as TextStyle,
+});
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const CDetailView: React.FC<CDetailViewProps> = ({
+  children,
+  backgroundColor,
+  bgimage,
+  hideCard,
+}) => {
+  const navigation = useNavigation();
+
+  const handleSwipeCallback = (val: SwipeValue, item: PatientDetails): void => {
+    Global.PatientDetails = item;
+
+    const productSection = (Global.userOptionList as UserOption[] | undefined)?.find(
+      (section) => section.suoption === 31900
+    );
+    const filteredDetails = productSection?.optiondetail?.filter(
+      (option) => option.suoptiondetail === val.keyid
+    );
+
+    console.log('Swipe Callback Value:', JSON.stringify(val));
+    console.log('Filtered Details', JSON.stringify(filteredDetails));
+
+    // NOTE: `val.functionid || val.row` is compared to string cases 'L'/'R'.
+    // If the API ever returns numeric row (e.g. 1), this will always fall to
+    // `default`. Consider coercing: `String(val.functionid ?? val.row)`.
+    switch (val.functionid || val.row) {
+      case 'L':
+        navigation.navigate('WrappedComponent', {
+          component: filteredDetails?.[0]?.component,
+          data: filteredDetails?.[0],
+          itemdata: item,
+        });
+        break;
+      case 'R':
+        navigation.navigate('DetailsOverlay', { data: item, code: val });
+        break;
+      default:
+        console.log('Not Available', JSON.stringify(val));
+    }
+  };
+
+  const patient = Global.PatientDetails as PatientDetails | null | undefined;
+  const userData = Global.userData as { suuser?: number } | null | undefined;
+
+  return (
+    <View
+      style={[
+        styles.CDetailView,
+        { backgroundColor: backgroundColor ?? 'white' },
+      ]}
+    >
+      <ImageBackground
+        source={
+          bgimage != undefined
+            ? { uri: bgimage }
+            : null
+        }
+        resizeMode={bgimage != undefined ? 'stretch' : 'contain'}
+        imageStyle={bgimage != undefined ? { opacity: 1 } : { opacity: 0.1 }}
+        style={styles.image}
+      >
+        {/* {patient != null && !hideCard ? (
+          <CSwipeCard
+            edited={patient?.EditStatus}
+            availability={patient?.suavailability}
+            data={patient}
+            style={Global?.optiondata}
+            rightButtonsapi={`${APIURL}invget/invcommonget/rnproductdescription ${userData?.suuser},${patient?.type},${patient?.keycode}`}
+            leftButtonsapi={`${APIURL}invget/invcommonget/rninsuproductdescription ${patient?.keycode},${userData?.suuser}`}
+            callback={(val: SwipeValue) => handleSwipeCallback(val, patient)}
+          />
+        ) : null} */}
+        {children}
+      </ImageBackground>
+    </View>
+  );
+};
+
+export default CDetailView;

package/src/CustomComponents/CFooterView.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  Dimensions,
+  Platform,
+  View,
+  ScrollView,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface CFooterViewProps {
+  /** Extra style merged onto the outer container. */
+  style?: StyleProp<ViewStyle>;
+  /** Footer content (usually a row of buttons / icons). */
+  children?: React.ReactNode;
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  base: {
+    backgroundColor: 'white',
+  },
+  content: {
+    alignItems: 'center',
+  },
+  webContent: {
+    flexDirection: 'column',
+    paddingVertical: '1%',
+  },
+  mobileContent: {
+    flexDirection: 'row',
+    paddingHorizontal: '1%',
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const CFooterView: React.FC<CFooterViewProps> = ({ style, children }) => {
+  const isWeb = Platform.OS === 'web';
+
+  const containerStyle: ViewStyle = isWeb
+    ? {
+        position: 'absolute',
+        right: 0,
+        bottom: 0,
+        width: 80,
+        borderLeftWidth: 1,
+        borderLeftColor: 'lightgrey',
+        zIndex: 10,
+        elevation: 10,
+        maxHeight: '90%',
+      }
+    : {
+        borderTopWidth: 1,
+        borderTopColor: 'lightgrey',
+      };
+
+  return (
+    <View style={[styles.base, containerStyle, style]}>
+      <ScrollView
+        horizontal={!isWeb}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        bounces={false}
+        contentContainerStyle={[
+          styles.content,
+          isWeb ? styles.webContent : styles.mobileContent,
+        ]}
+      >
+        {children}
+      </ScrollView>
+    </View>
+  );
+};
+
+export default CFooterView;

package/src/CustomComponents/CNetworkStatus.tsx

@@ -0,0 +1,172 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import NetInfo, { NetInfoState, NetInfoStateType } from '@react-native-community/netinfo';
+import { normalize } from '../CommonStyle/componentStyle';
+import HIcons from '../Hoc/HIcons';
+import ABlink from '../Alerts/ABlink';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface NetworkInfo {
+  isConnected?: boolean | null;
+  isInternetReachable?: boolean | null;
+  connectionType?: NetInfoStateType;
+  effectiveType?: string | null;
+  isExpensive?: boolean | null;
+  details?: unknown;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const CNetworkStatus: React.FC = () => {
+  const [networkInfo, setNetworkInfo] = useState<NetworkInfo>({});
+
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state: NetInfoState) => {
+      setNetworkInfo({
+        isConnected: state.isConnected,
+        isInternetReachable: state.isInternetReachable,
+        connectionType: state.type,
+        effectiveType: state.type, // state has no `effectiveType`; kept as-is to match original mapping intent
+        isExpensive: state.isExpensive,
+        details: state.details,
+      });
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  /**
+   * Renders a labeled icon.
+   * NOTE: currently unused — all `IconButton(...)` call sites are commented out.
+   */
+  const IconButton = (
+    icongroup: number,
+    iconname: string,
+    text: string
+  ): React.ReactElement => (
+    <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+      <HIcons.Icons
+        icongroup={icongroup}
+        name={iconname}
+        size={normalize(15)}
+        color={'white'}
+        style={{
+          textShadowColor: '#ffffff',
+          textShadowOffset: { width: 1, height: 1 },
+          textShadowRadius: 1,
+        }}
+      />
+      <Text
+        style={{
+          color: 'white',
+          fontSize: normalize(7),
+          textShadowColor: '#ffffff',
+          textShadowOffset: { width: 0.5, height: 0.5 },
+          textShadowRadius: 0.5,
+          textAlign: 'center',
+        }}
+      >
+        {text}
+      </Text>
+    </View>
+  );
+
+  const NetWorkIcons = (): React.ReactElement => {
+    if (networkInfo.isConnected) {
+      // All connected branches return an empty <View /> — the "connected"
+      // indicator is intentionally suppressed (see commented blocks above).
+      if (networkInfo.connectionType === 'cellular') {
+        if (networkInfo.isInternetReachable) {
+          return <View />;
+        }
+        return <View />;
+      }
+      if (networkInfo.connectionType === 'wifi') {
+        if (networkInfo.isInternetReachable) {
+          return <View />;
+        }
+        return <View />;
+      }
+      return <View />;
+    }
+
+    return (
+      <ABlink>
+        <View
+          style={{
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'white',
+            borderRadius: 10,
+            padding: normalize(4),
+          }}
+        >
+          <View style={{ flexDirection: 'row' }}>
+            <HIcons.Icons
+              icongroup={3}
+              name={'wifi-off'}
+              size={normalize(20)}
+              color={'red'}
+              style={{
+                textShadowColor: '#ffffff',
+                textShadowOffset: { width: 1, height: 1 },
+                textShadowRadius: 1,
+              }}
+            />
+            <HIcons.Icons
+              icongroup={3}
+              name={'signal-off'}
+              size={normalize(20)}
+              color={'red'}
+              style={{
+                textShadowColor: '#ffffff',
+                textShadowOffset: { width: 1, height: 1 },
+                textShadowRadius: 1,
+              }}
+            />
+          </View>
+          <Text
+            style={{
+              color: 'red',
+              fontSize: normalize(9),
+              textShadowColor: '#ffffff',
+              textShadowOffset: { width: 0.5, height: 0.5 },
+              textShadowRadius: 0.5,
+            }}
+          >
+            NO NETWORK
+          </Text>
+        </View>
+      </ABlink>
+    );
+  };
+
+  return (
+    <View style={{ flexDirection: 'row' }}>
+      {NetWorkIcons()}
+    </View>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Styles (kept for parity; currently unused by the active component)
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  container: {},
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 20,
+  },
+  infoText: {
+    fontSize: 16,
+  },
+});
+
+export default CNetworkStatus;