feat: Calculating Max Cigarattes to display dynamically (shootismoke#750

) * Calculating Max Cigarattes to display dynamically Signed-off-by: sarthakpranesh <[email protected]> * Added getCigarettesHeight to calculate cigarette height Signed-off-by: sarthakpranesh <[email protected]>
bertoort · Oct 2, 2020 · 2d7fb34 · 2d7fb34
1 parent 1dc9dfb
commit 2d7fb34
Showing 1 changed file with 37 additions and 12 deletions.
diff --git a/App/Screens/Home/Home.tsx b/App/Screens/Home/Home.tsx
@@ -16,7 +16,7 @@
 
 import { StackNavigationProp } from '@react-navigation/stack';
 import React, { useContext, useEffect, useState } from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { ScrollView, StyleSheet, View, Dimensions } from 'react-native';
 import { CigarettesBlock, Frequency, FrequencyContext } from '@shootismoke/ui';
 import { scale } from 'react-native-size-matters';
 
@@ -63,6 +63,39 @@ function getCigarettesMargin(count: number): number {
  );
 }
 
+/*
+ * Calculates each cigarettes height using number of cigarettes
+ */
+function getCigarettesHeight(count: number): number {
+ return scale(
+ count <= THRESHOLD.FIRST
+ ? SIZES.BIG
+ : count <= THRESHOLD.SECOND
+ ? SIZES.MEDIUM
+ : count <= THRESHOLD.THIRD
+ ? SIZES.BIG
+ : count <= THRESHOLD.FOURTH
+ ? SIZES.MEDIUM
+ : SIZES.SMALL
+ );
+}
+
+/*
+ * Dynamically calculating max number of cigarettes
+ */
+function getDynamicMaxCigarettes(count: number): number {
+ const CIGARETTE_ASPECT_RATIO = 21 / 280; // taken from the @shootismoke/ui lib
+ const height = getCigarettesHeight(count);
+ const width = height * CIGARETTE_ASPECT_RATIO;
+ const margin = getCigarettesMargin(count);
+ const componentWidth =
+ Dimensions.get('window').width -
+ theme.withPadding.paddingHorizontal * 2;
+ // componentWidth * 2 because we want to show cigarettes in two rows
+ const r = Math.floor((componentWidth * 2) / (width + margin));
+ return r;
+}
+
 const styles = StyleSheet.create({
  cigarettes: {
  height: scale(SIZES.MEDIUM),
@@ -148,18 +181,10 @@ export function Home(props: HomeProps): React.ReactElement {
  <CigarettesBlock
  cigarettes={cigarettes.count}
  cigarettesStyle={styles.cigarettes}
- fullCigaretteLength={scale(
- cigarettes.count <= THRESHOLD.FIRST
- ? SIZES.BIG
- : cigarettes.count <= THRESHOLD.SECOND
- ? SIZES.MEDIUM
- : cigarettes.count <= THRESHOLD.THIRD
- ? SIZES.BIG
- : cigarettes.count <= THRESHOLD.FOURTH
- ? SIZES.MEDIUM
- : SIZES.SMALL
+ fullCigaretteLength={getCigarettesHeight(cigarettes.count)}
+ showMaxCigarettes={getDynamicMaxCigarettes(
+ cigarettes.count
  )}
- showMaxCigarettes={64}
  spacingHorizontal={getCigarettesMargin(cigarettes.count)}
  spacingVertical={getCigarettesMargin(cigarettes.count)}
  style={[theme.withPadding, styles.withMargin]}