@magmamath/students-features 1.8.0-rc.0-fluency-visuals → 1.8.0

package/dist/module/features/fluency-teacher/components/table/FluencyTeacherStudentsTable.js

@@ -3,30 +3,54 @@
 import React from 'react';
 import { ActivityIndicator, FlatList, StyleSheet, View } from 'react-native';
 import { useUnit } from 'effector-react';
-import { BORDER_RADIUS, COLORS, FONT_FAMILY, HeadingVariants, SHADOWS, SPACING, Typography } from '@magmamath/react-native-ui';
+import { BORDER_RADIUS, COLORS, CrossIcon, FONT_FAMILY, HeadingVariants, MinusIcon, PlusIcon, SHADOWS, SPACING, Typography } from '@magmamath/react-native-ui';
 import { useText } from "../../../../i18n/i18n.js";
 import { useTeacherFluency } from "../../context/TeacherFluencyContext.js";
 import { TableRow } from "./TableRow.js";
-import { FluencyTableColumn, TABLE_OPERATOR_COLUMNS } from "../../fluencyTeacher.constants.js";
+import { FluencyTableColumn } from "../../fluencyTeacher.constants.js";
+import { getTableOperatorColumns } from "../../fluencyTeacher.helpers.js";
 import { TableColumnSortButton } from "./TableColumnSortButton.js";
 import { AllPupilsTableRow } from "./AllPupilsTableRow.js";
 import { AverageSortButton } from "./AverageSortButton.js";
