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

package/src/Hoc/HIcons.tsx

@@ -15,69 +15,60 @@ 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 interface IconsProps extends Props {
+  icongroup?: number | null;
+}
+
+// Wrappers (kept, but note: declare BEFORE the map)
+export const MaterialCommunityIcons: React.FC<Props> = (p) => <MaterialCommunityIconsI {...p} />;
+export const SimpleLineIcons:       React.FC<Props> = (p) => <SimpleLineIconsI {...p} />;
+export const MaterialIcons:         React.FC<Props> = (p) => <MaterialIconsI {...p} />;
+export const FontAwesome:           React.FC<Props> = (p) => <FontAwesomeI {...p} />;
+export const Foundation:            React.FC<Props> = (p) => <FoundationI {...p} />;
+export const EvilIcons:             React.FC<Props> = (p) => <EvilIconsI {...p} />;
+export const Ionicons:              React.FC<Props> = (p) => <IoniconsI {...p} />;
+export const Octicons:              React.FC<Props> = (p) => <OcticonsI {...p} />;
+export const Feather:               React.FC<Props> = (p) => <FeatherI {...p} />;
+export const Entypo:                React.FC<Props> = (p) => <EntypoI {...p} />;
+export const Zocial:                React.FC<Props> = (p) => <ZocialI {...p} />;
+export const FontAwesome5:          React.FC<Props> = (p) => <FontAwesome5I {...p} />;
+export const AntDesign:             React.FC<Props> = (p) => <AntDesignI {...p} />;
+
+// If you actually need Fontisto, add:
+// import FontistoI from 'react-native-vector-icons/Fontisto';
+// export const Fontisto: React.FC<Props> = (p) => <FontistoI {...p} />;
+
+const components: Record<number, React.ComponentType<Props>> = {
+  1:  AntDesign,
+  2:  MaterialIcons,
+  3:  MaterialCommunityIcons,
+  4:  FontAwesome,
+  5:  FontAwesome5,
+  6:  Foundation,
+  7:  EvilIcons,
+  8:  Ionicons,
+  9:  Octicons,
+  10: Feather,
+  11: Entypo,
+  12: Zocial,
+  14: SimpleLineIcons,
+};
 
-export const Entypo: React.FC<Props> = (props) => (
-  <EntypoI {...props} />
-);
+const DEFAULT_ICON_GROUP = 5;
 
-export const Zocial: React.FC<Props> = (props) => (
-  <ZocialI {...props} />
-);
+function Icons({ icongroup, ...rest }: IconsProps): React.ReactElement {
+  const group =
+    typeof icongroup === 'number' && Number.isInteger(icongroup) && icongroup >= 1 && icongroup in components
+      ? icongroup
+      : DEFAULT_ICON_GROUP;
 
-export const FontAwesome5: React.FC<Props> = (props) => (
-  <FontAwesome5I {...props} />
-);
+  const IconComponent = components[group] ?? components[DEFAULT_ICON_GROUP];
 
-export const AntDesign: React.FC<Props> = (props) => (
-  <AntDesignI {...props} />
-);
+  return <IconComponent {...rest} />;
+}
 
