TagContainer.js

import React, { Fragment, useState, useRef, useMemo, useCallback } from 'react';

import {
  Pressable,
  StyleSheet,
  View,
} from 'react-native';

import {
  Gesture,
  GestureDetector,
  TouchableWithoutFeedback,
} from 'react-native-gesture-handler';

import Animated, {
  Easing,
  useSharedValue,
  LinearTransition,
  withTiming,
  FadeInDown,
  FadeOutDown,
} from 'react-native-reanimated';

// Paper
import { withTheme, Paragraph, Text } from "react-native-paper";
import Icon from 'react-native-paper/src/components/Icon';

"use strict";

const DraggableItem = (props) => {
  const opacityStyle = props.opacity ? { opacity: props.opacity } : { opacity: 1.0 };
  const borderColorStyle = props.color ? { borderColor: props.color } : {};
  const draggingStyle = props.dragging ? styles.movingTag : {};

  return (
    <Animated.View collapsable={false} style={[styles.tag, opacityStyle, borderColorStyle, draggingStyle]}>
      <Pressable style={{ alignItems: 'center', flexDirection: 'row' }} onPressIn={() => props.setDragItem(props.text)}>
        <Fragment>
          <Text numberOfLines={1} ellipsizeMode={'tail'} style={{ marginLeft: 8 }}>{props.text}</Text>
          <TouchableWithoutFeedback style={{ width: 32, height: 32, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }} onPress={() => props.onRemoveItem(props.text)}>
            <Icon source='close' size={18} />
          </TouchableWithoutFeedback>
        </Fragment>
      </Pressable>
    </Animated.View >
  );
}

