react-native-mantine 0.1.15 → 0.3.0

package/src/components/PinInput/index.tsx

@@ -0,0 +1,251 @@
+import { forwardRef, useRef, useState } from 'react';
+import { TextInput } from 'react-native';
+import { BoxView } from '../BoxView';
+import type { DefaultProps, MantineNumberSize, MantineSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles, getSize } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+
+export interface PinInputProps extends DefaultProps {
+  /** Number of inputs */
+  length?: number;
+
+  /** Input size */
+  size?: MantineSize;
+
+  /** Border radius */
+  radius?: MantineNumberSize;
+
+  /** If true, input type will be password */
+  mask?: boolean;
+
+  /** If true, only numbers are allowed */
+  type?: 'number' | 'alphanumeric';
+
+  /** Current value */
+  value?: string;
+
+  /** Default value */
+  defaultValue?: string;
+
+  /** Called when value changes */
+  onChange?: (value: string) => void;
+
+  /** Called when all inputs are filled */
+  onComplete?: (value: string) => void;
+
+  /** If true, input will be disabled */
+  disabled?: boolean;
+
+  /** If true, input will show error state */
+  error?: boolean;
+
+  /** Spacing between inputs */
+  spacing?: MantineSize;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Input style */
+  inputStyle?: any;
+}
+
+const sizes = {
+  xs: rem(32),
+  sm: rem(40),
+  md: rem(48),
+  lg: rem(56),
+  xl: rem(64),
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      size,
+      radius,
+      error,
+      disabled,
+      spacing,
+    }: {
+      size: MantineSize;
+      radius: MantineNumberSize;
+      error: boolean;
+      disabled: boolean;
+      spacing: MantineSize;
+    }
+  ) => {
+    const getSpacing = () => {
+      return theme.spacing[spacing] || theme.spacing.sm;
+    };
+
+    return {
+      root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: getSpacing() as any,
+      },
+      input: {
+        width: (sizes[size as keyof typeof sizes] || sizes.md) as any,
+        height: (sizes[size as keyof typeof sizes] || sizes.md) as any,
+        borderRadius: theme.fn.radius(radius),
+        borderWidth: 1,
+        borderColor: error
+          ? (theme.colors.red || [])[6]
+          : theme.colorScheme === 'dark'
+          ? (theme.colors.dark || [])[4]
+          : (theme.colors.gray || [])[4],
+        backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[6] : theme.white,
+        fontSize: getSize({ size, sizes: theme.fontSizes }) as any,
+        textAlign: 'center',
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+        ...(disabled && {
+          opacity: 0.6,
+        }),
+      },
+      inputFocused: {
+        borderColor: theme.colors[theme.primaryColor]?.[6] || theme.primaryBgColor,
+        borderWidth: 2,
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<PinInputProps> = {
+  length: 4,
+  size: 'sm',
+  radius: 'sm',
+  mask: false,
+  type: 'number',
+  disabled: false,
+  error: false,
+  spacing: 'sm',
+};
+
+export const PinInput = forwardRef<any, PinInputProps>((props, ref) => {
+  const {
+    length,
+    size,
+    radius,
+    mask,
+    type,
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    onComplete,
+    disabled,
+    error,
+    spacing,
+    style,
+    inputStyle,
+    ...others
+  } = useComponentDefaultProps('PinInput', defaultProps, props);
+
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || '');
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+
+  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+  const inputRefs = useRef<(TextInput | null)[]>([]);
+
+  const { styles, sx } = useStyles(
+    { size, radius, error, disabled, spacing },
+    { name: 'PinInput' }
+  ) as any;
+
+  const handleChange = (text: string, index: number) => {
+    if (disabled) return;
+
+    // Validate input based on type
+    const isValid =
+      type === 'number' ? /^\d*$/.test(text) : /^[a-zA-Z0-9]*$/.test(text);
+
+    if (!isValid) return;
+
+    // Handle paste
+    if (text.length > 1) {
+      const pastedText = text.slice(0, length!);
+      const newValue = pastedText.padEnd(length!, ' ').slice(0, length!);
+
+      if (controlledValue === undefined) {
+        setUncontrolledValue(newValue);
+      }
+      onChange?.(newValue);
+
+      // Move focus to the last filled input or the end
+      const nextIndex = Math.min(pastedText.length, length! - 1);
+      inputRefs.current[nextIndex]?.focus();
+
+      if (newValue.replace(/ /g, '').length === length!) {
+        onComplete?.(newValue);
+      }
+
+      return;
+    }
+
+    // Handle single character input
+    const newValueArray = value.padEnd(length!, ' ').split('');
+    newValueArray[index] = text;
+    const newValue = newValueArray.join('').slice(0, length!);
+
+    if (controlledValue === undefined) {
+      setUncontrolledValue(newValue);
+    }
+    onChange?.(newValue);
+
+    // Move to next input if character was entered
+    if (text && index < length! - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+
+    // Check if complete
+    if (newValue.replace(/ /g, '').length === length!) {
+      onComplete?.(newValue);
+    }
+  };
+
+  const handleKeyPress = (e: any, index: number) => {
+    // Handle backspace
+    if (e.nativeEvent.key === 'Backspace') {
+      const currentValue = value.charAt(index);
+      if (!currentValue || currentValue === ' ') {
+        // Move to previous input if current is empty
+        if (index > 0) {
+          inputRefs.current[index - 1]?.focus();
+        }
+      }
+    }
+  };
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      {Array.from({ length: length! }, (_, index) => {
+        const inputValue = value.charAt(index) || '';
+        const displayValue = inputValue === ' ' ? '' : inputValue;
+
+        return (
+          <TextInput
+            key={index}
+            ref={(el) => (inputRefs.current[index] = el)}
+            value={mask && displayValue ? '•' : displayValue}
+            onChangeText={(text) => handleChange(text, index)}
+            onKeyPress={(e) => handleKeyPress(e, index)}
+            onFocus={() => setFocusedIndex(index)}
+            onBlur={() => setFocusedIndex(null)}
+            maxLength={1}
+            keyboardType={type === 'number' ? 'number-pad' : 'default'}
+            editable={!disabled}
+            selectTextOnFocus
+            style={sx(
+              styles.input,
+              focusedIndex === index && styles.inputFocused,
+              inputStyle
+            )}
+          />
+        );
+      })}
+    </BoxView>
+  );
+});
+
+PinInput.displayName = 'PinInput';

package/src/components/Popover/index.tsx

@@ -0,0 +1,244 @@
+import React, { forwardRef, useState, useRef } from 'react';
+import {
+  View,
+  TouchableWithoutFeedback,
+  Animated,
+} from 'react-native';
+import { BoxView } from '../BoxView';
+import { Portal } from '../Portal';
+import type {
+  DefaultProps,
+
+  MantineNumberSize,
+} from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+
+
+export interface PopoverProps extends DefaultProps {
+  /** Popover position relative to target */
+  position?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end';
+
+  /** Popover width */
+  width?: number | 'target';
+
+  /** Border radius */
+  radius?: MantineNumberSize;
+
+  /** Popover shadow */
+  shadow?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** If true, popover will have an arrow */
+  withArrow?: boolean;
+
+  /** Arrow size */
+  arrowSize?: number;
+
+  /** Arrow offset */
+  arrowOffset?: number;
+
+  /** If true, close on click outside */
+  closeOnClickOutside?: boolean;
+
+  /** If true, close on escape key (web only) */
+  closeOnEscape?: boolean;
+
+  /** Controlled opened state */
+  opened?: boolean;
+
+  /** Called when popover state changes */
+  onChange?: (opened: boolean) => void;
+
+  /** Z-index */
+  zIndex?: number;
+
+  /** Popover content */
+  children: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+export interface PopoverTargetProps {
+  children: React.ReactElement;
+}
+
+export interface PopoverDropdownProps extends DefaultProps {
+  children: React.ReactNode;
+  style?: any;
+}
+
+
+const defaultProps: Partial<PopoverProps> = {
+  position: 'bottom',
+  width: 260,
+  radius: 'md',
+  shadow: 'md',
+  withArrow: false,
+  arrowSize: 7,
+  arrowOffset: 5,
+  closeOnClickOutside: true,
+  closeOnEscape: true,
+  zIndex: 1000,
+};
+
+interface PopoverContextValue {
+  opened: boolean;
+  setOpened: (opened: boolean) => void;
+  targetRef: React.RefObject<View>;
+  dropdownPosition: { top: number; left: number; width: number };
+  setDropdownPosition: (pos: { top: number; left: number; width: number }) => void;
+}
+
+const PopoverContext = React.createContext<PopoverContextValue | null>(null);
+
+const usePopoverContext = () => {
+  const ctx = React.useContext(PopoverContext);
+  if (!ctx) {
+    throw new Error('Popover components must be used within Popover');
+  }
+  return ctx;
+};
+
+const PopoverTarget: React.FC<PopoverTargetProps> = ({ children }) => {
+  const { setOpened, targetRef, setDropdownPosition } = usePopoverContext();
+
+  const handlePress = () => {
+    if (targetRef.current) {
+      targetRef.current.measureInWindow((x, y, width, height) => {
+        setDropdownPosition({
+          top: y + height + 8,
+          left: x,
+          width,
+        });
+      });
+    }
+    setOpened(true);
+  };
+
+  return React.cloneElement(children, {
+    ref: targetRef,
+    onPress: handlePress,
+  });
+};
+
+const PopoverDropdown: React.FC<PopoverDropdownProps> = ({ children, style, ...others }) => {
+  const { opened, setOpened, dropdownPosition } = usePopoverContext();
+  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>
+      <TouchableWithoutFeedback onPress={() => setOpened(false)}>
+        <View
+          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>
+        </View>
+      </TouchableWithoutFeedback>
+    </Portal>
+  );
+};
+
+export const Popover = Object.assign(
+  forwardRef<any, PopoverProps>((props, ref) => {
+    const {
+      position,
+      width,
+      radius,
+      shadow,
+      withArrow,
+      arrowSize,
+      arrowOffset,
+      closeOnClickOutside,
+      closeOnEscape,
+      opened: controlledOpened,
+      onChange,
+      zIndex,
+      children,
+      style,
+      ...others
+    } = useComponentDefaultProps('Popover', defaultProps, 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: PopoverContextValue = {
+      opened: isOpened,
+      setOpened: handleSetOpened,
+      targetRef,
+      dropdownPosition,
+      setDropdownPosition,
+    };
+
+    return (
+      <PopoverContext.Provider value={contextValue}>
+        <BoxView ref={ref} {...others}>
+          {children}
+        </BoxView>
+      </PopoverContext.Provider>
+    );
+  }),
+  {
+    Target: PopoverTarget,
+    Dropdown: PopoverDropdown,
+  }
+);
+
+Popover.displayName = 'Popover';
+PopoverTarget.displayName = 'Popover.Target';
+PopoverDropdown.displayName = 'Popover.Dropdown';

package/src/components/Portal/index.tsx

@@ -0,0 +1,75 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { View, StyleSheet } from 'react-native';
+
+interface PortalContextValue {
+  mount: (child: React.ReactNode) => number;
+  unmount: (key: number) => void;
+}
+
+const PortalContext = createContext<PortalContextValue | null>(null);
+
+export interface PortalProviderProps {
+  children: React.ReactNode;
+}
+
+export const PortalProvider: React.FC<PortalProviderProps> = ({ children }) => {
+  const [portals, setPortals] = useState<Map<number, React.ReactNode>>(new Map());
+  const nextKey = React.useRef(0);
+
+  const mount = useCallback((child: React.ReactNode) => {
+    const key = nextKey.current++;
+    setPortals((prev) => {
+      const next = new Map(prev);
+      next.set(key, child);
+      return next;
+    });
+    return key;
+  }, []);
+
+  const unmount = useCallback((key: number) => {
+    setPortals((prev) => {
+      const next = new Map(prev);
+      next.delete(key);
+      return next;
+    });
+  }, []);
+
+  return (
+    <PortalContext.Provider value={{ mount, unmount }}>
+      {children}
+      <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+        {Array.from(portals.entries()).map(([key, child]) => (
+          <React.Fragment key={key}>{child}</React.Fragment>
+        ))}
+      </View>
+    </PortalContext.Provider>
+  );
+};
+
+export interface PortalProps {
+  children: React.ReactNode;
+}
+
+export const Portal: React.FC<PortalProps> = ({ children }) => {
+  const context = useContext(PortalContext);
+  const [, setKey] = useState<number | null>(null);
+
+  React.useEffect(() => {
+    if (!context) {
+      console.warn('Portal used without PortalProvider');
+      return;
+    }
+
+    const portalKey = context.mount(children);
+    setKey(portalKey);
+
+    return () => {
+      context.unmount(portalKey);
+    };
+  }, [children, context]);
+
+  return null;
+};
+
+Portal.displayName = 'Portal';
+PortalProvider.displayName = 'PortalProvider';