react-native-mantine 0.1.15 → 0.3.0

package/src/components/Slider/index.tsx

@@ -0,0 +1,338 @@
+import React, { forwardRef, useRef, useState, useCallback } from 'react';
+import {
+  View,
+  PanResponder,
+  Animated,
+} from 'react-native';
+import type {
+  LayoutChangeEvent,
+  GestureResponderEvent,
+  PanResponderGestureState,
+} 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 SliderProps extends DefaultProps {
+  /** Slider value (controlled) */
+  value?: number;
+
+  /** Default value (uncontrolled) */
+  defaultValue?: number;
+
+  /** Called when value changes */
+  onChange?: (value: number) => void;
+
+  /** Called when user stops dragging */
+  onChangeEnd?: (value: number) => void;
+
+  /** Minimum value */
+  min?: number;
+
+  /** Maximum value */
+  max?: number;
+
+  /** Step interval */
+  step?: number;
+
+  /** Slider size */
+  size?: MantineSize;
+
+  /** Slider color */
+  color?: MantineColor;
+
+  /** Key of theme.radius or any valid value to set border-radius */
+  radius?: MantineNumberSize;
+
+  /** Display label */
+  label?: ((value: number) => React.ReactNode) | React.ReactNode;
+
+  /** Display marks */
+  marks?: { value: number; label?: React.ReactNode }[];
+
+  /** Disabled state */
+  disabled?: boolean;
+
+  /** Show label on hover */
+  showLabelOnHover?: boolean;
+
+  /** Thumb children, displays above thumb */
+  thumbChildren?: React.ReactNode;
+
+  /** Hides thumb */
+  thumbWithoutBorder?: boolean;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const sizes = {
+  xs: { height: rem(4), thumb: rem(12) },
+  sm: { height: rem(6), thumb: rem(16) },
+  md: { height: rem(8), thumb: rem(20) },
+  lg: { height: rem(10), thumb: rem(24) },
+  xl: { height: rem(12), thumb: rem(28) },
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      radius,
+      disabled,
+    }: {
+      color: MantineColor;
+      radius: MantineNumberSize;
+      disabled: boolean;
+    },
+    { size }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+    const sizeStyles = sizes[size as keyof typeof sizes] || sizes.md;
+
+    return {
+      root: {
+        position: 'relative',
+        width: '100%',
+        paddingVertical: rem(10),
+        opacity: disabled ? 0.5 : 1,
+      },
+      track: {
+        position: 'relative',
+        height: sizeStyles.height,
+        backgroundColor:
+          theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[2],
+        borderRadius: theme.fn.radius(radius),
+        overflow: 'hidden',
+      },
+      bar: {
+        position: 'absolute',
+        height: '100%',
+        backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        borderRadius: theme.fn.radius(radius),
+      },
+      thumb: {
+        position: 'absolute',
+        width: sizeStyles.thumb,
+        height: sizeStyles.thumb,
+        borderRadius: sizeStyles.thumb,
+        backgroundColor: theme.white,
+        borderWidth: rem(3),
+        borderColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        top: -(sizeStyles.thumb / 2 - sizeStyles.height / 2),
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 2,
+      },
+      label: {
+        position: 'absolute',
+        top: rem(-32),
+        backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        paddingHorizontal: theme.spacing.xs,
+        paddingVertical: rem(4),
+        borderRadius: theme.fn.radius('sm'),
+        minWidth: rem(28),
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      labelText: {
+        color: theme.white,
+        fontSize: theme.fontSizes.xs as number,
+        fontWeight: '600',
+      },
+      marks: {
+        position: 'absolute',
+        width: '100%',
+        top: sizeStyles.height,
+        flexDirection: 'row',
+      },
+      mark: {
+        position: 'absolute',
+        width: rem(2),
+        height: rem(6),
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
+        borderRadius: rem(1),
+      },
+      markLabel: {
+        position: 'absolute',
+        top: rem(10),
+        fontSize: theme.fontSizes.xs as number,
+        color: theme.colorScheme === 'dark' ? theme.colors.dark?.[2] : theme.colors.gray?.[6],
+        transform: [{ translateX: -10 }],
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<SliderProps> = {
+  min: 0,
+  max: 100,
+  step: 1,
+  size: 'md',
+  color: 'blue',
+  radius: 'xl',
+  disabled: false,
+  showLabelOnHover: true,
+  thumbWithoutBorder: false,
+};
+
+export const Slider = forwardRef<any, SliderProps>((props, ref) => {
+  const {
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    onChangeEnd,
+    min,
+    max,
+    step,
+    size,
+    color,
+    radius,
+    label,
+    marks,
+    disabled,
+    showLabelOnHover,
+    thumbChildren,
+    thumbWithoutBorder,
+    style,
+    ...others
+  } = useComponentDefaultProps('Slider', defaultProps, props);
+
+  const { styles, sx } = useStyles(
+    { color, radius, disabled },
+    { name: 'Slider', size }
+  ) as any;
+
+  const sizeStyles = sizes[size as keyof typeof sizes] || sizes.md;
+
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? min ?? 0);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const [showLabel, setShowLabel] = useState(false);
+
+  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+
+  const scale = useRef(new Animated.Value(1)).current;
+
+  const clampValue = useCallback(
+    (val: number) => {
+      const clamped = Math.max(min!, Math.min(max!, val));
+      const stepped = Math.round(clamped / step!) * step!;
+      return stepped;
+    },
+    [min, max, step]
+  );
+
+  const updateValue = useCallback(
+    (newValue: number) => {
+      const clampedValue = clampValue(newValue);
+      if (controlledValue === undefined) {
+        setUncontrolledValue(clampedValue);
+      }
+      onChange?.(clampedValue);
+    },
+    [clampValue, controlledValue, onChange]
+  );
+
+  const getValueFromPosition = useCallback(
+    (posX: number) => {
+      const percentage = posX / trackWidth;
+      return min! + percentage * (max! - min!);
+    },
+    [trackWidth, min, max]
+  );
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled!,
+      onMoveShouldSetPanResponder: () => !disabled!,
+      onPanResponderGrant: () => {
+        setShowLabel(true);
+        Animated.spring(scale, {
+          toValue: 1.2,
+          useNativeDriver: true,
+        }).start();
+      },
+      onPanResponderMove: (_evt: GestureResponderEvent, gestureState: PanResponderGestureState) => {
+        const newValue = getValueFromPosition(gestureState.moveX);
+        updateValue(newValue);
+      },
+      onPanResponderRelease: () => {
+        setShowLabel(false);
+        Animated.spring(scale, {
+          toValue: 1,
+          useNativeDriver: true,
+        }).start();
+        onChangeEnd?.(value);
+      },
+    })
+  ).current;
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    setTrackWidth(event.nativeEvent.layout.width);
+  };
+
+  const percentage = ((value - min!) / (max! - min!)) * 100;
+  const thumbPosition = (trackWidth * percentage) / 100;
+
+  const renderLabel = () => {
+    if (!showLabel && !showLabelOnHover) return null;
+    if (!showLabel) return null;
+
+    const labelContent = typeof label === 'function' ? label(value) : label || value;
+
+    return (
+      <BoxView style={[styles.label, { left: -(rem(28) / 2) }]}>
+        <Text style={styles.labelText}>{labelContent}</Text>
+      </BoxView>
+    );
+  };
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      <View style={styles.track} onLayout={handleLayout} {...panResponder.panHandlers}>
+        <View style={[styles.bar, { width: `${percentage}%` }]} />
+
+        {trackWidth > 0 && (
+          <Animated.View
+            style={[
+              styles.thumb,
+              {
+                left: thumbPosition - (sizeStyles.thumb / 2),
+                transform: [{ scale }],
+              },
+            ]}
+          >
+            {renderLabel()}
+            {thumbChildren}
+          </Animated.View>
+        )}
+      </View>
+
+      {marks && marks.length > 0 && (
+        <View style={styles.marks}>
+          {marks.map((mark, index) => {
+            const markPercentage = ((mark.value - min!) / (max! - min!)) * 100;
+            const markPosition = (trackWidth * markPercentage) / 100;
+
+            return (
+              <View key={index}>
+                <View style={[styles.mark, { left: markPosition }]} />
+                {mark.label && (
+                  <Text style={[styles.markLabel, { left: markPosition }]}>{mark.label}</Text>
+                )}
+              </View>
+            );
+          })}
+        </View>
+      )}
+    </BoxView>
+  );
+});
+
+Slider.displayName = 'Slider';