const TagContainer = (props) => {
  const [{ closestItemKey, leftSide }, setDragProps] = useState({ dragging: false, dragItemKey: undefined, closestItemKey: undefined, leftSide: false })
  const [dragItemKey, setDragItemKey] = useState();
  const [dragging, setDragging] = useState(false);
  const itemPositions = useRef({});

  const caretPosX = useSharedValue(0);
  const caretPosY = useSharedValue(0);
  const caretWidth = useSharedValue(0);

  const onDragStarted = (key) => {
    if (dragItemKey) {
      setDragging(true);
      setDragProps({ closestItemKey: key });
      caretPosX.value = itemPositions.current[key]?.x || 0;
      caretPosY.value = itemPositions.current[key]?.y || 0;
      caretWidth.value = itemPositions.current[key]?.width || 0;
    }
  };

  const onUpdate = (pos) => {
    // Gesture update
    var closest;
    var closestY;
    var closestX;
    var isLeftSide = false;

    props.items.forEach((item) => {
      if (!(item.text in itemPositions.current)) return;
      ({ x, y, width, height } = itemPositions.current[item.text]);
      const midX = x + width / 2;
      const midY = y + height;
      const dx = Math.abs(pos.x - midX);
      const dy = Math.abs(pos.y - midY);

      if (!closest) {
        closest = item.text;
        closestX = dx;
        closestY = dy;
        isLeftSide = pos.x - midX < 0;
      } else if (dy + 0.1 < closestY) {
        closest = item.text;
        closestY = dy;
        closestX = dx;
        isLeftSide = pos.x - midX < 0;
      } else if (dy < closestY + 0.1 && dx < closestX) {
        closest = item.text;
        closestY = dy;
        closestX = dx;
        isLeftSide = pos.x - midX < 0;
      }
    });

    if (closest && (closest != closestItemKey || isLeftSide != leftSide)) {
      setDragProps({ closestItemKey: closest, leftSide: isLeftSide });
    }
  };

  const onDragEnded = (reorder) => {
    if (reorder && dragItemKey != undefined && closestItemKey != undefined && closestItemKey != dragItemKey) {
      const dragItemIdx = props.items.findIndex((item) => item.text == dragItemKey);
      const newItems = JSON.parse(JSON.stringify(props.items));
      const dragItem = newItems.splice(dragItemIdx, 1);
      const closestItemIdx = newItems.findIndex((item) => item.text == closestItemKey);
      const leftItems = newItems.splice(0, leftSide ? closestItemIdx : closestItemIdx + 1);
      props.onReorderItems([...leftItems, ...dragItem, ...newItems]);
    }

    setDragProps({ closestItemKey: undefined });
    setDragItemKey(undefined);
    setDragging(false);
  };

  const setItemPos = (item, { nativeEvent: { layout } }) => {
    itemPositions.current[item.text] = layout;
  }

  const onTagPress = (key) => {
    setDragItemKey(key)
  }

  let elementView = null;

  if (props.preview) {
    elementView = (item, idx) => {
      if (item.cull) {
        return;
      }
      let opacityStyle = item.opacity ? { opacity: item.opacity } : {};
      let colorStyle = item.color ? { color: item.color } : {};
      let additionalStyle = props.stylePredicate ?
        props.stylePredicate(item, idx) : {};
      return (
        <View key={item.text}>
          <Paragraph style={[colorStyle, opacityStyle, additionalStyle]}>#{item.text} </Paragraph>
        </View>
      );
    }
  } else {
    elementView = (item, _idx) => {
      return (
        <Animated.View
          style={{ maxWidth: '100%' }}
          key={item.text}
          onLayout={(ne) => setItemPos(item, ne)}
          layout={LinearTransition}
          entering={FadeInDown}
          exiting={FadeOutDown}
        >
          <DraggableItem
            {...item}
            tag={item.text}
            dragging={dragItemKey == item.text && dragging}
            onRemoveItem={props.onRemoveItem}
            setDragItem={() => onTagPress(item.text)}
          />
        </Animated.View>
      );
    }
  }

  const caretProps = useCallback((key) => {
    const itemPos = itemPositions.current[key];
    const isSame = key == dragItemKey;
    const x = (isSame || leftSide) ? itemPos.x : itemPos.x + itemPos.width;
    const width = isSame ? itemPos.width : 0;

    caretPosX.value = withTiming(x - 5, { duration: 50, easing: Easing.inOut(Easing.quad) });
    caretPosY.value = withTiming(itemPos.y, { duration: 50, easing: Easing.inOut(Easing.quad) });
    caretWidth.value = withTiming(width + 10, { duration: 50, easing: Easing.inOut(Easing.quad) });

    return [{
      position: "absolute",
      left: caretPosX,
      top: caretPosY,
      width: caretWidth,
      height: itemPos.height,
      backgroundColor: "red"
    }, styles.caret];
  }, [caretPosX, caretPosY, caretWidth, leftSide, itemPositions, dragItemKey]);

  const pan = useMemo(() => {
    return Gesture.Pan()
      .maxPointers(1)
      .minDistance(5)
      .onStart((_event) => {
        onDragStarted(dragItemKey);
      })
      .onUpdate((event) => {
        onUpdate({ x: event.x, y: event.y });
      })
      .onEnd(() => {
        onDragEnded(true);
      })
      .onFinalize(() => {
        onDragEnded(false);
      })
      .runOnJS(true)
  }, [dragItemKey, onDragStarted, onUpdate, onDragEnded]);

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={styles.flextainer}>
        {
          props.items && props.items.map(elementView)
        }
        {
          closestItemKey && itemPositions.current[closestItemKey] && <Animated.View style={caretProps(closestItemKey)} />
        }
      </Animated.View>
    </GestureDetector>
  );
}

const styles = StyleSheet.create({
  movingTag: {
    opacity: 0.65,
    backgroundColor: '#faa4'
  },
  tag: {
    borderRadius: 8,
    backgroundColor: '#fff',
    margin: 3,
    height: 32,
    borderWidth: 1,
    borderColor: '#ddd',
  },
  flextainer: {
    margin: 8,
    flexWrap: 'wrap',
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
  },
  caret: {
    backgroundColor: '#faaa',
    borderRadius: 5,
  }
});

export default withTheme(TagContainer);