react-native-mantine 0.1.15 → 0.3.0

package/src/components/Progress/index.tsx

@@ -0,0 +1,182 @@
+import { forwardRef, useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import { BoxView } from '../BoxView';
+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 ProgressSection {
+  /** Section value, 0-100 */
+  value: number;
+
+  /** Section color from theme */
+  color: MantineColor;
+
+  /** Optional label */
+  label?: string;
+}
+
+export interface ProgressProps extends DefaultProps {
+  /** Progress value, 0-100 */
+  value?: number;
+
+  /** Progress color from theme */
+  color?: MantineColor;
+
+  /** Progress size */
+  size?: MantineSize | number;
+
+  /** Key of theme.radius or any valid value to set border-radius */
+  radius?: MantineNumberSize;
+
+  /** Adds stripes */
+  striped?: boolean;
+
+  /** Whether to animate striped progress bars */
+  animate?: boolean;
+
+  /** Sections */
+  sections?: ProgressSection[];
+
+  /** Additional styles */
+  style?: any;
+}
+
+const sizes = {
+  xs: rem(3),
+  sm: rem(5),
+  md: rem(8),
+  lg: rem(12),
+  xl: rem(16),
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      radius,
+      size,
+      striped,
+    }: {
+      color: MantineColor;
+      radius: MantineNumberSize;
+      size: MantineSize | number;
+      striped: boolean;
+    }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+    const sizeValue = typeof size === 'number' ? rem(size) : sizes[size as keyof typeof sizes] || sizes.md;
+
+    return {
+      root: {
+        height: sizeValue as any,
+        backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[2],
+        borderRadius: theme.fn.radius(radius),
+        overflow: 'hidden',
+      },
+      bar: {
+        height: '100%',
+        backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        ...(striped && {
+          backgroundImage: `linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)`,
+          backgroundSize: `${sizeValue} ${sizeValue}`,
+        }),
+      },
+      section: {
+        height: '100%',
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<ProgressProps> = {
+  value: 0,
+  color: 'blue',
+  size: 'md',
+  radius: 'sm',
+  striped: false,
+  animate: false,
+};
+
+export const Progress = forwardRef<any, ProgressProps>((props, ref) => {
+  const {
+    value,
+    color,
+    size,
+    radius,
+    striped,
+    animate,
+    sections,
+    style,
+    ...others
+  } = useComponentDefaultProps('Progress', defaultProps, props);
+
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: value || 0,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+  }, [value, animatedValue]);
+
+  const { styles, sx, theme} = useStyles(
+    { color, radius, size, striped },
+    { name: 'Progress' }
+  ) as any;
+
+  const renderSections = () => {
+    if (!sections || sections.length === 0) {
+      return (
+        <Animated.View
+          style={[
+            styles.bar,
+            {
+              width: animatedValue.interpolate({
+                inputRange: [0, 100],
+                outputRange: ['0%', '100%'],
+              }),
+            },
+          ]}
+        />
+      );
+    }
+
+    return sections.map((section, index) => {
+      const sectionColors =
+        theme.colors[section.color] || theme.colors[theme.primaryColor];
+      return (
+        <BoxView
+          key={index}
+          style={[
+            styles.section,
+            {
+              width: `${section.value}%`,
+              backgroundColor: sectionColors?.[6] || sectionColors?.[5] || theme.primaryBgColor,
+            },
+          ]}
+        />
+      );
+    });
+  };
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      {sections && sections.length > 0 ? (
+        <BoxView style={{ flexDirection: 'row', height: '100%' }}>{renderSections()}</BoxView>
+      ) : (
+        renderSections()
+      )}
+    </BoxView>
+  );
+});
+
+Progress.displayName = 'Progress';

package/src/components/Radio/index.tsx

