@magmamath/students-features 0.6.14-rc.20 → 0.6.14-rc.21

package/src/features/exampleSolution/components/SolutionSection.tsx

@@ -1,69 +1,112 @@
-import { StyleSheet, View, Image, Text } from 'react-native'
+import {
+  StyleSheet,
+  View,
+  Image,
+  ImageBackground,
+  ScrollView,
+  useWindowDimensions,
+} from 'react-native'
 import React from 'react'
 import { COLORS, IS_WEB, SPACING } from '@magmamath/react-native-ui'
 import Animated, { FadeIn } from 'react-native-reanimated'
 import { ExampleSolutionStatuses } from '../constants'
-import gridImage from '../assets/grid.png'
+import gridImage from '../assets/grid.webp'
 
 type SolutionSectionProps = {
   answer?: string
   status: ExampleSolutionStatuses
 }
 
+const CONTAINER_SIZES = {
+  width: 489,
+  height: 543,
+}
+const BORDER_WIDTH = 1
+const CONTAINER_HEIGHT_OFFSET = 160
+
 const gridImagePath = !IS_WEB ? Image.resolveAssetSource(gridImage).uri : gridImage
 
 export const SolutionSection = ({ answer, status }: SolutionSectionProps) => {
+  const { height } = useWindowDimensions()
+
   const shouldShowAnswer =
     answer &&
     (status === ExampleSolutionStatuses.DONE_DATA || status === ExampleSolutionStatuses.CACHE)
 
   return (
-    <View style={styles.container}>
-      <Image
-        source={{ uri: gridImagePath }}
-        style={[styles.gridImage, IS_WEB && styles.gridImageWeb]}
-      />
-      {shouldShowAnswer && (
-        <Animated.ScrollView
-          style={styles.solutionScroll}
-          contentContainerStyle={styles.solutionScrollContent}
-          entering={status === 'cache' ? undefined : FadeIn.delay(1000).duration(500)}
-        >
-          <Text style={styles.solutionText}>{answer}</Text>
-        </Animated.ScrollView>
-      )}
+    <View style={[styles.container, IS_WEB && { maxHeight: height - CONTAINER_HEIGHT_OFFSET }]}>
+      <ScrollView
+        style={styles.solutionScroll}
+        contentContainerStyle={styles.solutionScrollContent}
+        bounces
+      >
+        {IS_WEB ? (
+          <ImageBackground
+            resizeMode="repeat"
+            style={[styles.gridImageWeb]}
+            source={{ uri: gridImagePath }}
+          >
+            {shouldShowAnswer && (
+              <Animated.Text
+                entering={status === 'cache' ? undefined : FadeIn.delay(1000).duration(500)}
+                style={styles.solutionText}
+              >
+                {answer}
+              </Animated.Text>
+            )}
+          </ImageBackground>
+        ) : (
+          <>
+            <ImageBackground
+              resizeMode="repeat"
+              style={styles.gridImageRn}
+              source={{ uri: gridImagePath }}
+            />
+            {shouldShowAnswer && (
+              <Animated.Text
+                entering={status === 'cache' ? undefined : FadeIn.delay(1000).duration(500)}
+                style={styles.solutionText}
+              >
+                {answer}
+              </Animated.Text>
+            )}
+          </>
+        )}
+      </ScrollView>
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    width: 500,
+    width: CONTAINER_SIZES.width,
+    height: CONTAINER_SIZES.height,
     overflow: 'hidden',
     borderRadius: 8,
-    borderWidth: 1,
+    borderWidth: BORDER_WIDTH,
     borderColor: COLORS.NEUTRAL_5,
   },
-  gridImage: {
+  gridImageRn: {
+    top: -327,
     width: '100%',
-    height: '100%',
-    resizeMode: 'cover',
-    aspectRatio: 28 / 8,
+    height: '150%',
+    position: 'absolute',
   },
   gridImageWeb: {
-    transform: [{ scale: 3.5 }],
-  },
-  solutionScroll: {
-    position: 'absolute',
     width: '100%',
     height: '100%',
   },
+  solutionScroll: {
+    flex: 1,
+  },
   solutionScrollContent: {
-    paddingHorizontal: SPACING[800],
-    paddingVertical: SPACING[400],
+    minHeight: CONTAINER_SIZES.height - BORDER_WIDTH * 2,
+    width: '100%',
   },
   solutionText: {
     fontFamily: 'PlaypenSans-Light',
-    fontSize: 22,
+    fontSize: 28,
+    marginHorizontal: SPACING[800],
+    marginVertical: SPACING[400],
   },
 })

package/src/features/exampleSolution/model/ExampleSolution.model.ts

@@ -1,4 +1,4 @@
-import { GifCelebrationsModelProps } from '../types'
+import { ExampleSolutionModelProps } from '../types'
 import { ExampleSolutionsApi } from './ExampleSolutionApi'
 import { ExampleSolutionCache } from './ExampleSolutionCache'
 
@@ -6,7 +6,10 @@ export class ExampleSolutionModel {
   public readonly api
   public readonly cache = new ExampleSolutionCache()
 
-  constructor({ api, errorHandler }: GifCelebrationsModelProps) {
+  public readonly renderKatexComponent: (katexString: string) => React.ReactNode
+
+  constructor({ api, errorHandler, renderKatexComponent }: ExampleSolutionModelProps) {
     this.api = new ExampleSolutionsApi({ api, errorHandler })
+    this.renderKatexComponent = renderKatexComponent
   }
 }

package/src/features/exampleSolution/types.ts

@@ -15,9 +15,10 @@ export type ExampleSolutionApiRequests = {
   generateExampleSolution: (body: ExampleSolutionPayload) => Promise<ExampleSolutionResponse>
 }
 export type ExampleSolutionErrorHandler = (errorMessage: string) => void
-export type GifCelebrationsModelProps = {
+export type ExampleSolutionModelProps = {
   api: ExampleSolutionApiRequests
   errorHandler?: ExampleSolutionErrorHandler
+  renderKatexComponent: (katexString: string) => React.ReactNode
 }
 export type ExampleSolutionModalParams = {
   cacheKey: string

package/src/features/formulaSheet/components/FormulaSheet.tsx

@@ -43,6 +43,11 @@ export const FormulaSheet = forwardRef<ButtonRef | null, FormulaSheetProps>(
     const sheetFileBlob = useUnit(model.file.$blob)
     const isRequestPending = useUnit(model.api.getPDFFileBlobFx.pending)
 
+    const onPressHandler = () => {
+      model.modal.toggle()
+      onPress?.()
+    }
+
     useEffect(() => {
       model.file.setId(fileId ?? null)
     }, [fileId])
@@ -55,10 +60,7 @@ export const FormulaSheet = forwardRef<ButtonRef | null, FormulaSheetProps>(
           variant={ButtonVariant.SECONDARY}
           colorScheme={buttonColor}
           isActive={isOpen}
-          onPress={() => {
-            model.modal.toggle()
-            onPress?.()
-          }}
+          onPress={() => onPressHandler()}
           icon={<TheoryIcon color={isOpen ? COLORS.NEUTRAL_1 : undefined} size={20} />}
           style={style}
         />

package/src/shared/translation/localization/sw.json

@@ -26,7 +26,7 @@
     "almostThere": "Nästan där"
   },
   "exampleSolution": {
-    "exampleSolution": "Lösnings exempel",
+    "exampleSolution": "Lösningsexempel",
     "letMeThink": "Låt mig tänka...",
     "aha": "Aha!",
     "errorMessage": "Något gick snett med att generera en exempellösning"