package/src/components/Space/index.tsx

@@ -0,0 +1,48 @@
+import { forwardRef } from 'react';
+import { BoxView } from '../BoxView';
+import type { ViewProps } from '../BoxView';
+import type { DefaultProps, MantineNumberSize } from '../../theme/types';
+import { useTheme } from '../../theme/theme-provider';
+
+export interface SpaceProps extends DefaultProps, Omit<ViewProps, 'style'> {
+  /** Width, key of theme.spacing or any valid CSS value */
+  w?: MantineNumberSize | number;
+
+  /** Height, key of theme.spacing or any valid CSS value */
+  h?: MantineNumberSize | number;
+}
+
+/**
+ * Space component adds horizontal or vertical spacing between elements
+ */
+export const Space = forwardRef<any, SpaceProps>((props, ref) => {
+  const { style, w, h, ...others} = props;
+
+  const theme = useTheme();
+
+  // Get spacing value from theme or use number directly
+  const getSpacing = (value: MantineNumberSize | number | undefined) => {
+    if (value === undefined) return undefined;
+    if (typeof value === 'number') return value;
+    return theme.spacing[value as keyof typeof theme.spacing] || 0;
+  };
+
+  const width = getSpacing(w);
+  const height = getSpacing(h);
+
+  return (
+    <BoxView
+      ref={ref}
+      style={[
+        {
+          ...(width !== undefined && { width }),
+          ...(height !== undefined && { height }),
+        },
+        style,
+      ]}
+      {...others}
+    />
+  );
+});
+
+Space.displayName = 'Space';

