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

package/src/Custom/Loader.js

@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from 'react';
+import {
+  StyleSheet,
+  Dimensions,
+  View,
+  Modal,
+  Animated,
+  Easing,
+  Text,
+  Image,
+  Platform,
+} from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+
+export default function Loader({
+  visible = true,
+  overlayColor = 'rgba(0,0,0,0.4)',
+  loaderColor = 'lightblue',
+  size = Platform.OS !== 'web' ? 30 : 50,
+  gifSource = { uri: `${APIURL}file/getCommonFile/image/heartpulse.gif` },
+  message = '',
+  messageStyle = {},
+  animationType = 'fade',
+  hasBackground = true,
+  borderRadius = 20,
+  shadow = true,
+}) {
+  const [rotation] = useState(new Animated.Value(0));
+  const [pulse] = useState(new Animated.Value(1));
+  const [fade] = useState(new Animated.Value(0));
+
+  // Rotation animation
+  useEffect(() => {
+    if (!gifSource) { // Only animate if not using a GIF
+      Animated.loop(
+        Animated.timing(rotation, {
+          toValue: 1,
+          duration: 1500,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        })
+      ).start();
+    }
+
+    // Pulse animation
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, {
+          toValue: 1.1,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+        Animated.timing(pulse, {
+          toValue: 1,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+
+    // Fade in animation
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  }, []);
+
+  const spin = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  const loaderContent = gifSource ? (
+    <Image
+      style={[styles.icon_style, { width: normalize(size), height: normalize(size) }]}
+      source={gifSource}
+      resizeMode="contain"
+    />
+  ) : (
+    <Animated.View style={[
+      styles.defaultLoader,
+      {
+        borderColor: loaderColor,
+        transform: [{ rotate: spin }, { scale: pulse }],
+        width: normalize(size),
+        height: normalize(size),
+        borderWidth: normalize(size / 10),
+      },
+    ]}>
+      <View style={[
+        styles.innerCircle,
+        {
+          backgroundColor: loaderColor,
+          width: normalize(size / 2),
+          height: normalize(size / 2),
+        },
+      ]} />
+    </Animated.View>
+  );
+
+
+
+
+  return (
+    <Modal
+      animationType={animationType}
+      transparent={true}
+      visible={visible}
+      onRequestClose={() => { }}
+    >
+      <Animated.View style={[
+        styles.modalContainer,
+        {
+          backgroundColor: overlayColor,
+          opacity: fade,
+        },
+      ]}>
+        <Animated.View style={[
+          styles.loaderContainer,
+          {
+            backgroundColor: hasBackground ? 'white' : 'transparent',
+            borderRadius: normalize(borderRadius),
+            transform: [{ scale: pulse }],
+            ...(shadow && styles.shadowStyle),
+          },
+        ]}>
+          {loaderContent}
+          {message ? (
+            <Text style={[styles.messageText, messageStyle]}>
+              {message}
+            </Text>
+          ) : null}
+        </Animated.View>
+      </Animated.View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+
+
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loaderContainer: {
+    padding: normalize(20),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon_style: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  defaultLoader: {
+    borderRadius: normalize(100),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  innerCircle: {
+    borderRadius: normalize(100),
+  },
+  messageText: {
+    marginTop: normalize(15),
+    fontSize: normalize(14),
+    color: '#555',
+    textAlign: 'center',
+  },
+  shadowStyle: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+});

package/src/CustomComponents/CBackHandler.tsx

@@ -0,0 +1,336 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+  View,
+  Dimensions,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  TextInput,
+  Platform,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+import { Global } from '../../../../../src/Common/Global';
+import { normalize } from '../CommonStyle/componentStyle';
+import Svg, { Rect, Defs, LinearGradient, Stop } from 'react-native-svg';
+import HIcons from '../Hoc/HIcons';
+import CModalOverlay from './CModalOverlay';
+
+// Type definitions
+export type BackHandlerType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+
+export interface BackHandlerButtons {
+  iconname?: string;
+  button1?: string;
+  button2?: string;
+  heading?: string;
+}
+
+export interface CBackHandlerProps {
+  type: BackHandlerType;
+  data?: any;
+  displaytext?: string;
+  displaybuttons?: BackHandlerButtons;
+  close?: (value: boolean) => void;
+  callBack: (text: string) => void;
+}
+
+interface ConfigObject {
+  iconname: string;
+  button1: string;
+  button2: string;
+  heading: string;
+  iconGroup?: number;
+  iconName?: string;
+}
+
+interface TextKeyMap {
+  [key: number]: string;
+}
+
+// Constants
+const DEFAULT_MESSAGE = 'Do you want to exit ?';
+const DEFAULT_HEADING = 'CONFIRMATION';
+
+// Text key mapping
+const TEXT_KEYS: Record<BackHandlerType, string> = {
+  1: 'Please enter installation key to continue.',
+  2: 'Please make sure data saved before verify, Are you sure you want to verify ?',
+  3: 'Do you want share consent form?',
+  4: 'Do you want to delete?',
+  5: 'Hold On, Are you sure you want to exit without save ?',
+  6: 'Hold on, Are you sure you want to log out ?',
+  7: '', // Dynamic - will use props.displaytext
+  8: '', // Dynamic - will use props.displaytext
+};
+
+// Configuration mapping
+const CONFIG_MAP: Record<BackHandlerType, Omit<ConfigObject, 'iconGroup' | 'iconName'>> = {
+  1: {
+    iconname: 'lock',
+    button1: 'CANCEL',
+    button2: 'CONFIRM',
+    heading: 'INSTALLATION KEY',
+  },
+  2: {
+    iconname: 'save',
+    button1: 'No',
+    button2: 'VERIFY',
+    heading: 'VERIFICATION',
+  },
+  3: {
+    iconname: 'file-invoice',
+    button1: 'No',
+    button2: 'Yes',
+    heading: 'DELETION',
+  },
+  4: {
+    iconname: 'trash',
+    button1: 'No',
+    button2: 'Yes',
+    heading: 'DELETION',
+  },
+  5: {
+    iconname: 'exclamation-triangle',
+    button1: 'No',
+    button2: 'Yes',
+    heading: 'EXIT WITHOUT SAVE ?',
+  },
+  6: {
+    iconname: 'exclamation-triangle',
+    button1: 'No',
+    button2: 'Yes',
+    heading: 'LOG OUT',
+  },
+  7: {
+    iconname: 'exclamation-triangle',
+    button1: 'No',
+    button2: 'Yes',
+    heading: 'SWITCH SCREEN WITHOUT SAVE ?',
+  },
+  8: {
+    iconname: 'exclamation-triangle',
+    button1: 'No',
+    button2: 'Yes',
+    heading: 'CONFIRMATION',
+  },
+};
+
+export default function CBackHandler(props: CBackHandlerProps): React.JSX.Element {
+  const [overlay, setOverlay] = useState<boolean>(true);
+  const [text, onChangeText] = useState<string>('');
+
+  const getPopupContainerStyle = useCallback((): ViewStyle => {
+    const baseStyle = styles.overlayStyle as ViewStyle;
+    return Platform.OS === 'ios'
+      ? { ...baseStyle, top: normalize(60) }
+      : { ...baseStyle, bottom: 0 };
+  }, []);
+
+  const getTextKey = useCallback((key: BackHandlerType): string => {
+    if (key === 7 || key === 8) {
+      return props.displaytext || DEFAULT_MESSAGE;
+    }
+    return TEXT_KEYS[key] || DEFAULT_MESSAGE;
+  }, [props.displaytext]);
+
+  const getObject = useCallback((): ConfigObject => {
+    const baseConfig = { ...CONFIG_MAP[props.type] };
+    
+    // Handle type 8 with custom buttons
+    if (props.type === 8 && props.displaybuttons) {
+      return {
+        iconname: props.displaybuttons.iconname || baseConfig.iconname,
+        button1: props.displaybuttons.button1 || baseConfig.button1,
+        button2: props.displaybuttons.button2 || baseConfig.button2,
+        heading: props.displaybuttons.heading || baseConfig.heading,
+      };
+    }
+    
+    return baseConfig;
+  }, [props.type, props.displaybuttons]);
+
+  const getIconConfig = useCallback((): { group: number; name: string } => {
+    if (props.type === 6) {
+      return { group: 8, name: 'log-out-outline' };
+    }
+    const config = getObject();
+    return { group: 5, name: config.iconname };
+  }, [props.type, getObject]);
+
+  const getClose = useCallback((): void => {
+    setOverlay(false);
+    props.close?.(false);
+  }, [props.close]);
+
+  const handleConfirm = useCallback((): void => {
+    props.callBack(text);
+  }, [props.callBack, text]);
+
+  const config = getObject();
+  const iconConfig = getIconConfig();
+  const textKey = getTextKey(props.type);
+  const popupStyle = getPopupContainerStyle();
+
+  return (
+    <CModalOverlay
+      visible={overlay}
+      onClose={getClose}
+      closeOnTouchOutside={true}
+      containerStyle={styles.container}
+      childrenWrapperStyle={popupStyle}
+    >
+      <View style={styles.wrapper}>
+        {/* Icon + Message */}
+        <View style={styles.content}>
+          <HIcons.Icons
+            icongroup={iconConfig.group}
+            name={iconConfig.name}
+            size={normalize(70)}
+            color="#7575ed"
+            style={styles.icon}
+          />
+          <Text numberOfLines={3} style={styles.message}>
+            {textKey}
+          </Text>
+        </View>
+
+        {/* Input (only for type 1) */}
+        {props.type === 1 && (
+          <TextInput
+            style={styles.input}
+            placeholder="Enter key"
+            placeholderTextColor="#999"
+            keyboardType="default"
+            onChangeText={onChangeText}
+            value={text}
+            autoFocus={true}
+          />
+        )}
+
+        {/* Buttons */}
+        <View style={styles.buttonRow}>
+          <TouchableOpacity 
+            onPress={getClose} 
+            style={styles.cancelButton}
+            activeOpacity={0.7}
+          >
+            <Text style={styles.cancelButtonText}>{config.button1}</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={handleConfirm}
+            style={styles.confirmButton}
+            activeOpacity={0.8}
+          >
+            <Svg height={normalize(35)} width="100%">
+              <Defs>
+                <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0">
+                  <Stop offset="0" stopColor="#2f3ec1" stopOpacity={1} />
+                  <Stop
+                    offset="1"
+                    stopColor={Global.AppTheme.primary_color}
+                    stopOpacity={1}
+                  />
+                </LinearGradient>
+              </Defs>
+              <Rect
+                x="0"
+                y="0"
+                width="100%"
+                height={normalize(35)}
+                fill="url(#grad)"
+                rx="5"
+              />
+            </Svg>
+            <Text style={styles.confirmButtonText}>{config.button2}</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </CModalOverlay>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    backgroundColor: 'rgba(97, 97, 97, 0)',
+  },
+  overlayStyle: {
+    position: 'absolute',
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height * 0.3,
+    borderTopLeftRadius: 15,
+    borderTopRightRadius: 15,
+    borderWidth: 2,
+    borderColor: 'darkblue',
+    backgroundColor: 'white', // Added for better visibility
+  },
+  wrapper: {
+    marginTop: normalize(-10),
+    width: Dimensions.get('window').width - 10,
+    flex: 1,
+    borderRadius: normalize(17),
+    backgroundColor: 'white', // Added for better visibility
+  },
+  content: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  icon: {
+    textAlign: 'center',
+    marginVertical: normalize(10),
+    opacity: 0.6,
+  },
+  message: {
+    color: 'black',
+    fontSize: normalize(14),
+    fontWeight: '400',
+    textAlign: 'center',
+    paddingHorizontal: normalize(10),
+  },
+  input: {
+    height: normalize(30),
+    padding: 5,
+    fontWeight: 'bold',
+    width: normalize(190),
+    alignSelf: 'center',
+    textAlign: 'center',
+    borderBottomColor: Global.AppTheme.primary_color,
+    borderBottomWidth: 3,
+    fontSize: normalize(14),
+    color: 'black',
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-evenly',
+    marginTop: normalize(10),
+  },
+  cancelButton: {
+    backgroundColor: '#d2d2d2',
+    borderRadius: 5,
+    width: '47%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: normalize(35),
+    marginVertical: normalize(10),
+  },
+  cancelButtonText: {
+    fontSize: normalize(12),
+    color: 'black',
+  },
+  confirmButton: {
+    width: '47%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: normalize(35),
+    marginVertical: normalize(10),
+  },
+  confirmButtonText: {
+    fontSize: normalize(12),
+    color: '#fff',
+    position: 'absolute',
+  },
+});

package/src/{Common/Icons.tsx → Hoc/HIcons.tsx}

@@ -78,7 +78,7 @@ export const AntDesign: React.FC<Props> = (props) => (
 /**
  * Default export object (same usage style as your JS version)
  */
-const Icons = {
+const HIcons = {
   MaterialCommunityIcons,
   SimpleLineIcons,
   MaterialIcons,
@@ -94,4 +94,4 @@ const Icons = {
   AntDesign,
 };
 
-export default Icons;
+export default HIcons;

package/src/Navigation/useFocusEffect.ts

@@ -0,0 +1,2 @@
+
+export { useFocusEffect } from '../../../../../src/Navigation/PageNavigation';

package/src/Navigation/useFocusEffect.web.ts

@@ -0,0 +1 @@
+export { useFocusEffect } from '../../../../../src/Navigation/PageNavigation';

package/src/Navigation/useIsFocused.ts

@@ -0,0 +1 @@
+export { useIsFocused } from '../../../../../src/Navigation/PageNavigation';

package/src/Navigation/useIsFocused.web.ts

@@ -0,0 +1 @@
+export { useIsFocused } from '../../../../../src/Navigation/PageNavigation';

package/src/Navigation/useNavigation.ts

@@ -0,0 +1,2 @@
+
+export { useNavigation } from '../../../../../src/Navigation/PageNavigation';

package/src/Navigation/useNavigation.web.ts

@@ -0,0 +1 @@
+export { useNavigation } from '../../../../../src/Navigation/PageNavigation';

package/src/Navigation/useFocusEffect.tsx

@@ -1,2 +0,0 @@
-
-export { useFocusEffect } from './PageNavigation';

package/src/Navigation/useFocusEffect.web.tsx

@@ -1 +0,0 @@
-export { useFocusEffect } from './PageNavigation';

package/src/Navigation/useIsFocused.tsx

@@ -1 +0,0 @@
-export { useIsFocused } from './PageNavigation';

package/src/Navigation/useIsFocused.web.tsx

@@ -1 +0,0 @@
-export { useIsFocused } from './PageNavigation';

package/src/Navigation/useNavigation.tsx

@@ -1,2 +0,0 @@
-
-export { useNavigation } from './PageNavigation';

package/src/Navigation/useNavigation.web.tsx

@@ -1 +0,0 @@
-export { useNavigation } from './PageNavigation';