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

package/src/Custom/CSliderMenu.tsx

@@ -1,10 +1,228 @@
-import { View, Text } from 'react-native'
-import React from 'react'
+import React, { memo, useState } from 'react';
+import {
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  StyleSheet,
+  Dimensions,
+  Platform,
+} from 'react-native';
+import styles from '../CommonStyle/optionListStyles';
+import { normalize } from '../CommonStyle/componentStyle';
+import RNExitApp from 'react-native-exit-app';
+import { Global, GlobalUserData } from '../../../../../src/Common/Global';
+import { imageURL } from '../../../../../src/Common/apiConstants';
+import { useNavigation } from '../Navigation/useNavigation';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+import HIcons from '../Hoc/HIcons';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface MenuOption {
+  optionname: string;
+  key: number;
+  iconname: string;
+}
+
+interface SliderUserData extends GlobalUserData {
+  photo?: string;
+  designation?: string;
+  qualification?: string;
+  wardname?: string;
+  wardcode?: string | number;
+}
+
+export interface CSliderMenuProps {
+  isShow: boolean;
+  /** Called to dismiss the drawer. */
+  visibility: (val: boolean) => void;
+  [key: string]: unknown;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function CSliderMenu(props: CSliderMenuProps): React.ReactElement {
+  const isAndroid = Platform.OS === 'android';
+  const navigation = useNavigation();
+  const [refresh, setRefresh] = useState<number>(0);
+  const { width, height } = Dimensions.get('window');
+
+  const optionData: MenuOption[] = [
+    { optionname: 'Home', key: 1, iconname: 'home' },
+    { optionname: 'Change Password', key: 2, iconname: 'key' },
+    { optionname: 'Exit', key: 11, iconname: 'power-off' },
+  ];
+
+  const userData = Global.userData as SliderUserData | null | undefined;
+
+  const OptionSelectNav = (data: MenuOption): void => {
+    switch (data.key) {
+      case 1:
+        navigation.navigate('MoreOptionsScreen');
+        break;
+      case 2:
+        navigation.navigate('ForgotPassword');
+        break;
+      case 11:
+        RNExitApp.exitApp();
+        break;
+    }
+    props.visibility(false);
+  };
 
-export default function CSliderMenu() {
   return (
-    <View>
-      <Text>CSliderMenu</Text>
-    </View>
-  )
-}
+    <CModalOverlay
+      visible={props.isShow}
+      onClose={() => props.visibility(false)}
+      closeOnTouchOutside
+      animationType="fadeInRight"
+      containerStyle={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        elevation: 999,
+        margin: 0,
+        zIndex: 10000,
+        height,
+        flexDirection: 'column',
+        justifyContent: 'flex-end',
+        alignItems: 'flex-end',
+      }}
+      animationDuration={900}
+      childrenWrapperStyle={{
+        backgroundColor: Global.AppTheme.primary_color,
+        width: width * 0.75,
+        height,
+        marginVertical: -50,
+      }}
+    >
+      <View style={{ backgroundColor: '#fff', width: width * 0.75, flex: 1, borderWidth: 0 }}>
+        <View style={{ backgroundColor: Global.AppTheme.primary_color }}>
+          {/* Header */}
+          <View style={{ flexDirection: 'row', alignItems: 'flex-start', borderWidth: 0 }}>
+            <View style={{ justifyContent: 'center', borderWidth: 0 }}>
+              <Image
+                style={{
+                  borderWidth: 0.5,
+                  margin: normalize(4),
+                  borderColor: 'white',
+                  width: normalize(50),
+                  height: normalize(50),
+                  borderRadius: 1000,
+                  resizeMode: 'contain',
+                }}
+                source={{
+                  uri:
+                    userData?.photo &&
+                    userData.photo !== 'hisfiles/user/profileimage/user-blue.png'
+                      ? imageURL + userData.photo
+                      : 'https://i.ibb.co/NW42Gjj/user.png',
+                }}
+              />
+            </View>
+            <View style={{ flex: 1, justifyContent: 'center', borderWidth: 0 }}>
+              <Text style={styles.usernameStyle}>{userData?.username}</Text>
+              <Text style={styles.departmeNameStyle}>
+                {userData?.designation} - {userData?.department}
+              </Text>
+              <Text style={styles.departmeNameStyle}>{userData?.qualification}</Text>
+            </View>
+            <TouchableOpacity
+              style={{
+                borderWidth: 0,
+                marginRight: isAndroid ? normalize(15) : normalize(25),
+              }}
+              onPress={() => {
+                props.visibility(false);
+                if (Platform.OS === 'web' && typeof window !== 'undefined') {
+                  window.close();
+                }
+              }}
+            >
+              <HIcons.FontAwesome
+                name={'power-off'}
+                color={'red'}
+                size={normalize(17)}
+                style={{
+                  backgroundColor: '#fff',
+                  padding: normalize(7),
+                  margin: normalize(4),
+                  borderRadius: 60,
+                }}
+              />
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        {/* Menu items */}
+        <View style={{ borderWidth: 0, flex: 1 }}>
+          {optionData.map((block, i) => (
+            <View key={i} style={{ borderWidth: 0 }}>
+              <TouchableOpacity
+                onPress={() => OptionSelectNav(block)}
+                style={{ flexDirection: 'row', margin: normalize(5) }}
+              >
+                <View style={layoutstyles.option_icon_container}>
+                  <HIcons.FontAwesome5
+                    name={block.iconname}
+                    color={Global.AppTheme.primary_color}
+                    size={25}
+                  />
+                </View>
+                <View style={layoutstyles.option_text_container}>
+                  <Text
+                    numberOfLines={2}
+                    style={{ color: Global.AppTheme.primary_color, fontWeight: 'bold' }}
+                  >
+                    {block.optionname}
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+          ))}
+        </View>
+
+        {/* Footer illustration */}
+        <View
+          style={{
+            borderWidth: 0,
+            flex: 1,
+            backgroundColor: '#fff',
+            bottom: normalize(-15),
+          }}
+        >
+          <Image
+            style={{ flex: 1, marginTop: normalize(0), resizeMode: 'contain' }}
+            source={{
+              uri: 'https://us.123rf.com/450wm/elnurss/elnurss1809/elnurss180902306/108495744-medical-care-vector-icon.jpg?ver=6',
+            }}
+          />
+        </View>
+      </View>
+    </CModalOverlay>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const layoutstyles = StyleSheet.create({
+  option_text_container: {
+    justifyContent: 'center',
+    flex: 6,
+  },
+  option_icon_container: {
+    width: 50,
+    paddingLeft: 5,
+    alignItems: 'baseline',
+    justifyContent: 'center',
+  },
+});
+
+export default memo(CSliderMenu);

package/src/Custom/Loader.tsx

@@ -0,0 +1,216 @@
+import React, { useState, useEffect } from 'react';
+import {
+  StyleSheet,
+  View,
+  Modal,
+  Animated,
+  Easing,
+  Text,
+  Image,
+  ImageSourcePropType,
+  Platform,
+  StyleProp,
+  TextStyle,
+} from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type ModalAnimationType = 'none' | 'slide' | 'fade';
+
+export interface LoaderProps {
+  visible?: boolean;
+  overlayColor?: string;
+  loaderColor?: string;
+  size?: number;
+  /** Pass `null`/`undefined` to use the built-in spinning ring instead of a GIF. */
+  gifSource?: ImageSourcePropType | null;
+  message?: string;
+  messageStyle?: StyleProp<TextStyle>;
+  animationType?: ModalAnimationType;
+  hasBackground?: boolean;
+  borderRadius?: number;
+  shadow?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+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,
+}: LoaderProps): React.ReactElement {
+  const [rotation] = useState(new Animated.Value(0));
+  const [pulse] = useState(new Animated.Value(1));
+  const [fade] = useState(new Animated.Value(0));
+
+  // Rotation animation
+  useEffect(() => {
+    // Only animate if not using a GIF
+    if (!gifSource) {
+      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();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  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>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+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,
+  },
+});