@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

package/src/components/Button/BackBtn.tsx

@@ -1,168 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 02 Jul 2025 at 09:30 AM
- */
-import React, { useMemo, useCallback } from 'react';
-import {
-  TouchableOpacity,
-  StyleSheet,
-  Alert,
-  Platform,
-  type ViewStyle,
-  type TextStyle,
-  type StyleProp,
-} from 'react-native';
-import { ArrowLeft } from 'lucide-react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { BlurView } from '@react-native-community/blur';
-import type { ThemeOverride } from '../../theme/themes';
-import { Text } from '../Text';
-
-type BackBtnProps = {
-  size?: number;
-  color?: string;
-  onPress?: () => void;
-  style?: StyleProp<ViewStyle>;
-  theme?: ThemeOverride;
-  enableBlur?: boolean;
-  label?: string;
-  textStyle?: StyleProp<TextStyle>;
-};
-
-const BackBtn: React.FC<BackBtnProps> = ({
-  size = scale(24),
-  color,
-  onPress,
-  style,
-  theme,
-  enableBlur = false,
-  label,
-  textStyle,
-}) => {
-  const insets = useSafeAreaInsets();
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const handlePress = useCallback(() => {
-    if (onPress) {
-      onPress();
-    } else {
-      Alert.alert(
-        'Back Action Not Provided',
-        'Please define the back action using onPress prop.'
-      );
-    }
-  }, [onPress]);
-
-  const flattenedStyle = useMemo(
-    () => StyleSheet.flatten(style) || {},
-    [style]
-  );
-
-  const hasTopInStyle = useMemo(
-    () => style && flattenedStyle.top !== undefined,
-    [style, flattenedStyle.top]
-  );
-
-  const calculatedTop = useMemo(
-    () =>
-      Platform.select({
-        ios: insets.top > 20 ? insets.top - verticalScale(5) : insets.top,
-        android: insets.top + verticalScale(5),
-        default: insets.top,
-      }),
-    [insets.top]
-  );
-
-  const hasBackground = useMemo(
-    () => !!flattenedStyle.backgroundColor,
-    [flattenedStyle.backgroundColor]
-  );
-
-  const shouldRenderBlur = useMemo(
-    () => enableBlur && hasBackground,
-    [enableBlur, hasBackground]
-  );
-
-  const hasLabel = useMemo(() => !!label, [label]);
-
-  const iconColor = useMemo(
-    () => color || appliedTheme.colors.textPrimary,
-    [color, appliedTheme.colors.textPrimary]
-  );
-
-  const containerStyle = useMemo(
-    () => [
-      styles.container,
-      hasLabel && styles.containerWithText,
-      !hasTopInStyle && { top: calculatedTop },
-      style,
-    ],
-    [hasLabel, hasTopInStyle, calculatedTop, style]
-  );
-
-  const textStyleMemo = useMemo(
-    () => [styles.text, { color: iconColor }, textStyle],
-    [iconColor, textStyle]
-  );
-
-  const blurFallbackColor = useMemo(
-    () =>
-      (typeof flattenedStyle.backgroundColor === 'string'
-        ? flattenedStyle.backgroundColor
-        : undefined) || String(appliedTheme.colors.backdrop),
-    [flattenedStyle.backgroundColor, appliedTheme.colors.backdrop]
-  );
-
-  return (
-    <TouchableOpacity
-      activeOpacity={0.8}
-      style={containerStyle}
-      onPress={handlePress}
-    >
-      {shouldRenderBlur && (
-        <BlurView
-          style={StyleSheet.absoluteFill}
-          blurType="light"
-          blurAmount={10}
-          reducedTransparencyFallbackColor={blurFallbackColor}
-        />
-      )}
-
-      <ArrowLeft size={size} color={iconColor} />
-      {hasLabel && (
-        <Text style={textStyleMemo} color={iconColor}>
-          {label}
-        </Text>
-      )}
-    </TouchableOpacity>
-  );
-};
-
-export default React.memo(BackBtn);
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    left: scale(13),
-    padding: scale(6),
-    borderRadius: scale(100),
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-  },
-  containerWithText: {
-    flexDirection: 'row',
-    borderRadius: scale(20),
-    paddingHorizontal: scale(12),
-  },
-  text: {
-    fontSize: scale(14),
-    fontWeight: '600',
-    marginLeft: scale(8),
-    textShadowColor: 'rgba(0, 0, 0, 0.75)',
-    textShadowOffset: { width: 0, height: 1 },
-    textShadowRadius: 3,
-  },
-});

