@magmamath/students-features 1.1.3 → 1.2.0

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

@@ -2,15 +2,13 @@ import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { BasicLayout } from './BasicLayout'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { Locale, useText } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
+import { getMainKeyboardGroup } from '../../helpers'
 
-export const CurrencyBasicLayout = (props: KeyboardLayoutProps) => {
-  const t = useText()
-  const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.BasicCurrency)
+export const CurrencyBasicLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
+  const keysGroup = getMainKeyboardGroup(keys, KeyboardType.BasicCurrency)
 
   return (
-    <BasicLayout {...props}>
+    <BasicLayout keys={keys} {...props}>
       <KeysList keys={keysGroup.keys} numOfRows={keysGroup.keys.length} {...props} />
     </BasicLayout>
   )

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

@@ -3,16 +3,14 @@ import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet } from 'react-native'
 import { BasicLayout } from './BasicLayout'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { useText, Locale } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
+import { getMainKeyboardGroup } from '../../helpers'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 
-export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
-  const t = useText()
-  const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.BasicTime)
+export const TimeBasicLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
+  const keysGroup = getMainKeyboardGroup(keys, KeyboardType.BasicTime)
 
   return (
-    <BasicLayout {...props}>
+    <BasicLayout keys={keys} {...props}>
       <KeysList
         keys={keysGroup.keys}
         numOfRows={keysGroup.numOfRows || keysGroup.keys.length}

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

@@ -2,18 +2,16 @@ import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { Locale, useText } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
-import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
+import { getMainKeyboardGroup } from '../../helpers'
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/keyboard.constants'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 
-export const BasicPlusLayout = (props: KeyboardLayoutProps) => {
-  const t = useText()
-  const locale = t('locale') as Locale
+export const BasicPlusLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
   const { width } = useWindowDimensions()
   const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
-  const keysGroup = getKeyboardGroup(
-    locale,
+
+  const keysGroup = getMainKeyboardGroup(
+    keys,
     isMobile ? KeyboardType.BasicPlusMobile : KeyboardType.BasicPlus,
   )
 

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

@@ -2,19 +2,18 @@ import React from 'react'
 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 { getKeyboardGroup } from '../../helpers'
+import { getMainKeyboardGroup } from '../../helpers'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
 
-export const BasicPlusPlusLayout = (props: KeyboardLayoutProps) => {
-  const t = useText()
+export const BasicPlusPlusLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
   const { width } = useWindowDimensions()
-  const locale = t('locale') as Locale
+
   const isDesktop =
     width > KEYBOARD_LAYOUTS[KeyboardType.BasicPlusPlus].mobileBreakpoint && !IS_MOBILE
-  const keysGroup = getKeyboardGroup(
-    locale,
+
+  const keysGroup = getMainKeyboardGroup(
+    keys,
     isDesktop ? KeyboardType.BasicPlusPlus : KeyboardType.BasicPlusPlusMobile,
   )
 

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

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useRef } from 'react'
 import { Animated, StyleProp, StyleSheet, useWindowDimensions, ViewStyle } from 'react-native'
 import { COLORS, IS_MOBILE, IS_WEB, SelectOptionColor, SHADOWS } from '@magmamath/react-native-ui'
-import { KeyboardKey, KeyboardKeyValue } from '../types'
 import { Numpad } from './Numpad/Numpad'
 import { MainLayout } from './MainLayout/MainLayout'
 import {
@@ -10,9 +9,13 @@ import {
   slideInAnimationSettings,
 } from './MainLayout/constants'
 import { isMobileWidth } from '../helpers'
+import { KeyboardConfig } from '@magmamath/frontend-config'
+import { KeyboardKey, KeyboardKeyValue } from '../types/types'
+import { resolveKeyboard } from '../constants/keyboard.helpers'
 
 type KeyboardProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
+  keys: KeyboardConfig
   characterType?: number
   style?: StyleProp<ViewStyle>
   color?: SelectOptionColor
@@ -28,6 +31,7 @@ export const Keyboard = ({
   isMainLayoutDisabled,
   ...props
 }: KeyboardProps) => {
+  const resolvedKeys = useMemo(() => resolveKeyboard(props.keys), [props.keys])
   const slideAnim = useRef(new Animated.Value(KEYBOARD_SLIDE_DISTANCE)).current
 
   const { width } = useWindowDimensions()
@@ -62,10 +66,11 @@ export const Keyboard = ({
     >
       <MainLayout
         {...props}
+        keys={resolvedKeys}
         isDisabled={isMainLayoutDisabled || props.isDisabled}
         characterType={characterType}
       />
-      <Numpad {...props} style={mobileStyles} />
+      <Numpad {...props} keys={resolvedKeys} style={mobileStyles} />
     </Animated.View>
   )
 }

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

@@ -2,13 +2,13 @@ import React, { useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import {
   ButtonStyle,
+  IS_MOBILE,
   SelectGroup,
   SelectOptionColor,
   SelectOptionSize,
 } from '@magmamath/react-native-ui'
 import { KeyboardKey, KeyboardLayoutProps } from '../../types/types'
 import { mapKeyToOption } from './helpers'
-import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 type KeysListProps = {
   keys: KeyboardKey[]
@@ -18,7 +18,7 @@ type KeysListProps = {
   style?: {
     option?: ButtonStyle
   }
-} & KeyboardLayoutProps
+} & Omit<KeyboardLayoutProps, 'keys'>
 
 export const KeysList = ({
   keys,

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

@@ -1,11 +1,12 @@
-import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Animated, StyleSheet, View } from 'react-native'
-import { SelectOptionColor, IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
+import { IS_MOBILE, IS_WEB, SelectOptionColor } from '@magmamath/react-native-ui'
 import { getLayoutByCharType, isBasicPlusPlusLayout } from '../../constants/keyboardLayouts'
-import { KeyboardKey, KeyboardKeyValue } from '../../types/types'
 import { UnderlinedLayout } from '../UnderlinedLayout/UnderlinedLayout'
+import { KeyboardKey, KeyboardKeyValue, ResolvedKeyboard } from '../../types/types'
 
 type LayoutProps = {
+  keys: ResolvedKeyboard
   onKeyPress: (key: KeyboardKeyValue) => void
   characterType?: number
   color?: SelectOptionColor

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

@@ -3,16 +3,16 @@ 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 { Locale, useText } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
+import { useText } from '../../../../shared/translation'
+import { getMainKeyboardGroup } from '../../helpers'
 
 type NumpadProps = {
   style?: StyleProp<ViewStyle>
 } & KeyboardLayoutProps
 
-export const Numpad = ({ style, ...props }: NumpadProps) => {
+export const Numpad = ({ style, keys, ...props }: NumpadProps) => {
   const t = useText()
-  const keyboardGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.Numpad)
+  const keyboardGroup = getMainKeyboardGroup(keys, KeyboardType.Numpad)
 
   return (
     <View style={[styles.container, style]}>

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

@@ -1,17 +1,18 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { Locale, useText } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
+import { KeyboardLayoutProps, KeyboardType, ResolvedKeyboard } from '../../types/types'
+import { getMainKeyboardGroup } from '../../helpers'
 
 type UnderlinedLayoutProps = {
+  keys: ResolvedKeyboard
   showSlashKey?: boolean
 } & KeyboardLayoutProps
 
-export const UnderlinedLayout = (props: UnderlinedLayoutProps) => {
-  const t = useText()
-  const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.Underlined)
-  const keys = props.showSlashKey ? keysGroup.keys : keysGroup.keys.slice(0, -1)
+export const UnderlinedLayout = ({ keys, ...props }: UnderlinedLayoutProps) => {
+  const keysGroup = getMainKeyboardGroup(keys, KeyboardType.Underlined)
+  const keysToShow = props.showSlashKey ? keysGroup.keys : keysGroup.keys.slice(0, -1)
 
-  return <KeysList keys={keys} numOfRows={props.showSlashKey ? 2 : keys.length} {...props} />
+  return (
+    <KeysList keys={keysToShow} numOfRows={props.showSlashKey ? 2 : keysToShow.length} {...props} />
+  )
 }

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

@@ -1,13 +1,9 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, View } from 'react-native'
-import { COLORS, TabGroup, TabOptionProps, TabVariant, IS_MOBILE } from '@magmamath/react-native-ui'
-import { MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS } from './keyboardGroups'
-import { KeyboardLayoutProps } from '../../types/types'
-import { Locale } from '@magmamath/students-features'
-import { useText } from '../../../../shared/translation'
-import { KEYBOARD_UNITS_GROUPS_BY_LOCALE } from '../../constants/keyboardGroupsByLocale'
-import { KeyboardUnitsGroupType } from './types'
+import { COLORS, IS_MOBILE, TabGroup, TabOptionProps, TabVariant } from '@magmamath/react-native-ui'
+import { KeyboardLayoutProps, KeyboardUnitsGroupType } from '../../types/types'
+import { getUnitsKeyboardGroup } from '../../helpers'
 
 type UnitTabsProps = {
   tabs: TabOptionProps[]
@@ -15,12 +11,8 @@ type UnitTabsProps = {
   onTabChange?: (value: TabOptionProps) => void
 } & KeyboardLayoutProps
 
-export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsProps) => {
-  const t = useText()
-  const locale = t('locale') as Locale
-  const keyboardGroups =
-    KEYBOARD_UNITS_GROUPS_BY_LOCALE[locale]?.[activeTab.key as KeyboardUnitsGroupType]?.keys ||
-    MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS.keys
+export const UnitTabs = ({ activeTab, tabs, onTabChange, keys, ...props }: UnitTabsProps) => {
+  const keyboardGroups = getUnitsKeyboardGroup(keys, activeTab.key as KeyboardUnitsGroupType).keys
 
   return (
     <View style={styles.container}>

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

@@ -1,27 +1,25 @@
 import React, { useState } from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, useWindowDimensions, View } from 'react-native'
-import { COLORS, SelectGroup, SelectOptionSize } from '@magmamath/react-native-ui'
-import { Locale, useText } from '../../../../shared/translation'
+import { COLORS, IS_MOBILE, SelectGroup, SelectOptionSize } from '@magmamath/react-native-ui'
 import { UnitTabs } from './UnitTabs'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/keyboard.constants'
 import { useUnitTabs } from './hooks/useUnitTabs'
-import { getKeyboardGroup } from '../../helpers'
+import { getMainKeyboardGroup } from '../../helpers'
 import { KeyboardUnitsGroupType, SelectedLayout } from './types'
 import { getSelectOptions } from './helpers'
-import { IS_MOBILE } from '@magmamath/react-native-ui'
 
-export const UnitsLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps) => {
+export const UnitsLayout = ({ onLayoutChange, keys, ...props }: KeyboardLayoutProps) => {
   const { width } = useWindowDimensions()
-  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 basicPlusKeys = getKeyboardGroup(locale, KeyboardType.BasicPlus)
+
+  const basicPlusKeys = getMainKeyboardGroup(keys, KeyboardType.BasicPlus)
   const { tabs, activeTab, setActiveTab } = useUnitTabs()
+
   const selectOptions = getSelectOptions({
     activeTabKey: activeTab.key as KeyboardUnitsGroupType,
     selectedLayout,
@@ -48,7 +46,13 @@ export const UnitsLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps) =
       )}
 
       {selectedLayout === SelectedLayout.UNITS ? (
-        <UnitTabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} {...props} />
+        <UnitTabs
+          tabs={tabs}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+          keys={keys}
+          {...props}
+        />
       ) : (
         <KeysList keys={basicPlusKeys.keys} numOfRows={3} {...props} />
       )}

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

@@ -1,8 +1,18 @@
-import { COLORS, RulerIcon } from '@magmamath/react-native-ui'
-import { UNITS_KEYBOARD_GROUPS } from './keyboardGroups'
-import React from 'react'
+import { COLORS, IconProps, RulerIcon, TimeIcon } from '@magmamath/react-native-ui'
+import React, { ComponentType } from 'react'
 import { KeyboardUnitsGroupType, SelectedLayout } from './types'
 import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
+import { RectangleIcon } from '../../../../shared/icons/RectangleIcon'
+import { VolumeIcon } from '../../../../shared/icons/VolumeIcon'
+import { WeightIcon } from '../../../../shared/icons/WeightIcon'
+
+const ICON_BY_UNIT_GROUP: Record<KeyboardUnitsGroupType, ComponentType<IconProps>> = {
+  [KeyboardUnitsGroupType.LENGTH]: RulerIcon,
+  [KeyboardUnitsGroupType.AREA]: RectangleIcon,
+  [KeyboardUnitsGroupType.VOLUME]: VolumeIcon,
+  [KeyboardUnitsGroupType.WEIGHT]: WeightIcon,
+  [KeyboardUnitsGroupType.TIME]: TimeIcon,
+}
 
 type UseLayoutSelectOptionsProps = {
   activeTabKey: KeyboardUnitsGroupType
@@ -17,38 +27,36 @@ export const getSelectOptions = ({
   setSelectedLayout,
   onLayoutChange,
 }: UseLayoutSelectOptionsProps) => {
-  {
-    const SelectedIcon = UNITS_KEYBOARD_GROUPS.get(activeTabKey)?.icon || RulerIcon
+  const SelectedIcon = ICON_BY_UNIT_GROUP[activeTabKey]
 
-    return [
-      {
-        key: SelectedLayout.ALGEBRA,
-        title: (
-          <AlgebraIcon
-            color={selectedLayout === SelectedLayout.ALGEBRA ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={22}
-          />
-        ),
-        onPressIn: () => {
-          setSelectedLayout(SelectedLayout.ALGEBRA)
-          onLayoutChange?.(false)
-        },
+  return [
+    {
+      key: SelectedLayout.ALGEBRA,
+      title: (
+        <AlgebraIcon
+          color={selectedLayout === SelectedLayout.ALGEBRA ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
+          size={22}
+        />
+      ),
+      onPressIn: () => {
+        setSelectedLayout(SelectedLayout.ALGEBRA)
+        onLayoutChange?.(false)
       },
-      {
-        key: SelectedLayout.UNITS,
-        title: (
-          <SelectedIcon
-            color={selectedLayout === SelectedLayout.UNITS ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={16}
-          />
-        ),
-        onPressIn: () => {
-          setSelectedLayout(SelectedLayout.UNITS)
-          onLayoutChange?.(true)
-        },
+    },
+    {
+      key: SelectedLayout.UNITS,
+      title: (
+        <SelectedIcon
+          color={selectedLayout === SelectedLayout.UNITS ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
+          size={16}
+        />
+      ),
+      onPressIn: () => {
+        setSelectedLayout(SelectedLayout.UNITS)
+        onLayoutChange?.(true)
       },
-    ]
-  }
+    },
+  ]
 }
 
 export const isKeyboardUnitsGroupType = (k: string): k is KeyboardUnitsGroupType =>

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

@@ -1,4 +1,3 @@
-import { KeyboardGroup, KeyboardKey } from '@magmamath/students-features'
 import { TabOptionProps } from '@magmamath/react-native-ui'
 
 export enum SelectedLayout {
@@ -14,10 +13,6 @@ export enum KeyboardUnitsGroupType {
   TIME = 'time',
 }
 
-export type UnitKeyboardGroups = {
-  keys: KeyboardKey[][]
-} & Omit<KeyboardGroup, 'keys'>
-
 export type UnitTab = Omit<TabOptionProps, 'key'> & {
   key: KeyboardUnitsGroupType
   minBreakpoint?: number

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

@@ -0,0 +1,33 @@
+import {
+  MATH_BASIC_OPERATORS,
+  MATH_BASIC_TRIGONOMETRIC_FUNCTIONS,
+  MATH_INTEGRALS_AND_DERIVATIVES,
+  MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS,
+  MATH_SPECIAL_OPERATORS,
+} from '../keys'
+import { KeyboardGroup } from '../../types/types'
+
+export const KEYBOARD_ALGEBRA: KeyboardGroup = {
+  keys: [
+    MATH_INTEGRALS_AND_DERIVATIVES.INTEGRAL,
+    MATH_BASIC_OPERATORS.SUM,
+    MATH_BASIC_OPERATORS.APPROXIMATELY_EQUAL,
+    MATH_SPECIAL_OPERATORS.LIM,
+    MATH_BASIC_TRIGONOMETRIC_FUNCTIONS.SIN,
+    MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS.ARCSIN,
+    MATH_BASIC_OPERATORS.INTERVAL,
+    MATH_INTEGRALS_AND_DERIVATIVES.DEFINITEINTEGRAL,
+    MATH_BASIC_OPERATORS.INFINITY,
+    MATH_BASIC_OPERATORS.SIMILARITY,
+    MATH_SPECIAL_OPERATORS.LN,
+    MATH_BASIC_TRIGONOMETRIC_FUNCTIONS.COS,
+    MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS.ARCCOS,
+    MATH_BASIC_OPERATORS.ABSOLUTE_VALUE,
+    MATH_INTEGRALS_AND_DERIVATIVES.DOUBLEINTEGRAL,
+    MATH_BASIC_OPERATORS.C_DOT,
+    MATH_BASIC_OPERATORS.NOT_EQUAL,
+    MATH_SPECIAL_OPERATORS.LOG,
+    MATH_BASIC_TRIGONOMETRIC_FUNCTIONS.TAN,
+    MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS.ARCTAN,
+  ],
+}

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

@@ -0,0 +1,25 @@
+import { MATH_BASIC_OPERATORS } from '../keys'
+import { KeyboardGroups } from '../../types/types'
+
+export const KEYBOARD_BASIC: KeyboardGroups = {
+  DOT: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.MULTIPLICATION,
+      MATH_BASIC_OPERATORS.DIVISION,
+      MATH_BASIC_OPERATORS.COMMA,
+    ],
+  },
+  COMMA: {
+    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,
+    ],
+  },
+}

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

@@ -0,0 +1,91 @@
+import { MATH_BASIC_OPERATORS, MATH_TEXT_SYMBOLS } from '../keys'
+import { KeyboardGroups } from '../../types/types'
+
+export const KEYBOARD_BASIC_PLUS: KeyboardGroups = {
+  DOT: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+      MATH_BASIC_OPERATORS.FRACTION,
+      MATH_BASIC_OPERATORS.MULTIPLICATION,
+      MATH_BASIC_OPERATORS.DIVISION,
+      MATH_BASIC_OPERATORS.COMMA,
+      MATH_BASIC_OPERATORS.PERCENT,
+      MATH_BASIC_OPERATORS.SQUARE_POWER,
+      MATH_BASIC_OPERATORS.SQUARE_ROOT,
+      MATH_TEXT_SYMBOLS.X,
+      MATH_TEXT_SYMBOLS.Y,
+      MATH_TEXT_SYMBOLS.Z,
+      MATH_BASIC_OPERATORS.PERMILLE,
+      MATH_BASIC_OPERATORS.NTH_POWER,
+      MATH_BASIC_OPERATORS.NTH_ROOT,
+    ],
+  },
+  COMMA: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+      MATH_BASIC_OPERATORS.FRACTION,
+      MATH_BASIC_OPERATORS.C_DOT,
+      MATH_BASIC_OPERATORS.DIVISION,
+      MATH_BASIC_OPERATORS.DOT,
+      MATH_BASIC_OPERATORS.PERCENT,
+      MATH_BASIC_OPERATORS.SQUARE_POWER,
+      MATH_BASIC_OPERATORS.SQUARE_ROOT,
+      MATH_TEXT_SYMBOLS.X,
+      MATH_TEXT_SYMBOLS.Y,
+      MATH_TEXT_SYMBOLS.Z,
+      MATH_BASIC_OPERATORS.PERMILLE,
+      MATH_BASIC_OPERATORS.NTH_POWER,
+      MATH_BASIC_OPERATORS.NTH_ROOT,
+    ],
+  },
+  MOBILE_DOT: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+      MATH_BASIC_OPERATORS.FRACTION,
+      MATH_BASIC_OPERATORS.MULTIPLICATION,
+      MATH_BASIC_OPERATORS.DIVISION,
+      MATH_BASIC_OPERATORS.COMMA,
+      MATH_BASIC_OPERATORS.PERCENT,
+      MATH_BASIC_OPERATORS.SQUARE_POWER,
+      MATH_BASIC_OPERATORS.SQUARE_ROOT,
+      MATH_TEXT_SYMBOLS.X,
+      MATH_TEXT_SYMBOLS.Y,
+      MATH_TEXT_SYMBOLS.Z,
+      MATH_BASIC_OPERATORS.PERMILLE,
+      MATH_BASIC_OPERATORS.NTH_POWER,
+    ],
+  },
+  MOBILE_COMMA: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+      MATH_BASIC_OPERATORS.FRACTION,
+      MATH_BASIC_OPERATORS.C_DOT,
+      MATH_BASIC_OPERATORS.DIVISION,
+      MATH_BASIC_OPERATORS.DOT,
+      MATH_BASIC_OPERATORS.PERCENT,
+      MATH_BASIC_OPERATORS.SQUARE_POWER,
+      MATH_BASIC_OPERATORS.SQUARE_ROOT,
+      MATH_TEXT_SYMBOLS.X,
+      MATH_TEXT_SYMBOLS.Y,
+      MATH_TEXT_SYMBOLS.Z,
+      MATH_BASIC_OPERATORS.PERMILLE,
+      MATH_BASIC_OPERATORS.NTH_POWER,
+    ],
+  },
+}