@quintype/native-components 2.29.1-beta.3 → 2.29.1-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.29.1-beta.3",
+  "version": "2.29.1-beta.4",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/JSEmbedElement/index.js

@@ -40,7 +40,7 @@ const getHTMLContent = (embedJs) => {
   const width = useWindowDimensions().width;
   const decodedContent = getDecodedContent(embedJs);
   let htmlContent = replaceDefaultProtocol(decodedContent);
-  htmlContent = removeWidthnHeight(htmlContent);
+
   const webViewScript = `
     <script type="application/javascript">
         var interValId;
@@ -78,6 +78,7 @@ export const JSEmbedElement = (props) => {
   const [height, setHeight] = useState(-1);
   const webViewRef = useRef(null);
   const screenWidth = useWindowDimensions().width;
+  const screenHeight = useWindowDimensions().height;
   const width = get(
     props,
     ['currentLayout', 'width'],
@@ -92,15 +93,31 @@ export const JSEmbedElement = (props) => {
     setHeight(parseInt(event.nativeEvent.data));
   };
 
-  const constructSource = () => {
-    const urlMapper = {
-      [STORY_ELEMENT_SUBTYPES.TWITTER]: 'https://twitter.com',
-      [STORY_ELEMENT_SUBTYPES.FACEBOOK]: 'https://facebook.com',
-      [STORY_ELEMENT_SUBTYPES.INSTAGRAM]: 'https://instagram.com',
-    };
+// Function to manually extract the base URL from an iframe src
+const extractBaseUrlFromIframe = (iframeHtml) => {
+  const regex = /src="([^"]+)"/;  // Regex to extract src URL from iframe
+  const match = iframeHtml.match(regex);
+
+  if (match && match[1]) {
+    const srcUrl = match[1]; // The full src URL from iframe
+
+    // Manually extract the base URL (protocol + host + pathname)
+    const urlPattern = /^(https?:\/\/[^/]+(?:\/[^?]*)?)/;
+    const baseUrlMatch = srcUrl.match(urlPattern);
 
-    const baseUrl = urlMapper[props.element.subtype] || 'https://twitter.com';
+    if (baseUrlMatch) {
+      return baseUrlMatch[1]; // Return the base URL
+    } else {
+      console.error('Invalid URL format.');
+      return null;
+    }
+  } else {
+    console.error('Iframe src not found.');
+    return null;
+  }
+};
 
+  const constructSource = () => {
     return {
       html: getHTMLContent(props.element['embed-js']),
       baseUrl: extractBaseUrlFromIframe(getDecodedContent(props.element['embed-js'])),
@@ -113,7 +130,7 @@ export const JSEmbedElement = (props) => {
         ref={webViewRef}
         style={{
           width,
-          height: Number(height),
+          height: Math.min(Number(height), screenHeight-250),
           flex: 0,
           opacity: 0.99,
         }}
@@ -132,6 +149,7 @@ export const JSEmbedElement = (props) => {
         source={constructSource()}
         mixedContentMode="always"
         mediaPlaybackRequiresUserAction={true}
+        nestedScrollEnabled={true}
       />
     </View>
   }
@@ -162,6 +180,7 @@ export const JSEmbedElement = (props) => {
         mixedContentMode="always"
         mediaPlaybackRequiresUserAction={true}
         injectedJavaScript='window.ReactNativeWebView.postMessage(document.body.scrollHeight)'
+        nestedScrollEnabled={true}
       />
     </View>
   );

package/src/components/Pagination/index.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+const Pagination = ({ currentPage, totalPages, onPageChange }) => {
+  const range = 2;
+
+  const getPages = () => {
+    const pages = [];
+    let start = Math.max(1, currentPage - range);
+    let end = Math.min(totalPages, currentPage + range);
+
+    if (start > 1) pages.push('...');
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+    if (end < totalPages) pages.push('...');
+
+    return pages;
+  };
+
+
+  const handlePageChange = (page) => {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      onPageChange(page);
+    }
+  };
+
+  const pages = getPages();
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        onPress={() => handlePageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        style={[styles.arrow, currentPage === 1 && styles.disabled]}>
+        <Text style={styles.arrowText}>{'<'}</Text>
+      </TouchableOpacity>
+
+      {pages.map((page, index) => (
+        <TouchableOpacity
+          key={index}
+          onPress={() => handlePageChange(page)}
+
+          style={[
+            styles.pageButton,
+            page === currentPage && styles.activePage,
+
+          ]}
+        >
+          <Text style={styles.pageText}>
+            {page}
+          </Text>
+        </TouchableOpacity>
+      ))}
+
+      <TouchableOpacity
+        onPress={() => handlePageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        style={[styles.arrow, currentPage === totalPages && styles.disabled]}>
+        <Text style={styles.arrowText}>{'>'}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 20,
+
+    marginHorizontal:20,
+    borderRadius:5
+  },
+  arrow: {
+    padding: 5,
+    borderRadius: 5,
+    backgroundColor: '#f0f0f0',
+    height:38,
+    paddingHorizontal:10
+  },
+  arrowText: {
+    fontSize: 20,
+    color: '#000',
+  },
+  pageButton: {
+    marginHorizontal: 5,
+    padding: 10,
+    borderRadius: 5,
+    backgroundColor: '#f0f0f0',
+    height:38,
+    paddingHorizontal:12
+  },
+  pageText: {
+    fontSize: 16,
+    color: '#000',
+  },
+  activePage: {
+    backgroundColor: '#993366',
+    height:38,
+    padding: 10,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  disabledText: {
+    color: '#ccc',
+  },
+});
+
+export default Pagination;

package/src/components/Table/index.js

@@ -1,10 +1,11 @@
-import React, { useContext } from 'react';
-import { View , ScrollView } from 'react-native';
+import React, { useContext, useEffect } from 'react';
+import { View , ScrollView, Button } from 'react-native';
 import get from 'lodash/get';
 import { formatData } from '../../utils/tableUtils';
 import { tableStyles } from './styles';
 import { Text } from '../index';
 import { AppTheme } from '../../utils';
+import Pagination from '@quintype/native-components/src/components/Pagination';
 
 export const Table = ({ card }) => {
   const csv = get(card, ['data', 'content'], '');
@@ -19,10 +20,19 @@ export const Table = ({ card }) => {
   );
 
   const tableData = [tableHeaderRow].concat(headerData);
+  const [filteredData, setFilteredData] = React.useState([]);
+  const [activePage, setActivePage] = React.useState(1);
+
+  useEffect(()=>{
+    const nextData = tableData.slice(Math.max(0, (activePage - 1) * 10), activePage * 10);
+    if(nextData.length > 0){
+      setFilteredData(nextData)
+    }
+  },[activePage])
 
   const renderTableBody = () => (
     <View style={styles.tableBody}>
-      {tableData.map((data) => (
+      {filteredData.map((data) => (
         <View style={styles.tableRow}>
           {headerFields.map((headerField) => (
             <View style={styles.tableHeaderTitle}>
@@ -34,11 +44,18 @@ export const Table = ({ card }) => {
     </View>
   );
 
+  const onPageChange = (page) => {
+    setActivePage(page);
+  };
+
   return (
+    <>
+    <Pagination currentPage={activePage} totalPages={tableData.length / 10} onPageChange={onPageChange}/>
     <ScrollView horizontal>
       <View style={styles.tableContainer}>
-        <View>{renderTableBody()}</View>
+        {filteredData && <View>{renderTableBody()}</View>}
       </View>
     </ScrollView>
+    </>
   );
 };