package/src/components/Button/MenuBtn.tsx

@@ -1,229 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 02 Jul 2025 at 12:35 PM
- */
-
-import React, { useState, useMemo, useCallback, useRef } from 'react';
-import {
-  TouchableOpacity,
-  View,
-  StyleSheet,
-  Modal,
-  Pressable,
-  Text,
-  Platform,
-  findNodeHandle,
-  UIManager,
-  StatusBar,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
-import { Ellipsis } from 'lucide-react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { BlurView } from '@react-native-community/blur';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import { scale, verticalScale } from 'react-native-size-matters';
-import type { ThemeOverride } from '../../theme/themes';
-import type { MenuAction } from '../../types/content/content-view.types';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-type MenuBtnProps = {
-  actions: MenuAction[];
-  theme?: ThemeOverride;
-  style?: StyleProp<ViewStyle>;
-  enableBlur?: boolean;
-};
-
-const MenuBtn: React.FC<MenuBtnProps> = ({
-  actions,
-  theme,
-  style,
-  enableBlur = false,
-}) => {
-  const insets = useSafeAreaInsets();
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  const [visible, setVisible] = useState(false);
-  const [menuPosition, setMenuPosition] = useState<{
-    top: number;
-    right: number;
-  }>({ top: 0, right: scale(13) });
-
-  const btnRef = useRef(null);
-
-  const flattenedStyle = useMemo(
-    () => StyleSheet.flatten(style) || {},
-    [style]
-  );
-  const shouldRenderBlur = useMemo(
-    () => enableBlur && !!flattenedStyle.backgroundColor,
-    [enableBlur, flattenedStyle.backgroundColor]
-  );
-
-  const openMenu = useCallback(() => {
-    const handle = findNodeHandle(btnRef.current);
-    if (handle) {
-      UIManager.measureInWindow(handle, (_x, y, _w, _h) => {
-        const extraOffset =
-          Platform.OS === 'android'
-            ? (StatusBar.currentHeight ?? 0) - verticalScale(2)
-            : 0;
-        setMenuPosition({
-          top: y + verticalScale(32) + extraOffset,
-          right: scale(13),
-        });
-        setVisible(true);
-      });
-    } else {
-      setVisible(true);
-    }
-  }, []);
-
-  const closeMenu = useCallback(() => setVisible(false), []);
-  const memoizedActions = useMemo(() => actions, [actions]);
-
-  return (
-    <>
-      <TouchableOpacity
-        ref={btnRef}
-        activeOpacity={0.7}
-        style={[
-          styles.container,
-          { top: insets.top + verticalScale(5) },
-          style,
-        ]}
-        onPress={openMenu}
-      >
-        {shouldRenderBlur && Platform.OS === 'ios' ? (
-          <BlurView
-            style={StyleSheet.absoluteFill}
-            blurType="light"
-            blurAmount={10}
-            reducedTransparencyFallbackColor={String(
-              flattenedStyle.backgroundColor || appliedTheme.colors.backdrop
-            )}
-          />
-        ) : (
-          <View
-            style={[
-              StyleSheet.absoluteFill,
-              {
-                backgroundColor:
-                  flattenedStyle.backgroundColor ||
-                  appliedTheme.colors.backdrop,
-              },
-            ]}
-          />
-        )}
-        <Ellipsis size={scale(20)} color={appliedTheme.colors.textPrimary} />
-      </TouchableOpacity>
-
-      <Modal
-        transparent
-        visible={visible}
-        animationType="fade"
-        onRequestClose={closeMenu}
-        hardwareAccelerated
-        presentationStyle="overFullScreen"
-        statusBarTranslucent
-      >
-        <Pressable style={styles.modalRoot} onPress={closeMenu}>
-          <Pressable
-            onPress={() => {}}
-            style={[
-              styles.menuBox,
-              {
-                position: 'absolute',
-                top: menuPosition.top,
-                right: menuPosition.right,
-                backgroundColor: appliedTheme.colors.surface,
-              },
-            ]}
-          >
-            {memoizedActions.map((action, index) => (
-              <Pressable
-                key={`${action.label}-${index}`}
-                onPress={() => {
-                  closeMenu();
-                  try {
-                    action.onPress();
-                  } catch (error) {
-                    console.error('Action failed:', error);
-                  }
-                }}
-                disabled={action.isLoading || false}
-                style={({ pressed }) => [
-                  styles.menuItem,
-                  {
-                    backgroundColor: pressed
-                      ? appliedTheme.colors.surfaceVariant
-                      : 'transparent',
-                  },
-                ]}
-              >
-                {action?.icon && (
-                  <View style={styles.iconBox}>
-                    <action.icon
-                      size={scale(18)}
-                      color={appliedTheme.colors.textPrimary}
-                    />
-                  </View>
-                )}
-                <Text
-                  style={[
-                    styles.label,
-                    { color: appliedTheme.colors.textPrimary },
-                  ]}
-                >
-                  {action.label}
-                </Text>
-              </Pressable>
-            ))}
-          </Pressable>
-        </Pressable>
-      </Modal>
-    </>
-  );
-};
-
-export default React.memo(MenuBtn);
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    right: scale(13),
-    padding: scale(6),
-    borderRadius: scale(100),
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-    zIndex: 4,
-  },
-  modalRoot: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0,0,0,0.2)',
-  },
-  menuBox: {
-    borderRadius: scale(6),
-    elevation: 5,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.15,
-    shadowRadius: 4,
-    minWidth: scale(150),
-    paddingVertical: verticalScale(2),
-  },
-  menuItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: verticalScale(8),
-    paddingHorizontal: scale(10),
-    borderRadius: scale(5),
-  },
-  iconBox: {
-    marginRight: scale(8),
-  },
-  label: {
-    fontSize: RFValue(12),
-    includeFontPadding: false,
-  },
-});

