react-native-mantine 0.1.15 → 0.2.0

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,259 @@
+import React, { forwardRef, useState, useRef } from 'react';
+import {
+  View,
+  TouchableWithoutFeedback,
+  Animated,
+  Platform,
+} from 'react-native';
+import { Text } from '../Text';
+import { Portal } from '../Portal';
+import type {
+  DefaultProps,
+  MantineColor,
+  MantineNumberSize,
+} from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface TooltipProps extends DefaultProps {
+  /** Tooltip label */
+  label: React.ReactNode;
+
+  /** Tooltip position relative to target */
+  position?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end';
+
+  /** Tooltip color from theme */
+  color?: MantineColor;
+
+  /** Border radius */
+  radius?: MantineNumberSize;
+
+  /** If true, tooltip will be multiline */
+  multiline?: boolean;
+
+  /** Tooltip width in multiline mode */
+  width?: number | 'auto';
+
+  /** Tooltip z-index */
+  zIndex?: number;
+
+  /** Delay before tooltip opens in ms */
+  openDelay?: number;
+
+  /** Delay before tooltip closes in ms */
+  closeDelay?: number;
+
+  /** Controlled opened state */
+  opened?: boolean;
+
+  /** If true, tooltip will be disabled */
+  disabled?: boolean;
+
+  /** Trigger mode - press or longPress */
+  trigger?: 'press' | 'longPress';
+
+  /** Tooltip arrow size */
+  withArrow?: boolean;
+
+  /** Target element */
+  children: React.ReactElement;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      radius,
+      multiline,
+      width,
+    }: {
+      color: MantineColor;
+      radius: MantineNumberSize;
+      multiline: boolean;
+      width: number | 'auto';
+    }
+  ) => {
+    const colors = theme.colors[color] || theme.colors.gray;
+
+    return {
+      tooltip: {
+        position: 'absolute',
+        backgroundColor: colors?.[9] || colors?.[8] || (theme.colors.gray || [])[9],
+        borderRadius: theme.fn.radius(radius),
+        paddingVertical: rem(6) as any,
+        paddingHorizontal: rem(10) as any,
+        maxWidth: (width === 'auto' ? rem(250) : width) as any,
+        ...(multiline && {
+          textAlign: 'left',
+        }),
+        ...Platform.select({
+          ios: {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+          },
+          android: {
+            elevation: 5,
+          },
+        }),
+      },
+      label: {
+        color: theme.white,
+        fontSize: rem(12) as any,
+        lineHeight: rem(16) as any,
+        ...(multiline && {
+          whiteSpace: 'normal',
+        }),
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<TooltipProps> = {
+  position: 'top',
+  color: 'gray',
+  radius: 'sm',
+  multiline: false,
+  width: 'auto',
+  zIndex: 1000,
+  openDelay: 0,
+  closeDelay: 0,
+  disabled: false,
+  trigger: 'longPress',
+  withArrow: false,
+};
+
+export const Tooltip = forwardRef<any, TooltipProps>((props, _ref) => {
+  const {
+    label,
+    position,
+    color,
+    radius,
+    multiline,
+    width,
+    zIndex,
+    openDelay,
+    closeDelay,
+    opened: controlledOpened,
+    disabled,
+    trigger,
+    withArrow,
+    children,
+    style,
+    ...others
+  } = useComponentDefaultProps('Tooltip', defaultProps, props);
+
+  const [visible, setVisible] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+  const targetRef = useRef<View>(null);
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const { styles, sx } = useStyles(
+    { color, radius, multiline, width },
+    { name: 'Tooltip' }
+  ) as any;
+
+  const isControlled = controlledOpened !== undefined;
+  const isVisible = isControlled ? controlledOpened : visible;
+
+  const show = () => {
+    if (disabled) return;
+
+    if (targetRef.current) {
+      targetRef.current.measureInWindow((x, y, width, _height) => {
+        const top = y - 40; // Simple positioning, can be improved
+        const left = x + width / 2 - 50;
+        setTooltipPosition({ top, left });
+      });
+    }
+
+    if (!isControlled) {
+      setTimeout(() => {
+        setVisible(true);
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 150,
+          useNativeDriver: true,
+        }).start();
+      }, openDelay);
+    }
+  };
+
+  const hide = () => {
+    if (!isControlled) {
+      setTimeout(() => {
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 150,
+          useNativeDriver: true,
+        }).start(() => setVisible(false));
+      }, closeDelay);
+    }
+  };
+
+  const triggerProps =
+    trigger === 'longPress'
+      ? { onLongPress: show }
+      : { onPress: show, onPressOut: hide };
+
+  const childWithRef = React.cloneElement(children, {
+    ref: targetRef,
+    ...triggerProps,
+  });
+
+  return (
+    <>
+      {childWithRef}
+      {isVisible && (
+        <Portal>
+          <TouchableWithoutFeedback onPress={hide}>
+            <View
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex,
+              }}
+            >
+              <Animated.View
+                style={[
+                  sx(styles.tooltip, style),
+                  {
+                    top: tooltipPosition.top,
+                    left: tooltipPosition.left,
+                    opacity,
+                  },
+                ]}
+                {...others}
+              >
+                {typeof label === 'string' ? (
+                  <Text style={styles.label}>{label}</Text>
+                ) : (
+                  label
+                )}
+              </Animated.View>
+            </View>
+          </TouchableWithoutFeedback>
+        </Portal>
+      )}
+    </>
+  );
+});
+
+Tooltip.displayName = 'Tooltip';

