react-native-mantine 0.1.15 → 0.2.0

package/src/components/RingProgress/index.tsx

@@ -0,0 +1,206 @@
+import React, { forwardRef } from 'react';
+import { View } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type { DefaultProps, MantineColor } from '../../theme/types';
+import { useComponentDefaultProps, useTheme } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+/**
+ * NOTE: This is a simplified version of RingProgress.
+ * For full SVG-based circular progress, install react-native-svg:
+ * yarn add react-native-svg
+ *
+ * This version uses View-based rendering with transform rotation.
+ * For production use, consider implementing with react-native-svg.
+ */
+
+export interface RingProgressSection {
+  value: number;
+  color: MantineColor;
+  tooltip?: string;
+}
+
+export interface RingProgressProps extends DefaultProps {
+  /** Sections of the ring */
+  sections: RingProgressSection[];
+
+  /** Size of the ring */
+  size?: number;
+
+  /** Ring thickness */
+  thickness?: number;
+
+  /** Label displayed in the center */
+  label?: React.ReactNode;
+
+  /** Root color from theme */
+  rootColor?: string;
+
+  /** If true, section tooltips will be rounded */
+  roundCaps?: boolean;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      size,
+      thickness,
+      rootColor,
+    }: {
+      size: number;
+      thickness: number;
+      rootColor: string;
+    }
+  ) => ({
+    root: {
+      width: size,
+      height: size,
+      position: 'relative',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    track: {
+      position: 'absolute',
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      borderWidth: thickness,
+      borderColor: rootColor,
+    },
+    label: {
+      position: 'absolute',
+      fontSize: rem(14),
+      fontWeight: '600',
+      color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+    },
+    // Simplified progress representation
+    progressContainer: {
+      position: 'absolute',
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      overflow: 'hidden',
+    },
+  })
+);
+
+const defaultProps: Partial<RingProgressProps> = {
+  size: 120,
+  thickness: 12,
+  roundCaps: false,
+};
+
+export const RingProgress = forwardRef<any, RingProgressProps>((props, ref) => {
+  const {
+    sections,
+    size,
+    thickness,
+    label,
+    rootColor: customRootColor,
+    roundCaps,
+    style,
+    ...others
+  } = useComponentDefaultProps('RingProgress', defaultProps, props);
+
+  const theme = useTheme();
+
+  const rootColor =
+    customRootColor ||
+    (theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[2]);
+
+  const { styles, sx} = useStyles(
+    { size, thickness, rootColor },
+    { name: 'RingProgress' }
+  ) as any;
+
+  // Calculate total value and normalize sections
+  const normalizedSections = sections.map((section) => ({
+    ...section,
+    percentage: (section.value / 100) * 100,
+  }));
+
+  // Render simplified ring using borders and transforms
+  // Note: This is a basic implementation. For full SVG support, use react-native-svg
+  const renderSections = () => {
+    let currentAngle = 0;
+
+    return normalizedSections.map((section, index) => {
+      const colors =
+        theme.colors[section.color] || theme.colors[theme.primaryColor];
+      const sectionColor = colors?.[6] || colors?.[5] || theme.primaryBgColor;
+
+      const angle = (section.percentage / 100) * 360;
+      const rotation = currentAngle;
+      currentAngle += angle;
+
+      // Simplified representation - just show colored arcs
+      // This is a placeholder implementation
+      return (
+        <View
+          key={index}
+          style={{
+            position: 'absolute',
+            width: size!,
+            height: size!,
+            borderRadius: size! / 2,
+            borderWidth: thickness,
+            borderColor: 'transparent',
+            borderTopColor: sectionColor,
+            transform: [{ rotate: `${rotation}deg` }],
+          }}
+        />
+      );
+    });
+  };
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      <View style={styles.track} />
+      <View style={styles.progressContainer}>{renderSections()}</View>
+      {label && (
+        typeof label === 'string' ? (
+          <Text style={styles.label}>{label}</Text>
+        ) : (
+          <View style={{ position: 'absolute' }}>{label}</View>
+        )
+      )}
+    </BoxView>
+  );
+});
+
+RingProgress.displayName = 'RingProgress';
+
+/**
+ * USAGE NOTE:
+ * This is a simplified implementation of RingProgress.
+ * For production-quality circular progress with accurate rendering,
+ * install react-native-svg and implement using SVG circles with
+ * stroke-dasharray and stroke-dashoffset.
+ *
+ * Example with react-native-svg:
+ * ```tsx
+ * import Svg, { Circle } from 'react-native-svg';
+ *
+ * const circumference = 2 * Math.PI * radius;
+ * const strokeDashoffset = circumference - (percentage / 100) * circumference;
+ *
+ * <Svg width={size} height={size}>
+ *   <Circle
+ *     cx={size / 2}
+ *     cy={size / 2}
+ *     r={radius}
+ *     stroke={color}
+ *     strokeWidth={thickness}
+ *     strokeDasharray={circumference}
+ *     strokeDashoffset={strokeDashoffset}
+ *     fill="none"
+ *   />
+ * </Svg>
+ * ```
+ */

