@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

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,134 +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;
-  leftIcon?: React.ReactNode;
-};
-
-export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
-  title,
-  onPress,
-  loading = false,
-  loadingText = 'Loading...',
-  disabled = false,
-  containerStyle,
-  titleStyle,
-  theme,
-  leftIcon,
-}) => {
-  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>
-      ) : (
-        <View style={styles.row}>
-          {leftIcon && (
-            <View style={{ marginRight: scale(8) }}>{leftIcon}</View>
-          )}
-          <Text style={textStyle}>{title}</Text>
-        </View>
-      )}
-    </TouchableOpacity>
-  );
-};
-
-export default React.memo(PrimaryBtn);
-
-const styles = StyleSheet.create({
-  button: {
-    alignSelf: 'stretch',
-    paddingVertical: verticalScale(12),
-    paddingHorizontal: scale(16),
-    borderRadius: scale(6),
-    alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: verticalScale(44),
-    flexShrink: 1,
-  },
-  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',
-  },
-});

package/src/components/Button/TextButton.tsx

@@ -1,145 +0,0 @@
-import React, { useMemo } from 'react';
-import { useSafePressHandler } from '../../hooks/useSafeCallback';
-import {
-  StyleSheet,
-  Pressable,
-  View,
-  type GestureResponderEvent,
-  type TextStyle,
-  type ViewStyle,
-} from 'react-native';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Text } from '../Text';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-type TextButtonProps = {
-  title: string;
-  onPress: (event: GestureResponderEvent) => void;
-  color?: string;
-  style?: TextStyle;
-  containerStyle?: ViewStyle;
-  disabled?: boolean;
-  underline?: boolean;
-  bold?: boolean;
-  align?: 'left' | 'center' | 'right';
-  leftIcon?: React.ReactNode;
-};
-
-const TextButton: React.FC<TextButtonProps> = ({
-  title,
-  onPress,
-  color,
-  style,
-  containerStyle,
-  disabled = false,
-  underline = false,
-  bold = false,
-  align = 'center',
-  leftIcon,
-}) => {
-  const { theme } = useInternalTheme();
-
-  const alignSelfMap = useMemo<
-    Record<'left' | 'center' | 'right', ViewStyle['alignSelf']>
-  >(
-    () => ({
-      left: 'flex-start',
-      center: 'center',
-      right: 'flex-end',
-    }),
-    []
-  );
-
-  const alignSelf = useMemo(() => alignSelfMap[align], [alignSelfMap, align]);
-
-  const textStyle = useMemo<TextStyle>(
-    () => ({
-      textAlign: align,
-      textDecorationLine: underline ? 'underline' : 'none',
-      fontWeight: bold ? '700' : '400',
-    }),
-    [align, underline, bold]
-  );
-
-  const textColor = useMemo(
-    () => color || theme.colors.textPrimary,
-    [color, theme.colors.textPrimary]
-  );
-
-  const justifyContent = useMemo<ViewStyle['justifyContent']>(
-    () =>
-      align === 'left'
-        ? 'flex-start'
-        : align === 'right'
-          ? 'flex-end'
-          : 'center',
-    [align]
-  );
-
-  const rowStyle = useMemo<ViewStyle[]>(
-    () => [styles.row, { justifyContent }],
-    [justifyContent]
-  );
-
-  const finalTextStyle = useMemo(
-    () => [styles.text, textStyle, style],
-    [textStyle, style]
-  );
-
-  const handlePress = useSafePressHandler(onPress, disabled);
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      disabled={disabled}
-      accessibilityRole="button"
-      accessibilityState={{ disabled }}
-      style={({ pressed }) => [
-        styles.defaultContainer,
-        { alignSelf },
-        containerStyle,
-        pressed && styles.pressed,
-        disabled && styles.disabled,
-      ]}
-    >
-      <View style={rowStyle}>
-        {leftIcon && <View style={styles.iconSpacing}>{leftIcon}</View>}
-        <Text
-          color={textColor}
-          style={finalTextStyle}
-          size={12}
-          numberOfLines={1}
-          allowFontScaling={false}
-        >
-          {title}
-        </Text>
-      </View>
-    </Pressable>
-  );
-};
-
-export default React.memo(TextButton);
-
-const styles = StyleSheet.create({
-  defaultContainer: {
-    paddingVertical: verticalScale(4),
-    paddingHorizontal: scale(6),
-  },
-  text: {
-    fontSize: RFValue(10),
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  iconSpacing: {
-    marginRight: scale(1),
-  },
-  pressed: {
-    opacity: 0.6,
-  },
-  disabled: {
-    opacity: 0.4,
-  },
-});

package/src/components/Button/index.ts

@@ -1,18 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 13 Jun 2025 at 12:26 PM
- */
-
-import BackBtn from './BackBtn';
-import { PrimaryBtn } from './PrimaryBtn';
-import { SecondaryBtn } from './SecondaryBtn';
-import TextButton from './TextButton';
-
-const Button = {
-  Primary: PrimaryBtn,
-  Secondary: SecondaryBtn,
-  BackBtn,
-  TextButton,
-};
-
-export { Button };