package/src/components/TransferList/index.tsx

@@ -0,0 +1,399 @@
+import React, { forwardRef, useState } from 'react';
+import { ScrollView, TouchableOpacity } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import { Checkbox } from '../Checkbox';
+import { _Button as Button } from '../Button';
+import { TextInput } from '../TextInput';
+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 TransferListDataItem {
+  value: string;
+  label: string;
+  group?: string;
+}
+
+export interface TransferListData {
+  items: TransferListDataItem[];
+  selectedValues: string[];
+}
+
+export interface TransferListProps extends DefaultProps {
+  /** Current data state */
+  value: [TransferListData, TransferListData];
+
+  /** Called when data changes */
+  onChange: (value: [TransferListData, TransferListData]) => void;
+
+  /** Titles for both lists */
+  titles?: [React.ReactNode, React.ReactNode];
+
+  /** Placeholder for search inputs */
+  searchPlaceholder?: string;
+
+  /** If true, lists will have search */
+  searchable?: boolean;
+
+  /** Transfer list color */
+  color?: MantineColor;
+
+  /** Transfer list size */
+  size?: MantineSize;
+
+  /** Border radius */
+  radius?: MantineNumberSize;
+
+  /** List height */
+  listHeight?: number;
+
+  /** If true, items will not be transferred automatically */
+  transferAllMatchingFilter?: boolean;
+
+  /** Render custom item */
+  itemComponent?: React.ComponentType<{ data: TransferListDataItem; selected: boolean }>;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      radius,
+      listHeight,
+    }: {
+      color: MantineColor;
+      radius: MantineNumberSize;
+      listHeight: number;
+    }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+
+    return {
+      root: {
+        flexDirection: 'column',
+      },
+      container: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'stretch',
+      },
+      list: {
+        flex: 1,
+        borderWidth: 1,
+        borderColor:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[4]
+            : (theme.colors.gray || [])[3],
+        borderRadius: theme.fn.radius(radius),
+        overflow: 'hidden',
+      },
+      listHeader: {
+        padding: theme.spacing.sm,
+        borderBottomWidth: 1,
+        borderBottomColor:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[4]
+            : (theme.colors.gray || [])[3],
+        backgroundColor:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[6]
+            : (theme.colors.gray || [])[0],
+      },
+      title: {
+        fontSize: rem(14) as any,
+        fontWeight: '600',
+        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+      },
+      searchContainer: {
+        padding: theme.spacing.xs,
+        borderBottomWidth: 1,
+        borderBottomColor:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[4]
+            : (theme.colors.gray || [])[3],
+      },
+      itemsContainer: {
+        height: listHeight as any,
+      },
+      item: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: rem(10) as any,
+        paddingHorizontal: theme.spacing.sm,
+        borderBottomWidth: 1,
+        borderBottomColor:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[5]
+            : (theme.colors.gray || [])[1],
+      },
+      itemSelected: {
+        backgroundColor:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[5]
+            : colors?.[0] || (theme.colors.gray || [])[0],
+      },
+      itemText: {
+        marginLeft: theme.spacing.sm,
+        fontSize: rem(14) as any,
+        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+      },
+      controls: {
+        width: rem(80) as any,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: theme.spacing.xs,
+      },
+      button: {
+        marginVertical: theme.spacing.xs,
+      },
+      emptyState: {
+        padding: theme.spacing.xl,
+        alignItems: 'center',
+      },
+      emptyText: {
+        color:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[2]
+            : (theme.colors.gray || [])[6],
+        fontSize: rem(12) as any,
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<TransferListProps> = {
+  titles: ['', ''],
+  searchPlaceholder: 'Search...',
+  searchable: false,
+  color: 'blue',
+  size: 'md',
+  radius: 'sm',
+  listHeight: 300,
+  transferAllMatchingFilter: false,
+};
+
+const DefaultItem: React.FC<{ data: TransferListDataItem; selected: boolean }> = ({
+  data,
+  selected,
+}) => {
+  return (
+    <>
+      <Checkbox checked={selected} onChange={() => {}} />
+      <Text>{data.label}</Text>
+    </>
+  );
+};
+
+export const TransferList = forwardRef<any, TransferListProps>((props, ref) => {
+  const {
+    value,
+    onChange,
+    titles,
+    searchPlaceholder,
+    searchable,
+    color,
+    size,
+    radius,
+    listHeight,
+    transferAllMatchingFilter,
+    itemComponent: ItemComponent = DefaultItem,
+    style,
+    ...others
+  } = useComponentDefaultProps('TransferList', defaultProps, props);
+
+  const [leftSearch, setLeftSearch] = useState('');
+  const [rightSearch, setRightSearch] = useState('');
+
+  const { styles, sx } = useStyles(
+    { color, radius, listHeight },
+    { name: 'TransferList', size }
+  ) as any;
+
+  const [leftData, rightData] = value;
+
+  const filterItems = (items: TransferListDataItem[], search: string) => {
+    if (!search) return items;
+    return items.filter((item) =>
+      item.label.toLowerCase().includes(search.toLowerCase())
+    );
+  };
+
+  const filteredLeftItems = filterItems(leftData.items, leftSearch);
+  const filteredRightItems = filterItems(rightData.items, rightSearch);
+
+  const toggleSelection = (side: 'left' | 'right', itemValue: string) => {
+    const data = side === 'left' ? leftData : rightData;
+    const selectedValues = data.selectedValues.includes(itemValue)
+      ? data.selectedValues.filter((v) => v !== itemValue)
+      : [...data.selectedValues, itemValue];
+
+    const newValue: [TransferListData, TransferListData] =
+      side === 'left'
+        ? [{ ...leftData, selectedValues }, rightData]
+        : [leftData, { ...rightData, selectedValues }];
+
+    onChange(newValue);
+  };
+
+  const transferToRight = () => {
+    const itemsToTransfer = leftData.items.filter((item) =>
+      leftData.selectedValues.includes(item.value)
+    );
+    const remainingItems = leftData.items.filter(
+      (item) => !leftData.selectedValues.includes(item.value)
+    );
+
+    onChange([
+      { items: remainingItems, selectedValues: [] },
+      { items: [...rightData.items, ...itemsToTransfer], selectedValues: [] },
+    ]);
+  };
+
+  const transferToLeft = () => {
+    const itemsToTransfer = rightData.items.filter((item) =>
+      rightData.selectedValues.includes(item.value)
+    );
+    const remainingItems = rightData.items.filter(
+      (item) => !rightData.selectedValues.includes(item.value)
+    );
+
+    onChange([
+      { items: [...leftData.items, ...itemsToTransfer], selectedValues: [] },
+      { items: remainingItems, selectedValues: [] },
+    ]);
+  };
+
+  const transferAllToRight = () => {
+    onChange([
+      { items: [], selectedValues: [] },
+      { items: [...rightData.items, ...leftData.items], selectedValues: [] },
+    ]);
+  };
+
+  const transferAllToLeft = () => {
+    onChange([
+      { items: [...leftData.items, ...rightData.items], selectedValues: [] },
+      { items: [], selectedValues: [] },
+    ]);
+  };
+
+  const renderList = (
+    data: TransferListData,
+    filteredItems: TransferListDataItem[],
+    side: 'left' | 'right',
+    searchValue: string,
+    setSearchValue: (value: string) => void,
+    title?: React.ReactNode
+  ) => (
+    <BoxView style={styles.list}>
+      {title && (
+        <BoxView style={styles.listHeader}>
+          <Text style={styles.title}>{title}</Text>
+        </BoxView>
+      )}
+      {searchable && (
+        <BoxView style={styles.searchContainer}>
+          <TextInput
+            placeholder={searchPlaceholder}
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.nativeEvent.text)}
+            size="sm"
+          />
+        </BoxView>
+      )}
+      <ScrollView style={styles.itemsContainer}>
+        {filteredItems.length === 0 ? (
+          <BoxView style={styles.emptyState}>
+            <Text style={styles.emptyText}>No items</Text>
+          </BoxView>
+        ) : (
+          filteredItems.map((item) => {
+            const isSelected = data.selectedValues.includes(item.value);
+            return (
+              <TouchableOpacity
+                key={item.value}
+                style={[styles.item, isSelected && styles.itemSelected]}
+                onPress={() => toggleSelection(side, item.value)}
+              >
+                <ItemComponent data={item} selected={isSelected} />
+                <Text style={styles.itemText}>{item.label}</Text>
+              </TouchableOpacity>
+            );
+          })
+        )}
+      </ScrollView>
+    </BoxView>
+  );
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      <BoxView style={styles.container}>
+        {renderList(
+          leftData,
+          filteredLeftItems,
+          'left',
+          leftSearch,
+          setLeftSearch,
+          titles?.[0] || ''
+        )}
+
+        <BoxView style={styles.controls}>
+          <Button
+            style={styles.button}
+            onPress={transferAllToRight}
+            disabled={leftData.items.length === 0}
+            size="sm"
+          >
+            <Text>{'»'}</Text>
+          </Button>
+          <Button
+            style={styles.button}
+            onPress={transferToRight}
+            disabled={leftData.selectedValues.length === 0}
+            size="sm"
+          >
+            <Text>{'›'}</Text>
+          </Button>
+          <Button
+            style={styles.button}
+            onPress={transferToLeft}
+            disabled={rightData.selectedValues.length === 0}
+            size="sm"
+          >
+            <Text>{'‹'}</Text>
+          </Button>
+          <Button
+            style={styles.button}
+            onPress={transferAllToLeft}
+            disabled={rightData.items.length === 0}
+            size="sm"
+          >
+            <Text>{'«'}</Text>
+          </Button>
+        </BoxView>
+
+        {renderList(
+          rightData,
+          filteredRightItems,
+          'right',
+          rightSearch,
+          setRightSearch,
+          titles?.[1] || ''
+        )}
+      </BoxView>
+    </BoxView>
+  );
+});
+
+TransferList.displayName = 'TransferList';