softchatjs-react-native/dist/components/Draggable/index.mjs.map

React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com

{"version":3,"sources":["../../../src/components/Draggable/index.tsx","../../../src/components/Draggable/DraggebleItem.tsx"],"sourcesContent":["import React from 'react'\r\nimport Animated, {\r\n  useAnimatedStyle,\r\n  useSharedValue,\r\n  withSpring,\r\n  interpolate,\r\n  Extrapolation,\r\n  useAnimatedReaction,\r\n  runOnJS,\r\n  withTiming,\r\n  Easing,\r\n} from \"react-native-reanimated\";\r\nimport { Gesture, GestureDetector } from \"react-native-gesture-handler\";\r\nimport { Dimensions, Platform, TouchableWithoutFeedback, View } from 'react-native';\r\nimport { Children } from '../../types';\r\nimport DraggebleItem from './DraggebleItem';\r\n\r\ntype DraggebleProps = {\r\n  disable?: boolean;\r\n  onLongPress?: () => void;\r\n  children: Children,\r\n  actionContainer?: Children\r\n}\r\n\r\nexport default function Draggeble(props: DraggebleProps) {\r\n\r\n  const {\r\n    disable,\r\n    onLongPress,\r\n    children,\r\n    actionContainer\r\n  } = props;\r\n\r\n  const pressed = useSharedValue(false);\r\n  const offset = useSharedValue(0);\r\n  const [finished, setFinished] = React.useState(false);\r\n  const [threshHoldReached, setThreshHoldReached] = React.useState(false);\r\n\r\n  const touchStart = useSharedValue({ x: 0, y: 0, time: 0 });\r\n  const touchStartX = useSharedValue(0);\r\n  const isDragging = useSharedValue(false);\r\n  const maxThreshHold = -90;\r\n  const TOUCH_SLOP = Platform.OS === \"android\" ? 40 : 10;\r\n  const DISTANCE_TO_ACTIVATE_PAN = 70;\r\n  const deviceWidth = Dimensions.get(\"window\").width;\r\n\r\n  const pan = Gesture.Pan()\r\n    .minDistance(DISTANCE_TO_ACTIVATE_PAN)\r\n    .onTouchesDown((e, state) => {\r\n      touchStart.value = {\r\n        x: e.changedTouches[0].x,\r\n        y: e.changedTouches[0].y,\r\n        time: Date.now(),\r\n      };\r\n    })\r\n    .onTouchesMove((e, state) => {\r\n      if (disable) {\r\n        return;\r\n      }\r\n      touchStartX.value = e.changedTouches[0].x;\r\n      if (e.changedTouches[0].x + TOUCH_SLOP < touchStart.value.x) {\r\n        state.activate();\r\n      }\r\n    })\r\n    .onTouchesUp((e, state) => {\r\n      // touchStartX.value = 0;\r\n      state.fail();\r\n    })\r\n    .onUpdate((e) => {\r\n      if (Math.abs(e.translationX) < deviceWidth * (30 / 100)) {\r\n         offset.value = e.translationX\r\n        //  offset.value = withTiming(e.translationX);\r\n      }\r\n    })\r\n    .onFinalize(() => {\r\n      isDragging.value = false;\r\n      // offset.value = withSpring(0, {\r\n      //   damping: 100,\r\n      // });\r\n      pressed.value = false;\r\n    });\r\n\r\n  const animatedStyles = useAnimatedStyle(() => ({\r\n    zIndex: 100,\r\n    backgroundColor: 'red',\r\n    transform: [{ translateX: offset.value < -1 ? offset.value : 0 }],\r\n  }));\r\n\r\n  const shareStyle = useAnimatedStyle(() => ({\r\n    opacity: interpolate(\r\n      offset.value,\r\n      [-30, -100],\r\n      [0, 1],\r\n      Extrapolation.CLAMP\r\n    ),\r\n    transform: [\r\n      {\r\n        translateX: interpolate(\r\n          offset.value,\r\n          [-20, -100],\r\n          [-1, -50],\r\n          Extrapolation.CLAMP\r\n        ),\r\n      },\r\n      // {\r\n      //   scale: interpolate(\r\n      //     offset.value,\r\n      //     [-30, -50],\r\n      //     [0, 1],\r\n      //     Extrapolation.CLAMP\r\n      //   ),\r\n      // },\r\n    ],\r\n  }));\r\n\r\n  useAnimatedReaction(\r\n    () => {\r\n      return {\r\n        offsetValue: offset.value,\r\n        pressedValue: pressed.value,\r\n        touchValue: touchStart.value,\r\n      };\r\n    },\r\n    (result, previous) => {\r\n      var value = Math.ceil(result.offsetValue);\r\n      var value2 = result.pressedValue;\r\n      if (value < maxThreshHold + 10) {\r\n        runOnJS(setThreshHoldReached)(true);\r\n        runOnJS(setFinished)(!value2);\r\n      } else {\r\n        runOnJS(setFinished)(false);\r\n        runOnJS(setThreshHoldReached)(false);\r\n      }\r\n    }\r\n  );\r\n\r\n  return (\r\n    <GestureDetector gesture={pan}>\r\n        <TouchableWithoutFeedback\r\n          onLongPress={() => onLongPress?.()}\r\n        >\r\n          <View style={{ flex: 1, flexDirection: 'row', backgroundColor: 'green' }}>\r\n          <DraggebleItem animatedStyles={animatedStyles}>\r\n            {children}\r\n          </DraggebleItem>\r\n          <View style={{ position: 'absolute', left: 0, top: 0, backgroundColor: 'yellow', flex: 1, height: '100%', width: \"100%\", }}></View>\r\n          {/* <Animated.View\r\n              style={[\r\n                // styles.reply,\r\n                { \r\n                  minWidth: 100,\r\n                  right: -100, \r\n                  position: \"absolute\", \r\n                  height: '100%' },\r\n                shareStyle,\r\n              ]}\r\n            >\r\n              {actionContainer}\r\n            </Animated.View> */}\r\n          </View>\r\n        </TouchableWithoutFeedback>\r\n      </GestureDetector>\r\n  )\r\n}\r\n","import React from 'react'\r\nimport Animated from 'react-native-reanimated'\r\nimport { Children } from '../../types'\r\nimport { ViewStyle } from 'react-native';\r\n\r\ntype DraggebleItemProps = {\r\n  children: Children;\r\n  animatedStyles: ViewStyle\r\n}\r\n\r\nexport default function DraggebleItem(props: DraggebleItemProps) {\r\n\r\n  const {\r\n    children,\r\n    animatedStyles\r\n  } = props;\r\n\r\n  return (\r\n    <Animated.View\r\n      style={[\r\n        animatedStyles,\r\n        {\r\n          flex: 1,\r\n          borderBottomWidth: 0,\r\n          // borderColor: theme?.divider,\r\n          // backgroundColor: theme?.background.primary\r\n        },\r\n      ]}\r\n    >\r\n      {children}\r\n    </Animated.View>\r\n  )\r\n}\r\n"],"mappings":"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","names":["React","React"]}