@jescon-technologies/react-native-ui-kit 0.0.8 → 0.0.9

package/index.d.ts

@@ -1,2 +1,3 @@
-import ErrorBoundary from './src/Common/ErrorBoundary';
-export default ErrorBoundary;
+export { default as ErrorBoundary } from './src/Common/ErrorBoundary';
+export { default as AAlertIOS } from './Alerts/AAlertIOS';
+export { default as AAlert } from './Alerts/AAlert';

package/index.js

@@ -1 +1,3 @@
-export { default as ErrorBoundary } from './src/Common/ErrorBoundary';
+export { default as ErrorBoundary } from './src/Common/ErrorBoundary';
+export { default as AAlertIOS } from './Alerts/AAlertIOS';
+export { default as AAlert } from './Alerts/AAlert';

package/package.json

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

package/src/Alerts/AAlert.tsx

@@ -0,0 +1,196 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Dimensions,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+} from 'react-native';
+
+import { Global } from '../../../../../src/Common/Global';
+import Icons from '../Common/Icons';
+import { ValueCheck } from '../CommonStyle/ComponentFunctions';
+import { normalize } from '../CommonStyle/componentStyle';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+
+/**
+ * Types
+ */
+type AlertData = {
+  datavalue: number;
+  displaytext?: string;
+  bgcolor?: string;
+  duration?: number;
+};
+
+type Props = {
+  data: AlertData;
+  close: (value: boolean) => void;
+};
+
+const AAlert: React.FC<Props> = (props) => {
+  const [overlay, setOverlay] = useState<boolean>(true);
+
+  const [data] = useState<AlertData & {
+    bgcolor: string;
+    durartion: number;
+  }>({
+    ...props.data,
+    bgcolor: getBgColor(props.data.datavalue),
+    durartion: getDurarion(props.data.datavalue),
+  });
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      props.close(false);
+      setOverlay(false);
+    }, data.durartion);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  function getBgColor(key: number): string {
+    switch (key) {
+      case 1:
+        return '#0ca004';
+      case 2:
+        return '#f44e4e';
+      case 3:
+        return '#bfbf18';
+      case 4:
+        return '#d88304';
+      default:
+        return Global.AppTheme?.primary_color ?? '#000';
+    }
+  }
+
+  function getTransparentColor(key: number): string {
+    switch (key) {
+      case 1:
+        return 'rgba(0, 90, 0, 0.2)';
+      case 2:
+        return 'rgba(90, 0, 0, 0.2)';
+      case 3:
+        return 'rgba(249, 242, 172, 0.2)';
+      case 4:
+        return 'rgba(249, 212, 167, 0.2)';
+      default:
+        return 'rgba(0, 0, 0, 0.2)';
+    }
+  }
+
+  function getDurarion(key: number): number {
+    return 2000;
+  }
+
+  function getPopupContainerStyleIOS() {
+    return {
+      ...styles.overlaystyle,
+      backgroundColor: ValueCheck(data.bgcolor) ? data.bgcolor : '#fff',
+      bottom: normalize(100),
+    };
+  }
+
+  const handleClose = () => {
+    setOverlay(false);
+    props.close(false);
+  };
+
+  return (
+    <CModalOverlay
+      visible={overlay}
+      onClose={handleClose}
+      animationType="fadeInUp"
+      animationDuration={500}
+      closeOnTouchOutside={false}
+      containerStyle={{
+        width: '100%',
+        backgroundColor: getTransparentColor(data.datavalue),
+      }}
+      childrenWrapperStyle={getPopupContainerStyleIOS()}
+    >
+      {/* Close button */}
+      <TouchableOpacity
+        style={{
+          position: 'absolute',
+          right: normalize(15),
+          zIndex: 1,
+          top: normalize(5),
+        }}
+        onPress={handleClose}
+      >
+        <Icons.AntDesign
+          name="closecircleo"
+          size={normalize(15)}
+          color="#fff"
+        />
+      </TouchableOpacity>
+
+      {/* Content */}
+      <View style={{ flexDirection: 'row', width: '100%' }}>
+        {/* Icon section */}
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Image
+            style={{
+              height: normalize(30),
+              width: normalize(30),
+              borderRadius: normalize(50),
+            }}
+            resizeMode="stretch"
+            source={require('../../android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png')}
+          />
+
+          <Icons.Entypo
+            color="#fff"
+            name="info"
+            size={normalize(15)}
+          />
+        </View>
+
+        {/* Text section */}
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: 1,
+          }}
+        >
+          <Text
+            adjustsFontSizeToFit
+            style={{
+              color: '#fff',
+              fontWeight: 'bold',
+              fontSize: normalize(16),
+              paddingLeft: normalize(7),
+            }}
+          >
+            {ValueCheck(data.displaytext) ? data.displaytext : ''}
+          </Text>
+        </View>
+      </View>
+    </CModalOverlay>
+  );
+};
+
+export default AAlert;
+
+/**
+ * Styles
+ */
+const styles = StyleSheet.create({
+  overlaystyle: {
+    position: 'absolute',
+    width: Dimensions.get('window').width,
+    borderRadius: normalize(30),
+    borderWidth: 2,
+    borderColor: '#e0e0e0',
+  },
+});

package/src/Alerts/AAlertIOS.tsx

