@hero-design/rn 8.25.1 → 8.25.2

package/src/components/PinInput/index.tsx

@@ -1,4 +1,11 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import { InteractionManager, TextInput } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../Icon';
@@ -73,98 +80,122 @@ export function getState({
   return 'default';
 }
 
-function PinInput({
-  value = '',
-  onChangeText,
-  onFulfill,
-  length = 4,
-  disabled = false,
-  secure = true,
-  autoFocus = false,
-  error,
-  style,
-  testID,
-}: PinInputProps) {
-  const inputRef = useRef<TextInput>(null);
-  const [focused, setFocused] = useState(autoFocus);
-  const state = getState({ disabled, error });
+export interface PinInputHandler {
+  /**
+   * focus into input
+   */
+  focus: () => void;
+  /**
+   * blur text input
+   */
+  blur: () => void;
+}
 
-  const focus = useCallback(() => {
-    if (inputRef?.current) {
-      inputRef.current.focus();
-      setFocused(true);
-    }
-  }, []);
+const PinInput = forwardRef<PinInputHandler, PinInputProps>(
+  (
+    {
+      value = '',
+      onChangeText,
+      onFulfill,
+      length = 4,
+      disabled = false,
+      secure = true,
+      autoFocus = false,
+      error,
+      style,
+      testID,
+    },
+    ref
+  ) => {
+    const inputRef = useRef<TextInput>(null);
+    const [focused, setFocused] = useState(autoFocus);
+    const state = getState({ disabled, error });
 
-  const blur = useCallback(() => {
-    if (inputRef?.current) {
-      inputRef.current.blur();
-      setFocused(false);
-    }
-  }, []);
+    const focus = useCallback(() => {
+      if (inputRef?.current) {
+        inputRef.current.focus();
+        setFocused(true);
+      }
+    }, []);
 
-  const changeText = useCallback((text: string) => {
-    const pin = (text.match(/[0-9]/g) || []).join('');
-    if (onChangeText) {
-      onChangeText(pin);
-    }
-    if (pin.length === length && onFulfill) {
-      onFulfill(pin);
-    }
-  }, []);
+    const blur = useCallback(() => {
+      if (inputRef?.current) {
+        inputRef.current.blur();
+        setFocused(false);
+      }
+    }, []);
 
-  useEffect(() => {
-    // Must run after animations for keyboard to automatically open
-    if (autoFocus) {
-      InteractionManager.runAfterInteractions(focus);
-    }
-  }, [inputRef]);
+    const changeText = useCallback(
+      (text: string) => {
+        const pin = (text.match(/[0-9]/g) || []).join('');
 
-  return (
-    <StyledWrapper style={style} testID={testID}>
-      <StyledPinWrapper>
-        {[...Array(length).keys()].map((index) => (
-          <React.Fragment key={index}>
-            {index !== 0 && <StyledSpacer />}
-            <PinCell
-              value={value.charAt(index)}
-              secure={secure}
-              focused={focused && index === value.length}
-              state={state}
+        onChangeText?.(pin);
+
+        if (pin.length === length) {
+          onFulfill?.(pin);
+        }
+      },
+      [length, onChangeText, onFulfill]
+    );
+
+    useEffect(() => {
+      // Must run after animations for keyboard to automatically open
+      if (autoFocus) {
+        InteractionManager.runAfterInteractions(focus);
+      }
+    }, [inputRef]);
+
+    useImperativeHandle(ref, () => ({
+      focus,
+      blur,
+    }));
+
+    return (
+      <StyledWrapper style={style} testID={testID}>
+        <StyledPinWrapper>
+          {[...Array(length).keys()].map((index) => (
+            <React.Fragment key={index}>
+              {index !== 0 && <StyledSpacer />}
+              <PinCell
+                value={value.charAt(index)}
+                secure={secure}
+                focused={focused && index === value.length}
+                state={state}
+              />
+            </React.Fragment>
+          ))}
+        </StyledPinWrapper>
+        {state === 'error' && (
+          <StyledErrorContainer>
+            <Icon
+              icon="circle-info"
+              size="xsmall"
+              intent="danger"
+              testID="pin-error-icon"
             />
-          </React.Fragment>
-        ))}
-      </StyledPinWrapper>
-      {state === 'error' && (
-        <StyledErrorContainer>
-          <Icon
-            icon="circle-info"
-            size="xsmall"
-            intent="danger"
-            testID="pin-error-icon"
-          />
-          <StyledErrorMessage>{error}</StyledErrorMessage>
-        </StyledErrorContainer>
-      )}
-      <StyledHiddenInput
-        themePinLength={length}
-        ref={inputRef}
-        value={value}
-        onChangeText={changeText}
-        secureTextEntry={secure}
-        editable={!disabled}
-        autoFocus={autoFocus}
-        onFocus={focus}
-        onBlur={blur}
-        maxLength={length}
-        keyboardType="numeric"
-        contextMenuHidden
-        caretHidden
-        pointerEvents="box-only"
-        testID="pin-hidden-input"
-      />
-    </StyledWrapper>
-  );
-}
+            <StyledErrorMessage>{error}</StyledErrorMessage>
+          </StyledErrorContainer>
+        )}
+        <StyledHiddenInput
+          themePinLength={length}
+          ref={inputRef}
+          value={value}
+          onChangeText={changeText}
+          secureTextEntry={secure}
+          editable={!disabled}
+          autoFocus={autoFocus}
+          onFocus={focus}
+          onBlur={blur}
+          maxLength={length}
+          keyboardType="numeric"
+          contextMenuHidden
+          caretHidden
+          pointerEvents="box-only"
+          testID="pin-hidden-input"
+        />
+      </StyledWrapper>
+    );
+  }
+);
 
 export default PinInput;

package/types/components/FAB/StyledFAB.d.ts

@@ -16,8 +16,4 @@ declare const StyledFABText: import("@emotion/native").StyledComponent<import(".
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & TextProps, {}, {}>;
-declare const StyledFABContainer: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
-export { StyledFAB, StyledFABIcon, StyledFABText, StyledFABContainer };
+export { StyledFAB, StyledFABIcon, StyledFABText };

package/types/components/PinInput/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { State } from './StyledPinInput';
 interface PinInputProps {
@@ -44,5 +45,15 @@ export declare function getState({ disabled, error, }: {
     disabled?: boolean;
     error?: string;
 }): State;
-declare function PinInput({ value, onChangeText, onFulfill, length, disabled, secure, autoFocus, error, style, testID, }: PinInputProps): JSX.Element;
+export interface PinInputHandler {
+    /**
+     * focus into input
+     */
+    focus: () => void;
+    /**
+     * blur text input
+     */
+    blur: () => void;
+}
+declare const PinInput: React.ForwardRefExoticComponent<PinInputProps & React.RefAttributes<PinInputHandler>>;
 export default PinInput;