package/src/components/Spoiler/index.tsx

@@ -0,0 +1,123 @@
+import React, { forwardRef, useState } from 'react';
+import { TouchableOpacity, type LayoutChangeEvent } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type { DefaultProps } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface SpoilerProps extends DefaultProps {
+  /** Content that will be hidden under spoiler */
+  children: React.ReactNode;
+
+  /** Max height after which spoiler is shown */
+  maxHeight: number;
+
+  /** Label for show button */
+  showLabel?: string;
+
+  /** Label for hide button */
+  hideLabel?: string;
+
+  /** Transition duration in ms */
+  transitionDuration?: number;
+
+  /** Controlled expanded state */
+  expanded?: boolean;
+
+  /** Called when expanded state changes */
+  onExpandedChange?: (expanded: boolean) => void;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useStyles = createStyles((theme) => ({
+  root: {},
+  content: {
+    overflow: 'hidden',
+  },
+  control: {
+    paddingTop: theme.spacing.sm,
+    paddingBottom: theme.spacing.sm,
+  },
+  controlText: {
+    fontSize: theme.fontSizes.sm as number,
+    fontWeight: '500',
+    color: theme.colors[theme.primaryColor]?.[6] || theme.primaryBgColor,
+  },
+}));
+
+const defaultProps: Partial<SpoilerProps> = {
+  maxHeight: 100,
+  showLabel: 'Show more',
+  hideLabel: 'Show less',
+  transitionDuration: 200,
+};
+
+export const Spoiler = forwardRef<any, SpoilerProps>((props, ref) => {
+  const {
+    children,
+    maxHeight,
+    showLabel,
+    hideLabel,
+    transitionDuration,
+    expanded: controlledExpanded,
+    onExpandedChange,
+    style,
+    ...others
+  } = useComponentDefaultProps('Spoiler', defaultProps, props);
+
+  const { styles, sx} = useStyles({}, { name: 'Spoiler' }) as any;
+
+  const [contentHeight, setContentHeight] = useState<number>(0);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(false);
+
+  const expanded = controlledExpanded !== undefined ? controlledExpanded : uncontrolledExpanded;
+  const showSpoiler = contentHeight > maxHeight;
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    if (height > 0 && height !== contentHeight) {
+      setContentHeight(height);
+    }
+  };
+
+  const toggleExpanded = () => {
+    const newExpanded = !expanded;
+    if (controlledExpanded === undefined) {
+      setUncontrolledExpanded(newExpanded);
+    }
+    onExpandedChange?.(newExpanded);
+  };
+
+  if (!showSpoiler) {
+    return (
+      <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+        <BoxView onLayout={handleLayout}>{children}</BoxView>
+      </BoxView>
+    );
+  }
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      <BoxView
+        style={[
+          styles.content,
+          !expanded && {
+            maxHeight: rem(maxHeight),
+          },
+        ]}
+      >
+        <BoxView onLayout={handleLayout}>{children}</BoxView>
+      </BoxView>
+
+      <TouchableOpacity style={styles.control} onPress={toggleExpanded} activeOpacity={0.7}>
+        <Text style={styles.controlText}>{expanded ? hideLabel : showLabel}</Text>
+      </TouchableOpacity>
+    </BoxView>
+  );
+});
+
+Spoiler.displayName = 'Spoiler';