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

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

@@ -8,6 +8,7 @@ import { YenIcon } from '../../../../shared/icons/MATH/YenIcon/YenIcon'
 import { CentIcon } from '../../../../shared/icons/MATH/CentIcon/CentIcon'
 import { DEFAULT_KEY_ICON_PROPS } from '../../constants/constants'
 import React from 'react'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 export enum MathCurrencyUnit {
   KRONE = 'KRONE',
@@ -99,6 +100,34 @@ export enum MathTimeUnit {
   PM = 'PM',
 }
 
+const BASE_TEXT_STYLE = {
+  fontSize: 14,
+  fontWeight: 700 as const,
+}
+
+const STYLE_PRESETS = {
+  SMALL: {
+    button: { width: IS_MOBILE ? 44 : 40 },
+    container: { flexBasis: IS_MOBILE ? 48 : undefined },
+    text: BASE_TEXT_STYLE,
+  },
+  MEDIUM: {
+    button: { width: IS_MOBILE ? 50 : 45 },
+    container: { flexBasis: IS_MOBILE ? 54 : undefined },
+    text: BASE_TEXT_STYLE,
+  },
+  LARGE: {
+    button: { width: IS_MOBILE ? 54 : 48 },
+    container: { flexBasis: IS_MOBILE ? 58 : undefined },
+    text: BASE_TEXT_STYLE,
+  },
+  XL: {
+    button: { width: IS_MOBILE ? 56 : 52 },
+    container: { flexBasis: IS_MOBILE ? 60 : undefined },
+    text: BASE_TEXT_STYLE,
+  },
+}
+
 export const MATH_CURRENCY_UNITS: MathKeysGroup<typeof MathCurrencyUnit> = {
   [MathCurrencyUnit.KRONE]: {
     icon: <KroneIcon {...DEFAULT_KEY_ICON_PROPS} />,
@@ -109,6 +138,7 @@ export const MATH_CURRENCY_UNITS: MathKeysGroup<typeof MathCurrencyUnit> = {
     icon: <DollarIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\$',
     katexValue: '\$',
+    mathQuillValue: '\\$',
   },
   [MathCurrencyUnit.EURO]: {
     icon: <EuroIcon {...DEFAULT_KEY_ICON_PROPS} />,
@@ -142,169 +172,74 @@ export const MATH_LENGTH_UNITS: MathKeysGroup<typeof MathLengthUnit> = {
     label: 'km',
     mathliveValue: 'km',
     katexValue: 'km',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathLengthUnit.METER]: {
     label: 'm',
     mathliveValue: '\\mathrm{m}',
     katexValue: 'm',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathLengthUnit.DECIMETER]: {
     label: 'dm',
     mathliveValue: '\\mathrm{dm}',
     katexValue: 'dm',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathLengthUnit.CENTIMETER]: {
     label: 'cm',
     mathliveValue: '\\mathrm{cm}',
     katexValue: 'cm',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathLengthUnit.MILLIMETER]: {
     label: 'mm',
     mathliveValue: '\\mathrm{mm}',
     katexValue: 'mm',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathLengthUnit.HECTARE]: {
     label: 'ha',
     mathliveValue: '\\mathrm{ha}',
     katexValue: 'ha',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathLengthUnit.INCH]: {
     label: 'in',
     mathliveValue: '\\mathrm{in}',
     katexValue: 'in',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: '\\in',
+    style: STYLE_PRESETS.SMALL,
   },
   [MathLengthUnit.FOOT]: {
     label: 'ft',
     mathliveValue: '\\mathrm{ft}',
     katexValue: 'ft',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.SMALL,
   },
   [MathLengthUnit.YARD]: {
     label: 'yd',
     mathliveValue: '\\mathrm{yd}',
     katexValue: 'yd',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.SMALL,
   },
   [MathLengthUnit.YARDS]: {
     label: 'yds',
     mathliveValue: '\\mathrm{yds}',
     katexValue: 'yds',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.SMALL,
   },
   [MathLengthUnit.MILE]: {
     label: 'mi',
     mathliveValue: '\\mathrm{mi}',
     katexValue: 'mi',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.SMALL,
   },
   [MathLengthUnit.MILE_SE]: {
     label: 'mil',
     mathliveValue: '\\mathrm{mil}',
     katexValue: 'mil',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
 }
 
@@ -313,141 +248,70 @@ export const MATH_AREA_UNITS: MathKeysGroup<typeof MathAreaUnit> = {
     label: 'km²',
     mathliveValue: '\\mathrm{km}^2',
     katexValue: 'km^2',
-    style: {
-      button: {
-        width: 48,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'km^{2}',
+    style: STYLE_PRESETS.LARGE,
   },
   [MathAreaUnit.SQUARE_METER]: {
     label: 'm²',
     mathliveValue: '\\mathrm{m}^2',
     katexValue: 'm^2',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'm^{2}',
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathAreaUnit.SQUARE_DECIMETER]: {
     label: 'dm²',
     mathliveValue: '\\mathrm{dm}^2',
     katexValue: 'dm^2',
-    style: {
-      button: {
-        width: 48,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'dm^{2}',
+    style: STYLE_PRESETS.LARGE,
   },
   [MathAreaUnit.SQUARE_CENTIMETER]: {
     label: 'cm²',
     mathliveValue: '\\mathrm{cm}^2',
     katexValue: 'cm^2',
-    style: {
-      button: {
-        width: 48,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'cm^{2}',
+    style: STYLE_PRESETS.LARGE,
   },
   [MathAreaUnit.SQUARE_MILLIMETER]: {
     label: 'mm²',
     mathliveValue: '\\mathrm{mm}^2',
     katexValue: 'mm^2',
-    style: {
-      button: {
-        width: 48,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'mm^{2}',
+    style: STYLE_PRESETS.LARGE,
   },
   [MathAreaUnit.SQUARE_INCH]: {
     label: 'in²',
     mathliveValue: '\\mathrm{in}^2',
     katexValue: 'in^2',
-    style: {
-      button: {
-        width: 43,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'in^{2}',
+    style: STYLE_PRESETS.SMALL,
   },
   [MathAreaUnit.SQUARE_FOOT]: {
     label: 'ft²',
     mathliveValue: '\\mathrm{ft}^2',
     katexValue: 'ft^2',
-    style: {
-      button: {
-        width: 43,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'ft^{2}',
+    style: STYLE_PRESETS.SMALL,
   },
   [MathAreaUnit.SQUARE_MILE]: {
     label: 'mi²',
     mathliveValue: '\\mathrm{mi}^2',
     katexValue: 'mi^2',
-    style: {
-      button: {
-        width: 43,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'mi^{2}',
+    style: STYLE_PRESETS.SMALL,
   },
   [MathAreaUnit.SQUARE_YARD]: {
     label: 'yd²',
     mathliveValue: '\\mathrm{yd}^2',
     katexValue: 'yd^2',
-    style: {
-      button: {
-        width: 43,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'yd^{2}',
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathAreaUnit.HECTARE]: {
     label: 'ha',
     mathliveValue: '\\mathrm{ha}',
     katexValue: 'ha',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.SMALL,
   },
 }
 
@@ -456,281 +320,131 @@ export const MATH_VOLUME_UNITS: MathKeysGroup<typeof MathVolumeUnit> = {
     label: 'km³',
     mathliveValue: '\\mathrm{km}^3',
     katexValue: 'km^3',
-    style: {
-      button: {
-        width: 48,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'km^{3}',
+    style: STYLE_PRESETS.LARGE,
   },
   [MathVolumeUnit.CUBIC_METER]: {
     label: 'm³',
     mathliveValue: '\\mathrm{m}^3',
     katexValue: 'm^3',
-    style: {
-      button: {
-        width: 48,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'm^{3}',
+    style: STYLE_PRESETS.LARGE,
   },
   [MathVolumeUnit.CUBIC_DECIMETER]: {
     label: 'dm³',
     mathliveValue: '\\mathrm{dm}^3',
     katexValue: 'dm^3',
-    style: {
-      button: {
-        width: 48,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'dm^{3}',
+    style: STYLE_PRESETS.LARGE,
   },
   [MathVolumeUnit.CUBIC_CENTIMETER]: {
     label: 'cm³',
     mathliveValue: '\\mathrm{cm}^3',
     katexValue: 'cm^3',
-    style: {
-      button: {
-        width: 48,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'cm^{3}',
+    style: STYLE_PRESETS.LARGE,
   },
   [MathVolumeUnit.CUBIC_MILLIMETER]: {
     label: 'mm³',
     mathliveValue: '\\mathrm{mm}^3',
     katexValue: 'mm^3',
-    style: {
-      button: {
-        width: 48,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'mm^{3}',
+    style: STYLE_PRESETS.LARGE,
   },
   [MathVolumeUnit.CUBIC_INCH]: {
     label: 'in³',
     mathliveValue: '\\mathrm{in}^3',
     katexValue: 'in^3',
-    style: {
-      button: {
-        width: 43,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'in^{3}',
+    style: STYLE_PRESETS.SMALL,
   },
   [MathVolumeUnit.CUBIC_FOOT]: {
     label: 'ft³',
     mathliveValue: '\\mathrm{ft}^3',
     katexValue: 'ft^3',
-    style: {
-      button: {
-        width: 43,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'ft^{3}',
+    style: STYLE_PRESETS.SMALL,
   },
   [MathVolumeUnit.CUBIC_MILE]: {
     label: 'mi³',
     mathliveValue: '\\mathrm{mi}^3',
     katexValue: 'mi^3',
-    style: {
-      button: {
-        width: 48,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'mi^{3}',
+    style: STYLE_PRESETS.LARGE,
   },
   [MathVolumeUnit.CUBIC_YARD]: {
     label: 'yd³',
     mathliveValue: '\\mathrm{yd}^3',
     katexValue: 'yd^3',
-    style: {
-      button: {
-        width: 43,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: 'yd^{3}',
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathVolumeUnit.MILLILITER]: {
     label: 'ml',
     mathliveValue: '\\mathrm{mL}',
     katexValue: 'ml',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.SMALL,
   },
   [MathVolumeUnit.LITER]: {
     label: 'L',
     mathliveValue: '\\mathrm{L}',
     katexValue: 'L',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.SMALL,
   },
   [MathVolumeUnit.MILLILITER_SE]: {
     label: 'ml',
     mathliveValue: '\\mathrm{ml}',
     katexValue: 'ml',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.SMALL,
   },
   [MathVolumeUnit.LITER_SE]: {
     label: 'l',
     mathliveValue: '\\mathrm{l}',
     katexValue: 'l',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.SMALL,
   },
   [MathVolumeUnit.DL]: {
     label: 'dl',
     mathliveValue: '\\mathrm{dl}',
     katexValue: 'dl',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.SMALL,
   },
   [MathVolumeUnit.CUP]: {
     label: 'cup',
     mathliveValue: '\\mathrm{cup}',
     katexValue: 'cup',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    mathQuillValue: '\\cup',
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathVolumeUnit.GAL]: {
     label: 'gal',
     mathliveValue: '\\mathrm{gal}',
     katexValue: 'gal',
-    style: {
-      button: {
-        width: 44,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathVolumeUnit.PINT]: {
     label: 'pt',
     mathliveValue: '\\mathrm{pt}',
     katexValue: 'pt',
-    style: {
-      button: {
-        width: 48,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.LARGE,
   },
   [MathVolumeUnit.QUART]: {
     label: 'qt',
     mathliveValue: '\\mathrm{qt}',
     katexValue: 'qt',
-    style: {
-      button: {
-        width: 44,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathVolumeUnit.FLOZ]: {
     label: 'floz',
     mathliveValue: '\\mathrm{floz}',
     katexValue: 'floz',
-    style: {
-      button: {
-        width: 52,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.XL,
   },
   [MathVolumeUnit.CL]: {
     label: 'cl',
     mathliveValue: '\\mathrm{cl}',
     katexValue: 'cl',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.SMALL,
   },
 }
 
@@ -739,141 +453,61 @@ export const MATH_WEIGHT_UNITS: MathKeysGroup<typeof MathWeightUnit> = {
     label: 'kg',
     mathliveValue: '\\mathrm{kg}',
     katexValue: 'kg',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathWeightUnit.G]: {
     label: 'g',
     mathliveValue: '\\mathrm{g}',
     katexValue: 'g',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.SMALL,
   },
   [MathWeightUnit.MG]: {
     label: 'mg',
     mathliveValue: '\\mathrm{mg}',
     katexValue: 'mg',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathWeightUnit.TON_SE]: {
     label: 'ton',
     mathliveValue: '\\mathrm{ton}',
     katexValue: 'ton',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathWeightUnit.TON]: {
     label: 'T',
     mathliveValue: '\\mathrm{T}',
     katexValue: 'T',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathWeightUnit.LB]: {
     label: 'lb',
     mathliveValue: '\\mathrm{lb}',
     katexValue: 'lb',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.SMALL,
   },
   [MathWeightUnit.OZ]: {
     label: 'oz',
     mathliveValue: '\\mathrm{oz}',
     katexValue: 'oz',
-    style: {
-      button: {
-        width: 40,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.SMALL,
   },
   [MathWeightUnit.GAL]: {
     label: 'gal',
     mathliveValue: '\\mathrm{gal}',
     katexValue: 'gal',
-    style: {
-      button: {
-        width: 44,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathWeightUnit.HG]: {
     label: 'hg',
     mathliveValue: '\\mathrm{hg}',
     katexValue: 'hg',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
   [MathWeightUnit.T]: {
     label: 't',
     mathliveValue: '\\mathrm{t}',
     katexValue: 't',
-    style: {
-      button: {
-        width: 45,
-      },
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-    },
+    style: STYLE_PRESETS.MEDIUM,
   },
 }