@@ -0,0 +1,169 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { Pressable, Animated } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type { DefaultProps, MantineColor, MantineSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface RadioProps extends DefaultProps {
+  /** Radio label */
+  label?: React.ReactNode;
+
+  /** Radio size */
+  size?: MantineSize;
+
+  /** Radio color from theme */
+  color?: MantineColor;
+
+  /** Radio value */
+  value?: string;
+
+  /** Checked state */
+  checked?: boolean;
+
+  /** Called when radio state changes */
+  onChange?: (value: string) => void;
+
+  /** Disabled state */
+  disabled?: boolean;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Wrapper style */
+  wrapperStyle?: any;
+}
+
+const sizes = {
+  xs: rem(14),
+  sm: rem(18),
+  md: rem(22),
+  lg: rem(28),
+  xl: rem(36),
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      size,
+      color,
+      disabled,
+    }: {
+      size: MantineSize;
+      color: MantineColor;
+      disabled: boolean;
+    }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+    const radioSize = sizes[size as keyof typeof sizes] || sizes.md;
+    const innerSize = (radioSize as any as number) * 0.5;
+
+    return {
+      root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        opacity: disabled ? 0.5 : 1,
+      },
+      radio: {
+        width: radioSize as any,
+        height: radioSize as any,
+        borderRadius: ((radioSize as any as number) / 2) as any,
+        borderWidth: 2,
+        borderColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[4],
+        backgroundColor: 'transparent',
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+      checked: {
+        borderColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+      },
+      inner: {
+        width: rem(innerSize) as any,
+        height: rem(innerSize) as any,
+        borderRadius: rem(innerSize / 2) as any,
+        backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+      },
+      label: {
+        fontSize: theme.fontSizes.sm as number,
+        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+        marginLeft: theme.spacing.sm,
+        flex: 1,
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<RadioProps> = {
+  size: 'md',
+  color: 'blue',
+  checked: false,
+  disabled: false,
+};
+
+export const Radio = forwardRef<any, RadioProps>((props, ref) => {
+  const {
+    label,
+    size,
+    color,
+    value,
+    checked,
+    onChange,
+    disabled,
+    style,
+    wrapperStyle,
+    ...others
+  } = useComponentDefaultProps('Radio', defaultProps, props);
+
+  const { styles, sx } = useStyles({ size, color, disabled }, { name: 'Radio' }) as any;
+
+  const scaleAnim = useRef(new Animated.Value(checked ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.spring(scaleAnim, {
+      toValue: checked ? 1 : 0,
+      useNativeDriver: true,
+      tension: 100,
+      friction: 7,
+    }).start();
+  }, [checked, scaleAnim]);
+
+  const handlePress = () => {
+    if (!disabled && value !== undefined) {
+      onChange?.(value);
+    }
+  };
+
+  const radioContent = (
+    <BoxView style={sx(styles.radio, checked && styles.checked, style)}>
+      <Animated.View
+        style={[
+          styles.inner,
+          {
+            transform: [{ scale: scaleAnim }],
+            opacity: scaleAnim,
+          },
+        ]}
+      />
+    </BoxView>
+  );
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={handlePress}
+      disabled={disabled}
+      style={sx(styles.root, wrapperStyle)}
+      accessibilityRole="radio"
+      accessibilityState={{ checked }}
+      {...others}
+    >
+      {radioContent}
+      {label && <Text style={styles.label}>{label}</Text>}
+    </Pressable>
+  );
+});
+
+Radio.displayName = 'Radio';

package/src/components/Rating/index.tsx

@@ -0,0 +1,214 @@
+import React, { forwardRef, useState } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type { DefaultProps, MantineColor, MantineSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface RatingProps extends DefaultProps {
+  /** Rating value (controlled) */
+  value?: number;
+
+  /** Default value (uncontrolled) */
+  defaultValue?: number;
+
+  /** Called when value changes */
+  onChange?: (value: number) => void;
+
+  /** Number of rating items */
+  count?: number;
+
+  /** Rating size */
+  size?: MantineSize;
+
+  /** Rating color */
+  color?: MantineColor;
+
+  /** Empty symbol color */
+  emptyColor?: MantineColor;
+
+  /** Custom symbol (e.g., custom icon) */
+  symbol?: React.ReactNode;
+
+  /** Empty symbol */
+  emptySymbol?: React.ReactNode;
+
+  /** Allow fractional ratings for display (not input) */
+  fractions?: number;
+
+  /** Read-only mode */
+  readOnly?: boolean;
+
+  /** Highlighted on hover state */
+  highlightSelectedOnly?: boolean;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const sizes = {
+  xs: rem(14),
+  sm: rem(18),
+  md: rem(24),
+  lg: rem(32),
+  xl: rem(40),
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      emptyColor,
+    }: {
+      color: MantineColor;
+      emptyColor: MantineColor;
+      readOnly: boolean;
+    },
+    { size }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+    const emptyColors = theme.colors[emptyColor] || theme.colors.gray;
+    const sizeValue = sizes[size as keyof typeof sizes] || sizes.md;
+
+    return {
+      root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+      },
+      symbolWrapper: {
+        marginHorizontal: rem(2) as any,
+      },
+      symbol: {
+        fontSize: sizeValue as any,
+        lineHeight: sizeValue as any,
+      },
+      symbolFilled: {
+        color: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+      },
+      symbolEmpty: {
+        color: emptyColors?.[3] || emptyColors?.[2] || theme.colors.gray?.[3],
+      },
+      symbolHovered: {
+        opacity: 0.6,
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<RatingProps> = {
+  count: 5,
+  size: 'md',
+  color: 'yellow',
+  emptyColor: 'gray',
+  fractions: 1,
+  readOnly: false,
+  highlightSelectedOnly: false,
+};
+
+const StarSymbol = ({ filled }: { filled: boolean }) => {
+  return <Text>{filled ? '★' : '☆'}</Text>;
+};
+
+export const Rating = forwardRef<any, RatingProps>((props, ref) => {
+  const {
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    count,
+    size,
+    color,
+    emptyColor,
+    symbol,
+    emptySymbol,
+    fractions,
+    readOnly,
+    highlightSelectedOnly,
+    style,
+    ...others
+  } = useComponentDefaultProps('Rating', defaultProps, props);
+
+  const { styles, sx } = useStyles(
+    { color, emptyColor, readOnly },
+    { name: 'Rating', size }
+  ) as any;
+
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? 0);
+  const [hoveredValue, setHoveredValue] = useState(-1);
+
+  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+
+  const handleClick = (index: number) => {
+    if (readOnly) return;
+
+    const newValue = index + 1;
+    if (controlledValue === undefined) {
+      setUncontrolledValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+
+  const renderSymbol = (index: number) => {
+    const currentValue = hoveredValue >= 0 && !highlightSelectedOnly ? hoveredValue : value;
+    const isActive = index < currentValue;
+
+    // For fractional ratings, calculate fill percentage
+    const fillPercentage =
+      index < Math.floor(currentValue)
+        ? 1
+        : index === Math.floor(currentValue)
+        ? currentValue % 1
+        : 0;
+
+    const isHovered = hoveredValue >= 0 && index <= hoveredValue;
+
+    const symbolContent = symbol || <StarSymbol filled={isActive} />;
+    const emptySymbolContent = emptySymbol || <StarSymbol filled={false} />;
+
+    return (
+      <TouchableOpacity
+        key={index}
+        onPress={() => handleClick(index)}
+        onPressIn={() => !readOnly && setHoveredValue(index)}
+        onPressOut={() => !readOnly && setHoveredValue(-1)}
+        disabled={readOnly}
+        style={styles.symbolWrapper}
+        activeOpacity={0.7}
+      >
+        <BoxView>
+          {fillPercentage > 0 ? (
+            <Text
+              style={[
+                styles.symbol,
+                styles.symbolFilled,
+                isHovered && !highlightSelectedOnly && styles.symbolHovered,
+              ]}
+            >
+              {symbolContent}
+            </Text>
+          ) : (
+            <Text
+              style={[
+                styles.symbol,
+                styles.symbolEmpty,
+                isHovered && !highlightSelectedOnly && styles.symbolHovered,
+              ]}
+            >
+              {emptySymbolContent}
+            </Text>
+          )}
+        </BoxView>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      {Array.from({ length: count! }, (_, index) => renderSymbol(index))}
+    </BoxView>
+  );
+});
+
+Rating.displayName = 'Rating';