@magmamath/students-features 1.0.2-rc.12 → 1.0.2

package/src/features/voice/playing/components/VoiceTranscriptionsDropdown.tsx

@@ -4,10 +4,20 @@ import {
   CaretDownIcon,
   COLORS,
   IS_WEB,
+  ScrollableListScrollView,
 } from '@magmamath/react-native-ui'
 import { useUnit } from 'effector-react'
 import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react'
-import { TouchableOpacity, StyleProp, ViewStyle, FlatList, View, StyleSheet } from 'react-native'
+import {
+  TouchableOpacity,
+  StyleProp,
+  ViewStyle,
+  FlatList,
+  LayoutChangeEvent,
+  ScrollView,
+  View,
+  StyleSheet,
+} from 'react-native'
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
 import { AnswerAudio, VoiceTranscriptionItem } from '../../types'
 import { useVoiceTranscriptionsDropdown } from '../hooks/useVoiceTranscriptionsDropdown'
@@ -42,6 +52,8 @@ export const VoiceTranscriptionsDropdown = ({
   const [attempts, setAttempts] = useState<VoiceTranscriptionItem[]>([])
 
   const scrollRef = useRef<FlatList | null>(null)
+  const scrollViewRef = useRef<ScrollView | null>(null)
+  const itemLayoutsRef = useRef<Map<string, number>>(new Map())
   const answersRef = useRef(answers)
   answersRef.current = answers
 
@@ -74,11 +86,25 @@ export const VoiceTranscriptionsDropdown = ({
     model.dropdown,
   )
 
+  const handleItemLayout = useCallback((id: string, event: LayoutChangeEvent) => {
+    itemLayoutsRef.current.set(id, event.nativeEvent.layout.y)
+  }, [])
+
   const scrollToAttempt = useCallback(
     (attemptNumber: number) => {
-      const index = attempts.findIndex((item) => item.attemptNumber === attemptNumber)
-      if (index !== -1) {
-        scrollRef.current?.scrollToIndex({ index, animated: true, viewPosition: 0 })
+      if (IS_WEB) {
+        const item = attempts.find((item) => item.attemptNumber === attemptNumber)
+        if (item) {
+          const y = itemLayoutsRef.current.get(item._id)
+          if (y !== undefined) {
+            scrollViewRef.current?.scrollTo({ y, animated: true })
+          }
+        }
+      } else {
+        const index = attempts.findIndex((item) => item.attemptNumber === attemptNumber)
+        if (index !== -1) {
+          scrollRef.current?.scrollToIndex({ index, animated: true, viewPosition: 0 })
+        }
       }
     },
     [attempts],
@@ -188,19 +214,32 @@ export const VoiceTranscriptionsDropdown = ({
 
       <Animated.View style={[listAnimatedStyle, { overflow: 'hidden' }]}>
         <View onLayout={onListLayout} style={styles.listContainer}>
-          <ScrollableList
-            bounces={false}
-            ref={scrollRef}
-            hideShadow
-            data={attempts}
-            keyExtractor={(item) => item._id}
-            onScrollToIndexFailed={handleScrollToIndexFailed}
-            renderItem={renderItem}
-            style={IS_WEB && styles.list}
-            contentContainerStyle={styles.listContent}
-            //for some resons on web FlatList doesn't render last items in huge list, so we need to render them all at once
-            initialNumToRender={IS_WEB ? 20 : undefined}
-          />
+          {IS_WEB ? (
+            <ScrollableListScrollView
+              bounces={false}
+              ref={scrollViewRef}
+              hideShadow
+              style={styles.list}
+              contentContainerStyle={styles.listContent}
+            >
+              {attempts.map((item) => (
+                <View key={item._id} onLayout={(e) => handleItemLayout(item._id, e)}>
+                  {renderItem({ item })}
+                </View>
+              ))}
+            </ScrollableListScrollView>
+          ) : (
+            <ScrollableList
+              bounces={false}
+              ref={scrollRef}
+              hideShadow
+              data={attempts}
+              keyExtractor={(item) => item._id}
+              onScrollToIndexFailed={handleScrollToIndexFailed}
+              renderItem={renderItem}
+              contentContainerStyle={styles.listContent}
+            />
+          )}
         </View>
       </Animated.View>
 

package/.editorconfig

@@ -1,15 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-[*]
-
-indent_style = space
-indent_size = 2
-
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true

package/.eslintignore

@@ -1,2 +0,0 @@
-node_modules/
-./lib/

package/.eslintrc

@@ -1,22 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2020": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:storybook/recommended",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["react-refresh"],
-  "rules": {
-    "react-refresh/only-export-components": "warn"
-  }
-}

package/.gitattributes

@@ -1,3 +0,0 @@
-*.pbxproj -text
-# specific for windows script files
-*.bat text eol=crlf

package/.github/actions/setup/action.yml

@@ -1,37 +0,0 @@
-name: Setup
-description: Setup Node.js and install dependencies
-
-inputs:
-  npmrc-auth-token:
-    required: true
-
-runs:
-  using: composite
-  steps:
-    - name: Setup Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version-file: .nvmrc
-
-    - name: Create .npmrc
-      shell: bash
-      run: |
-        echo "registry=https://registry.npmjs.org" > .npmrc
-        echo "//registry.npmjs.org/:_authToken=${{ inputs.npmrc-auth-token }}" >> .npmrc
-
-    - name: Cache dependencies
-      id: yarn-cache
-      uses: actions/cache@v3
-      with:
-        path: |
-          **/node_modules
-          .yarn/install-state.gz
-        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
-        restore-keys: |
-          ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-          ${{ runner.os }}-yarn-
-
-    - name: Install dependencies
-      if: steps.yarn-cache.outputs.cache-hit != 'true'
-      run: yarn install --immutable
-      shell: bash

package/.github/workflows/ci.yml

@@ -1,73 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
-  merge_group:
-    types:
-      - checks_requested
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          npmrc-auth-token: ${{ secrets.MAGMA_NPMRC_TOKEN }}
-
-      - name: Lint files
-        run: yarn lint
-
-      - name: Typecheck files
-        run: yarn typecheck
-
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          npmrc-auth-token: ${{ secrets.MAGMA_NPMRC_TOKEN }}
-
-      - name: Run unit tests
-        run: yarn test --maxWorkers=2 --coverage
-
-  build-library:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          npmrc-auth-token: ${{ secrets.MAGMA_NPMRC_TOKEN }}
-
-      - name: Build package
-        run: yarn prepare
-
-  build-web:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          npmrc-auth-token: ${{ secrets.MAGMA_NPMRC_TOKEN }}
-
-      - name: Build example for Web
-        run: |
-          yarn example expo export --platform web

package/.gitignore

@@ -1,84 +0,0 @@
-# OSX
-#
-.DS_Store
-
-# XDE
-.expo/
-
-# VSCode
-.vscode/
-jsconfig.json
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IJ
-#
-.classpath
-.cxx
-.gradle
-.idea
-.project
-.settings
-local.properties
-android.iml
-
-# Cocoapods
-#
-example/ios/Pods
-
-# Ruby
-example/vendor/
-
-# node.js
-#
-node_modules/
-npm-debug.log
-yarn-debug.log
-yarn-error.log
-
-# BUCK
-buck-out/
-\.buckd/
-android/app/libs
-android/keystores/debug.keystore
-
-# Yarn
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
-
-# Expo
-.expo/
-
-# Turborepo
-.turbo/
-
-# generated by bob
-dist/
-!src/lib/
-
-# React Native Codegen
-ios/generated
-android/generated
-.npmrc

package/.idea/.gitignore

@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml

package/.idea/codeStyles/Project.xml

@@ -1,62 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <option name="LINE_SEPARATOR" value="&#10;" />
-    <HTMLCodeStyleSettings>
-      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
-    </HTMLCodeStyleSettings>
-    <JSCodeStyleSettings version="0">
-      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </JSCodeStyleSettings>
-    <TypeScriptCodeStyleSettings version="0">
-      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </TypeScriptCodeStyleSettings>
-    <VueCodeStyleSettings>
-      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
-      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
-    </VueCodeStyleSettings>
-    <codeStyleSettings language="HTML">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="Vue">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-  </code_scheme>
-</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>

package/.idea/copilot.data.migration.agent.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="AgentMigrationStateService">
-    <option name="migrationStatus" value="COMPLETED" />
-  </component>
-</project>

package/.idea/copilot.data.migration.ask.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="AskMigrationStateService">
-    <option name="migrationStatus" value="COMPLETED" />
-  </component>
-</project>

package/.idea/copilot.data.migration.ask2agent.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="Ask2AgentMigrationStateService">
-    <option name="migrationStatus" value="COMPLETED" />
-  </component>
-</project>

package/.idea/copilot.data.migration.edit.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="EditMigrationStateService">
-    <option name="migrationStatus" value="COMPLETED" />
-  </component>
-</project>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,8 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="EditorConfigUnusedDeclaration" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="UnusedDefine" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

package/.idea/jsLinters/eslint.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="EslintConfiguration">
-    <option name="fix-on-save" value="true" />
-  </component>
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/students-features.iml" filepath="$PROJECT_DIR$/.idea/students-features.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/prettier.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PrettierConfiguration">
-    <option name="myConfigurationMode" value="AUTOMATIC" />
-    <option name="myRunOnSave" value="true" />
-  </component>
-</project>

package/.idea/students-features.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>