@magmamath/students-features 0.9.0-rc19 → 0.9.0-rc2

package/src/features/keyboard/components/BasicLayout/TimeBasicLayout.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet } from 'react-native'
 import { BasicLayout } from './BasicLayout'
-import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { KeyboardLayoutProps, KeyboardType } from '../../types'
 import { useText, Locale } from '../../../../shared/translation'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
 
@@ -16,10 +16,8 @@ export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
         keys={keysGroup.keys}
         numOfRows={keysGroup.numOfRows || keysGroup.keys.length}
         style={{
-          option: {
-            text: styles.text,
-            button: styles.button,
-          },
+          option: { container: styles.optionContainer, text: styles.keysText },
+          container: styles.keysContainer,
         }}
         {...props}
       />
@@ -28,10 +26,13 @@ export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
 }
 
 const styles = StyleSheet.create({
-  button: {
-    width: 45,
+  optionContainer: {
+    flex: 1,
   },
-  text: {
+  keysContainer: {
+    gap: 9,
+  },
+  keysText: {
     fontSize: 14,
     fontWeight: 700,
   },

package/src/features/keyboard/components/BasicLayout/keyboardGroup.ts

@@ -1,4 +1,4 @@
-import { KeyboardGroup } from '../../types/types'
+import { KeyboardGroup } from '../../types'
 import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
 import { MATH_CURRENCY_UNITS, MATH_TIME_UNITS } from '../../types/MathKeysGroups/units'
 
@@ -14,18 +14,6 @@ export const MATH_ENTRY_BASIC_KEYBOARD_GROUP: KeyboardGroup = {
   ],
 }
 
-export const MATH_ENTRY_BASIC_SW_KEYBOARD_GROUP: KeyboardGroup = {
-  id: 'math-entry-basic-sw',
-  keys: [
-    MATH_BASIC_OPERATORS.ADDITION,
-    MATH_BASIC_OPERATORS.SUBTRACTION,
-    MATH_BASIC_OPERATORS.EQUALS,
-    MATH_BASIC_OPERATORS.C_DOT,
-    MATH_BASIC_OPERATORS.DIVISION,
-    MATH_BASIC_OPERATORS.DOT,
-  ],
-}
-
 export const MATH_TIME_SW_KEYBOARD_GROUP: KeyboardGroup = {
   id: 'math-entry-time-sw',
   numOfRows: 3,
@@ -47,7 +35,7 @@ export const MATH_TIME_US_KEYBOARD_GROUP: KeyboardGroup = {
 
 export const MATH_CURRENCY_SW_KEYBOARD_GROUP: KeyboardGroup = {
   id: 'math-entry-currency-sw',
-  keys: [MATH_CURRENCY_UNITS.KRONE, MATH_CURRENCY_UNITS.EURO, MATH_CURRENCY_UNITS.POUND],
+  keys: [MATH_CURRENCY_UNITS.KRONE, MATH_CURRENCY_UNITS.KRONE, MATH_TIME_UNITS.H],
 }
 export const MATH_CURRENCY_UK_KEYBOARD_GROUP: KeyboardGroup = {
   id: 'math-entry-currency-uk',

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

@@ -1,47 +1,48 @@
 import React, { useEffect, useRef } from 'react'
-import { Animated, StyleProp, StyleSheet, useWindowDimensions, ViewStyle } from 'react-native'
-import { COLORS, SelectOptionColor, SHADOWS, SPACING } from '@magmamath/react-native-ui'
-import { getLayoutByCharType, KEYBOARD_LAYOUTS } from '../constants/keyboardLayouts'
-import { KeyboardKey, KeyboardKeyValue, KeyboardType } from '../types/types'
+import {
+  Animated,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+  Easing,
+  useWindowDimensions,
+} from 'react-native'
+import { COLORS, SelectOptionColor } from '@magmamath/react-native-ui'
 import { Numpad } from './Numpad/Numpad'
-import { MAX_WIDTH_FOR_MOBILE_LAYOUT } from '../constants'
+import { getLayoutByCharType } from '../constants/keyboardLayouts'
+import { KeyboardKey, KeyboardKeyValue } from '../types'
 
 type KeyboardProps = {
-  onKeyPress: ({ katexValue, mathliveValue, isSpecialSymbol }: KeyboardKeyValue) => void
+  onKeyPress: ({ katexValue, mathliveValue }: KeyboardKeyValue) => void
   characterType?: number
   style?: StyleProp<ViewStyle>
   color?: SelectOptionColor
+  onBackspacePress?: () => void
+  onSpecialKeyPress?: (value: KeyboardKey) => void
   visible?: boolean
   isSpecialButtonsDisabled?: boolean
   isDisabled?: boolean
-  disabledKeys?: KeyboardKey[]
 }
 
 export const Keyboard = ({ style, characterType, visible = true, ...props }: KeyboardProps) => {
   const slideAnim = useRef(new Animated.Value(600)).current
   const { width } = useWindowDimensions()
-  const Layout = getLayoutByCharType(characterType)
-  const isBasicMobileLayout =
-    characterType &&
-    width <= MAX_WIDTH_FOR_MOBILE_LAYOUT &&
-    KEYBOARD_LAYOUTS[KeyboardType.Basic].characterTypes.includes(characterType)
-  const isAlgebraMobileLayout =
-    characterType &&
-    width <= MAX_WIDTH_FOR_MOBILE_LAYOUT &&
-    (KEYBOARD_LAYOUTS[KeyboardType.AlgebraAdvanced].characterTypes.includes(characterType) ||
-      KEYBOARD_LAYOUTS[KeyboardType.BasicExtended].characterTypes.includes(characterType))
 
   useEffect(() => {
-    Animated.spring(slideAnim, {
+    Animated.timing(slideAnim, {
       toValue: visible ? 0 : 600,
-      stiffness: visible ? 320 : 720,
-      damping: visible ? 40 : 60,
-      mass: 1,
-      velocity: 0,
+      duration: 600,
+      easing: Easing.out(Easing.ease),
       useNativeDriver: true,
     }).start()
   }, [visible])
 
+  if (width < 820) {
+    return null
+  }
+
+  const Layout = getLayoutByCharType(characterType)
+
   return (
     <Animated.View
       style={[
@@ -53,13 +54,7 @@ export const Keyboard = ({ style, characterType, visible = true, ...props }: Key
       ]}
     >
       <Layout {...props} />
-      <Numpad
-        {...props}
-        style={{
-          borderColor: isBasicMobileLayout ? 'transparent' : COLORS.NEUTRAL_3,
-          paddingLeft: SPACING[isAlgebraMobileLayout ? 200 : 800],
-        }}
-      />
+      {width >= 1075 && <Numpad {...props} />}
     </Animated.View>
   )
 }
@@ -78,7 +73,5 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     width: 'auto',
     overflow: 'hidden',
-    height: 155,
-    ...SHADOWS[2],
   },
 })

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

@@ -1,18 +1,18 @@
 import React from 'react'
-import { GestureResponderEvent, StyleProp, StyleSheet, ViewStyle } from 'react-native'
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
 import {
   ButtonStyle,
   SelectGroup,
   SelectOptionColor,
   SelectOptionSize,
 } from '@magmamath/react-native-ui'
-import { KeyboardKey, KeyboardLayoutProps } from '../../types/types'
+import { KeyboardKey, KeyboardLayoutProps } from '../../types'
+import { MathSpecialOperator } from '../../types/MathKeysGroups/specialOperators'
 import { DISABLED_KEYS } from '../../constants/keysValues'
 
 type KeysListProps = {
   keys: KeyboardKey[]
   numOfRows?: number
-  disabledKeys?: KeyboardKey[]
   color?: SelectOptionColor
   style?: {
     container?: StyleProp<ViewStyle>
@@ -20,58 +20,55 @@ type KeysListProps = {
   }
 } & KeyboardLayoutProps
 
-export const getIsIpadOrIphoneDevice = () => {
-  const isIOS = /iPad|iPhone|iPod/.test(navigator.platform)
-  const isIpadOS = navigator?.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform)
-  return isIOS || isIpadOS
-}
-const isIOSWeb = getIsIpadOrIphoneDevice()
-
 export const KeysList = ({
   keys,
   numOfRows,
   style,
   onKeyPress,
+  onSpecialKeyPress,
+  onBackspacePress,
   isSpecialButtonsDisabled,
   isDisabled,
-  disabledKeys,
 }: KeysListProps) => {
   return (
     <SelectGroup
       style={{
         container: [styles.container, style?.container],
-        row: styles.row,
+        row: { gap: 4 },
+        option: {
+          container: {
+            flexGrow: 0,
+            flexShrink: 0,
+            flexBasis: 'auto',
+          },
+          ...style?.option,
+        },
       }}
       numOfRows={numOfRows}
       color={SelectOptionColor.GREY}
       disabled={isDisabled}
-      options={keys.map((key) => {
-        const pressHandler = (e: GestureResponderEvent) => {
-          onKeyPress?.({
-            event: e,
+      options={keys.map((key) => ({
+        key: key.katexValue,
+        title: key.icon ? key.icon : key.label,
+        disabled: isSpecialButtonsDisabled && DISABLED_KEYS.includes(key),
+      }))}
+      size={SelectOptionSize.SMALL}
+      onOptionChange={(option) => {
+        const key = keys.find((k) => k.katexValue === option.key)
+        if (!key) return
+        if (key.katexValue === MathSpecialOperator.BACKSPACE.toLowerCase()) {
+          onBackspacePress?.()
+          return
+        }
+        if (key.isSpecialSymbol) {
+          onSpecialKeyPress?.({
             katexValue: key.katexValue,
             mathliveValue: key.mathliveValue,
-            spreadsheetValue: key.spreadsheetValue,
-            isSpecialSymbol: key.isSpecialSymbol,
           })
+          return
         }
-
-        return {
-          key: key.katexValue,
-          title: key.icon ? key.icon : key.label,
-          // delayPressIn: 0,
-          style: {
-            container: [styles.optionContainer, key.style?.container, style?.option?.container],
-            button: [styles.optionButton, key.style?.button, style?.option?.button],
-            text: [styles.optionText, key.style?.text, style?.option?.text],
-          },
-          ...(isIOSWeb ? { onPress: pressHandler } : { onPressIn: pressHandler }),
-          disabled:
-            (isSpecialButtonsDisabled && DISABLED_KEYS.includes(key)) ||
-            disabledKeys?.includes(key),
-        }
-      })}
-      size={SelectOptionSize.SMALL}
+        onKeyPress?.({ katexValue: key.katexValue, mathliveValue: key.mathliveValue })
+      }}
     />
   )
 }
@@ -81,19 +78,4 @@ const styles = StyleSheet.create({
     width: 'auto',
     gap: 9,
   },
-  row: {
-    gap: 3,
-  },
-  optionContainer: {
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: 'auto',
-  },
-  optionButton: {
-    width: 40,
-  },
-  optionText: {
-    fontSize: 16,
-    fontWeight: 700,
-  },
 })

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

@@ -1,26 +1,23 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
-import { SPACING } from '@magmamath/react-native-ui'
-import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { StyleSheet, View } from 'react-native'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { KeyboardLayoutProps, KeyboardType } from '../../types'
 import { Locale, useText } from '../../../../shared/translation'
 import { getKeyboardGroup } from '../../helpers'
 
-type NumpadProps = {
-  style?: StyleProp<ViewStyle>
-} & KeyboardLayoutProps
-
-export const Numpad = ({ style, ...props }: NumpadProps) => {
+export const Numpad = (props: KeyboardLayoutProps) => {
   const t = useText()
   const keyboardGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.Numpad)
 
   return (
-    <View style={[styles.container, style]}>
+    <View style={styles.container}>
       <KeysList
         keys={keyboardGroup.keys}
         numOfRows={3}
         style={{
           container: styles.keysContainer,
+          option: { text: styles.keyText, button: styles.keyButton },
         }}
         {...props}
       />
@@ -31,9 +28,8 @@ export const Numpad = ({ style, ...props }: NumpadProps) => {
 const styles = StyleSheet.create({
   container: {
     borderLeftWidth: 1,
-    borderColor: 'transparent',
+    borderColor: COLORS.NEUTRAL_3,
     paddingLeft: SPACING[800],
-    marginLeft: 'auto',
   },
   keysContainer: {
     display: 'flex',
@@ -48,10 +44,6 @@ const styles = StyleSheet.create({
     fontWeight: 700,
   },
   keyButton: {
-    width: 40,
-  },
-  optionContainer: {
-    flexGrow: 0,
-    flexBasis: 'auto',
+    width: 42,
   },
 })

package/src/features/keyboard/components/Numpad/keyboardGroups.tsx

@@ -1,6 +1,6 @@
 import { MATH_SPECIAL_OPERATORS } from '../../types/MathKeysGroups/specialOperators'
 import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
-import { KeyboardGroup } from '../../types/types'
+import { KeyboardGroup } from '../../types'
 
 export const MATH_ENTRY_NUMBERS_SW_KEYBOARD_GROUP: KeyboardGroup = {
   id: 'math-entry-numbers-sw',

package/src/features/keyboard/components/UnitsLayout/UnitTabs.tsx

@@ -7,7 +7,7 @@ import {
   KeyboardUnitsGroupType,
   MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS,
 } from './keyboardGroups'
-import { KeyboardLayoutProps } from '../../types/types'
+import { KeyboardLayoutProps } from '../../types'
 import { Locale, useText } from '../../../../shared/translation'
 
 type UnitTabsProps = {
@@ -36,12 +36,11 @@ export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsPro
             <KeysList
               keys={keyGroup}
               numOfRows={1}
-              {...props}
               style={{
-                option: {
-                  text: styles.keysText,
-                },
+                container: styles.keysContainer,
+                option: { button: styles.option, text: styles.text },
               }}
+              {...props}
             />
           ))}
         </View>
@@ -51,6 +50,16 @@ export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsPro
 }
 
 const styles = StyleSheet.create({
+  keysContainer: {
+    gap: 10,
+  },
+  option: {
+    minWidth: 42,
+  },
+  text: {
+    fontWeight: 700,
+    fontSize: 14,
+  },
   optionContainer: {
     flexGrow: 0,
     flexShrink: 0,
@@ -73,8 +82,4 @@ const styles = StyleSheet.create({
   keyGroupContainer: {
     gap: 8,
   },
-  keysText: {
-    fontSize: 14,
-    fontWeight: 700,
-  },
 })

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

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet, useWindowDimensions, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import {
   COLORS,
   FONT_FAMILY,
@@ -15,7 +15,7 @@ import { RectangleIcon } from '../../../../shared/icons/RectangleIcon'
 import { VolumeIcon } from '../../../../shared/icons/VolumeIcon'
 import { WeightIcon } from '../../../../shared/icons/WeightIcon'
 import { UnitTabs } from './UnitTabs'
-import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { KeyboardLayoutProps, KeyboardType } from '../../types'
 import {
   KeyboardUnitsGroupType,
   MATH_ENTRY_AREA_UNITS_SW_KEYBOARD_GROUPS,
@@ -24,7 +24,6 @@ import {
   MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS,
 } from './keyboardGroups'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
-import { MAX_WIDTH_FOR_MOBILE_LAYOUT } from '../../constants'
 
 const UNITS_KEYBOARD_GROUPS = new Map([
   [
@@ -54,10 +53,7 @@ enum SelectedLayout {
 }
 
 export const UnitsLayout = (props: KeyboardLayoutProps) => {
-  const { width } = useWindowDimensions()
-  const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(
-    width > MAX_WIDTH_FOR_MOBILE_LAYOUT ? SelectedLayout.ALGEBRA : SelectedLayout.UNITS,
-  )
+  const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.ALGEBRA)
   const t = useText()
   const basicExtendedKeys =
     KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtended]
@@ -65,7 +61,7 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
     () => [
       {
         title: t('keyboard.length'),
-        style: { paddingLeft: 0, paddingRight: 32, marginRight: -16 },
+        style: { paddingHorizontal: 10 },
         titleStyle: { active: { fontStyle: FONT_FAMILY.buenosAiresBold } },
         key: KeyboardUnitsGroupType.LENGTH,
       },
@@ -83,7 +79,7 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
       },
       {
         title: t('keyboard.weight'),
-        style: { paddingHorizontal: 10, paddingRight: 0 },
+        style: { paddingHorizontal: 10 },
         titleStyle: { active: { fontStyle: FONT_FAMILY.buenosAiresBold } },
         key: KeyboardUnitsGroupType.WEIGHT,
       },
@@ -99,13 +95,10 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
         title: (
           <AlgebraIcon
             color={selectedLayout === SelectedLayout.ALGEBRA ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={22}
+            size={16}
           />
         ),
         key: '1',
-        onPressIn: () => {
-          setSelectedLayout(SelectedLayout.ALGEBRA)
-        },
       },
       {
         title: (
@@ -115,30 +108,27 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
           />
         ),
         key: '2',
-        onPressIn: () => {
-          setSelectedLayout(SelectedLayout.UNITS)
-        },
       },
     ]
   }, [activeTab, selectedLayout])
 
   return (
     <View style={styles.container}>
-      {width > MAX_WIDTH_FOR_MOBILE_LAYOUT && (
-        <SelectGroup
-          numOfRows={2}
-          options={selectOptions}
-          size={SelectOptionSize.SMALL}
-          style={{
-            container: styles.optionContainer,
-            option: { container: { flexBasis: 45, width: 44 } },
-          }}
-          color={props.color}
-          selectedOptions={[
-            selectedLayout === SelectedLayout.ALGEBRA ? selectOptions[0] : selectOptions[1],
-          ]}
-        />
-      )}
+      <SelectGroup
+        numOfRows={2}
+        options={selectOptions}
+        size={SelectOptionSize.SMALL}
+        style={{
+          container: styles.optionContainer,
+        }}
+        color={props.color}
+        selectedOptions={[
+          selectedLayout === SelectedLayout.ALGEBRA ? selectOptions[0] : selectOptions[1],
+        ]}
+        onOptionChange={(option) => {
+          setSelectedLayout(option.key === '1' ? SelectedLayout.ALGEBRA : SelectedLayout.UNITS)
+        }}
+      />
       {selectedLayout === SelectedLayout.UNITS ? (
         <UnitTabs
           tabs={tabs}
@@ -149,7 +139,12 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
           {...props}
         />
       ) : (
-        <KeysList keys={basicExtendedKeys.keys} numOfRows={3} {...props} />
+        <KeysList
+          keys={basicExtendedKeys.keys}
+          numOfRows={3}
+          {...props}
+          style={{ container: styles.basicExtendedContainer, option: { button: styles.key } }}
+        />
       )}
     </View>
   )
@@ -161,6 +156,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 16,
     paddingRight: 16,
+    width: 480,
+  },
+  basicExtendedContainer: {
+    gap: 8,
   },
   option: {
     minWidth: 42,
@@ -170,10 +169,11 @@ const styles = StyleSheet.create({
     flexShrink: 0,
     flexBasis: 'auto',
     width: 'auto',
-    paddingRight: 18,
+    paddingRight: 16,
     borderRightWidth: 1,
     borderRightColor: COLORS.NEUTRAL_3,
-    maxWidth: 65,
-    gap: 9,
+  },
+  key: {
+    width: 42,
   },
 })

package/src/features/keyboard/components/UnitsLayout/keyboardGroups.tsx

@@ -1,4 +1,4 @@
-import { KeyboardGroup, KeyboardKey } from '../../types/types'
+import { KeyboardGroup, KeyboardKey } from '../../types'
 import {
   MATH_AREA_UNITS,
   MATH_LENGTH_UNITS,

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

@@ -1,4 +1,4 @@
-import { KeyboardType } from '../types/types'
+import { KeyboardType } from '../types'
 import { AlgebraLayout } from '../components/AlgebraLayout/AlgebraLayout'
 import { BasicLayout } from '../components/BasicLayout/BasicLayout'
 import { BasicExtendedLayout } from '../components/BasicExtendedLayout/BasicExtendedLayout'
@@ -10,7 +10,7 @@ import { BasicExtendedPlusLayout } from '../components/BasicExtendedPlusLayout/B
 export const KEYBOARD_LAYOUTS = {
   [KeyboardType.AlgebraAdvanced]: {
     Component: AlgebraLayout,
-    characterTypes: [6, 19, 20, 21, 22],
+    characterTypes: [6, 19, 21, 22],
   },
   [KeyboardType.Basic]: {
     Component: BasicLayout,
@@ -30,7 +30,7 @@ export const KEYBOARD_LAYOUTS = {
   },
   [KeyboardType.BasicUnits]: {
     Component: UnitsLayout,
-    characterTypes: [5, 14],
+    characterTypes: [5, 14, 20],
   },
   [KeyboardType.BasicExtendedPlus]: {
     Component: BasicExtendedPlusLayout,