@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Dimensions,
+  Text,
+  Image,
+  StyleSheet,
+} from 'react-native';
+
+import { Global } from '../../../../../src/Common/Global';
+import Icons from '../Common/Icons';
+import { ValueCheck } from '../CommonStyle/ComponentFunctions';
+import { normalize } from '../CommonStyle/componentStyle';
+
+/**
+ * Types
+ */
+type AlertData = {
+  datavalue: number;
+  displaytext?: string;
+  bgcolor?: string;
+  duration?: number;
+};
+
+type Props = {
+  data: AlertData;
+  close: (value: boolean) => void;
+};
+
+const AAlertIOS: React.FC<Props> = (props) => {
+  const [overlay, setOverlay] = useState<boolean>(true);
+
+  const [data] = useState<
+    AlertData & { bgcolor: string; durartion: number }
+  >({
+    ...props.data,
+    bgcolor: getBgColor(props.data.datavalue),
+    durartion: getDurarion(props.data.datavalue),
+  });
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      props.close(false);
+      setOverlay(false);
+    }, data.durartion);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  function getBgColor(key: number): string {
+    switch (key) {
+      case 1:
+        return '#0ca004';
+      case 2:
+        return '#f44e4e';
+      case 3:
+        return '#bfbf18';
+      case 4:
+        return '#d88304';
+      default:
+        return Global.AppTheme?.primary_color ?? '#000';
+    }
+  }
+
+  function getDurarion(key: number): number {
+    return 2500;
+  }
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        bottom: normalize(80),
+        zIndex: 1,
+      }}
+    >
+      <View
+        style={{
+          flexDirection: 'row',
+          backgroundColor: data.bgcolor,
+          width: Dimensions.get('screen').width,
+          paddingHorizontal: normalize(10),
+          paddingVertical: normalize(10),
+          borderRadius: normalize(10),
+          borderWidth: normalize(2),
+          borderColor: '#fff',
+        }}
+      >
+        {/* App icon */}
+        <Image
+          style={{
+            height: normalize(30),
+            width: normalize(30),
+            borderRadius: normalize(50),
+            alignSelf: 'flex-start',
+          }}
+          resizeMode="stretch"
+          source={require('../../android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png')}
+        />
+
+        {/* Text content */}
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingLeft: normalize(15),
+            flex: 1,
+          }}
+        >
+          <Icons.Entypo
+            color="#fff"
+            name="info"
+            size={normalize(15)}
+          />
+
+          <Text
+            adjustsFontSizeToFit
+            style={{
+              color: '#fff',
+              fontWeight: 'bold',
+              fontSize: normalize(16),
+              paddingLeft: normalize(7),
+              paddingRight: normalize(30),
+            }}
+          >
+            {ValueCheck(data.displaytext) ? data.displaytext : ''}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default AAlertIOS;
+
+/**
+ * (Optional styles kept for future reuse)
+ */
+const styles = StyleSheet.create({
+  overlaystyle: {
+    position: 'absolute',
+    width: Dimensions.get('window').width,
+    borderRadius: normalize(15),
+    borderWidth: 2,
+    borderColor: '#e0e0e0',
+  },
+});

package/src/Common/Icons.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import MaterialCommunityIconsI from 'react-native-vector-icons/MaterialCommunityIcons';
+import SimpleLineIconsI from 'react-native-vector-icons/SimpleLineIcons';
+import MaterialIconsI from 'react-native-vector-icons/MaterialIcons';
+import FontAwesomeI from 'react-native-vector-icons/FontAwesome';
+import FoundationI from 'react-native-vector-icons/Foundation';
+import EvilIconsI from 'react-native-vector-icons/EvilIcons';
+import OcticonsI from 'react-native-vector-icons/Octicons';
+import IoniconsI from 'react-native-vector-icons/Ionicons';
+import FeatherI from 'react-native-vector-icons/Feather';
+import EntypoI from 'react-native-vector-icons/Entypo';
+import ZocialI from 'react-native-vector-icons/Zocial';
+import FontAwesome5I from 'react-native-vector-icons/FontAwesome5';
+import AntDesignI from 'react-native-vector-icons/AntDesign';
+
+import type { IconProps } from 'react-native-vector-icons/Icon';
+
+/**
+ * Shared icon props type
+ */
+type Props = IconProps;
+
+/**
+ * Wrapper components (typed)
+ */
+export const MaterialCommunityIcons: React.FC<Props> = (props) => (
+  <MaterialCommunityIconsI {...props} />
+);
+
+export const SimpleLineIcons: React.FC<Props> = (props) => (
+  <SimpleLineIconsI {...props} />
+);
+
+export const MaterialIcons: React.FC<Props> = (props) => (
+  <MaterialIconsI {...props} />
+);
+
+export const FontAwesome: React.FC<Props> = (props) => (
+  <FontAwesomeI {...props} />
+);
+
+export const Foundation: React.FC<Props> = (props) => (
+  <FoundationI {...props} />
+);
+
+export const EvilIcons: React.FC<Props> = (props) => (
+  <EvilIconsI {...props} />
+);
+
+export const Ionicons: React.FC<Props> = (props) => (
+  <IoniconsI {...props} />
+);
+
+export const Octicons: React.FC<Props> = (props) => (
+  <OcticonsI {...props} />
+);
+
+export const Feather: React.FC<Props> = (props) => (
+  <FeatherI {...props} />
+);
+
+export const Entypo: React.FC<Props> = (props) => (
+  <EntypoI {...props} />
+);
+
+export const Zocial: React.FC<Props> = (props) => (
+  <ZocialI {...props} />
+);
+
+export const FontAwesome5: React.FC<Props> = (props) => (
+  <FontAwesome5I {...props} />
+);
+
+export const AntDesign: React.FC<Props> = (props) => (
+  <AntDesignI {...props} />
+);
+
+/**
+ * Default export object (same usage style as your JS version)
+ */
+const Icons = {
+  MaterialCommunityIcons,
+  SimpleLineIcons,
+  MaterialIcons,
+  FontAwesome,
+  Foundation,
+  EvilIcons,
+  Ionicons,
+  Octicons,
+  Feather,
+  Entypo,
+  Zocial,
+  FontAwesome5,
+  AntDesign,
+};
+
+export default Icons;