softchatjs-react-native
Version:
React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com
144 lines (142 loc) • 4.16 kB
JavaScript
// src/components/Draggable/index.tsx
import React2 from "react";
import {
useAnimatedStyle,
useSharedValue,
interpolate,
Extrapolation,
useAnimatedReaction,
runOnJS
} from "react-native-reanimated";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { Dimensions, Platform, TouchableWithoutFeedback, View } from "react-native";
// src/components/Draggable/DraggebleItem.tsx
import React from "react";
import Animated from "react-native-reanimated";
function DraggebleItem(props) {
const {
children,
animatedStyles
} = props;
return /* @__PURE__ */ React.createElement(
Animated.View,
{
style: [
animatedStyles,
{
flex: 1,
borderBottomWidth: 0
// borderColor: theme?.divider,
// backgroundColor: theme?.background.primary
}
]
},
children
);
}
// src/components/Draggable/index.tsx
function Draggeble(props) {
const {
disable,
onLongPress,
children,
actionContainer
} = props;
const pressed = useSharedValue(false);
const offset = useSharedValue(0);
const [finished, setFinished] = React2.useState(false);
const [threshHoldReached, setThreshHoldReached] = React2.useState(false);
const touchStart = useSharedValue({ x: 0, y: 0, time: 0 });
const touchStartX = useSharedValue(0);
const isDragging = useSharedValue(false);
const maxThreshHold = -90;
const TOUCH_SLOP = Platform.OS === "android" ? 40 : 10;
const DISTANCE_TO_ACTIVATE_PAN = 70;
const deviceWidth = Dimensions.get("window").width;
const pan = Gesture.Pan().minDistance(DISTANCE_TO_ACTIVATE_PAN).onTouchesDown((e, state) => {
touchStart.value = {
x: e.changedTouches[0].x,
y: e.changedTouches[0].y,
time: Date.now()
};
}).onTouchesMove((e, state) => {
if (disable) {
return;
}
touchStartX.value = e.changedTouches[0].x;
if (e.changedTouches[0].x + TOUCH_SLOP < touchStart.value.x) {
state.activate();
}
}).onTouchesUp((e, state) => {
state.fail();
}).onUpdate((e) => {
if (Math.abs(e.translationX) < deviceWidth * (30 / 100)) {
offset.value = e.translationX;
}
}).onFinalize(() => {
isDragging.value = false;
pressed.value = false;
});
const animatedStyles = useAnimatedStyle(() => ({
zIndex: 100,
backgroundColor: "red",
transform: [{ translateX: offset.value < -1 ? offset.value : 0 }]
}));
const shareStyle = useAnimatedStyle(() => ({
opacity: interpolate(
offset.value,
[-30, -100],
[0, 1],
Extrapolation.CLAMP
),
transform: [
{
translateX: interpolate(
offset.value,
[-20, -100],
[-1, -50],
Extrapolation.CLAMP
)
}
// {
// scale: interpolate(
// offset.value,
// [-30, -50],
// [0, 1],
// Extrapolation.CLAMP
// ),
// },
]
}));
useAnimatedReaction(
() => {
return {
offsetValue: offset.value,
pressedValue: pressed.value,
touchValue: touchStart.value
};
},
(result, previous) => {
var value = Math.ceil(result.offsetValue);
var value2 = result.pressedValue;
if (value < maxThreshHold + 10) {
runOnJS(setThreshHoldReached)(true);
runOnJS(setFinished)(!value2);
} else {
runOnJS(setFinished)(false);
runOnJS(setThreshHoldReached)(false);
}
}
);
return /* @__PURE__ */ React2.createElement(GestureDetector, { gesture: pan }, /* @__PURE__ */ React2.createElement(
TouchableWithoutFeedback,
{
onLongPress: () => onLongPress?.()
},
/* @__PURE__ */ React2.createElement(View, { style: { flex: 1, flexDirection: "row", backgroundColor: "green" } }, /* @__PURE__ */ React2.createElement(DraggebleItem, { animatedStyles }, children), /* @__PURE__ */ React2.createElement(View, { style: { position: "absolute", left: 0, top: 0, backgroundColor: "yellow", flex: 1, height: "100%", width: "100%" } }))
));
}
export {
Draggeble as default
};
//# sourceMappingURL=index.mjs.map