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 translateX = useRef(new Animated.Value(position?.right || 15)).current;
  const translateY = useRef(new Animated.Value(position?.bottom || 100)).current;
  const lastOffset = useRef({
    x: position?.right || 15,
    y: position?.bottom || 100
  });
  const panGesture = Gesture.Pan().onUpdate(event => {
    translateX.setValue(event.translationX + lastOffset.current.x);
    translateY.setValue(event.translationY + lastOffset.current.y);
  }).onEnd(() => {
    translateX.extractOffset();
    translateY.extractOffset();
    translateX.addListener(({
      value
    }) => {
      lastOffset.current.x = value;
    });
    translateY.addListener(({
      value
    }) => {
      lastOffset.current.y = value;
    });
  });
  return /*#__PURE__*/_jsx(GestureDetector, {
    gesture: panGesture,
    children: /*#__PURE__*/_jsx(Animated.View, {
      style: [styles.draggableContainer, style, {
        transform: [{
          translateX: translateX
        }, {
          translateY: translateY
        }]
      }],
      children: /*#__PURE__*/_jsx(Animated.View, {
        style: [styles.button, {
          backgroundColor: color
        }],
        onTouchEnd: onPress,
        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