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

package/src/CustomComponents/COverlay.tsx

@@ -0,0 +1,110 @@
+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 '../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,
+  },
+});