@utilitywarehouse/hearth-react-native 0.12.0 → 0.14.0

package/src/components/VerificationInput/useVerificationInput.ts

@@ -0,0 +1,72 @@
+import { useRef, useState } from 'react';
+import { NativeSyntheticEvent, TextInput, TextInputKeyPressEventData } from 'react-native';
+
+interface UseVerificationInputProps {
+  value: string;
+  onChangeText?: (text: string) => void;
+}
+
+export const useVerificationInput = ({ value, onChangeText }: UseVerificationInputProps) => {
+  const length = 6;
+  const inputRefs = useRef<(TextInput | null)[]>([]);
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+
+  const handleFocus = (index: number) => {
+    setFocusedIndex(index);
+  };
+
+  const handleBlur = () => {
+    setFocusedIndex(null);
+  };
+
+  const handleChangeText = (text: string, index: number) => {
+    // Break down the text into an array of characters
+    const chars = Array(length).fill('');
+    for (let i = 0; i < value.length && i < length; i++) {
+      chars[i] = value[i];
+    }
+
+    if (text.length > 1) {
+      // Handle paste
+      const pastedChars = text.slice(0, length - index).split('');
+      for (let i = 0; i < pastedChars.length; i++) {
+        chars[index + i] = pastedChars[i];
+      }
+      const nextIndex = Math.min(index + pastedChars.length, length - 1);
+      inputRefs.current[nextIndex]?.focus();
+    } else {
+      // Handle single char input
+      chars[index] = text;
+      if (text.length === 1 && index < length - 1) {
+        inputRefs.current[index + 1]?.focus();
+      }
+    }
+
+    onChangeText?.(chars.join(''));
+  };
+
+  const handleKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>, index: number) => {
+    if (e.nativeEvent.key === 'Backspace') {
+      if (!value[index] && index > 0) {
+        e.preventDefault();
+        inputRefs.current[index - 1]?.focus();
+
+        const chars = Array(length).fill('');
+        for (let i = 0; i < value.length && i < length; i++) {
+          chars[i] = value[i];
+        }
+        chars[index - 1] = '';
+        onChangeText?.(chars.join(''));
+      }
+    }
+  };
+
+  return {
+    inputRefs,
+    focusedIndex,
+    handleFocus,
+    handleBlur,
+    handleChangeText,
+    handleKeyPress,
+  };
+};

package/src/components/index.ts

@@ -54,6 +54,7 @@ export * from './Textarea';
 export * from './ThemedImage';
 export * from './Toast';
 export * from './ToggleButtonCard';
+export * from './VerificationInput';
 
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 

package/build/components/List/ListItem/ListItemText.d.ts

@@ -1,6 +0,0 @@
-import { TextProps } from 'react-native';
-declare const ListItemText: {
-    ({ children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export default ListItemText;

package/build/components/List/ListItem/ListItemText.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BodyText } from '../../BodyText';
-const ListItemText = ({ children, ...props }) => {
-    return (_jsx(BodyText, { size: "lg", ...props, children: children }));
-};
-ListItemText.displayName = 'ListItemText';
-export default ListItemText;

package/src/components/Checkbox/CheckboxIndicator.figma.tsx

@@ -1,19 +0,0 @@
-import { Checkbox } from './';
-import figma from '@figma/code-connect';
-
-const value = 'some-value';
-const setValue = (isChecked: boolean) => console.log(isChecked);
-
-figma.connect(
-  Checkbox,
-  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4454-3759&m=dev',
-  {
-    props: {
-      checked: figma.boolean('checked'),
-      disabled: figma.boolean('disabled'),
-    },
-    example: ({ disabled, checked }) => (
-      <Checkbox value={value} onChange={setValue} disabled={disabled} checked={checked} />
-    ),
-  }
-);

package/src/components/List/ListItem/ListItemText.tsx

@@ -1,14 +0,0 @@
-import { TextProps } from 'react-native';
-import { BodyText } from '../../BodyText';
-
-const ListItemText = ({ children, ...props }: TextProps) => {
-  return (
-    <BodyText size="lg" {...props}>
-      {children}
-    </BodyText>
-  );
-};
-
-ListItemText.displayName = 'ListItemText';
-
-export default ListItemText;

package/src/components/Radio/RadioIndicator.figma.tsx

@@ -1,21 +0,0 @@
-import { Radio, RadioGroup } from './';
-import figma from '@figma/code-connect';
-
-const value = 'some-value';
-const setValue = (value: string) => console.log(value);
-
-figma.connect(
-  Radio,
-  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4461-7535&m=dev',
-  {
-    props: {
-      checked: figma.boolean('checked', { true: 'some-value', false: undefined }),
-      disabled: figma.boolean('disabled'),
-    },
-    example: ({ disabled, checked }) => (
-      <RadioGroup value={checked} onChange={setValue}>
-        <Radio value={value} disabled={disabled} />
-      </RadioGroup>
-    ),
-  }
-);