package/src/components/Button/PrimaryBtn.tsx

@@ -1,126 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 17 Jun 2025 at 10:45 AM
- */
-
-import React, { useMemo } from 'react';
-import { useSafePressHandler } from '../../hooks/useSafeCallback';
-import {
-  TouchableOpacity,
-  ActivityIndicator,
-  StyleSheet,
-  View,
-  type GestureResponderEvent,
-  type ViewStyle,
-  type TextStyle,
-} from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import { Text } from '../Text';
-import type { ThemeOverride } from '../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-type PrimaryBtnProps = {
-  title: string;
-  onPress?: (event: GestureResponderEvent) => void;
-  loading?: boolean;
-  loadingText?: string;
-  disabled?: boolean;
-  containerStyle?: ViewStyle;
-  titleStyle?: TextStyle;
-  theme?: ThemeOverride;
-};
-
-export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
-  title,
-  onPress,
-  loading = false,
-  loadingText = 'Loading...',
-  disabled = false,
-  containerStyle,
-  titleStyle,
-  theme,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const backgroundColor = useMemo(
-    () =>
-      disabled || loading
-        ? appliedTheme.colors?.buttonDisabled
-        : appliedTheme.colors?.button,
-    [
-      disabled,
-      loading,
-      appliedTheme.colors?.buttonDisabled,
-      appliedTheme.colors?.button,
-    ]
-  );
-
-  const buttonStyle = useMemo(
-    () => [styles.button, { backgroundColor }, containerStyle],
-    [backgroundColor, containerStyle]
-  );
-
-  const textStyle = useMemo(
-    () => [styles.text, { color: appliedTheme.colors.buttonText }, titleStyle],
-    [appliedTheme.colors.buttonText, titleStyle]
-  );
-
-  const loadingTextStyle = useMemo(
-    () => [
-      styles.text,
-      { color: appliedTheme.colors.buttonText, opacity: 0.75 },
-      titleStyle,
-    ],
-    [appliedTheme.colors.buttonText, titleStyle]
-  );
-
-  const handlePress = useSafePressHandler(onPress, disabled || loading);
-
-  return (
-    <TouchableOpacity
-      onPress={handlePress}
-      disabled={disabled || loading}
-      activeOpacity={0.8}
-      style={buttonStyle}
-      accessibilityRole="button"
-      accessibilityState={{ disabled: disabled || loading }}
-    >
-      {loading ? (
-        <View style={styles.row}>
-          <ActivityIndicator
-            color={appliedTheme.colors.buttonText}
-            style={{ marginRight: scale(8) }}
-          />
-          <Text style={loadingTextStyle}>{loadingText}</Text>
-        </View>
-      ) : (
-        <Text style={textStyle}>{title}</Text>
-      )}
-    </TouchableOpacity>
-  );
-};
-
-export default React.memo(PrimaryBtn);
-
-const styles = StyleSheet.create({
-  button: {
-    width: '100%',
-    alignSelf: 'stretch',
-    paddingVertical: verticalScale(12),
-    paddingHorizontal: scale(16),
-    borderRadius: scale(6),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    textAlign: 'center',
-    fontSize: RFValue(13),
-    fontWeight: '600',
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

package/src/components/Button/SecondaryBtn.tsx

@@ -1,132 +0,0 @@
-/**
- * @author Ashok Desai
- * @lastModified Mon 06 Oct 2025 at 03:45 PM
- */
-
-import React, { useMemo } from 'react';
-import { useSafePressHandler } from '../../hooks/useSafeCallback';
-import {
-  TouchableOpacity,
-  ActivityIndicator,
-  StyleSheet,
-  View,
-  type GestureResponderEvent,
-  type ViewStyle,
-  type TextStyle,
-} from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import { Text } from '../Text';
-import type { ThemeOverride } from '../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-type SecondaryBtnProps = {
-  title: string;
-  onPress?: (event: GestureResponderEvent) => void;
-  loading?: boolean;
-  loadingText?: string;
-  disabled?: boolean;
-  containerStyle?: ViewStyle;
-  titleStyle?: TextStyle;
-  theme?: ThemeOverride;
-  leftIcon?: React.ReactNode;
-};
-
-export const SecondaryBtn: React.FC<SecondaryBtnProps> = ({
-  title,
-  onPress,
-  loading = false,
-  loadingText = 'Loading...',
-  disabled = false,
-  containerStyle,
-  titleStyle,
-  leftIcon,
-  theme,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const backgroundColor = useMemo(
-    () =>
-      disabled || loading
-        ? appliedTheme.colors?.buttonDisabled
-        : appliedTheme.colors?.button,
-    [
-      disabled,
-      loading,
-      appliedTheme.colors?.buttonDisabled,
-      appliedTheme.colors?.button,
-    ]
-  );
-
-  const buttonStyle = useMemo(
-    () => [styles.button, { backgroundColor }, containerStyle],
-    [backgroundColor, containerStyle]
-  );
-
-  const textStyle = useMemo(
-    () => [styles.text, { color: appliedTheme.colors.buttonText }, titleStyle],
-    [appliedTheme.colors.buttonText, titleStyle]
-  );
-
-  const loadingTextStyle = useMemo(
-    () => [
-      styles.text,
-      { color: appliedTheme.colors.buttonText, opacity: 0.75 },
-      titleStyle,
-    ],
-    [appliedTheme.colors.buttonText, titleStyle]
-  );
-
-  const handlePress = useSafePressHandler(onPress, disabled || loading);
-
-  return (
-    <TouchableOpacity
-      onPress={handlePress}
-      disabled={disabled || loading}
-      activeOpacity={0.8}
-      style={buttonStyle}
-      accessibilityRole="button"
-      accessibilityState={{ disabled: disabled || loading }}
-    >
-      <View style={styles.row}>
-        {leftIcon && <View style={{ marginRight: scale(8) }}>{leftIcon}</View>}
-
-        {loading ? (
-          <>
-            <ActivityIndicator
-              color={appliedTheme.colors.buttonText}
-              style={{ marginRight: scale(6) }}
-            />
-            <Text style={loadingTextStyle}>{loadingText}</Text>
-          </>
-        ) : (
-          <Text style={textStyle}>{title}</Text>
-        )}
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-export default React.memo(SecondaryBtn);
-
-const styles = StyleSheet.create({
-  button: {
-    width: '100%',
-    alignSelf: 'stretch',
-    paddingVertical: verticalScale(12),
-    paddingHorizontal: scale(16),
-    borderRadius: scale(6),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    textAlign: 'center',
-    fontSize: RFValue(13),
-    fontWeight: '600',
-  },
-});