jfs-components 0.0.62 → 0.0.63

package/src/components/BottomNavItem/BottomNavItem.tsx

@@ -1,9 +1,11 @@
-import React, { useState } from 'react'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 import {
+  Platform,
   Pressable,
   Text,
   View,
   type AccessibilityState,
+  type PressableStateCallbackType,
   type StyleProp,
   type TextStyle,
   type ViewStyle,
@@ -12,6 +14,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import Icon from '../../icons/Icon'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 type BottomNavItemProps = SafePressableProps & {
   iconName?: string;
@@ -32,21 +35,80 @@ type BottomNavItemProps = SafePressableProps & {
   webAccessibilityProps?: WebAccessibilityProps;
 };
 
+const IS_WEB = Platform.OS === 'web'
+const IS_IOS = Platform.OS === 'ios'
+const PRESS_DELAY = IS_IOS ? 130 : 0
+
+const pressedOverlayStyle: ViewStyle = { opacity: 0.7 }
+const hoverOverlayStyle: ViewStyle = { opacity: 0.85 }
+const focusOverlayStyle: ViewStyle = { borderBottomWidth: 2, borderBottomColor: '#222' }
+
+interface BottomNavItemTokens {
+  baseContainerStyle: ViewStyle;
+  textStyle: TextStyle;
+  iconColor: string;
+  iconSize: number;
+}
+
+function resolveBottomNavItemTokens(
+  modes: Record<string, any>,
+  disabled: boolean,
+  iconColorOverride?: string,
+  iconSizeOverride?: number,
+): BottomNavItemTokens {
+  const gap = (getVariableByName('bottomNavItem/gap', modes) ?? 6) as number
+
+  const fontFamily =
+    (getVariableByName('bottomNavItem/fontFamily', modes) || 'JioType_Var:Medium') as string
+  const fontWeightRaw = getVariableByName('bottomNavItem/fontWeight', modes) ?? 500
+  const fontWeight =
+    typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw
+  const fontSize = (getVariableByName('bottomNavItem/fontSize', modes) ?? 11) as number
+  const lineHeight = (getVariableByName('bottomNavItem/lineHeight', modes) ?? 14) as number
+
+  const labelColor = (getVariableByName('bottomNavItem/label/color', modes) || '#0d0d0f') as string
+
+  const resolvedIconColor =
+    iconColorOverride || (getVariableByName('bottomNavItem/icon/color', modes) || '#ad8545') as string
+  const resolvedIconSize =
+    iconSizeOverride ?? (getVariableByName('bottomNavItem/icon/size', modes) ?? 24) as number
+
+  return {
+    baseContainerStyle: {
+      alignItems: 'center',
+      opacity: disabled ? 0.5 : 1,
+    },
+    textStyle: {
+      color: labelColor,
+      fontFamily,
+      fontWeight: fontWeight as TextStyle['fontWeight'],
+      fontSize,
+      lineHeight,
+      textAlign: 'center',
+      marginTop: gap,
+    },
+    iconColor: resolvedIconColor,
+    iconSize: resolvedIconSize,
+  }
+}
+
 /**
  * Bottom navigation item with icon and label stacked vertically.
  *
- * All visual attributes resolve from Figma tokens via `getVariableByName`,
- * with the `modes` object passed straight through.
- *
- * @component
- * @param {Object} props
- * @param {string} [props.iconName="ic_home"] - Icon name from the registry.
- * ...
+ * Performance notes:
+ *  - Token reads collapsed into a single `useMemo([modes, disabled, iconColor, iconSize])`.
+ *  - Press visual via Pressable's `({ pressed })` style callback.
+ *  - Hover and focus state are mirrored on web only (gated setters).
+ *  - The previous version had no-op `onPressIn`/`onPressOut` handlers that
+ *    forwarded to user callbacks but did nothing else — they were still
+ *    creating fresh closures every render and forcing Pressable to re-bind.
+ *    Now stable via a ref-backed wrapper.
+ *  - Wrapped in `React.memo`.
  */
 function BottomNavItem({
   iconName = 'ic_home',
   label = 'Home',
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   onPress,
   disabled = false,
   style,
@@ -60,50 +122,39 @@ function BottomNavItem({
   ...rest
 }: BottomNavItemProps) {
   const { modes: globalModes } = useTokens()
-  const modes = { ...globalModes, ...propModes }
-  const [isFocused, setIsFocused] = useState(false)
-  const [isHovered, setIsHovered] = useState(false)
-  const pressedStyle = { opacity: 0.7 }
-  const focusStyle = { borderBottomWidth: 2, borderBottomColor: '#222' }
-  const hoverStyle = { opacity: 0.85 }
-  // Resolve spacing and typography
-  const gap = getVariableByName('bottomNavItem/gap', modes) ?? 6
-
-  const fontFamily =
-    getVariableByName('bottomNavItem/fontFamily', modes) || 'JioType_Var:Medium'
-  const fontWeightRaw = getVariableByName('bottomNavItem/fontWeight', modes) ?? 500
-  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw
-  const fontSize = getVariableByName('bottomNavItem/fontSize', modes) ?? 11
-  const lineHeight = getVariableByName('bottomNavItem/lineHeight', modes) ?? 14
-
-  // Resolve Label Color
-  const labelColor = getVariableByName('bottomNavItem/label/color', modes) || '#0d0d0f'
 
-  // Resolve icon appearance
-  const resolvedIconColor =
-    iconColorOverride || getVariableByName('bottomNavItem/icon/color', modes) || '#ad8545'
+  const modes = useMemo(
+    () => (globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+      ? EMPTY_MODES
+      : { ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
 
-  const resolvedIconSize = iconSizeOverride ?? getVariableByName('bottomNavItem/icon/size', modes) ?? 24
+  const tokens = useMemo(
+    () => resolveBottomNavItemTokens(modes, disabled, iconColorOverride, iconSizeOverride),
+    [modes, disabled, iconColorOverride, iconSizeOverride]
+  )
 
-  const baseContainerStyle: ViewStyle = {
-    alignItems: 'center',
-    opacity: disabled ? 0.5 : 1,
-  }
+  const [isFocused, setIsFocused] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
 
-  const textStyle: TextStyle = {
-    color: labelColor,
-    fontFamily,
-    fontWeight,
-    fontSize,
-    lineHeight,
-    textAlign: 'center',
-    marginTop: gap,
-  }
+  const userHandlersRef = useRef<{
+    onPressIn?: (e: any) => void
+    onPressOut?: (e: any) => void
+    onFocus?: (e: any) => void
+    onBlur?: (e: any) => void
+    onHoverIn?: (e: any) => void
+    onHoverOut?: (e: any) => void
+  }>({})
+  userHandlersRef.current.onPressIn = (rest as any)?.onPressIn
+  userHandlersRef.current.onPressOut = (rest as any)?.onPressOut
+  userHandlersRef.current.onFocus = (rest as any)?.onFocus
+  userHandlersRef.current.onBlur = (rest as any)?.onBlur
+  userHandlersRef.current.onHoverIn = (rest as any)?.onHoverIn
+  userHandlersRef.current.onHoverOut = (rest as any)?.onHoverOut
 
-  // Use provided accessibilityLabel or fall back to label
   const defaultAccessibilityLabel = accessibilityLabel || label
 
-  // Get web platform support props (only used when onPress is defined)
   const webProps = usePressableWebSupport({
     restProps: rest,
     onPress: disabled ? undefined : onPress,
@@ -112,17 +163,22 @@ function BottomNavItem({
     webAccessibilityProps,
   })
 
-  const renderContent = () => (
+  const composedTextStyle = useMemo<StyleProp<TextStyle>>(
+    () => (labelStyle ? [tokens.textStyle, labelStyle] : tokens.textStyle),
+    [tokens.textStyle, labelStyle]
+  )
+
+  const renderContent = (
     <>
       <Icon
         name={iconName}
-        size={resolvedIconSize}
-        color={resolvedIconColor}
+        size={tokens.iconSize}
+        color={tokens.iconColor}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       />
       <Text
-        style={[textStyle, labelStyle]}
+        style={composedTextStyle}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       >
@@ -131,20 +187,59 @@ function BottomNavItem({
     </>
   )
 
+  const staticContainerStyle = useMemo<StyleProp<ViewStyle>>(
+    () => (style ? [tokens.baseContainerStyle, style] : tokens.baseContainerStyle),
+    [tokens.baseContainerStyle, style]
+  )
+
+  const handlePressIn = useCallback((e: any) => {
+    userHandlersRef.current.onPressIn?.(e)
+  }, [])
+  const handlePressOut = useCallback((e: any) => {
+    userHandlersRef.current.onPressOut?.(e)
+  }, [])
+  const handleFocus = useCallback((e: any) => {
+    if (IS_WEB) setIsFocused(true)
+    userHandlersRef.current.onFocus?.(e)
+  }, [])
+  const handleBlur = useCallback((e: any) => {
+    if (IS_WEB) setIsFocused(false)
+    userHandlersRef.current.onBlur?.(e)
+  }, [])
+  const handleHoverIn = useCallback((e: any) => {
+    if (IS_WEB) setIsHovered(true)
+    userHandlersRef.current.onHoverIn?.(e)
+  }, [])
+  const handleHoverOut = useCallback((e: any) => {
+    if (IS_WEB) setIsHovered(false)
+    userHandlersRef.current.onHoverOut?.(e)
+  }, [])
+
+  const pressableStyle = useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+      tokens.baseContainerStyle,
+      style,
+      pressed && !disabled ? pressedOverlayStyle : null,
+      isHovered && !disabled ? hoverOverlayStyle : null,
+      isFocused && !disabled ? focusOverlayStyle : null,
+    ],
+    [tokens.baseContainerStyle, style, isHovered, isFocused, disabled]
+  )
+
   if (!onPress) {
     return (
       <View
-        style={[baseContainerStyle, style]}
+        style={staticContainerStyle}
         accessibilityRole="tab"
         accessibilityLabel={undefined}
         accessibilityHint={accessibilityHint}
         accessibilityState={{
           disabled,
-          ...accessibilityState
+          ...accessibilityState,
         }}
         {...rest}
       >
-        {renderContent()}
+        {renderContent}
       </View>
     )
   }
@@ -157,47 +252,23 @@ function BottomNavItem({
       accessibilityState={{
         disabled,
         selected: accessibilityState?.selected,
-        ...accessibilityState
+        ...accessibilityState,
       }}
       onPress={onPress}
       disabled={disabled}
-      onPressIn={(e: any) => {
-        ; (rest as any)?.onPressIn?.(e)
-      }}
-      onPressOut={(e: any) => {
-        ; (rest as any)?.onPressOut?.(e)
-      }}
-      onFocus={(e: any) => {
-        setIsFocused(true)
-          ; (rest as any)?.onFocus?.(e)
-      }}
-      onBlur={(e: any) => {
-        setIsFocused(false)
-          ; (rest as any)?.onBlur?.(e)
-      }}
-      onHoverIn={(e: any) => {
-        setIsHovered(true)
-          ; (rest as any)?.onHoverIn?.(e)
-      }}
-      onHoverOut={(e: any) => {
-        setIsHovered(false)
-          ; (rest as any)?.onHoverOut?.(e)
-      }}
-      style={({ pressed }) =>
-        [
-          baseContainerStyle,
-          style,
-          pressed && !disabled ? pressedStyle : null,
-          isHovered && !disabled ? hoverStyle : null,
-          isFocused && !disabled ? focusStyle : null,
-        ] as StyleProp<ViewStyle>
-      }
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onHoverIn={handleHoverIn}
+      onHoverOut={handleHoverOut}
+      unstable_pressDelay={PRESS_DELAY}
+      style={pressableStyle}
       {...webProps}
     >
-      {renderContent()}
+      {renderContent}
     </Pressable>
   )
 }
 
-export default BottomNavItem
-
+export default React.memo(BottomNavItem)