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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.29.1-beta.4",
+  "version": "2.29.2",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -16,7 +16,6 @@
     "lint-staged": "^10.5.3",
     "prop-types": "15.7.2",
     "quintype-js": "1.2.1",
-    "react-csv-reader": "^4.0.0",
     "react-htmltext": "^0.40.2",
     "react-native-fast-image": ">=8.3.2",
     "react-native-image-pan-zoom": "^2.1.12",

package/src/components/AuthorRow/styles.js

@@ -47,6 +47,7 @@ export const authorRowStyleSheet = (appThemeContext) => {
     readtimeComponent: {
       justifyContent: 'center',
       alignItems: 'center',
+      padding: 10,
     },
   });
 };

package/src/components/Pagination/index.js

@@ -1,7 +1,17 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import React, {useContext} from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import {
+  AppTheme
+} from "@quintype/native-components";
+import Icon from "react-native-vector-icons/MaterialIcons";
+import { Text } from '@quintype/native-components/src/components/Text';
+import {styles as paginationStyles}  from "./styles";
 
 const Pagination = ({ currentPage, totalPages, onPageChange }) => {
+  const { theme } = useContext(AppTheme);
+  const { COLORS, FONT_SIZE } = theme;
+  const styles = paginationStyles(COLORS, FONT_SIZE);
+  if(totalPages == 1) return null;
   const range = 2;
 
   const getPages = () => {
@@ -33,18 +43,17 @@ const Pagination = ({ currentPage, totalPages, onPageChange }) => {
         onPress={() => handlePageChange(currentPage - 1)}
         disabled={currentPage === 1}
         style={[styles.arrow, currentPage === 1 && styles.disabled]}>
-        <Text style={styles.arrowText}>{'<'}</Text>
+        <Icon style={styles.iconStyle} name="arrow-back-ios-new" color={COLORS.BRAND_BLACK} size={FONT_SIZE.h5}/>
       </TouchableOpacity>
 
       {pages.map((page, index) => (
         <TouchableOpacity
           key={index}
           onPress={() => handlePageChange(page)}
-
+          disabled={page === '...'}
           style={[
             styles.pageButton,
             page === currentPage && styles.activePage,
-
           ]}
         >
           <Text style={styles.pageText}>
@@ -52,61 +61,16 @@ const Pagination = ({ currentPage, totalPages, onPageChange }) => {
           </Text>
         </TouchableOpacity>
       ))}
-
       <TouchableOpacity
         onPress={() => handlePageChange(currentPage + 1)}
         disabled={currentPage === totalPages}
-        style={[styles.arrow, currentPage === totalPages && styles.disabled]}>
-        <Text style={styles.arrowText}>{'>'}</Text>
+        style={[styles.arrow,{backgroundColor:COLORS.BRAND_WHITE}, currentPage === totalPages && styles.disabled]}>
+
+        <Icon style={styles.iconStyle} name="arrow-forward-ios" color={COLORS.BRAND_BLACK} size={FONT_SIZE.h5}/>
       </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/Pagination/styles.js

@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = (COLORS, FONT_SIZE) => StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 20,
+    marginHorizontal:20,
+    borderRadius:5,
+  },
+  arrow: {
+    padding: 5,
+    borderRadius: 5,
+    backgroundColor: COLORS.BRAND_WHITE,
+    height:38,
+    paddingHorizontal:10,
+    shadowColor: "rgba(190,190,190,0.3)",
+    shadowOffset: { width: 0, height: 2.0 },
+    shadowOpacity: 1,
+    shadowRadius: 4,
+    elevation: 10,
+  },
+  arrowText: {
+    fontSize: 20,
+    color: COLORS.BRAND_BLACK,
+  },
+  pageButton: {
+    marginHorizontal: 2,
+    padding: 10,
+    borderRadius: 5,
+    backgroundColor: COLORS.BRAND_WHITE,
+    minHeight:38,
+    paddingHorizontal:12,
+    shadowColor: "rgba(190,190,190,0.3)",
+    shadowOffset: { width: 0, height: 2.0 },
+    shadowOpacity: 1,
+    shadowRadius: 4,
+    elevation: 100,
+  },
+  pageText: {
+    color: COLORS.BRAND_BLACK,
+    fontSize:FONT_SIZE.h6
+  },
+  activePage: {
+    borderColor: COLORS.BRAND_1,
+    minHeight:38,
+    padding: 10,
+    borderWidth:1
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  disabledText: {
+    color: COLORS.MONO6,
+  },
+  iconStyle:{
+    alignSelf: 'center',
+    marginTop:7
+  }
+});

package/src/components/Story/styles.js

@@ -54,6 +54,7 @@ export const storyStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
   },
   ttsStoryButtonStyle:{
     flexDirection:'row',
+    marginTop: 10,
     marginLeft:10,
     alignItems:'center',
     padding:10,

package/src/components/Table/index.js

@@ -19,15 +19,13 @@ export const Table = ({ card }) => {
     {},
   );
 
-  const tableData = [tableHeaderRow].concat(headerData);
+  const tableData = 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)
-    }
+    setFilteredData([tableHeaderRow].concat(nextData))
   },[activePage])
 
   const renderTableBody = () => (
@@ -50,7 +48,7 @@ export const Table = ({ card }) => {
 
   return (
     <>
-    <Pagination currentPage={activePage} totalPages={tableData.length / 10} onPageChange={onPageChange}/>
+    {filteredData.length > 1 && <Pagination currentPage={activePage} totalPages={parseInt(tableData.length % 10 === 0 ? tableData.length /10 : tableData.length /10+1)} onPageChange={onPageChange}/>}
     <ScrollView horizontal>
       <View style={styles.tableContainer}>
         {filteredData && <View>{renderTableBody()}</View>}