@magmamath/students-features 0.9.105 → 0.9.106

package/src/features/keyboard/components/BasicPlusPlusLayout/BasicPlusPlusLayout.tsx

@@ -3,15 +3,16 @@ import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { KeysList } from '../KeysList/KeysList'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { Locale, useText } from '../../../../shared/translation'
-import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
 import { getKeyboardGroup } from '../../helpers'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
+import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
 
 export const BasicPlusPlusLayout = (props: KeyboardLayoutProps) => {
   const t = useText()
   const { width } = useWindowDimensions()
   const locale = t('locale') as Locale
-  const isDesktop = width > MOBILE_LAYOUT_WIDTH && !IS_MOBILE
+  const isDesktop =
+    width > KEYBOARD_LAYOUTS[KeyboardType.BasicPlusPlus].mobileBreakpoint && !IS_MOBILE
   const keysGroup = getKeyboardGroup(
     locale,
     isDesktop ? KeyboardType.BasicPlusPlus : KeyboardType.BasicPlusPlusMobile,

package/src/features/keyboard/components/Keyboard.tsx

@@ -9,7 +9,7 @@ import {
   KEYBOARD_SLIDE_DISTANCE,
   slideInAnimationSettings,
 } from './MainLayout/constants'
-import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
+import { isMobileWidth } from '../helpers'
 
 type KeyboardProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
@@ -31,7 +31,7 @@ export const Keyboard = ({
   const slideAnim = useRef(new Animated.Value(KEYBOARD_SLIDE_DISTANCE)).current
 
   const { width } = useWindowDimensions()
-  const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
+  const isMobile = IS_MOBILE || isMobileWidth(width, characterType)
   const mobileStyles = useMemo(
     () => getLayoutConfigStyles(characterType, isMobile),
     [characterType, isMobile],

package/src/features/keyboard/components/MainLayout/MainLayout.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
-import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { Animated, StyleSheet, View } from 'react-native'
 import { SelectOptionColor, IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
 import { getLayoutByCharType, isBasicPlusPlusLayout } from '../../constants/keyboardLayouts'
 import { KeyboardKey, KeyboardKeyValue } from '../../types/types'
 import { UnderlinedLayout } from '../UnderlinedLayout/UnderlinedLayout'
-import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
 
 type LayoutProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
@@ -27,11 +26,8 @@ export const MainLayout = ({
   const fadeAnim = useRef(new Animated.Value(showUnderlinedKeys ? 1 : 0)).current
   const fadeRef = useRef<Animated.CompositeAnimation | null>(null)
 
-  const { width } = useWindowDimensions()
-  const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
-
   const Layout = useMemo(() => getLayoutByCharType(characterType), [characterType])
-  const isUnderlinedLayoutVisible = isUnderlinedVisible && !isSecondaryLayoutSelected && !isMobile
+  const isUnderlinedLayoutVisible = isUnderlinedVisible && !isSecondaryLayoutSelected && !IS_MOBILE
 
   const animateFade = useCallback(
     (toValue: number, onComplete?: () => void) => {

package/src/features/keyboard/constants/constants.ts

@@ -5,4 +5,4 @@ export const DEFAULT_KEY_ICON_PROPS = {
   color: COLORS.NEUTRAL_9,
 } as const
 
-export const MOBILE_LAYOUT_WIDTH = 1280
+export const MOBILE_LAYOUT_WIDTH = 1200

package/src/features/keyboard/constants/keyboardLayouts.ts

@@ -7,6 +7,7 @@ import { CurrencyBasicLayout } from '../components/BasicLayout/CurrencyBasicLayo
 import { UnitsLayout } from '../components/UnitsLayout/UnitsLayout'
 import { BasicPlusPlusLayout } from '../components/BasicPlusPlusLayout/BasicPlusPlusLayout'
 import { MyScriptMathCharacterTypes } from '../../../types/characterTypes'
+import { MOBILE_LAYOUT_WIDTH } from './constants'
 
 export const KEYBOARD_LAYOUTS = {
   [KeyboardType.AlgebraAdvanced]: {
@@ -18,10 +19,12 @@ export const KEYBOARD_LAYOUTS = {
       MyScriptMathCharacterTypes.ALGEBRA_GREEK,
       MyScriptMathCharacterTypes.GENERAL_MATH,
     ],
+    mobileBreakpoint: 1300,
   },
   [KeyboardType.Basic]: {
     Component: BasicLayout,
     characterTypes: [MyScriptMathCharacterTypes.NUMBERS_WHOLE],
+    mobileBreakpoint: 990,
   },
   [KeyboardType.BasicPlus]: {
     Component: BasicPlusLayout,
@@ -56,6 +59,7 @@ export const KEYBOARD_LAYOUTS = {
       MyScriptMathCharacterTypes.GEOM_ANGLES,
       MyScriptMathCharacterTypes.GEOM_COORDINATE,
     ],
+    mobileBreakpoint: 1220,
   },
 }
 
@@ -72,6 +76,19 @@ export function getLayoutByCharType(charType?: number) {
   return AlgebraLayout
 }
 
+export function getMobileBreakpointByCharType(charType?: number) {
+  if (!charType) {
+    return KEYBOARD_LAYOUTS[KeyboardType.AlgebraAdvanced].mobileBreakpoint
+  }
+
+  for (const layout of Object.values(KEYBOARD_LAYOUTS)) {
+    if (layout.characterTypes.includes(charType)) {
+      return 'mobileBreakpoint' in layout ? layout.mobileBreakpoint : MOBILE_LAYOUT_WIDTH
+    }
+  }
+  return KEYBOARD_LAYOUTS[KeyboardType.AlgebraAdvanced].mobileBreakpoint
+}
+
 export function isBasicPlusPlusLayout(charType?: number) {
   if (!charType) {
     return true

package/src/features/keyboard/helpers.ts

@@ -3,6 +3,7 @@ import { KeyboardGroup, KeyboardType } from './types/types'
 import { Locale } from '../../shared/translation/types'
 import { MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP } from './components/AlgebraLayout/keyboardGroups'
 import { IS_WEB } from '@magmamath/react-native-ui'
+import { getMobileBreakpointByCharType } from './constants/keyboardLayouts'
 
 export function getKeyboardGroup(locale: Locale, type: KeyboardType): KeyboardGroup {
   return KEYBOARD_GROUPS_BY_LOCALE[locale]?.[type] ?? MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP
@@ -16,3 +17,8 @@ export const getIsIpadOrIphoneDevice = () => {
   const isIpadOS = navigator?.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform)
   return isIOS || isIpadOS
 }
+
+export const isMobileWidth = (width: number, characterType?: number) => {
+  const layoutWidth = getMobileBreakpointByCharType(characterType)
+  return width <= layoutWidth
+}

package/src/features/keyboard/types/MathKeysGroups/basicOperators.tsx

@@ -112,7 +112,7 @@ export const MATH_BASIC_OPERATORS = createMathKeysGroup({
   },
   COMMA: {
     icon: <CommaIcon {...DEFAULT_KEY_ICON_PROPS} size={22} />,
-    mathliveValue: ',',
+    mathliveValue: '{,}',
     katexValue: ',',
   },
   COLON: {