@jescon-technologies/react-native-ui-kit 0.0.14 → 0.0.16

package/src/CustomComponents/CDetailView.tsx

@@ -0,0 +1,234 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  ImageBackground,
+  Platform,
+  Dimensions,
+  ViewStyle,
+  ImageStyle,
+  TextStyle,
+} from 'react-native';
+import { Global } from '../../../../../src/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;

package/src/CustomComponents/COverlay.tsx

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Dimensions,
+  TouchableOpacity,
+  Modal,
+  Pressable,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import { Global } from '../../../../../src/Common/Global';
+;
+import HIcons from '../Hoc/HIcons';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/** Props the HOC injects into the wrapped component. */
+export interface COverlayInjectedProps {
+  /** Called when the overlay is dismissed. */
+  visibility?: (val: boolean) => void;
+}
+
+/**
+ * Full props accepted by the returned component:
+ * whatever the wrapped component needs, plus the injected `visibility`.
+ */
+export type COverlayProps<W extends object> = W & COverlayInjectedProps;
+
+// ---------------------------------------------------------------------------
+// HOC
+// ---------------------------------------------------------------------------
+
+const COverlay = <W extends object>(
+  WrapComponent: React.ComponentType<W & COverlayInjectedProps>
+): React.FC<COverlayProps<W>> => {
+  const Overlay: React.FC<COverlayProps<W>> = (props) => {
+    const [overlay, setOverlay] = useState<boolean>(true);
+
+    const closeOverlay = (): void => {
+      setOverlay(false);
+      props?.visibility?.(false);
+    };
+
+    const popupContainerStyle: ViewStyle = {
+      position: 'absolute',
+      bottom: 0,
+      top: Dimensions.get('screen').height * 0.1,
+      width: Dimensions.get('screen').width,
+      backgroundColor: '#fff',
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      borderWidth: 2,
+      borderColor: '#e0e0e0',
+      paddingHorizontal: normalize(5),
+    };
+
+    return (
+      <Modal
+        visible={overlay}
+        transparent
+        animationType="slide"
+        onRequestClose={closeOverlay}
+      >
+        <Pressable style={styles.backdrop} onPress={closeOverlay} />
+
+        <View style={popupContainerStyle}>
+          <View style={styles.closeButton}>
+            <TouchableOpacity onPress={closeOverlay}>
+              <HIcons.FontAwesome5
+                name="angle-double-down"
+                size={normalize(20)}
+                color={Global.AppTheme.primary_color}
+              />
+            </TouchableOpacity>
+          </View>
+
+          <WrapComponent {...(props as COverlayProps<W>)} />
+        </View>
+      </Modal>
+    );
+  };
+
+  Overlay.displayName = `COverlay(${
+    WrapComponent.displayName || WrapComponent.name || 'Component'
+  })`;
+
+  return Overlay;
+};
+
+export default COverlay;
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.20)',
+  },
+  closeButton: {
+    position: 'absolute',
+    right: 10,
+    top: 10,
+    zIndex: 10,
+  },
+});