-/**
- * Default export object (same usage style as your JS version)
- */
 const HIcons = {
   MaterialCommunityIcons,
   SimpleLineIcons,
@@ -92,6 +83,7 @@ const HIcons = {
   Zocial,
   FontAwesome5,
   AntDesign,
+  Icons,
 };
 
 export default HIcons;

package/src/Hoc/HShadowButton.tsx

@@ -0,0 +1,101 @@
+import { StyleProp, Text, TextStyle, TouchableOpacity, ViewStyle } from 'react-native';
+import { isBNU, isNU, isNUQ, normalize } from '../CommonStyle/ComponentFunctions';
+import HIcons from './HIcons';
+import { Global } from '../Common/Global';
+import React from 'react';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface HShadowButtonProps {
+  /** Disables the button when true. */
+  disabled?: boolean;
+  /** Invoked on press. Receives `true` when pressed. */
+  buttonCallback?: (pressed: boolean) => void;
+  /** Outer button (TouchableOpacity) style. */
+  buttonstyle?: StyleProp<ViewStyle>;
+
+  /** Render the leading icon when true. */
+  useicon?: boolean;
+  /** Icon group index (e.g. FontAwesome vs MaterialIcons). Defaults to 5. */
+  icongroup?: number;
+  /** Icon name string. Defaults to 'file-alt'. */
+  iconname?: string;
+  /** Icon color. Defaults to `Global.AppTheme.primary_color`. */
+  iconcolor?: string;
+  /** Icon size. Defaults to `normalize(15)`. */
+  iconsize?: number;
+  /** Extra icon container style. */
+  iconstyle?: StyleProp<ViewStyle>;
+
+  /** Render the label when true. */
+  usetext?: boolean;
+  /** Label text. */
+  displaytext?: string;
+  /** Text style. Defaults provided in component. */
+  textstyle?: StyleProp<TextStyle>;
+  /** Max lines for the label. Defaults to 1. */
+  numberOfLines?: number;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export default function HShadowButton(props: HShadowButtonProps): React.ReactElement {
+  const {
+    disabled,
+    buttonCallback,
+    buttonstyle,
+    useicon,
+    icongroup,
+    iconname,
+    iconcolor,
+    iconsize,
+    iconstyle,
+    usetext,
+    displaytext,
+    textstyle,
+    numberOfLines,
+  } = props;
+
+  return (
+    <TouchableOpacity
+      disabled={!!disabled}
+      onPress={() => {
+        if (isNU(buttonCallback)) {
+          buttonCallback!(true);
+        }
+      }}
+      style={isNU(buttonstyle) ? buttonstyle : {}}
+    >
+      {useicon ? (
+        <HIcons.Icons
+          icongroup={isNU(icongroup) ? icongroup : 5}
+          name={isBNU(iconname) ? iconname : 'file-alt'}
+          color={isNU(iconcolor) ? iconcolor : Global.AppTheme.primary_color}
+          size={isNU(iconsize) ? iconsize : normalize(15)}
+          style={iconstyle ? iconstyle : {}}
+        />
+      ) : null}
+      {usetext ? (
+        <Text
+          numberOfLines={numberOfLines || 1}
+          adjustsFontSizeToFit={true}
+          style={
+            textstyle
+              ? textstyle
+              : {
+                  color: Global.AppTheme.primary_color,
+                  fontSize: normalize(6),
+                  textAlign: 'center',
+                }
+          }
+        >
+          {isNUQ(displaytext) ? displaytext : null}
+        </Text>
+      ) : null}
+    </TouchableOpacity>
+  );
+}

package/src/Hoc/HView.tsx

@@ -0,0 +1,33 @@
+import React, { createContext, useContext } from 'react';
+import type { ReactNode } from 'react';
+
+interface HViewProps {
+    component?: string;
+    components?: Record<string, React.ComponentType<any>>;
+    children?: ReactNode;
+    [key: string]: any;
+}
+
+const ComponentsContext = createContext<
+    Record<string, React.ComponentType<any>> | undefined
+>(undefined);
+
+const HView: React.FC<HViewProps> = ({ component, components, ...props }) => {
+    const inheritedComponents = useContext(ComponentsContext);
+
+    if (!component) {
+        return components ? (
+            <ComponentsContext.Provider value={components}>
+                {props.children}
+            </ComponentsContext.Provider>
+        ) : (
+            <>{props.children}</>
+        );
+    }
+
+    const ViewHOCComponent = (components ?? inheritedComponents)?.[component];
+
+    return ViewHOCComponent ? <ViewHOCComponent {...props} /> : null;
+};
+
+export default HView;

package/src/Navigation/PageNavigation.tsx

@@ -0,0 +1,189 @@
+import React, {
+  createContext,
+  useState,
+  useRef,
+  useEffect,
+  useContext,
+  ReactNode,
+} from 'react';
+
+import { View, Platform } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+type Route = {
+  name: string;
+  params?: any;
+};
+
+type NavigationContextType = {
+  navigate: (screenName: string, params?: any) => void;
+  replace: (screenName: string, params?: any) => void;
+  goBack: () => void;
+  addFocusListener: (screenName: string, callback: () => void) => () => void;
+  current: Route;
+};
+
+const NavigationContext = createContext<NavigationContextType | null>(null);
+
+type NavigationScreens = Record<string, React.ComponentType<any>>;
+
+type ProviderProps = {
+  screens: NavigationScreens;
+  children?: ReactNode;
+};
+
+export const NavigationProvider: React.FC<ProviderProps> = ({
+  screens,
+  children,
+}) => {
+  const [stack, setStack] = useState<Route[]>([
+    { name: Object.keys(screens)[0], params: {} },
+  ]);
+
+  const focusListeners = useRef<Record<string, Array<() => void>>>({});
+
+  const current = stack[stack.length - 1];
+
+  const navigate = (screenName: string, params = {}) => {
+    setStack(prev => [...prev, { name: screenName, params }]);
+  };
+
+  const replace = (screenName: string, params = {}) => {
+    setStack(prev => [
+      ...prev.slice(0, -1),
+      { name: screenName, params },
+    ]);
+  };
+
+  const goBack = () => {
+    setStack(prev => (prev.length > 1 ? prev.slice(0, -1) : prev));
+  };
+
+  const addFocusListener = (screenName: string, callback: () => void) => {
+    if (!focusListeners.current[screenName]) {
+      focusListeners.current[screenName] = [];
+    }
+
+    focusListeners.current[screenName].push(callback);
+
+    return () => {
+      const listeners = focusListeners.current[screenName] || [];
+      focusListeners.current[screenName] = listeners.filter(
+        cb => cb !== callback
+      );
+    };
+  };
+
+  useEffect(() => {
+    const listeners = focusListeners.current[current.name] || [];
+    listeners.forEach(cb => cb());
+  }, [current.name]);
+
+  return (
+    <NavigationContext.Provider
+      value={{ navigate, goBack, replace, addFocusListener, current }}
+    >
+      <View style={{ flex: 1 }}>
+        {stack.map((route, index) => {
+          const ScreenComponent: React.ComponentType<any> = screens[route.name];
+          const isFocused = index === stack.length - 1;
+
+          return (
+            <View
+              key={index}
+              style={{
+                flex: 1,
+                display: isFocused ? 'flex' : 'none',
+              }}
+            >
+              <ScreenComponent
+                navigation={{ navigate, replace, goBack }}
+                route={{ params: route.params }}
+              />
+            </View>
+          );
+        })}
+
+        {children}
+      </View>
+    </NavigationContext.Provider>
+  );
+};
+
+export const useNavigation = () => {
+  const ctx = useContext(NavigationContext);
+  if (!ctx) {
+    throw new Error('useNavigation must be used inside NavigationProvider');
+  }
+  return ctx;
+};
+
+export const useFocusEffect = (callback: () => void | (() => void)) => {
+  const { current, addFocusListener } = useNavigation();
+  const cleanupRef = useRef<any>(null);
+
+  useEffect(() => {
+    cleanupRef.current?.();
+
+    const unsubscribe = addFocusListener(current.name, () => {
+      cleanupRef.current?.();
+      cleanupRef.current = callback();
+    });
+
+    return () => {
+      cleanupRef.current?.();
+      unsubscribe?.();
+    };
+  }, [current.name]);
+};
+
+export const useIsFocused = (): boolean => {
+  const { current, addFocusListener } = useNavigation();
+  const [isFocused, setIsFocused] = useState(true);
+
+  useEffect(() => {
+    setIsFocused(true);
+
+    const unsubscribe = addFocusListener(current.name, () => {
+      setIsFocused(true);
+    });
+
+    return () => {
+      setIsFocused(false);
+      unsubscribe();
+    };
+  }, [current.name]);
+
+  return isFocused;
+};
+
+export const ReactNativeNavigation: React.FC<{
+  screens: NavigationScreens;
+}> = ({ screens }) => {
+  const Stack = createNativeStackNavigator();
+
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        initialRouteName={Object.keys(screens)[0]}
+        screenOptions={{
+          animation: 'none',
+          headerShown: false,
+        }}
+      >
+        {Object.entries(screens).map(([name, component]) => (
+          <Stack.Screen key={name} name={name} component={component} />
+        ))}
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default function Navigation({ screens }: { screens: NavigationScreens }) {
+  return Platform.OS === 'web' ? (
+    <NavigationProvider screens={screens} />
+  ) : (
+    <ReactNativeNavigation screens={screens} />
+  );
+}

package/src/Navigation/useFocusEffect.ts

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

package/src/Navigation/useFocusEffect.web.ts

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

package/src/Navigation/useIsFocused.ts

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

package/src/Navigation/useIsFocused.web.ts

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

package/src/Navigation/useNavigation.ts

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

package/src/Navigation/useNavigation.web.ts

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