package/src/components/SegmentedControl/index.tsx

@@ -0,0 +1,259 @@
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { TouchableOpacity, Animated } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type { DefaultProps, MantineColor, MantineNumberSize, MantineSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface SegmentedControlItem {
+  label: React.ReactNode;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface SegmentedControlProps extends DefaultProps {
+  /** Current selected value (controlled) */
+  value?: string;
+
+  /** Default value (uncontrolled) */
+  defaultValue?: string;
+
+  /** Called when value changes */
+  onChange?: (value: string) => void;
+
+  /** Data for segments */
+  data: (string | SegmentedControlItem)[];
+
+  /** SegmentedControl size */
+  size?: MantineSize;
+
+  /** SegmentedControl color */
+  color?: MantineColor;
+
+  /** Key of theme.radius or any valid value to set border-radius */
+  radius?: MantineNumberSize;
+
+  /** Disabled state */
+  disabled?: boolean;
+
+  /** Display segments vertically */
+  orientation?: 'horizontal' | 'vertical';
+
+  /** Sets width to 100% of parent */
+  fullWidth?: boolean;
+
+  /** Transition duration in ms */
+  transitionDuration?: number;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const sizes = {
+  xs: { fontSize: rem(10), padding: rem(4), height: rem(24) },
+  sm: { fontSize: rem(12), padding: rem(6), height: rem(28) },
+  md: { fontSize: rem(14), padding: rem(8), height: rem(32) },
+  lg: { fontSize: rem(16), padding: rem(10), height: rem(38) },
+  xl: { fontSize: rem(18), padding: rem(12), height: rem(44) },
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      radius,
+      disabled,
+      orientation,
+      fullWidth,
+    }: {
+      color: MantineColor;
+      radius: MantineNumberSize;
+      disabled: boolean;
+      orientation: 'horizontal' | 'vertical';
+      fullWidth: boolean;
+    },
+    { size }
+  ) => {
+    const sizeStyles = sizes[size as keyof typeof sizes] || sizes.md;
+
+    return {
+      root: {
+        position: 'relative',
+        flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[6] : theme.colors.gray?.[1],
+        borderRadius: theme.fn.radius(radius),
+        padding: rem(4) as any,
+        opacity: disabled ? 0.5 : 1,
+        ...(fullWidth && { width: '100%' }),
+      },
+      indicator: {
+        position: 'absolute',
+        backgroundColor: theme.white,
+        borderRadius: theme.fn.radius(radius),
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.05,
+        shadowRadius: 1,
+        elevation: 1,
+        ...(theme.colorScheme === 'dark' && {
+          backgroundColor: theme.colors.dark?.[5],
+        }),
+      },
+      segment: {
+        flex: 1,
+        paddingHorizontal: sizeStyles.padding as any,
+        paddingVertical: sizeStyles.padding as any,
+        minHeight: sizeStyles.height as any,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: theme.fn.radius(radius),
+        zIndex: 1,
+      },
+      label: {
+        fontSize: sizeStyles.fontSize as any,
+        fontWeight: '500',
+        textAlign: 'center',
+      },
+      activeLabel: {
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+      },
+      inactiveLabel: {
+        color: theme.colorScheme === 'dark' ? theme.colors.dark?.[1] : theme.colors.gray?.[7],
+      },
+      disabledLabel: {
+        color: theme.colorScheme === 'dark' ? theme.colors.dark?.[3] : theme.colors.gray?.[5],
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<SegmentedControlProps> = {
+  size: 'md',
+  color: 'blue',
+  radius: 'sm',
+  disabled: false,
+  orientation: 'horizontal',
+  fullWidth: false,
+  transitionDuration: 200,
+};
+
+export const SegmentedControl = forwardRef<any, SegmentedControlProps>((props, ref) => {
+  const {
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    data,
+    size,
+    color,
+    radius,
+    disabled,
+    orientation,
+    fullWidth,
+    transitionDuration,
+    style,
+    ...others
+  } = useComponentDefaultProps('SegmentedControl', defaultProps, props);
+
+  const { styles, sx } = useStyles(
+    { color, radius, disabled, orientation, fullWidth },
+    { name: 'SegmentedControl', size }
+  ) as any;
+
+  // Normalize data to SegmentedControlItem[]
+  const normalizedData: SegmentedControlItem[] = data.map((item) =>
+    typeof item === 'string' ? { label: item, value: item, disabled: false } : item
+  );
+
+  const [uncontrolledValue, setUncontrolledValue] = useState(
+    defaultValue ?? normalizedData[0]?.value ?? ''
+  );
+  const [segmentLayouts, setSegmentLayouts] = useState<{ x: number; y: number; width: number; height: number }[]>([]);
+
+  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+  const activeIndex = normalizedData.findIndex((item) => item.value === value);
+
+  const indicatorPosition = useRef(new Animated.Value(0)).current;
+  const indicatorSize = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (segmentLayouts[activeIndex]) {
+      const layout = segmentLayouts[activeIndex];
+
+      Animated.parallel([
+        Animated.timing(indicatorPosition, {
+          toValue: orientation === 'horizontal' ? layout.x : layout.y,
+          duration: transitionDuration,
+          useNativeDriver: false,
+        }),
+        Animated.timing(indicatorSize, {
+          toValue: orientation === 'horizontal' ? layout.width : layout.height,
+          duration: transitionDuration,
+          useNativeDriver: false,
+        }),
+      ]).start();
+    }
+  }, [activeIndex, segmentLayouts, orientation, transitionDuration, indicatorPosition, indicatorSize]);
+
+  const handleSegmentLayout = (index: number, event: LayoutChangeEvent) => {
+    const { x, y, width, height } = event.nativeEvent.layout;
+    setSegmentLayouts((prev) => {
+      const newLayouts = [...prev];
+      newLayouts[index] = { x, y, width, height };
+      return newLayouts;
+    });
+  };
+
+  const handlePress = (item: SegmentedControlItem) => {
+    if (disabled || item.disabled) return;
+
+    if (controlledValue === undefined) {
+      setUncontrolledValue(item.value);
+    }
+    onChange?.(item.value);
+  };
+
+  const indicatorStyle = {
+    [orientation === 'horizontal' ? 'left' : 'top']: indicatorPosition,
+    [orientation === 'horizontal' ? 'width' : 'height']: indicatorSize,
+    [orientation === 'horizontal' ? 'height' : 'width']: '100%',
+  };
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      {segmentLayouts.length === normalizedData.length && (
+        <Animated.View style={[styles.indicator, indicatorStyle as any]} />
+      )}
+
+      {normalizedData.map((item, index) => {
+        const isActive = item.value === value;
+        const isDisabled = disabled || item.disabled;
+
+        return (
+          <TouchableOpacity
+            key={item.value}
+            style={styles.segment}
+            onPress={() => handlePress(item)}
+            disabled={isDisabled}
+            activeOpacity={0.7}
+            onLayout={(event) => handleSegmentLayout(index, event)}
+          >
+            <Text
+              style={[
+                styles.label,
+                isActive ? styles.activeLabel : styles.inactiveLabel,
+                isDisabled && styles.disabledLabel,
+              ]}
+            >
+              {item.label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </BoxView>
+  );
+});
+
+SegmentedControl.displayName = 'SegmentedControl';