react-native-mantine 0.1.15 → 0.3.0

package/src/components/Menu/index.tsx

@@ -0,0 +1,395 @@
+import React, { forwardRef, useState, useRef } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  Animated,
+} from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import { Divider } from '../Divider';
+import { Portal } from '../Portal';
+import type {
+  DefaultProps,
+  MantineColor,
+  MantineNumberSize,
+} from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+
+export interface MenuProps extends DefaultProps {
+  /** Controlled opened state */
+  opened?: boolean;
+
+  /** Called when menu state changes */
+  onChange?: (opened: boolean) => void;
+
+  /** Menu position */
+  position?:
+    | 'bottom'
+    | 'top'
+    | 'left'
+    | 'right'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'top-start'
+    | 'top-end';
+
+  /** Menu width */
+  width?: number | 'target';
+
+  /** Close menu on item click */
+  closeOnItemClick?: boolean;
+
+  /** Close menu on click outside */
+  closeOnClickOutside?: boolean;
+
+  /** Menu shadow */
+  shadow?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** Border radius */
+  radius?: MantineNumberSize;
+
+  /** Z-index */
+  zIndex?: number;
+
+  /** Menu children */
+  children: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+export interface MenuTargetProps {
+  children: React.ReactElement;
+}
+
+export interface MenuDropdownProps extends DefaultProps {
+  children: React.ReactNode;
+  style?: any;
+}
+
+export interface MenuItemProps extends DefaultProps {
+  /** Item icon */
+  icon?: React.ReactNode;
+
+  /** Item color from theme */
+  color?: MantineColor;
+
+  /** Item content */
+  children: React.ReactNode;
+
+  /** Called when item is pressed */
+  onPress?: () => void;
+
+  /** Disabled state */
+  disabled?: boolean;
+
+  /** Right section */
+  rightSection?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+export interface MenuLabelProps extends DefaultProps {
+  children: React.ReactNode;
+  style?: any;
+}
+
+export interface MenuDividerProps extends DefaultProps {
+  style?: any;
+}
+
+// TODO: Implement Menu component styling
+/* Placeholder for future Menu dropdown implementation
+const useMenuStyles = createStyles(
+  (theme, { radius, shadow }: { radius: MantineNumberSize; shadow: string }) => ({
+    dropdown: {
+      // Menu dropdown styles will be implemented here
+    },
+  })
+);
+*/
+
+const useItemStyles = createStyles(
+  (
+    theme,
+    { color, disabled }: { color: MantineColor; disabled: boolean }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+
+    return {
+      item: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 10,
+        paddingHorizontal: theme.spacing.md,
+        opacity: disabled ? 0.4 : 1,
+      },
+      itemHovered: {
+        backgroundColor:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[5]
+            : (theme.colors.gray || [])[0],
+      },
+      icon: {
+        marginRight: theme.spacing.sm,
+        color: color
+          ? colors?.[6] || colors?.[5]
+          : theme.colorScheme === 'dark'
+          ? (theme.colors.dark || [])[0]
+          : (theme.colors.gray || [])[7],
+      },
+      label: {
+        flex: 1,
+        fontSize: 14,
+        color: color
+          ? colors?.[6] || colors?.[5]
+          : theme.colorScheme === 'dark'
+          ? (theme.colors.dark || [])[0]
+          : theme.black,
+      },
+      rightSection: {
+        marginLeft: theme.spacing.sm,
+      },
+    };
+  }
+);
+
+const useLabelStyles = createStyles((theme) => ({
+  label: {
+    paddingVertical: 6,
+    paddingHorizontal: theme.spacing.md,
+    fontSize: 12,
+    fontWeight: '600',
+    color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[2] : (theme.colors.gray || [])[6],
+    textTransform: 'uppercase',
+  },
+}));
+
+interface MenuContextValue {
+  opened: boolean;
+  setOpened: (opened: boolean) => void;
+  closeOnItemClick: boolean;
+  targetRef: React.RefObject<View>;
+  dropdownPosition: { top: number; left: number; width: number };
+  setDropdownPosition: (pos: { top: number; left: number; width: number }) => void;
+}
+
+const MenuContext = React.createContext<MenuContextValue | null>(null);
+
+const useMenuContext = () => {
+  const ctx = React.useContext(MenuContext);
+  if (!ctx) {
+    throw new Error('Menu components must be used within Menu');
+  }
+  return ctx;
+};
+
+const defaultMenuProps: Partial<MenuProps> = {
+  position: 'bottom-start',
+  width: 200,
+  closeOnItemClick: true,
+  closeOnClickOutside: true,
+  shadow: 'md',
+  radius: 'sm',
+  zIndex: 1000,
+};
+
+const defaultItemProps: Partial<MenuItemProps> = {
+  disabled: false,
+};
+
+const MenuTarget: React.FC<MenuTargetProps> = ({ children }) => {
+  const { setOpened, targetRef, setDropdownPosition } = useMenuContext();
+
+  const handlePress = () => {
+    if (targetRef.current) {
+      targetRef.current.measureInWindow((x, y, width, height) => {
+        setDropdownPosition({
+          top: y + height + 4,
+          left: x,
+          width,
+        });
+      });
+    }
+    setOpened(true);
+  };
+
+  return React.cloneElement(children, {
+    ref: targetRef,
+    onPress: handlePress,
+  });
+};
+
+const MenuDropdown: React.FC<MenuDropdownProps> = ({ children, style, ...others }) => {
+  const { opened, setOpened, dropdownPosition } = useMenuContext();
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    if (opened) {
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 150,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [opened, opacity]);
+
+  if (!opened) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={() => setOpened(false)}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      >
+        <Animated.View
+          style={[
+            {
+              position: 'absolute',
+              top: dropdownPosition.top,
+              left: dropdownPosition.left,
+              opacity,
+            },
+            style,
+          ]}
+          {...others}
+        >
+          {children}
+        </Animated.View>
+      </TouchableOpacity>
+    </Portal>
+  );
+};
+
+const MenuItem = forwardRef<any, MenuItemProps>((props, ref) => {
+  const { icon, color, children, onPress, disabled, rightSection, style, ...others } =
+    useComponentDefaultProps('MenuItem', defaultItemProps, props);
+
+  const { setOpened, closeOnItemClick } = useMenuContext();
+  const [isPressed, setIsPressed] = React.useState(false);
+
+  const { styles, sx } = useItemStyles(
+    { color, disabled },
+    { name: 'MenuItem' }
+  ) as any;
+
+  const handlePress = () => {
+    if (disabled) return;
+    onPress?.();
+    if (closeOnItemClick) {
+      setOpened(false);
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      ref={ref}
+      onPress={handlePress}
+      onPressIn={() => setIsPressed(true)}
+      onPressOut={() => setIsPressed(false)}
+      disabled={disabled}
+      activeOpacity={0.7}
+      style={sx(styles.item, isPressed && styles.itemHovered, style)}
+      {...others}
+    >
+      {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
+      <Text style={styles.label}>{children}</Text>
+      {rightSection && <BoxView style={styles.rightSection}>{rightSection}</BoxView>}
+    </TouchableOpacity>
+  );
+});
+
+const MenuLabel = forwardRef<any, MenuLabelProps>((props, ref) => {
+  const { children, style, ...others } = props;
+  const { styles, sx } = useLabelStyles({}, { name: 'MenuLabel' }) as any;
+
+  return (
+    <BoxView ref={ref} style={sx(styles.label, style)} {...others}>
+      <Text style={styles.label}>{children}</Text>
+    </BoxView>
+  );
+});
+
+const MenuDivider = forwardRef<any, MenuDividerProps>((props, ref) => {
+  const { style, ...others } = props;
+  return <Divider ref={ref} style={style} {...others} />;
+});
+
+export const Menu = Object.assign(
+  forwardRef<any, MenuProps>((props, ref) => {
+    const {
+      opened: controlledOpened,
+      onChange,
+      position,
+      width,
+      closeOnItemClick,
+      closeOnClickOutside,
+      shadow,
+      radius,
+      zIndex,
+      children,
+      style,
+      ...others
+    } = useComponentDefaultProps('Menu', defaultMenuProps, props);
+
+    const [opened, setOpened] = useState(false);
+    const [dropdownPosition, setDropdownPosition] = useState({
+      top: 0,
+      left: 0,
+      width: 0,
+    });
+    const targetRef = useRef<View>(null);
+
+    const isControlled = controlledOpened !== undefined;
+    const isOpened = isControlled ? controlledOpened : opened;
+
+    const handleSetOpened = (value: boolean) => {
+      if (!isControlled) {
+        setOpened(value);
+      }
+      onChange?.(value);
+    };
+
+    const contextValue: MenuContextValue = {
+      opened: isOpened,
+      setOpened: handleSetOpened,
+      closeOnItemClick: closeOnItemClick ?? true,
+      targetRef,
+      dropdownPosition,
+      setDropdownPosition,
+    };
+
+    return (
+      <MenuContext.Provider value={contextValue}>
+        <BoxView ref={ref} {...others}>
+          {children}
+        </BoxView>
+      </MenuContext.Provider>
+    );
+  }),
+  {
+    Target: MenuTarget,
+    Dropdown: MenuDropdown,
+    Item: MenuItem,
+    Label: MenuLabel,
+    Divider: MenuDivider,
+  }
+);
+
+Menu.displayName = 'Menu';
+MenuTarget.displayName = 'Menu.Target';
+MenuDropdown.displayName = 'Menu.Dropdown';
+MenuItem.displayName = 'Menu.Item';
+MenuLabel.displayName = 'Menu.Label';
+MenuDivider.displayName = 'Menu.Divider';

package/src/components/Modal/index.tsx

@@ -0,0 +1,318 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+import {
+  Modal as RNModal,
+  TouchableOpacity,
+  Animated,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+} from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import { Overlay } from '../Overlay';
+import type { DefaultProps, MantineNumberSize, SpacingValue } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface ModalProps extends DefaultProps {
+  /** Modal opened state */
+  opened: boolean;
+
+  /** Called when modal is closed */
+  onClose: () => void;
+
+  /** Modal title */
+  title?: React.ReactNode;
+
+  /** Modal content */
+  children?: React.ReactNode;
+
+  /** Modal size */
+  size?: MantineNumberSize | 'full';
+
+  /** Modal padding */
+  padding?: SpacingValue;
+
+  /** Modal border radius */
+  radius?: MantineNumberSize;
+
+  /** If true, modal cannot be closed by clicking outside or pressing escape */
+  closeOnClickOutside?: boolean;
+
+  /** If true, modal will be centered on screen */
+  centered?: boolean;
+
+  /** If true, modal will show overlay */
+  withOverlay?: boolean;
+
+  /** Overlay opacity */
+  overlayOpacity?: number;
+
+  /** Overlay color */
+  overlayColor?: string;
+
+  /** If true, close button will be shown */
+  withCloseButton?: boolean;
+
+  /** If true, modal will take full screen */
+  fullScreen?: boolean;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Animation duration in ms */
+  transitionDuration?: number;
+
+  /** Z-index */
+  zIndex?: number;
+}
+
+const sizes = {
+  xs: 320,
+  sm: 380,
+  md: 440,
+  lg: 620,
+  xl: 780,
+  full: '100%',
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      size,
+      padding,
+      radius,
+      centered,
+      fullScreen,
+    }: {
+      size: MantineNumberSize | 'full';
+      padding: SpacingValue;
+      radius: MantineNumberSize;
+      centered: boolean;
+      fullScreen: boolean;
+    }
+  ) => {
+    const getPadding = () => {
+      if (padding === undefined) return theme.spacing.md;
+      if (typeof padding === 'number') return rem(padding);
+      return theme.spacing[padding] || theme.spacing.md;
+    };
+
+    const getWidth = () => {
+      if (fullScreen) return '100%';
+      if (size === 'full') return '100%';
+      if (typeof size === 'number') return rem(size);
+      return rem(sizes[size as keyof typeof sizes] || sizes.md);
+    };
+
+    return {
+      overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.001)',
+        justifyContent: centered ? 'center' : 'flex-start',
+        alignItems: 'center',
+        paddingTop: (centered ? 0 : rem(60)) as any,
+      },
+      container: {
+        backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[7] : theme.white,
+        borderRadius: fullScreen ? 0 : theme.fn.radius(radius),
+        width: getWidth() as any,
+        maxWidth: fullScreen ? '100%' : '90%',
+        maxHeight: fullScreen ? '100%' : '90%',
+        ...(fullScreen && {
+          height: '100%',
+        }),
+      },
+      header: {
+        padding: getPadding(),
+        borderBottomWidth: 1,
+        borderBottomColor:
+          theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : (theme.colors.gray || [])[2],
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      },
+      title: {
+        fontSize: theme.fontSizes.lg as number,
+        fontWeight: '600',
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+        flex: 1,
+      },
+      closeButton: {
+        width: rem(32) as any,
+        height: rem(32) as any,
+        borderRadius: rem(16) as any,
+        backgroundColor:
+          theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : (theme.colors.gray || [])[1],
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginLeft: theme.spacing.md,
+      },
+      closeButtonText: {
+        fontSize: rem(20) as any,
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+      },
+      body: {
+        padding: getPadding(),
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<ModalProps> = {
+  size: 'md',
+  padding: 'md',
+  radius: 'md',
+  closeOnClickOutside: true,
+  centered: false,
+  withOverlay: true,
+  overlayOpacity: 0.6,
+  overlayColor: '#000',
+  withCloseButton: true,
+  fullScreen: false,
+  transitionDuration: 200,
+  zIndex: 1000,
+};
+
+export const Modal = forwardRef<any, ModalProps>((props, ref) => {
+  const {
+    opened,
+    onClose,
+    title,
+    children,
+    size,
+    padding,
+    radius,
+    closeOnClickOutside,
+    centered,
+    withOverlay,
+    overlayOpacity,
+    overlayColor,
+    withCloseButton,
+    fullScreen,
+    style,
+    transitionDuration,
+    zIndex,
+    ...others
+  } = useComponentDefaultProps('Modal', defaultProps, props);
+
+  const { styles, sx } = useStyles(
+    { size, padding, radius, centered, fullScreen },
+    { name: 'Modal' }
+  ) as any;
+
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useRef(new Animated.Value(0.9)).current;
+
+  useEffect(() => {
+    if (opened) {
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: transitionDuration,
+          useNativeDriver: true,
+        }),
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          friction: 8,
+        }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 0,
+          duration: transitionDuration,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleAnim, {
+          toValue: 0.9,
+          duration: transitionDuration,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [opened, fadeAnim, scaleAnim, transitionDuration]);
+
+  const handleOverlayPress = () => {
+    if (closeOnClickOutside) {
+      onClose();
+    }
+  };
+
+  return (
+    <RNModal
+      visible={opened}
+      transparent
+      animationType="none"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={{ flex: 1 }}
+      >
+        {withOverlay && (
+          <Animated.View
+            style={[
+              {
+                ...styles.overlay,
+                opacity: fadeAnim,
+              },
+            ]}
+          >
+            <Overlay
+              opacity={overlayOpacity}
+              color={overlayColor}
+              onPress={handleOverlayPress}
+              style={{ position: 'absolute' }}
+            />
+          </Animated.View>
+        )}
+
+        <TouchableOpacity
+          activeOpacity={1}
+          style={styles.overlay}
+          onPress={handleOverlayPress}
+        >
+          <TouchableOpacity activeOpacity={1} onPress={(e) => e.stopPropagation()}>
+            <Animated.View
+              ref={ref}
+              style={[
+                sx(styles.container, style),
+                {
+                  opacity: fadeAnim,
+                  transform: [{ scale: scaleAnim }],
+                },
+              ]}
+              {...others}
+            >
+              {(title || withCloseButton) && (
+                <BoxView style={styles.header}>
+                  {typeof title === 'string' ? (
+                    <Text style={styles.title}>{title}</Text>
+                  ) : (
+                    title
+                  )}
+                  {withCloseButton && (
+                    <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+                      <Text style={styles.closeButtonText}>×</Text>
+                    </TouchableOpacity>
+                  )}
+                </BoxView>
+              )}
+
+              <ScrollView style={styles.body} showsVerticalScrollIndicator={false}>
+                {children}
+              </ScrollView>
+            </Animated.View>
+          </TouchableOpacity>
+        </TouchableOpacity>
+      </KeyboardAvoidingView>
+    </RNModal>
+  );
+});
+
+Modal.displayName = 'Modal';