softchatjs-react-native
Version:
React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com
167 lines (164 loc) • 6.52 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/Draggable/index.tsx
var Draggable_exports = {};
__export(Draggable_exports, {
default: () => Draggeble
});
module.exports = __toCommonJS(Draggable_exports);
var import_react2 = __toESM(require("react"));
var import_react_native_reanimated2 = require("react-native-reanimated");
var import_react_native_gesture_handler = require("react-native-gesture-handler");
var import_react_native = require("react-native");
// src/components/Draggable/DraggebleItem.tsx
var import_react = __toESM(require("react"));
var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
function DraggebleItem(props) {
const {
children,
animatedStyles
} = props;
return /* @__PURE__ */ import_react.default.createElement(
import_react_native_reanimated.default.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 = (0, import_react_native_reanimated2.useSharedValue)(false);
const offset = (0, import_react_native_reanimated2.useSharedValue)(0);
const [finished, setFinished] = import_react2.default.useState(false);
const [threshHoldReached, setThreshHoldReached] = import_react2.default.useState(false);
const touchStart = (0, import_react_native_reanimated2.useSharedValue)({ x: 0, y: 0, time: 0 });
const touchStartX = (0, import_react_native_reanimated2.useSharedValue)(0);
const isDragging = (0, import_react_native_reanimated2.useSharedValue)(false);
const maxThreshHold = -90;
const TOUCH_SLOP = import_react_native.Platform.OS === "android" ? 40 : 10;
const DISTANCE_TO_ACTIVATE_PAN = 70;
const deviceWidth = import_react_native.Dimensions.get("window").width;
const pan = import_react_native_gesture_handler.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 = (0, import_react_native_reanimated2.useAnimatedStyle)(() => ({
zIndex: 100,
backgroundColor: "red",
transform: [{ translateX: offset.value < -1 ? offset.value : 0 }]
}));
const shareStyle = (0, import_react_native_reanimated2.useAnimatedStyle)(() => ({
opacity: (0, import_react_native_reanimated2.interpolate)(
offset.value,
[-30, -100],
[0, 1],
import_react_native_reanimated2.Extrapolation.CLAMP
),
transform: [
{
translateX: (0, import_react_native_reanimated2.interpolate)(
offset.value,
[-20, -100],
[-1, -50],
import_react_native_reanimated2.Extrapolation.CLAMP
)
}
// {
// scale: interpolate(
// offset.value,
// [-30, -50],
// [0, 1],
// Extrapolation.CLAMP
// ),
// },
]
}));
(0, import_react_native_reanimated2.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) {
(0, import_react_native_reanimated2.runOnJS)(setThreshHoldReached)(true);
(0, import_react_native_reanimated2.runOnJS)(setFinished)(!value2);
} else {
(0, import_react_native_reanimated2.runOnJS)(setFinished)(false);
(0, import_react_native_reanimated2.runOnJS)(setThreshHoldReached)(false);
}
}
);
return /* @__PURE__ */ import_react2.default.createElement(import_react_native_gesture_handler.GestureDetector, { gesture: pan }, /* @__PURE__ */ import_react2.default.createElement(
import_react_native.TouchableWithoutFeedback,
{
onLongPress: () => onLongPress?.()
},
/* @__PURE__ */ import_react2.default.createElement(import_react_native.View, { style: { flex: 1, flexDirection: "row", backgroundColor: "green" } }, /* @__PURE__ */ import_react2.default.createElement(DraggebleItem, { animatedStyles }, children), /* @__PURE__ */ import_react2.default.createElement(import_react_native.View, { style: { position: "absolute", left: 0, top: 0, backgroundColor: "yellow", flex: 1, height: "100%", width: "100%" } }))
));
}
//# sourceMappingURL=index.js.map