@magmamath/students-features 0.6.14-rc.2 → 0.6.14-rc.21

package/src/features/chatbot/components/Alternatives/InputWithHintRow.tsx

@@ -1,160 +0,0 @@
-import React, { useState } from 'react'
-import { Platform, StyleSheet, TextInput, View } from 'react-native'
-import Animated, {
-  useSharedValue,
-  withTiming,
-  useAnimatedStyle,
-  useAnimatedReaction,
-} from 'react-native-reanimated'
-import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
-import { HelpRequestOption } from './HelpRequestOption'
-import { InputButton } from './InputButton'
-import { ColorScheme } from '@magmamath/students-features'
-
-const COMPACT_WIDTH = 134
-
-type InputWithHintRowProps = {
-  onPress: () => void
-  message: string
-  disabled: boolean
-  colorScheme?: ColorScheme
-}
-
-export const InputWithHintRow = ({
-  onPress,
-  message,
-  disabled,
-  colorScheme,
-}: InputWithHintRowProps) => {
-  const [value, setValue] = useState('')
-
-  const widthSv = useSharedValue(COMPACT_WIDTH)
-  const arrowOpacitySv = useSharedValue(1)
-  const hintVisibleSv = useSharedValue(1)
-  const valueLengthSv = useSharedValue(0)
-
-  const shouldDisable = value.trim().length > 0
-
-  const animatedInputStyle = useAnimatedStyle(
-    () => ({
-      width: widthSv.value,
-    }),
-    [widthSv],
-  )
-
-  const handleChangeText = (text: string) => {
-    setValue(text)
-    valueLengthSv.value = text.trim().length
-  }
-
-  useAnimatedReaction(
-    () => valueLengthSv.value,
-    (currentLength) => {
-      if (currentLength > 0) {
-        widthSv.value = withTiming(305, { duration: 200 })
-        arrowOpacitySv.value = withTiming(0, { duration: 200 })
-        hintVisibleSv.value = withTiming(0, { duration: 200 })
-      } else {
-        widthSv.value = withTiming(COMPACT_WIDTH, { duration: 200 })
-        arrowOpacitySv.value = withTiming(1, { duration: 200 })
-        hintVisibleSv.value = withTiming(1, { duration: 200 })
-      }
-    },
-    [valueLengthSv],
-  )
-
-  // const handleFocus = () => {
-  //   widthSv.value = withTiming(305, { duration: 200 }) // expand full width (container limits it)
-  //   arrowOpacitySv.value = withTiming(0, { duration: 200 })
-  //   hintVisibleSv.value = withTiming(0, { duration: 200 })
-  //
-  //   // setIsFocused(true)
-  // }
-  //
-  // const handleBlur = () => {
-  //   if (value.trim().length > 0) return
-  //   widthSv.value = withTiming(COMPACT_WIDTH, { duration: 200 })
-  //   arrowOpacitySv.value = withTiming(1, { duration: 200 })
-  //   hintVisibleSv.value = withTiming(1, { duration: 200 })
-  //   // setIsFocused(false)
-  // }
-
-  return (
-    <View style={styles.container}>
-      <Animated.View style={[styles.inputWrapper, animatedInputStyle]}>
-        <TextInput
-          style={styles.input}
-          placeholder="Type..."
-          placeholderTextColor={COLORS.NEUTRAL_6}
-          value={value}
-          onChangeText={handleChangeText}
-          // onFocus={handleFocus}
-          // onBlur={handleBlur}
-        />
-        <Animated.View style={[styles.arrowWrapper]}>
-          <InputButton
-            onPress={() => {
-              onPress()
-              handleChangeText('')
-
-            }}
-            disabled={value.trim().length < 1 || disabled}
-            colorScheme={colorScheme}
-          />
-        </Animated.View>
-      </Animated.View>
-
-      <HelpRequestOption
-        visibleSv={hintVisibleSv}
-        disabled={disabled || shouldDisable}
-        onPress={onPress}
-        message={message}
-        colorScheme={colorScheme}
-      />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'relative',
-    width: '100%',
-    alignItems: 'flex-end',
-    height: 52,
-    justifyContent: 'center',
-  },
-  inputWrapper: {
-    position: 'absolute',
-    zIndex: 1,
-    right: SPACING[200],
-    left: 0,
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: COLORS.NEUTRAL_5,
-    borderRadius: 200,
-    backgroundColor: COLORS.NEUTRAL_1,
-    paddingHorizontal: SPACING[100],
-    paddingVertical: SPACING[100],
-    overflow: 'hidden',
-    elevation: 3,
-    shadowColor: '#333',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.25,
-    shadowRadius: 3,
-  },
-  input: {
-    flex: 1,
-    fontSize: 16,
-    minWidth: 60,
-    minHeight: 22,
-    fontWeight: '400',
-    fontFamily: FONT_FAMILY.buenosAires,
-    ...(Platform.OS === 'web' && { outlineStyle: 'none' }),
-    paddingHorizontal: SPACING[100],
-    paddingVertical: SPACING[200],
-  },
-  arrowWrapper: {
-    marginLeft: SPACING[200],
-  },
-})