mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-05 15:00:30 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

move file

Browse source
This commit is contained in:
Gigiaj 2025-06-17 13:05:37 -05:00
parent 9b97d02c21
commit 1cf4dae929
1 changed files with 0 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

137
src/app/features/room/message/DraggableMessage.tsx
View file

@ -1,137 +0,0 @@
import React from 'react';
import { useSpring, animated } from '@react-spring/web';
import { useDrag } from 'react-use-gesture';
import { Icon, Icons } from 'folds';
import { MatrixClient, MatrixEvent } from 'matrix-js-sdk';
const DraggableMessageStyles = {
container: {
position: 'relative',
overflow: 'hidden',
width: '100%',
},
iconContainer: {
position: 'absolute',
top: 0,
bottom: 0,
right: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '150px',
},
messageContent: {
position: 'relative',
touchAction: 'pan-y',
backgroundColor: 'var(--folds-color-Background-Main)',
width: '100%',
},
icon: {
position: 'absolute',
},
};
export function DraggableMessage({
children,
onReply,
onEdit,
event,
mx,
}: {
children: React.ReactNode;
onReply: () => void;
onEdit: () => void;
event: MatrixEvent;
mx: MatrixClient;
}) {
const canEdit = mx.getUserId() === event.getSender();
const REPLY_THRESHOLD = 80;
const EDIT_THRESHOLD = canEdit ? 250 : Infinity;
const [{ x, replyOpacity, editOpacity, iconScale }, api] = useSpring(() => ({
x: 0,
replyOpacity: 0,
editOpacity: 0,
iconScale: 0.5,
config: { tension: 250, friction: 25 },
}));
const bind = useDrag(
({ down, movement: [x], vxvy: [vx] }) => {
if (!down) {
const finalDistance = Math.abs(x);
if (finalDistance > EDIT_THRESHOLD) {
onEdit();
} else if (finalDistance > REPLY_THRESHOLD) {
onReply();
}
}
const xTarget = down ? Math.min(0, x) : 0;
const distance = Math.abs(xTarget);
let newReplyOpacity = 0;
let newEditOpacity = 0;
let newScale = 1.0;
if (canEdit && distance > REPLY_THRESHOLD) {
newReplyOpacity = 0;
newEditOpacity = 1;
if (down && distance > EDIT_THRESHOLD) {
newScale = 1.1;
}
} else {
newReplyOpacity = 1;
newEditOpacity = 0;
newScale = 0.5 + (distance / REPLY_THRESHOLD) * 0.5;
}
if (distance < 5) {
newReplyOpacity = 0;
}
api.start({
x: xTarget,
replyOpacity: newReplyOpacity,
editOpacity: newEditOpacity,
iconScale: newScale,
});
},
{
axis: 'x',
filterTaps: true,
threshold: 10,
}
);
return (
<div style={DraggableMessageStyles.container}>
<div style={DraggableMessageStyles.iconContainer}>
<animated.div
style={{
...DraggableMessageStyles.icon,
opacity: replyOpacity,
transform: iconScale.to((s) => `scale(${s})`),
}}
>
<Icon src={Icons.ReplyArrow} size="200" />
</animated.div>
<animated.div
style={{
...DraggableMessageStyles.icon,
opacity: editOpacity,
transform: iconScale.to((s) => `scale(${s})`),
}}
>
<Icon src={Icons.Pencil} size="200" />
</animated.div>
</div>
<animated.div {...bind()} style={{ ...DraggableMessageStyles.messageContent, x }}>
{children}
</animated.div>
</div>
);
}