+import { tableCellStyles } from "./tableCell.styles.js";
+import { DivisionIcon } from "../../assets/DivisionIcon.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const OPERATOR_COLUMN_DISPLAY = {
+  [FluencyTableColumn.ADDITION]: {
+    Icon: PlusIcon,
+    activeColor: COLORS.PRIMARY_GREEN
+  },
+  [FluencyTableColumn.SUBTRACTION]: {
+    Icon: MinusIcon,
+    activeColor: COLORS.PRIMARY_ORANGE
+  },
+  [FluencyTableColumn.MULTIPLICATION]: {
+    Icon: CrossIcon,
+    activeColor: COLORS.PRIMARY_BLUE
+  },
+  [FluencyTableColumn.DIVISION]: {
+    Icon: DivisionIcon,
+    activeColor: COLORS.PRIMARY_PURPLE
+  }
+};
 export const FluencyTeacherStudentsTable = () => {
   const t = useText();
   const {
-    model
+    model,
+    grade
   } = useTeacherFluency();
   const {
     sort,
     isLoading,
     table,
-    filteredTable
+    filteredTable,
+    studentInfoDrawer
   } = useUnit({
     sort: model.filters.$sort,
     table: model.table.$table,
     filteredTable: model.table.$filteredTable,
-    isLoading: model.api.getClassSummaryFx.pending
+    isLoading: model.api.getClassSummaryFx.pending,
+    studentInfoDrawer: model.table.$studentInfoDrawer
   });
   const hasStudents = table.length > 0;
   return /*#__PURE__*/_jsxs(View, {
@@ -36,28 +60,24 @@ export const FluencyTeacherStudentsTable = () => {
       children: [/*#__PURE__*/_jsx(View, {
         style: styles.nameCell
       }), /*#__PURE__*/_jsx(View, {
-        style: styles.average,
+        style: tableCellStyles.headerAverage,
         children: /*#__PURE__*/_jsx(AverageSortButton, {
           sort: sort,
           onPress: () => model.filters.toggleSort(FluencyTableColumn.AVERAGE)
         })
       }), /*#__PURE__*/_jsx(View, {
-        style: styles.operators,
-        children: TABLE_OPERATOR_COLUMNS.map(({
+        style: tableCellStyles.operators,
+        children: getTableOperatorColumns(grade).map(({
           operator,
-          labelKey,
-          symbol,
-          badgeBg,
-          badgeText
+          labelKey
         }) => /*#__PURE__*/_jsx(View, {
-          style: styles.operator,
+          style: tableCellStyles.operator,
           children: /*#__PURE__*/_jsx(TableColumnSortButton, {
-            symbol: symbol,
+            Icon: OPERATOR_COLUMN_DISPLAY[operator].Icon,
+            activeColor: OPERATOR_COLUMN_DISPLAY[operator].activeColor,
             label: t(labelKey),
             isActive: sort.column === operator,
             direction: sort.direction,
-            activeBg: badgeBg,
-            activeText: badgeText,
             onPress: () => model.filters.toggleSort(operator)
           })
         }, operator))
@@ -71,6 +91,7 @@ export const FluencyTeacherStudentsTable = () => {
     }) : /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(AllPupilsTableRow, {}), /*#__PURE__*/_jsx(FlatList, {
         data: filteredTable,
+        extraData: studentInfoDrawer,
         keyExtractor: student => student.id,
         renderItem: ({
           item: student
@@ -78,8 +99,8 @@ export const FluencyTeacherStudentsTable = () => {
           name: student.name,
           onPress: () => model.table.setStudentInfoDrawer(student),
           averagePercent: student.averagePercent,
-          averageLabel: t(student.averageLabel),
-          scores: student.scores
+          scores: student.scores,
+          isSelected: studentInfoDrawer?.id === student.id
         }),
         contentContainerStyle: filteredTable.length === 0 ? styles.emptyContainer : undefined,
         ListEmptyComponent: /*#__PURE__*/_jsx(View, {
@@ -96,13 +117,13 @@ export const FluencyTeacherStudentsTable = () => {
 };
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flexShrink: 1,
     borderRadius: BORDER_RADIUS[300],
     overflow: 'hidden',
     ...SHADOWS[1]
   },
   loader: {
-    flex: 1,
+    minHeight: 200,
     justifyContent: 'center',
     alignItems: 'center'
   },
@@ -112,40 +133,21 @@ const styles = StyleSheet.create({
     paddingHorizontal: SPACING[400],
     paddingVertical: SPACING[200],
     gap: SPACING[400],
-    backgroundColor: COLORS.NEUTRAL_1,
-    borderBottomWidth: 1,
-    borderBottomColor: COLORS.NEUTRAL_4
+    backgroundColor: COLORS.NEUTRAL_2
   },
   headerRow: {
-    paddingVertical: SPACING[100],
-    backgroundColor: COLORS.NEUTRAL_2
+    paddingVertical: SPACING[100]
   },
   nameCell: {
     width: 137,
     height: 40
   },
-  average: {
-    width: 145,
-    height: 40,
-    paddingHorizontal: 12,
-    justifyContent: 'center'
-  },
-  operators: {
-    flex: 1,
-    height: 40,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: SPACING[800]
-  },
-  operator: {
-    flex: 1,
-    alignItems: 'center'
-  },
   emptyContainer: {
     flexGrow: 1
   },
   emptyState: {
     flex: 1,
+    minHeight: 200,
     alignItems: 'center',
     justifyContent: 'center'
   },

package/dist/module/features/fluency-teacher/components/table/FluencyTeacherStudentsTable.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ActivityIndicator","FlatList","StyleSheet","View","useUnit","BORDER_RADIUS","COLORS","FONT_FAMILY","HeadingVariants","SHADOWS","SPACING","Typography","useText","useTeacherFluency","TableRow","FluencyTableColumn","TABLE_OPERATOR_COLUMNS","TableColumnSortButton","AllPupilsTableRow","AverageSortButton","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","FluencyTeacherStudentsTable","t","model","sort","isLoading","table","filteredTable","filters","$sort","$table","$filteredTable","api","getClassSummaryFx","pending","hasStudents","length","style","styles","container","children","row","headerRow","nameCell","average","onPress","toggleSort","AVERAGE","operators","map","operator","labelKey","symbol","badgeBg","badgeText","label","isActive","column","direction","activeBg","activeText","loader","size","color","PRIMARY_BLUE","data","keyExtractor","student","id","renderItem","item","name","setStudentInfoDrawer","averagePercent","averageLabel","scores","contentContainerStyle","emptyContainer","undefined","ListEmptyComponent","emptyState","variant","H9","emptyText","create","flex","borderRadius","overflow","justifyContent","alignItems","flexDirection","paddingHorizontal","paddingVertical","gap","backgroundColor","NEUTRAL_1","borderBottomWidth","borderBottomColor","NEUTRAL_4","NEUTRAL_2","width","height","flexGrow","fontFamily","buenosAires","fontWeight","fontSize","NEUTRAL_9"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/table/FluencyTeacherStudentsTable.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ActivityIndicator","FlatList","StyleSheet","View","useUnit","BORDER_RADIUS","COLORS","CrossIcon","FONT_FAMILY","HeadingVariants","MinusIcon","PlusIcon","SHADOWS","SPACING","Typography","useText","useTeacherFluency","TableRow","FluencyTableColumn","getTableOperatorColumns","TableColumnSortButton","AllPupilsTableRow","AverageSortButton","tableCellStyles","DivisionIcon","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","OPERATOR_COLUMN_DISPLAY","ADDITION","Icon","activeColor","PRIMARY_GREEN","SUBTRACTION","PRIMARY_ORANGE","MULTIPLICATION","PRIMARY_BLUE","DIVISION","PRIMARY_PURPLE","FluencyTeacherStudentsTable","t","model","grade","sort","isLoading","table","filteredTable","studentInfoDrawer","filters","$sort","$table","$filteredTable","api","getClassSummaryFx","pending","$studentInfoDrawer","hasStudents","length","style","styles","container","children","row","headerRow","nameCell","headerAverage","onPress","toggleSort","AVERAGE","operators","map","operator","labelKey","label","isActive","column","direction","loader","size","color","data","extraData","keyExtractor","student","id","renderItem","item","name","setStudentInfoDrawer","averagePercent","scores","isSelected","contentContainerStyle","emptyContainer","undefined","ListEmptyComponent","emptyState","variant","H9","emptyText","create","flexShrink","borderRadius","overflow","minHeight","justifyContent","alignItems","flexDirection","paddingHorizontal","paddingVertical","gap","backgroundColor","NEUTRAL_2","width","height","flexGrow","flex","fontFamily","buenosAires","fontWeight","fontSize","NEUTRAL_9"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/table/FluencyTeacherStudentsTable.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/features/fluency-teacher/components/table/OperatorBadge.js

@@ -3,32 +3,41 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { BORDER_RADIUS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui';
+import { getOperatorBandColors } from "../../fluencyTeacher.helpers.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 export const OperatorBadge = ({
   value,
-  bgColor,
-  textColor
-}) => /*#__PURE__*/_jsx(View, {
-  style: [styles.badge, {
-    backgroundColor: bgColor
-  }],
-  children: /*#__PURE__*/_jsxs(Typography, {
-    variant: HeadingVariants.H9,
-    style: [styles.badgeText, {
-      color: textColor
+  operator
+}) => {
+  const {
+    background,
+    text
+  } = getOperatorBandColors(operator, value);
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.badge, {
+      backgroundColor: background
     }],
-    children: [value, "%"]
-  })
-});
+    children: /*#__PURE__*/_jsxs(Typography, {
+      variant: HeadingVariants.H9,
+      style: [styles.badgeText, {
+        color: text
+      }],
+      children: [value, "%"]
+    })
+  });
+};
 const styles = StyleSheet.create({
   badge: {
-    width: 90,
+    width: 64,
+    height: 32,
     paddingVertical: SPACING[200],
     borderRadius: BORDER_RADIUS[200],
-    alignItems: 'center'
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   badgeText: {
-    textAlign: 'center'
+    textAlign: 'center',
+    textTransform: 'uppercase'
   }
 });
 //# sourceMappingURL=OperatorBadge.js.map

package/dist/module/features/fluency-teacher/components/table/OperatorBadge.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","BORDER_RADIUS","HeadingVariants","SPACING","Typography","jsxs","_jsxs","jsx","_jsx","OperatorBadge","value","bgColor","textColor","style","styles","badge","backgroundColor","children","variant","H9","badgeText","color","create","width","paddingVertical","borderRadius","alignItems","textAlign"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/table/OperatorBadge.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,aAAa,EAAEC,eAAe,EAAEC,OAAO,EAAEC,UAAU,QAAQ,4BAA4B;AAAA,SAAAC,IAAA,IAAAC,KAAA,EAAAC,GAAA,IAAAC,IAAA;AAQhG,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC,KAAK;EAAEC,OAAO;EAAEC;AAA8B,CAAC,kBAC7EJ,IAAA,CAACR,IAAI;EAACa,KAAK,EAAE,CAACC,MAAM,CAACC,KAAK,EAAE;IAAEC,eAAe,EAAEL;EAAQ,CAAC,CAAE;EAAAM,QAAA,eACxDX,KAAA,CAACF,UAAU;IAACc,OAAO,EAAEhB,eAAe,CAACiB,EAAG;IAACN,KAAK,EAAE,CAACC,MAAM,CAACM,SAAS,EAAE;MAAEC,KAAK,EAAET;IAAU,CAAC,CAAE;IAAAK,QAAA,GACtFP,KAAK,EAAC,GACT;EAAA,CAAY;AAAC,CACT,CACP;AAED,MAAMI,MAAM,GAAGf,UAAU,CAACuB,MAAM,CAAC;EAC/BP,KAAK,EAAE;IACLQ,KAAK,EAAE,EAAE;IACTC,eAAe,EAAErB,OAAO,CAAC,GAAG,CAAC;IAC7BsB,YAAY,EAAExB,aAAa,CAAC,GAAG,CAAC;IAChCyB,UAAU,EAAE;EACd,CAAC;EACDN,SAAS,EAAE;IACTO,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","View","BORDER_RADIUS","HeadingVariants","SPACING","Typography","getOperatorBandColors","jsxs","_jsxs","jsx","_jsx","OperatorBadge","value","operator","background","text","style","styles","badge","backgroundColor","children","variant","H9","badgeText","color","create","width","height","paddingVertical","borderRadius","alignItems","justifyContent","textAlign","textTransform"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/table/OperatorBadge.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,aAAa,EAAEC,eAAe,EAAEC,OAAO,EAAEC,UAAU,QAAQ,4BAA4B;AAChG,SAASC,qBAAqB,QAAQ,iCAA8B;AAAA,SAAAC,IAAA,IAAAC,KAAA,EAAAC,GAAA,IAAAC,IAAA;AAQpE,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAA6B,CAAC,KAAK;EACxE,MAAM;IAAEC,UAAU;IAAEC;EAAK,CAAC,GAAGT,qBAAqB,CAACO,QAAQ,EAAED,KAAK,CAAC;EACnE,oBACEF,IAAA,CAACT,IAAI;IAACe,KAAK,EAAE,CAACC,MAAM,CAACC,KAAK,EAAE;MAAEC,eAAe,EAAEL;IAAW,CAAC,CAAE;IAAAM,QAAA,eAC3DZ,KAAA,CAACH,UAAU;MAACgB,OAAO,EAAElB,eAAe,CAACmB,EAAG;MAACN,KAAK,EAAE,CAACC,MAAM,CAACM,SAAS,EAAE;QAAEC,KAAK,EAAET;MAAK,CAAC,CAAE;MAAAK,QAAA,GACjFR,KAAK,EAAC,GACT;IAAA,CAAY;EAAC,CACT,CAAC;AAEX,CAAC;AAED,MAAMK,MAAM,GAAGjB,UAAU,CAACyB,MAAM,CAAC;EAC/BP,KAAK,EAAE;IACLQ,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,eAAe,EAAExB,OAAO,CAAC,GAAG,CAAC;IAC7ByB,YAAY,EAAE3B,aAAa,CAAC,GAAG,CAAC;IAChC4B,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDR,SAAS,EAAE;IACTS,SAAS,EAAE,QAAQ;IACnBC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency-teacher/components/table/SortOrderCarets.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { CaretDownIcon, CaretUpIcon, COLORS } from '@magmamath/react-native-ui';
+import { SortingDirection } from "../../../../shared/common.constants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getCaretColor = isHighlighted => isHighlighted ? COLORS.NEUTRAL_9 : COLORS.NEUTRAL_5;
+export const SortOrderCarets = ({
+  isActive,
+  direction
+}) => /*#__PURE__*/_jsxs(View, {
+  style: styles.container,
+  children: [/*#__PURE__*/_jsx(View, {
+    style: styles.upCaret,
+    children: /*#__PURE__*/_jsx(CaretUpIcon, {
+      size: 16,
+      color: getCaretColor(isActive && direction === SortingDirection.ASC)
+    })
+  }), /*#__PURE__*/_jsx(CaretDownIcon, {
+    size: 16,
+    color: getCaretColor(isActive && direction === SortingDirection.DESC)
+  })]
+});
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  upCaret: {
+    marginBottom: -5
+  }
+});
+//# sourceMappingURL=SortOrderCarets.js.map

package/dist/module/features/fluency-teacher/components/table/SortOrderCarets.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","CaretDownIcon","CaretUpIcon","COLORS","SortingDirection","jsx","_jsx","jsxs","_jsxs","getCaretColor","isHighlighted","NEUTRAL_9","NEUTRAL_5","SortOrderCarets","isActive","direction","style","styles","container","children","upCaret","size","color","ASC","DESC","create","alignItems","justifyContent","marginBottom"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/table/SortOrderCarets.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,aAAa,EAAEC,WAAW,EAAEC,MAAM,QAAQ,4BAA4B;AAC/E,SAASC,gBAAgB,QAAQ,wCAAqC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOtE,MAAMC,aAAa,GAAIC,aAAsB,IAC3CA,aAAa,GAAGP,MAAM,CAACQ,SAAS,GAAGR,MAAM,CAACS,SAAS;AAErD,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAgC,CAAC,kBAC3EP,KAAA,CAACR,IAAI;EAACgB,KAAK,EAAEC,MAAM,CAACC,SAAU;EAAAC,QAAA,gBAC5Bb,IAAA,CAACN,IAAI;IAACgB,KAAK,EAAEC,MAAM,CAACG,OAAQ;IAAAD,QAAA,eAC1Bb,IAAA,CAACJ,WAAW;MACVmB,IAAI,EAAE,EAAG;MACTC,KAAK,EAAEb,aAAa,CAACK,QAAQ,IAAIC,SAAS,KAAKX,gBAAgB,CAACmB,GAAG;IAAE,CACtE;EAAC,CACE,CAAC,eACPjB,IAAA,CAACL,aAAa;IACZoB,IAAI,EAAE,EAAG;IACTC,KAAK,EAAEb,aAAa,CAACK,QAAQ,IAAIC,SAAS,KAAKX,gBAAgB,CAACoB,IAAI;EAAE,CACvE,CAAC;AAAA,CACE,CACP;AAED,MAAMP,MAAM,GAAGlB,UAAU,CAAC0B,MAAM,CAAC;EAC/BP,SAAS,EAAE;IACTQ,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDP,OAAO,EAAE;IACPQ,YAAY,EAAE,CAAC;EACjB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency-teacher/components/table/TableColumnSortButton.js

@@ -1,55 +1,53 @@
 "use strict";
 
 import React from 'react';
-import { Pressable, StyleSheet, Text } from 'react-native';
-import { CaretDownIcon, CaretUpIcon, COLORS, FONT_FAMILY, SHADOWS, SPACING } from '@magmamath/react-native-ui';
-import { SortDefaultIcon } from "../../assets/SortDefaultIcon.js";
-import { SortingDirection } from "../../../../shared/common.constants.js";
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { COLORS, FONT_FAMILY, SHADOWS, SPACING } from '@magmamath/react-native-ui';
+import { SortOrderCarets } from "./SortOrderCarets.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const TableColumnSortButton = ({
-  symbol,
+  Icon,
   label,
   isActive,
+  activeColor = COLORS.PRIMARY_YELLOW,
   direction,
-  activeBg,
-  activeText,
   onPress
 }) => {
-  const contentColor = isActive ? activeText : COLORS.NEUTRAL_7;
+  const contentColor = isActive ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_7;
   return /*#__PURE__*/_jsxs(Pressable, {
     onPress: onPress,
-    style: [styles.sortButton, isActive && {
-      backgroundColor: activeBg,
-      borderColor: activeBg
-    }],
-    children: [/*#__PURE__*/_jsx(Text, {
-      selectable: false,
-      style: [styles.sortButtonSymbol, {
-        color: contentColor
+    style: styles.wrap,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.button, isActive && {
+        backgroundColor: activeColor
       }],
-      children: symbol
-    }), /*#__PURE__*/_jsx(Text, {
-      selectable: false,
-      style: [styles.sortButtonLabel, {
+      children: [Icon && /*#__PURE__*/_jsx(Icon, {
+        size: 16,
         color: contentColor
-      }],
-      children: label
-    }), isActive ? direction === SortingDirection.DESC ? /*#__PURE__*/_jsx(CaretDownIcon, {
-      size: 12,
-      color: contentColor
-    }) : /*#__PURE__*/_jsx(CaretUpIcon, {
-      size: 12,
-      color: contentColor
-    }) : /*#__PURE__*/_jsx(SortDefaultIcon, {
-      size: 10,
-      color: contentColor
+      }), /*#__PURE__*/_jsx(Text, {
+        selectable: false,
+        style: [styles.label, {
+          color: contentColor
+        }],
+        children: label
+      })]
+    }), /*#__PURE__*/_jsx(SortOrderCarets, {
+      isActive: isActive,
+      direction: direction
     })]
   });
 };
 const styles = StyleSheet.create({
-  sortButton: {
+  wrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[100],
+    paddingLeft: SPACING[100]
+  },
+  button: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'center',
     gap: SPACING[100],
     paddingLeft: 6,
     paddingRight: SPACING[200],
@@ -60,16 +58,8 @@ const styles = StyleSheet.create({
     backgroundColor: COLORS.NEUTRAL_1,
     ...SHADOWS[2]
   },
-  sortButtonSymbol: {
-    width: 12,
-    height: 12,
-    lineHeight: 10,
-    marginHorizontal: SPACING[100],
-    textAlign: 'center',
-    fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontSize: 24
-  },
-  sortButtonLabel: {
+  label: {
+    paddingHorizontal: SPACING[100],
     fontFamily: FONT_FAMILY.buenosAiresBold,
     fontSize: 12,
     letterSpacing: 0.24,

package/dist/module/features/fluency-teacher/components/table/TableColumnSortButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","StyleSheet","Text","CaretDownIcon","CaretUpIcon","COLORS","FONT_FAMILY","SHADOWS","SPACING","SortDefaultIcon","SortingDirection","jsx","_jsx","jsxs","_jsxs","TableColumnSortButton","symbol","label","isActive","direction","activeBg","activeText","onPress","contentColor","NEUTRAL_7","style","styles","sortButton","backgroundColor","borderColor","children","selectable","sortButtonSymbol","color","sortButtonLabel","DESC","size","create","flexDirection","alignItems","gap","paddingLeft","paddingRight","paddingVertical","borderRadius","borderWidth","NEUTRAL_3","NEUTRAL_1","width","height","lineHeight","marginHorizontal","textAlign","fontFamily","buenosAiresBold","fontSize","letterSpacing","textTransform"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/table/TableColumnSortButton.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC1D,SACEC,aAAa,EACbC,WAAW,EACXC,MAAM,EACNC,WAAW,EACXC,OAAO,EACPC,OAAO,QACF,4BAA4B;AACnC,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,gBAAgB,QAAQ,wCAAqC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAYtE,OAAO,MAAMC,qBAAqB,GAAGA,CAAC;EACpCC,MAAM;EACNC,KAAK;EACLC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,UAAU;EACVC;AAC0B,CAAC,KAAK;EAChC,MAAMC,YAAY,GAAGL,QAAQ,GAAGG,UAAU,GAAGhB,MAAM,CAACmB,SAAS;EAC7D,oBACEV,KAAA,CAACd,SAAS;IACRsB,OAAO,EAAEA,OAAQ;IACjBG,KAAK,EAAE,CAACC,MAAM,CAACC,UAAU,EAAET,QAAQ,IAAI;MAAEU,eAAe,EAAER,QAAQ;MAAES,WAAW,EAAET;IAAS,CAAC,CAAE;IAAAU,QAAA,gBAE7FlB,IAAA,CAACV,IAAI;MAAC6B,UAAU,EAAE,KAAM;MAACN,KAAK,EAAE,CAACC,MAAM,CAACM,gBAAgB,EAAE;QAAEC,KAAK,EAAEV;MAAa,CAAC,CAAE;MAAAO,QAAA,EAChFd;IAAM,CACH,CAAC,eACPJ,IAAA,CAACV,IAAI;MAAC6B,UAAU,EAAE,KAAM;MAACN,KAAK,EAAE,CAACC,MAAM,CAACQ,eAAe,EAAE;QAAED,KAAK,EAAEV;MAAa,CAAC,CAAE;MAAAO,QAAA,EAC/Eb;IAAK,CACF,CAAC,EACNC,QAAQ,GACPC,SAAS,KAAKT,gBAAgB,CAACyB,IAAI,gBACjCvB,IAAA,CAACT,aAAa;MAACiC,IAAI,EAAE,EAAG;MAACH,KAAK,EAAEV;IAAa,CAAE,CAAC,gBAEhDX,IAAA,CAACR,WAAW;MAACgC,IAAI,EAAE,EAAG;MAACH,KAAK,EAAEV;IAAa,CAAE,CAC9C,gBAEDX,IAAA,CAACH,eAAe;MAAC2B,IAAI,EAAE,EAAG;MAACH,KAAK,EAAEV;IAAa,CAAE,CAClD;EAAA,CACQ,CAAC;AAEhB,CAAC;AAED,MAAMG,MAAM,GAAGzB,UAAU,CAACoC,MAAM,CAAC;EAC/BV,UAAU,EAAE;IACVW,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAEhC,OAAO,CAAC,GAAG,CAAC;IACjBiC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAElC,OAAO,CAAC,GAAG,CAAC;IAC1BmC,eAAe,EAAEnC,OAAO,CAAC,GAAG,CAAC;IAC7BoC,YAAY,EAAE,CAAC;IACfC,WAAW,EAAE,GAAG;IAChBhB,WAAW,EAAExB,MAAM,CAACyC,SAAS;IAC7BlB,eAAe,EAAEvB,MAAM,CAAC0C,SAAS;IACjC,GAAGxC,OAAO,CAAC,CAAC;EACd,CAAC;EACDyB,gBAAgB,EAAE;IAChBgB,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,UAAU,EAAE,EAAE;IACdC,gBAAgB,EAAE3C,OAAO,CAAC,GAAG,CAAC;IAC9B4C,SAAS,EAAE,QAAQ;IACnBC,UAAU,EAAE/C,WAAW,CAACgD,eAAe;IACvCC,QAAQ,EAAE;EACZ,CAAC;EACDrB,eAAe,EAAE;IACfmB,UAAU,EAAE/C,WAAW,CAACgD,eAAe;IACvCC,QAAQ,EAAE,EAAE;IACZC,aAAa,EAAE,IAAI;IACnBC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Pressable","StyleSheet","Text","View","COLORS","FONT_FAMILY","SHADOWS","SPACING","SortOrderCarets","jsx","_jsx","jsxs","_jsxs","TableColumnSortButton","Icon","label","isActive","activeColor","PRIMARY_YELLOW","direction","onPress","contentColor","NEUTRAL_1","NEUTRAL_7","style","styles","wrap","children","button","backgroundColor","size","color","selectable","create","flexDirection","alignItems","gap","paddingLeft","justifyContent","paddingRight","paddingVertical","borderRadius","borderWidth","borderColor","NEUTRAL_3","paddingHorizontal","fontFamily","buenosAiresBold","fontSize","letterSpacing","textTransform"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/table/TableColumnSortButton.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAyB,OAAO;AAC5C,SAASC,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AAChE,SAASC,MAAM,EAAEC,WAAW,EAAaC,OAAO,EAAEC,OAAO,QAAQ,4BAA4B;AAE7F,SAASC,eAAe,QAAQ,sBAAmB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAWnD,OAAO,MAAMC,qBAAqB,GAAGA,CAAC;EACpCC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC,WAAW,GAAGb,MAAM,CAACc,cAAc;EACnCC,SAAS;EACTC;AAC0B,CAAC,KAAK;EAChC,MAAMC,YAAY,GAAGL,QAAQ,GAAGZ,MAAM,CAACkB,SAAS,GAAGlB,MAAM,CAACmB,SAAS;EACnE,oBACEX,KAAA,CAACZ,SAAS;IAACoB,OAAO,EAAEA,OAAQ;IAACI,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAC,QAAA,gBAC9Cf,KAAA,CAACT,IAAI;MAACqB,KAAK,EAAE,CAACC,MAAM,CAACG,MAAM,EAAEZ,QAAQ,IAAI;QAAEa,eAAe,EAAEZ;MAAY,CAAC,CAAE;MAAAU,QAAA,GACxEb,IAAI,iBAAIJ,IAAA,CAACI,IAAI;QAACgB,IAAI,EAAE,EAAG;QAACC,KAAK,EAAEV;MAAa,CAAE,CAAC,eAChDX,IAAA,CAACR,IAAI;QAAC8B,UAAU,EAAE,KAAM;QAACR,KAAK,EAAE,CAACC,MAAM,CAACV,KAAK,EAAE;UAAEgB,KAAK,EAAEV;QAAa,CAAC,CAAE;QAAAM,QAAA,EACrEZ;MAAK,CACF,CAAC;IAAA,CACH,CAAC,eACPL,IAAA,CAACF,eAAe;MAACQ,QAAQ,EAAEA,QAAS;MAACG,SAAS,EAAEA;IAAU,CAAE,CAAC;EAAA,CACpD,CAAC;AAEhB,CAAC;AAED,MAAMM,MAAM,GAAGxB,UAAU,CAACgC,MAAM,CAAC;EAC/BP,IAAI,EAAE;IACJQ,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAE7B,OAAO,CAAC,GAAG,CAAC;IACjB8B,WAAW,EAAE9B,OAAO,CAAC,GAAG;EAC1B,CAAC;EACDqB,MAAM,EAAE;IACNM,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBG,cAAc,EAAE,QAAQ;IACxBF,GAAG,EAAE7B,OAAO,CAAC,GAAG,CAAC;IACjB8B,WAAW,EAAE,CAAC;IACdE,YAAY,EAAEhC,OAAO,CAAC,GAAG,CAAC;IAC1BiC,eAAe,EAAEjC,OAAO,CAAC,GAAG,CAAC;IAC7BkC,YAAY,EAAE,CAAC;IACfC,WAAW,EAAE,GAAG;IAChBC,WAAW,EAAEvC,MAAM,CAACwC,SAAS;IAC7Bf,eAAe,EAAEzB,MAAM,CAACkB,SAAS;IACjC,GAAGhB,OAAO,CAAC,CAAC;EACd,CAAC;EACDS,KAAK,EAAE;IACL8B,iBAAiB,EAAEtC,OAAO,CAAC,GAAG,CAAC;IAC/BuC,UAAU,EAAEzC,WAAW,CAAC0C,eAAe;IACvCC,QAAQ,EAAE,EAAE;IACZC,aAAa,EAAE,IAAI;IACnBC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency-teacher/components/table/TableRow.js

@@ -1,22 +1,30 @@
 "use strict";
 
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { Animated, Pressable, StyleSheet, View } from 'react-native';
-import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui';
-import { TABLE_OPERATOR_COLUMNS } from "../../fluencyTeacher.constants.js";
+import { BORDER_RADIUS, COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui';
+import { COLUMN_TO_OPERATOR } from "../../fluencyTeacher.constants.js";
+import { getTableOperatorColumns } from "../../fluencyTeacher.helpers.js";
+import { useTeacherFluency } from "../../context/TeacherFluencyContext.js";
 import { OperatorBadge } from "./OperatorBadge.js";
-import { TableRowAverageProgress } from "./TableRowAverageProgress.js";
+import { AverageCell } from "./AverageCell.js";
+import { tableCellStyles } from "./tableCell.styles.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export const TableRow = ({
   name,
   scores,
   averagePercent = 0,
-  averageLabel = '',
+  isSelected = false,
   onPress
 }) => {
+  const {
+    grade
+  } = useTeacherFluency();
   const hoverProgress = useRef(new Animated.Value(0)).current;
+  const [isHovered, setIsHovered] = useState(false);
   const fadeIn = () => {
+    setIsHovered(true);
     Animated.timing(hoverProgress, {
       toValue: 1,
       duration: 150,
@@ -24,98 +32,77 @@ export const TableRow = ({
     }).start();
   };
   const fadeOut = () => {
+    setIsHovered(false);
     Animated.timing(hoverProgress, {
       toValue: 0,
       duration: 150,
       useNativeDriver: false
     }).start();
   };
-  const backgroundColor = hoverProgress.interpolate({
+  const hoverBackgroundColor = hoverProgress.interpolate({
     inputRange: [0, 1],
-    outputRange: [COLORS.NEUTRAL_1, COLORS.NEUTRAL_2]
+    outputRange: [COLORS.NEUTRAL_1, COLORS.ORANGE_1]
   });
-  return /*#__PURE__*/_jsxs(AnimatedPressable, {
-    onHoverIn: fadeIn,
-    onHoverOut: fadeOut,
-    onPress: onPress,
-    style: [styles.row, {
-      backgroundColor
-    }],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.name,
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: HeadingVariants.H7,
-        style: styles.nameText,
-        numberOfLines: 1,
-        children: name
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.average,
-      children: /*#__PURE__*/_jsx(TableRowAverageProgress, {
-        percent: averagePercent,
-        label: averageLabel
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.operators,
-      children: TABLE_OPERATOR_COLUMNS.map(({
-        operator,
-        badgeBg,
-        badgeText
-      }) => /*#__PURE__*/_jsx(View, {
-        style: styles.operator,
-        children: /*#__PURE__*/_jsx(OperatorBadge, {
-          value: scores[operator],
-          bgColor: badgeBg,
-          textColor: badgeText
+  const isHighlighted = isHovered || isSelected;
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.rowWrapper,
+    children: /*#__PURE__*/_jsxs(AnimatedPressable, {
+      onHoverIn: fadeIn,
+      onHoverOut: fadeOut,
+      onPress: onPress,
+      style: [styles.row, {
+        backgroundColor: isSelected ? COLORS.ORANGE_1 : hoverBackgroundColor
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: tableCellStyles.name,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: HeadingVariants.H7,
+          style: [styles.nameText, isHighlighted && styles.nameTextHighlighted],
+          numberOfLines: 1,
+          children: name
         })
-      }, operator))
-    })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: tableCellStyles.average,
+        children: /*#__PURE__*/_jsx(AverageCell, {
+          percent: averagePercent
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: tableCellStyles.operators,
+        children: getTableOperatorColumns(grade).map(({
+          operator
+        }) => /*#__PURE__*/_jsx(View, {
+          style: tableCellStyles.operator,
+          children: /*#__PURE__*/_jsx(OperatorBadge, {
+            value: scores[operator],
+            operator: COLUMN_TO_OPERATOR[operator]
+          })
+        }, operator))
+      })]
+    })
   });
 };
 const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: SPACING[400],
-    paddingVertical: SPACING[200],
-    gap: SPACING[400],
+  rowWrapper: {
     backgroundColor: COLORS.NEUTRAL_1,
     borderBottomWidth: 1,
-    borderBottomColor: COLORS.NEUTRAL_4
+    borderBottomColor: COLORS.NEUTRAL_3
   },
-  name: {
-    width: 137,
-    height: 40,
+  row: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 12
-  },
-  icon: {
-    width: 25,
-    height: 25,
-    alignItems: 'center',
-    justifyContent: 'center'
+    marginHorizontal: SPACING[100],
+    marginVertical: 2,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    gap: SPACING[400],
+    borderRadius: BORDER_RADIUS[200]
   },
   nameText: {
     width: 100,
     color: COLORS.NEUTRAL_9
   },
-  average: {
-    width: 145,
-    height: 40,
-    paddingHorizontal: 12,
-    justifyContent: 'center'
-  },
-  operators: {
-    flex: 1,
-    height: 40,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: SPACING[800]
-  },
-  operator: {
-    flex: 1,
-    alignItems: 'center'
+  nameTextHighlighted: {
+    color: COLORS.PRIMARY_ORANGE
   }
 });
 //# sourceMappingURL=TableRow.js.map