@zezosoft/zezo-ott-react-native-ui-kit 1.3.6 → 1.3.8

package/src/components/Settings/AppSettings.tsx

@@ -1,442 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, {
-  useState,
-  useMemo,
-  useCallback,
-  memo,
-  isValidElement,
-  cloneElement,
-  type FC,
-  type ReactElement,
-} from 'react';
-import {
-  View,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  TouchableOpacity,
-  type ViewStyle,
-  type TextStyle,
-  type StyleProp,
-} from 'react-native';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { useTheme } from '../../theme';
-import DeviceInfo from 'react-native-device-info';
-import AppHeader from '../Headers/AppHeader';
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import UserSection from '../User/components/UserSection';
-import type { UserInfo, UserInfoTextStyle } from '../../types';
-import { Text } from '../Text';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import type { ThemeOverride } from '../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-// ✅ Types
-interface ToggleMenuItem {
-  key: string;
-  icon?: React.ReactNode;
-  label: string;
-  type?: 'default';
-  isToggle: true;
-  toggleValue?: boolean;
-  onToggleChange?: (value: boolean) => void;
-}
-
-interface PressableMenuItem {
-  key: string;
-  icon?: React.ReactNode;
-  label: string;
-  type?: 'default';
-  isToggle?: false;
-  onPress: () => void;
-}
-
-interface CustomMenuItem {
-  key: string;
-  type: 'custom';
-  render: () => React.ReactNode;
-}
-
-type MenuItem = ToggleMenuItem | PressableMenuItem | CustomMenuItem;
-
-interface MenuItemStyle {
-  container?: StyleProp<ViewStyle>;
-  icon?: StyleProp<ViewStyle>;
-  label?: StyleProp<TextStyle>;
-}
-
-export type AppSettingsProps = {
-  title?: string;
-  titleAlign?: 'left' | 'center';
-  userInfo?: UserInfo;
-  menuItems: MenuItem[];
-  theme?: ThemeOverride;
-  isLoading?: boolean;
-  versionText?: string;
-  onBackPress?: () => void;
-  renderHeader?: () => React.ReactNode;
-  renderMenuItem?: (item: MenuItem) => React.ReactNode;
-  renderFooter?: () => React.ReactNode;
-  renderUserInfo?: (userInfo: UserInfo) => React.ReactNode;
-  avatarComponent?: React.ReactNode;
-  onMenuItemPress?: (item: MenuItem) => void;
-  skeletonProps?: Partial<React.ComponentProps<typeof SkeletonPlaceholder>>;
-  headerStyle?: StyleProp<ViewStyle>;
-  userInfoTextStyle?: UserInfoTextStyle;
-  menuItemStyle?: MenuItemStyle;
-};
-
-// ✅ Type Guard
-const isToggleMenuItem = (item: MenuItem): item is ToggleMenuItem => {
-  return item.type !== 'custom' && item.isToggle === true;
-};
-const isCustomMenuItem = (item: MenuItem): item is CustomMenuItem => {
-  return item.type === 'custom';
-};
-
-// ✅ Helper function - moved outside component to avoid recreation
-const renderIconWithColor = (
-  icon: React.ReactNode,
-  color: string
-): React.ReactNode => {
-  if (isValidElement(icon)) {
-    return cloneElement(icon as ReactElement<any>, { color });
-  }
-  return icon;
-};
-
-// ✅ Main Component
-const AppSettingsComponent: FC<AppSettingsProps> = ({
-  title,
-  titleAlign = 'center',
-  userInfo,
-  menuItems,
-  theme,
-  isLoading = false,
-  versionText = `Version ${DeviceInfo.getVersion()}`,
-  onBackPress,
-  renderHeader,
-  renderMenuItem,
-  renderFooter,
-  renderUserInfo,
-  avatarComponent,
-  onMenuItemPress,
-  skeletonProps = {},
-  headerStyle,
-  userInfoTextStyle = {},
-  menuItemStyle = {},
-}) => {
-  const { theme: appliedTheme } = useTheme(theme);
-  const insets = useSafeAreaInsets();
-
-  // ✅ Memoize initial toggle states
-  const initialToggleStates = useMemo(
-    () =>
-      menuItems.reduce<Record<string, boolean>>((acc, item) => {
-        if (isToggleMenuItem(item)) {
-          acc[item.key] = item.toggleValue ?? false;
-        }
-        return acc;
-      }, {}),
-    [menuItems]
-  );
-
-  // ✅ State for toggle values
-  const [toggleStates, setToggleStates] =
-    useState<Record<string, boolean>>(initialToggleStates);
-
-  // ✅ Memoize menu items map for quick lookup
-  const menuItemsMap = useMemo(
-    () =>
-      menuItems.reduce<Record<string, MenuItem>>((acc, item) => {
-        acc[item.key] = item;
-        return acc;
-      }, {}),
-    [menuItems]
-  );
-
-  // ✅ Handle toggle change - memoized
-  const handleToggleChange = useCallback(
-    (key: string, value: boolean) => {
-      setToggleStates((prev) => ({ ...prev, [key]: value }));
-      const item = menuItemsMap[key] as ToggleMenuItem | undefined;
-      item?.onToggleChange?.(value);
-    },
-    [menuItemsMap]
-  );
-  // ✅ Memoize style objects
-  const menuItemBaseStyle = useMemo(
-    () => [
-      styles.menuItem,
-      {
-        backgroundColor: appliedTheme.colors.surfaceDisabled,
-        borderColor: appliedTheme.colors.border,
-      },
-      menuItemStyle.container,
-    ],
-    [
-      appliedTheme.colors.surfaceDisabled,
-      appliedTheme.colors.border,
-      menuItemStyle.container,
-    ]
-  );
-
-  const menuLabelStyle = useMemo(
-    () => [
-      styles.menuLabel,
-      { color: appliedTheme.colors.onBackground },
-      menuItemStyle.label,
-    ],
-    [appliedTheme.colors.onBackground, menuItemStyle.label]
-  );
-
-  const menuIconStyle = useMemo(
-    () => [styles.menuIcon, menuItemStyle.icon],
-    [menuItemStyle.icon]
-  );
-
-  const switchTrackColor = useMemo(
-    () => ({
-      false: appliedTheme.colors.switchTrackColorDisabled,
-      true: appliedTheme.colors.switchTrackColor,
-    }),
-    [
-      appliedTheme.colors.switchTrackColorDisabled,
-      appliedTheme.colors.switchTrackColor,
-    ]
-  );
-
-  const textPrimaryColor = useMemo(
-    () => appliedTheme.colors.textPrimary,
-    [appliedTheme.colors.textPrimary]
-  );
-
-  // ✅ Memoized render functions
-  const renderToggleMenuItem = useCallback(
-    (item: ToggleMenuItem) => {
-      const toggleValue = toggleStates[item.key] ?? false;
-      const thumbColor = toggleValue
-        ? appliedTheme.colors.switchThumbColor
-        : appliedTheme.colors.switchThumbColorDisabled;
-
-      return (
-        <View key={item.key} style={menuItemBaseStyle}>
-          <View style={styles.menuItemContent}>
-            {item.icon && (
-              <View style={menuIconStyle}>
-                {renderIconWithColor(item.icon, textPrimaryColor)}
-              </View>
-            )}
-            <Text numberOfLines={1} style={menuLabelStyle}>
-              {item.label}
-            </Text>
-          </View>
-          <Switch
-            trackColor={switchTrackColor}
-            thumbColor={thumbColor}
-            value={toggleValue}
-            onValueChange={(value) => handleToggleChange(item.key, value)}
-            style={styles.switchStyle}
-          />
-        </View>
-      );
-    },
-    [
-      toggleStates,
-      menuItemBaseStyle,
-      menuIconStyle,
-      menuLabelStyle,
-      textPrimaryColor,
-      switchTrackColor,
-      appliedTheme.colors.switchThumbColor,
-      appliedTheme.colors.switchThumbColorDisabled,
-      handleToggleChange,
-    ]
-  );
-
-  const handleMenuItemPress = useCallback(
-    (item: PressableMenuItem) => {
-      item.onPress?.();
-      onMenuItemPress?.(item);
-    },
-    [onMenuItemPress]
-  );
-
-  const renderPressableMenuItem = useCallback(
-    (item: PressableMenuItem) => {
-      return (
-        <TouchableOpacity
-          key={item.key}
-          activeOpacity={0.6}
-          onPress={() => handleMenuItemPress(item)}
-          style={menuItemBaseStyle}
-        >
-          {item.icon && (
-            <View style={menuIconStyle}>
-              {renderIconWithColor(item.icon, textPrimaryColor)}
-            </View>
-          )}
-          <Text numberOfLines={1} style={menuLabelStyle}>
-            {item.label}
-          </Text>
-        </TouchableOpacity>
-      );
-    },
-    [
-      menuItemBaseStyle,
-      menuIconStyle,
-      menuLabelStyle,
-      textPrimaryColor,
-      handleMenuItemPress,
-    ]
-  );
-
-  const renderMenuItemDefault = useCallback(
-    (item: MenuItem) => {
-      if (isCustomMenuItem(item)) {
-        return <React.Fragment key={item.key}>{item.render()}</React.Fragment>;
-      }
-
-      return isToggleMenuItem(item)
-        ? renderToggleMenuItem(item)
-        : renderPressableMenuItem(item);
-    },
-    [renderToggleMenuItem, renderPressableMenuItem]
-  );
-
-  // ✅ Memoize container style
-  const containerStyle = useMemo(
-    () => [
-      styles.container,
-      { backgroundColor: appliedTheme.colors.background },
-    ],
-    [appliedTheme.colors.background]
-  );
-
-  // ✅ Memoize scroll content style
-  const scrollContentStyle = useMemo(
-    () => [
-      styles.scrollContent,
-      { paddingBottom: verticalScale(100) + insets.bottom },
-    ],
-    [insets.bottom]
-  );
-
-  // ✅ Memoize version text style
-  const versionTextStyle = useMemo(
-    () => [styles.versionText, { color: appliedTheme.colors.onSurface }],
-    [appliedTheme.colors.onSurface]
-  );
-
-  // ✅ Memoize header title
-  const headerTitle = useMemo(() => title || 'Settings', [title]);
-
-  // ✅ Memoize should show header
-  const shouldShowHeader = useMemo(
-    () => !!(renderHeader || title || onBackPress),
-    [renderHeader, title, onBackPress]
-  );
-
-  return (
-    <View style={containerStyle}>
-      {shouldShowHeader &&
-        (renderHeader ? (
-          renderHeader()
-        ) : (
-          <AppHeader
-            style={headerStyle}
-            title={headerTitle}
-            titleAlign={titleAlign}
-            onBackPress={onBackPress}
-            theme={theme}
-          />
-        ))}
-      <ScrollView
-        contentContainerStyle={scrollContentStyle}
-        showsVerticalScrollIndicator={false}
-        keyboardShouldPersistTaps="handled"
-        removeClippedSubviews={true}
-      >
-        {userInfo && (
-          <UserSection
-            theme={theme}
-            userInfo={userInfo}
-            avatarComponent={avatarComponent}
-            isLoading={isLoading}
-            renderUserInfo={renderUserInfo}
-            skeletonProps={skeletonProps}
-            userInfoTextStyle={userInfoTextStyle}
-          />
-        )}
-        <View style={styles.menuList}>
-          {menuItems.map((item) =>
-            renderMenuItem ? (
-              <React.Fragment key={item.key}>
-                {renderMenuItem(item)}
-              </React.Fragment>
-            ) : (
-              renderMenuItemDefault(item)
-            )
-          )}
-        </View>
-        {renderFooter?.()}
-        <View style={styles.versionContainer}>
-          <Text style={versionTextStyle}>{versionText}</Text>
-        </View>
-      </ScrollView>
-    </View>
-  );
-};
-
-export const AppSettings = memo(AppSettingsComponent);
-
-// ✅ Styles
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  scrollContent: {
-    paddingHorizontal: scale(12),
-  },
-  menuList: {
-    marginBottom: verticalScale(16),
-  },
-  menuItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: scale(1),
-    paddingVertical: verticalScale(10),
-    paddingHorizontal: scale(12),
-    borderRadius: moderateScale(8),
-    marginBottom: verticalScale(10),
-    position: 'relative',
-  },
-  menuIcon: {
-    marginRight: scale(10),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  menuLabel: {
-    flex: 1,
-    fontSize: RFValue(12),
-    fontWeight: '500',
-  },
-  menuItemContent: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  switchStyle: {
-    transform: [{ scaleX: 1 }, { scaleY: 1 }],
-  },
-  versionContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  versionText: {
-    fontSize: RFValue(10),
-    opacity: 0.6,
-  },
-});

package/src/components/Settings/index.ts

@@ -1,6 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-export * from './AppSettings';