@klyftig/mobile-ui 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "scripts": {
     "pack-install": "npm pack && mv klyftig-ui-*.tgz /tmp/klyftig-ui-local.tgz && cd ../../mobile && npm install /tmp/klyftig-ui-local.tgz"
   },

package/src/components/GlassInput.tsx

@@ -4,13 +4,15 @@ import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
 import { useTheme } from '../hooks/useTheme';
 
 interface GlassInputProps {
-  label: string;
+  label?: string;
   value: string;
   onChangeText: (text: string) => void;
   placeholder?: string;
   secureTextEntry?: boolean;
-  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad';
+  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'decimal-pad' | 'number-pad';
   autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+  multiline?: boolean;
+  numberOfLines?: number;
   // Off by default for fields where iOS would otherwise replace partially-edited
   // multi-word values with its autocorrect suggestion and snap the caret to end.
   autoCorrect?: boolean;
@@ -45,6 +47,8 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
   onFocus,
   onBlur,
   selectTextOnFocus,
+  multiline = false,
+  numberOfLines,
 }) => {
   const { colors } = useTheme();
   const [isSecure, setIsSecure] = useState(secureTextEntry);
@@ -66,7 +70,9 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
 
   return (
     <View style={styles.container}>
-      <Text style={[styles.label, { color: colors.text.primary }]}>{label}</Text>
+      {label ? (
+        <Text style={[styles.label, { color: colors.text.primary }]}>{label}</Text>
+      ) : null}
       <View
         style={[
           styles.inputContainer,
@@ -74,7 +80,7 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
           disabled && styles.inputContainerDisabled,
         ]}
       >
-        <View style={styles.inputWrapper}>
+        <View style={[styles.inputWrapper, multiline && styles.inputWrapperMultiline]}>
           {icon && (
             <Icon name={icon} size={20} color="#9B9B9B" style={styles.leftIcon} />
           )}
@@ -92,12 +98,20 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
             onFocus={handleFocus}
             onBlur={handleBlur}
             selectTextOnFocus={selectTextOnFocus}
+            multiline={multiline}
+            numberOfLines={numberOfLines}
+            textAlignVertical={multiline ? 'top' : undefined}
             textContentType={textContentType ?? (secureTextEntry ? 'oneTimeCode' : undefined)}
             autoComplete={autoComplete as any}
             accessibilityLabel={label}
-            accessibilityHint={placeholder ? `Enter ${label.toLowerCase()}` : undefined}
+            accessibilityHint={placeholder && label ? `Enter ${label.toLowerCase()}` : undefined}
             accessibilityState={{ disabled }}
-            style={[styles.input, icon && styles.inputWithLeftIcon, (rightText || showPasswordToggle) && styles.inputWithRightIcon]}
+            style={[
+              styles.input,
+              icon && styles.inputWithLeftIcon,
+              (rightText || showPasswordToggle) && styles.inputWithRightIcon,
+              multiline && styles.inputMultiline,
+            ]}
           />
           {rightText && (
             <Text style={styles.rightText}>{rightText}</Text>
@@ -154,6 +168,17 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     height: 56,
   },
+  inputWrapperMultiline: {
+    height: undefined,
+    minHeight: 96,
+    paddingVertical: 12,
+    alignItems: 'flex-start',
+  },
+  inputMultiline: {
+    height: undefined,
+    minHeight: 72,
+    paddingTop: 4,
+  },
   leftIcon: {
     marginRight: 12,
   },

package/src/components/WheelPicker.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import {
-  ScrollView,
+  FlatList,
   View,
   Text,
   StyleSheet,
   NativeSyntheticEvent,
   NativeScrollEvent,
+  ListRenderItem,
 } from 'react-native';
 import { useTheme } from '../hooks/useTheme';
 
@@ -34,7 +35,7 @@ export function WheelPicker({
   flex,
 }: WheelPickerProps) {
   const { colors } = useTheme();
-  const scrollRef = useRef<ScrollView>(null);
+  const listRef = useRef<FlatList<number>>(null);
   const containerHeight = itemHeight * visibleCount;
   const padding = (containerHeight - itemHeight) / 2;
   const lastIndexRef = useRef<number>(-1);
@@ -45,22 +46,58 @@ export function WheelPicker({
   }, [values, selected]);
 
   useEffect(() => {
-    if (selectedIndex !== lastIndexRef.current) {
-      lastIndexRef.current = selectedIndex;
-      requestAnimationFrame(() => {
-        scrollRef.current?.scrollTo({ y: selectedIndex * itemHeight, animated: false });
-      });
-    }
+    if (selectedIndex === lastIndexRef.current) return;
+    const prev = lastIndexRef.current;
+    lastIndexRef.current = selectedIndex;
+    // Skip the very first effect — initialScrollIndex already positioned us.
+    if (prev === -1) return;
+    listRef.current?.scrollToOffset({ offset: selectedIndex * itemHeight, animated: false });
   }, [selectedIndex, itemHeight]);
 
-  const handleMomentumEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const offsetY = e.nativeEvent.contentOffset.y;
-    const index = Math.round(offsetY / itemHeight);
-    const clamped = Math.max(0, Math.min(values.length - 1, index));
-    if (values[clamped] !== selected) {
-      onChange(values[clamped]);
-    }
-  };
+  const handleMomentumEnd = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetY = e.nativeEvent.contentOffset.y;
+      const index = Math.round(offsetY / itemHeight);
+      const clamped = Math.max(0, Math.min(values.length - 1, index));
+      if (values[clamped] !== selected) {
+        onChange(values[clamped]);
+      }
+    },
+    [itemHeight, values, selected, onChange],
+  );
+
+  const getItemLayout = useCallback(
+    (_: ArrayLike<number> | null | undefined, index: number) => ({
+      length: itemHeight,
+      offset: itemHeight * index,
+      index,
+    }),
+    [itemHeight],
+  );
+
+  const keyExtractor = useCallback((item: number) => String(item), []);
+
+  const dimColor = colors.text.tertiary;
+  const activeColor = colors.text.primary;
+
+  const renderItem: ListRenderItem<number> = useCallback(
+    ({ item, index }) => {
+      const isSelected = index === selectedIndex;
+      return (
+        <View style={[styles.item, { height: itemHeight }]}>
+          <Text
+            style={[
+              styles.itemText,
+              { color: isSelected ? activeColor : dimColor },
+            ]}
+          >
+            {formatLabel ? formatLabel(item) : String(item)}
+          </Text>
+        </View>
+      );
+    },
+    [selectedIndex, itemHeight, activeColor, dimColor, formatLabel],
+  );
 
   return (
     <View style={[styles.wrapper, { height: containerHeight, width, flex }]}>
@@ -71,34 +108,25 @@ export function WheelPicker({
           { top: padding, height: itemHeight, backgroundColor: 'rgba(0,0,0,0.06)' },
         ]}
       />
-      <ScrollView
-        ref={scrollRef}
+      <FlatList
+        ref={listRef}
+        data={values}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        getItemLayout={getItemLayout}
+        initialScrollIndex={selectedIndex}
+        extraData={selectedIndex}
         showsVerticalScrollIndicator={false}
         snapToInterval={itemHeight}
         decelerationRate="fast"
         contentContainerStyle={{ paddingTop: padding, paddingBottom: padding }}
         onMomentumScrollEnd={handleMomentumEnd}
         nestedScrollEnabled
-        contentOffset={{ x: 0, y: selectedIndex * itemHeight }}
-      >
-        {values.map((item, index) => {
-          const isSelected = index === selectedIndex;
-          return (
-            <View key={item} style={[styles.item, { height: itemHeight }]}>
-              <Text
-                style={[
-                  styles.itemText,
-                  {
-                    color: isSelected ? colors.text.primary : colors.text.tertiary,
-                  },
-                ]}
-              >
-                {formatLabel ? formatLabel(item) : String(item)}
-              </Text>
-            </View>
-          );
-        })}
-      </ScrollView>
+        initialNumToRender={visibleCount + 4}
+        windowSize={3}
+        maxToRenderPerBatch={visibleCount + 4}
+        removeClippedSubviews
+      />
     </View>
   );
 }