@magmamath/students-features 0.9.0-rc21 → 0.9.0-rc23

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

@@ -6,27 +6,24 @@ import { Locale, useText } from '../../../../shared/translation'
 import { UnitTabs } from './UnitTabs'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { KeyboardUnitsGroupType } from './keyboardGroups'
-import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
 import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
-import { useLayoutSelectOptions } from './hooks/useLayoutSelectOptions'
 import { useUnitTabs } from './hooks/useUnitTabs'
-
-enum SelectedLayout {
-  ALGEBRA = 'algebra',
-  UNITS = 'units',
-}
+import { getKeyboardGroup } from '../../helpers'
+import { SelectedLayout } from './types'
+import { getSelectOptions } from './helpers'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 export const UnitsLayout = (props: KeyboardLayoutProps) => {
   const { width } = useWindowDimensions()
-  const isDesktop = width > MOBILE_LAYOUT_WIDTH
+  const t = useText()
+  const locale = t('locale') as Locale
+  const isDesktop = width > MOBILE_LAYOUT_WIDTH && !IS_MOBILE
   const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(
     isDesktop ? SelectedLayout.ALGEBRA : SelectedLayout.UNITS,
   )
-  const t = useText()
-  const basicPlusKeys = KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicPlus]
-  const tabs = useUnitTabs()
-  const [activeTab, setActiveTab] = useState(tabs[0])
-  const selectOptions = useLayoutSelectOptions({
+  const basicPlusKeys = getKeyboardGroup(locale, KeyboardType.BasicPlus)
+  const { tabs, activeTab, setActiveTab } = useUnitTabs()
+  const selectOptions = getSelectOptions({
     activeTabKey: activeTab.key as KeyboardUnitsGroupType,
     selectedLayout,
     setSelectedLayout,
@@ -50,14 +47,7 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
         />
       )}
       {selectedLayout === SelectedLayout.UNITS ? (
-        <UnitTabs
-          tabs={tabs}
-          activeTab={activeTab}
-          onTabChange={(tab) => {
-            setActiveTab(tab)
-          }}
-          {...props}
-        />
+        <UnitTabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} {...props} />
       ) : (
         <KeysList keys={basicPlusKeys.keys} numOfRows={3} {...props} />
       )}
@@ -68,7 +58,7 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
 const styles = StyleSheet.create({
   container: {
     display: 'flex',
-    flexDirection: 'row',
+    flexDirection: IS_MOBILE ? 'column' : 'row',
     gap: 16,
     paddingRight: 16,
   },

package/src/features/keyboard/components/UnitsLayout/{hooks/useLayoutSelectOptions.tsx → helpers.tsx}

@@ -1,14 +1,8 @@
-import { useMemo } from 'react'
 import { COLORS, RulerIcon } from '@magmamath/react-native-ui'
-import { AlgebraIcon } from '../../../../../shared/icons/AlgebraIcon'
-import { UNITS_KEYBOARD_GROUPS } from '../constants'
-import { KeyboardUnitsGroupType } from '../keyboardGroups'
+import { KeyboardUnitsGroupType, UNITS_KEYBOARD_GROUPS } from './keyboardGroups'
 import React from 'react'
-
-export enum SelectedLayout {
-  ALGEBRA = 'algebra',
-  UNITS = 'units',
-}
+import { SelectedLayout } from './types'
+import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
 
 type UseLayoutSelectOptionsProps = {
   activeTabKey: KeyboardUnitsGroupType
@@ -16,12 +10,12 @@ type UseLayoutSelectOptionsProps = {
   setSelectedLayout: (layout: SelectedLayout) => void
 }
 
-export const useLayoutSelectOptions = ({
+export const getSelectOptions = ({
   activeTabKey,
   selectedLayout,
   setSelectedLayout,
 }: UseLayoutSelectOptionsProps) => {
-  return useMemo(() => {
+  {
     const SelectedIcon = UNITS_KEYBOARD_GROUPS.get(activeTabKey)?.icon || RulerIcon
 
     return [
@@ -46,5 +40,5 @@ export const useLayoutSelectOptions = ({
         onPressIn: () => setSelectedLayout(SelectedLayout.UNITS),
       },
     ]
-  }, [activeTabKey, selectedLayout, setSelectedLayout])
+  }
 }

package/src/features/keyboard/components/UnitsLayout/hooks/useUnitTabs.ts

@@ -1,11 +1,11 @@
 import { useText } from '../../../../../shared/translation'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { FONT_FAMILY, TabOptionProps } from '@magmamath/react-native-ui'
 import { KeyboardUnitsGroupType } from '../keyboardGroups'
 
-export const useUnitTabs = (): TabOptionProps[] => {
+export const useUnitTabs = () => {
   const t = useText()
-  return useMemo(
+  const tabs = useMemo(
     () => [
       {
         title: t('keyboard.length'),
@@ -34,4 +34,6 @@ export const useUnitTabs = (): TabOptionProps[] => {
     ],
     [],
   )
+  const [activeTab, setActiveTab] = useState<TabOptionProps>(tabs[0])
+  return { tabs, activeTab, setActiveTab }
 }

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

@@ -6,6 +6,10 @@ import {
   MATH_WEIGHT_UNITS,
 } from '../../types/MathKeysGroups/units'
 import { Locale } from '../../../../shared/translation'
+import { RulerIcon } from '@magmamath/react-native-ui'
+import { RectangleIcon } from '../../../../shared/icons/RectangleIcon'
+import { VolumeIcon } from '../../../../shared/icons/VolumeIcon'
+import { WeightIcon } from '../../../../shared/icons/WeightIcon'
 
 export enum KeyboardUnitsGroupType {
   LENGTH = 'length',
@@ -221,3 +225,24 @@ export const KEYBOARD_UNITS_GROUPS_BY_LOCALE: Record<
     [KeyboardUnitsGroupType.WEIGHT]: MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS,
   },
 }
+export const UNITS_KEYBOARD_GROUPS = new Map([
+  [
+    KeyboardUnitsGroupType.LENGTH,
+    {
+      keys: MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS.keys,
+      icon: RulerIcon,
+    },
+  ],
+  [
+    KeyboardUnitsGroupType.AREA,
+    { keys: MATH_ENTRY_AREA_UNITS_SW_KEYBOARD_GROUPS.keys, icon: RectangleIcon },
+  ],
+  [
+    KeyboardUnitsGroupType.VOLUME,
+    { keys: MATH_ENTRY_VOLUME_UNITS_SW_KEYBOARD_GROUPS.keys, icon: VolumeIcon },
+  ],
+  [
+    KeyboardUnitsGroupType.WEIGHT,
+    { keys: MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS.keys, icon: WeightIcon },
+  ],
+])

package/src/features/keyboard/components/UnitsLayout/types.ts

@@ -0,0 +1,4 @@
+export enum SelectedLayout {
+  ALGEBRA = 'algebra',
+  UNITS = 'units',
+}

package/src/features/keyboard/helpers.ts

@@ -1,4 +1,4 @@
-import { KEYBOARD_GROUPS_BY_LOCALE } from './constants/keysValues'
+import { KEYBOARD_GROUPS_BY_LOCALE } from './constants/keyboardGroupsByLocale'
 import { KeyboardGroup, KeyboardType } from './types/types'
 import { Locale } from '../../shared/translation/types'
 import { MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP } from './components/AlgebraLayout/keyboardGroups'

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

@@ -114,12 +114,14 @@ export const MATH_BASIC_OPERATORS: MathKeysGroup<typeof MathBasicOperator> = {
     mathliveValue: '<',
     katexValue: 'LESS_THAN',
     spreadsheetValue: '<',
+    mathQuillValue: '<',
   },
   [MathBasicOperator.GREATER_THAN]: {
     icon: <GreaterThanIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '>',
     katexValue: 'GREATER_THAN',
     spreadsheetValue: '>',
+    mathQuillValue: '>',
   },
   [MathBasicOperator.LESS_THAN_OR_EQUAL]: {
     icon: <LessThanOrEqualIcon {...DEFAULT_KEY_ICON_PROPS} />,
@@ -190,6 +192,7 @@ export const MATH_BASIC_OPERATORS: MathKeysGroup<typeof MathBasicOperator> = {
     icon: <SquarePowerIcon {...DEFAULT_KEY_ICON_PROPS} size={20} extraColor={COLORS.NEUTRAL_6} />,
     mathliveValue: '^{2}',
     katexValue: 'POWER_SQUARE',
+    mathQuillValue: '^{2}',
     isSpecialSymbol: true,
   },
   [MathBasicOperator.CUBE_POWER]: {
@@ -197,17 +200,20 @@ export const MATH_BASIC_OPERATORS: MathKeysGroup<typeof MathBasicOperator> = {
     mathliveValue: '^{3}',
     katexValue: 'POWER_CUBE',
     isSpecialSymbol: true,
+    mathQuillValue: '^{3}',
   },
   [MathBasicOperator.NTH_POWER]: {
     icon: <NthPowerIcon size={18} color={COLORS.NEUTRAL_6} />,
     mathliveValue: '^{\\placeholder}',
     katexValue: 'POWER',
+    mathQuillValue: '^',
     isSpecialSymbol: true,
   },
   [MathBasicOperator.FRACTION]: {
     icon: <FractionIcon {...DEFAULT_KEY_ICON_PROPS} size={25} extraColor={COLORS.NEUTRAL_6} />,
     mathliveValue: '\\frac{\\placeholder{}}{\\placeholder{}}',
     katexValue: 'FRACTION',
+    mathQuillValue: '\\\\frac',
     isSpecialSymbol: true,
   },
   [MathBasicOperator.SQUARE_ROOT]: {

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

@@ -5,6 +5,7 @@ import { ParallelIcon } from '../../../../shared/icons/MATH/ParallelIcon/Paralle
 import { PerpendicularIcon } from '../../../../shared/icons/MATH/PerpendicularIcon/PerpendicularIcon'
 import { MathKeysGroup } from '../types'
 import { DEFAULT_KEY_ICON_PROPS } from '../../constants/constants'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 export enum MathGeometrySymbols {
   DEGREE = 'DEGREE',
@@ -44,6 +45,12 @@ export const MATH_GEOMETRY_SYMBOLS: MathKeysGroup<typeof MathGeometrySymbols> =
         fontSize: 14,
         fontWeight: 700,
       },
+      button: {
+        width: IS_MOBILE ? 50 : 40,
+      },
+      container: {
+        flexBasis: IS_MOBILE ? 55 : 'auto',
+      },
     },
   },
 }