react-native-netlog-fab/lib/module/FloatingButton.js

Floating action button for network logging in React Native apps.

"use strict";

import React, { useRef } from 'react';
import { StyleSheet, Animated } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Icon, { Icons } from "./Icons.js";
import { jsx as _jsx } from "react/jsx-runtime";
const FloatingButton = ({
  onPress,
  color = 'lightgray',
  icon,
  position,
  style
}) => {
  const initialX = position?.right ?? 15;
  const initialY = position?.bottom ?? 100;
  const translateX = useRef(new Animated.Value(initialX)).current;
  const translateY = useRef(new Animated.Value(initialY)).current;
  const lastOffset = useRef({
    x: initialX,
    y: initialY
  });
  const panGesture = Gesture.Pan().onUpdate(event => {
    translateX.setValue(lastOffset.current.x + event.translationX);
    translateY.setValue(lastOffset.current.y + event.translationY);
  }).onEnd(event => {
    lastOffset.current = {
      x: lastOffset.current.x + event.translationX,
      y: lastOffset.current.y + event.translationY
    };
    translateX.setValue(lastOffset.current.x);
    translateY.setValue(lastOffset.current.y);
  });
  const tapGesture = Gesture.Tap().onEnd(() => {
    onPress?.();
  });
  const gesture = Gesture.Exclusive(panGesture, tapGesture);
  return /*#__PURE__*/_jsx(GestureDetector, {
    gesture: gesture,
    children: /*#__PURE__*/_jsx(Animated.View, {
      style: [styles.draggableContainer, style, {
        transform: [{
          translateX
        }, {
          translateY
        }]
      }],
      children: /*#__PURE__*/_jsx(Animated.View, {
        style: [styles.button, {
          backgroundColor: color
        }],
        children: icon || /*#__PURE__*/_jsx(Icon, {
          type: Icons.MaterialIcons,
          name: "expand-less",
          size: 30
        })
      })
    })
  });
};
const styles = StyleSheet.create({
  draggableContainer: {
    position: 'absolute',
    zIndex: 1
  },
  button: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center'
  }
});
export default FloatingButton;
//# sourceMappingURL=FloatingButton.js.map