Use arrow fn. syntax

Author: retyui

src/Cursor.tsx

@@ -1,3 +1,4 @@
+import type {FC} from 'react';
 import {useCallback, useState} from 'react';
 
 import {useInterval} from './useTimer';
@@ -10,20 +11,20 @@ export interface CursorProps {
   delay?: number;
 }
 
-export function Cursor({
+export const Cursor: FC<CursorProps> = ({
   cursorSymbol = DEFAULT_CURSOR_SYMBOL,
   delay = DEFAULT_BLINKING_SPEED,
-}: CursorProps) {
+}) => {
   'use memo';
   const [visibleFlag, setFlag] = useState(true);
 
-  const toggleVisibility = useCallback(function toggleCursorVisibility() {
+  const toggleVisibility = useCallback(() => {
     setFlag((prev) => !prev);
   }, []);
 
   useInterval(toggleVisibility, delay);
 
   return <>{visibleFlag ? cursorSymbol : ''}</>;
-}
+};
 
 Cursor.displayName = 'Cursor';

src/MaskSymbol.tsx

@@ -1,4 +1,4 @@
-import type {ReactNode} from 'react';
+import type {FC, PropsWithChildren, ReactNode} from 'react';
 import {useCallback, useEffect, useState} from 'react';
 
 import {useTimeout} from './useTimer';
@@ -7,21 +7,20 @@ export const DEFAULT_BLINKING_SPEED = 500;
 
 interface MaskSymbolProps {
   delay?: number;
-  children: ReactNode;
   maskSymbol: ReactNode;
   isLastFilledCell: boolean;
 }
 
-export function MaskSymbol({
+export const MaskSymbol: FC<PropsWithChildren<MaskSymbolProps>> = ({
   isLastFilledCell,
   children: symbol,
   maskSymbol,
   delay = DEFAULT_BLINKING_SPEED,
-}: MaskSymbolProps) {
+}) => {
   'use memo';
   const [visibleFlag, setFlag] = useState(true);
 
-  const toggleVisibility = useCallback(function toggleMaskVisibility() {
+  const toggleVisibility = useCallback(() => {
     setFlag((prev) => !prev);
   }, []);
 
@@ -35,6 +34,6 @@ export function MaskSymbol({
   }, [isLastFilledCell]);
 
   return <>{visibleFlag ? symbol : maskSymbol}</>;
-}
+};
 
 MaskSymbol.displayName = 'MaskSymbol';

src/__tests__/CodeField.test.tsx

@@ -109,8 +109,8 @@ it('should invoke renderCell for third cell when isFocused and it empty', () =>
   );
 
   console.log(
-    // @ts-expect-error - number is not function
     <CodeField
+      // @ts-expect-error - number is not function
       onChangeText={123}
       renderCell={() => null}
       ref={(ref: TextInput | null) => {

src/useBlurOnFulfill.ts

@@ -1,3 +1,4 @@
+import type {RefObject} from 'react';
 import {useEffect, useRef} from 'react';
 import type {TextInput} from 'react-native';
 
@@ -6,21 +7,18 @@ interface Options {
   cellCount: number;
 }
 
-export function useBlurOnFulfill<TInput extends TextInput>({
+export const useBlurOnFulfill = <TInput extends TextInput>({
   value,
   cellCount,
-}: Options) {
+}: Options): RefObject<TInput | null> => {
   'use memo';
   const inputRef = useRef<TInput | null>(null);
 
-  useEffect(
-    function blurOnFulfillEffect() {
-      if (value?.length === cellCount) {
-        inputRef.current?.blur();
-      }
-    },
-    [value, cellCount],
-  );
+  useEffect(() => {
+    if (value?.length === cellCount) {
+      inputRef.current?.blur();
+    }
+  }, [value, cellCount]);
 
   return inputRef;
-}
+};

src/useClearByFocusCell.common.ts

@@ -16,7 +16,7 @@ interface Coords {
   locationY: number;
 }
 
-function findIndex({locationX, locationY}: Coords, map: LayoutsMap): number {
+const findIndex = ({locationX, locationY}: Coords, map: LayoutsMap): number => {
   for (const index in map) {
     const layout = map[index];
     if (
@@ -29,7 +29,7 @@ function findIndex({locationX, locationY}: Coords, map: LayoutsMap): number {
     }
   }
   return -1;
-}
+};
 
 export interface Params {
   setValue(text: string): void;
@@ -47,9 +47,7 @@ export const useClearByFocusCellCommon = (params: Params) => {
     paramsRef.current = params;
   }, [params]);
 
-  const clearCodeByCoords = useCallback(function clearCodeByCoords(
-    coords: Coords,
-  ): void {
+  const clearCodeByCoords = useCallback((coords: Coords): void => {
     const index = findIndex(coords, cellsLayouts.current);
     if (index !== -1) {
       const {value, setValue} = paramsRef.current;
@@ -58,13 +56,9 @@ export const useClearByFocusCellCommon = (params: Params) => {
     }
   }, []);
 
-  const getCellOnLayoutHandler = useCallback(function getCellOnLayoutHandler(
-    index: number,
-  ) {
+  const getCellOnLayoutHandler = useCallback((index: number) => {
     if (!callbackRef.current[index]) {
-      callbackRef.current[index] = function onCellLayout(
-        event: LayoutChangeEvent,
-      ) {
+      callbackRef.current[index] = (event: LayoutChangeEvent): void => {
         const {width, height, x, y} = event.nativeEvent.layout;
         cellsLayouts.current[`${index}`] = {
           x,

src/useClearByFocusCell.ts

@@ -12,9 +12,7 @@ export const useClearByFocusCell = (params: Params) => {
 
   const inputProps = useMemo(
     () => ({
-      onPressOut: function onInputPressOut(
-        event: NativeSyntheticEvent<NativeTouchEvent>,
-      ): void {
+      onPressOut: (event: NativeSyntheticEvent<NativeTouchEvent>): void => {
         clearCodeByCoords(event.nativeEvent);
       },
     }),

src/useClearByFocusCell.web.ts

@@ -14,7 +14,7 @@ export const useClearByFocusCell = (params: Params) => {
     (): {
       onClick: ComponentProps<'input'>['onClick'];
     } => ({
-      onClick: function onInputClick(event): void {
+      onClick: (event): void => {
         // @ts-expect-error - getClientRects have to be defined on the target
         const [offset] = event.target.getClientRects() as [
           {left: number; top: number},

src/useFocusState.ts

@@ -1,39 +1,34 @@
 import {useCallback, useDebugValue, useState} from 'react';
-import type {
-  NativeSyntheticEvent,
-  TextInputFocusEventData,
-  TextInputProps,
-} from 'react-native';
+import type {BlurEvent, FocusEvent, TextInputProps} from 'react-native';
 
-export function useFocusState(
+export const useFocusState = (
   onBlurFromProps?: TextInputProps['onBlur'],
   onFocusFromProps?: TextInputProps['onFocus'],
-) {
+) => {
   'use memo';
 
   const [isFocused, setFocusFlag] = useState(false);
 
   const onBlur = useCallback(
-    function onInputBlur(
-      blurEvent: NativeSyntheticEvent<TextInputFocusEventData>,
-    ) {
+    (blurEvent: BlurEvent) => {
       setFocusFlag(false);
       onBlurFromProps?.(blurEvent);
     },
     [onBlurFromProps],
   );
 
   const onFocus = useCallback(
-    function onInputFocus(
-      focusEvent: NativeSyntheticEvent<TextInputFocusEventData>,
-    ) {
+    (focusEvent: FocusEvent) => {
       setFocusFlag(true);
       onFocusFromProps?.(focusEvent);
     },
     [onFocusFromProps],
   );
 
-  useDebugValue(isFocused ? 'Focused' : 'Unfocused');
+  if (__DEV__) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useDebugValue(isFocused ? 'Focused' : 'Unfocused');
+  }
 
   return [isFocused, onFocus, onBlur] as const;
-}
+};

src/useTimer.ts

@@ -1,27 +1,17 @@
 import {useEffect} from 'react';
 
-export function useInterval(callback: () => void, delay: number): void {
+export const useInterval = (callback: () => void, delay: number): void => {
   'use memo';
-  useEffect(
-    function setIntervalEffect() {
-      const timer = setInterval(callback, delay);
-      return function cleanupIntervalTimer() {
-        clearInterval(timer);
-      };
-    },
-    [callback, delay],
-  );
-}
+  useEffect(() => {
+    const timer = setInterval(callback, delay);
+    return () => clearInterval(timer);
+  }, [callback, delay]);
+};
 
-export function useTimeout(callback: () => void, delay: number): void {
+export const useTimeout = (callback: () => void, delay: number): void => {
   'use memo';
-  useEffect(
-    function setTimeoutEffect() {
-      const timer = setTimeout(callback, delay);
-      return function cleanupTimeoutTimer() {
-        clearTimeout(timer);
-      };
-    },
-    [callback, delay],
-  );
-}
+  useEffect(() => {
+    const timer = setTimeout(callback, delay);
+    return () => clearTimeout(timer);
+  }, [callback, delay]);
+};

src/utils.ts

@@ -1,14 +1,12 @@
-export function isLastFilledCell(
+export const isLastFilledCell = (
   value: string | null | undefined,
   index: number,
-): boolean {
-  return value != null && value.length - 2 === index;
-}
+): boolean => value != null && value.length - 2 === index;
 
-export function getSymbols(codeValue: string, codeLength: number): string[] {
+export const getSymbols = (codeValue: string, codeLength: number): string[] => {
   const symbols = new Array<string>(codeLength);
   for (let i = 0; i < codeLength; i++) {
     symbols[i] = codeValue[i] ?? '';
   }
   return symbols;
-}
+};