react-native-sortables
Version:
Powerful Sortable Components for Flexible Content Reordering in React Native
91 lines (90 loc) • 2.27 kB
JavaScript
;
import React from "react";
import { StyleSheet } from 'react-native';
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
import { isPresent } from '../../utils';
import { useScreenDiagonal } from '../hooks';
import { jsx as _jsx } from "react/jsx-runtime";
export default function DebugLine({
props
}) {
const screenDiagonal = useScreenDiagonal();
const animatedStyle = useAnimatedStyle(() => {
const {
from,
thickness = 3,
to,
visible = true,
x,
y
} = props.value;
let angle = 0,
length,
tX = 0,
tY = 0;
if (from && to) {
length = Math.sqrt((to.x - from.x) ** 2 + (to.y - from.y) ** 2);
angle = Math.atan2(to.y - from.y, to.x - from.x);
tY = from.y;
tX = from.x;
} else if (isPresent(x)) {
length = 3 * screenDiagonal;
angle = Math.PI / 2;
tY = -screenDiagonal;
tX = x;
} else if (isPresent(y)) {
length = 3 * screenDiagonal;
tY = y;
tX = -screenDiagonal;
} else {
return {
display: 'none'
};
}
return {
display: visible ? 'flex' : 'none',
height: thickness,
opacity: props.value.opacity,
transform: [{
translateX: tX + Math.sin(angle) * thickness / 2
}, {
translateY: tY - Math.cos(angle) * thickness / 2
}, {
rotate: `${angle}rad`
}],
width: length
};
}, [screenDiagonal]);
const animatedInnerStyle = useAnimatedStyle(() => {
const {
color = 'black',
style = 'dashed',
thickness = 3
} = props.value;
return {
borderColor: color,
borderStyle: style,
borderWidth: thickness
};
});
return (
/*#__PURE__*/
// A tricky way to create a dashed/dotted line (render border on both sides and
// hide one side with overflow hidden)
_jsx(Animated.View, {
style: [styles.container, animatedStyle],
children: /*#__PURE__*/_jsx(Animated.View, {
style: animatedInnerStyle
})
})
);
}
const styles = StyleSheet.create({
container: {
overflow: 'hidden',
pointerEvents: 'none',
position: 'absolute',
transformOrigin: '0 0'
}
});
//# sourceMappingURL=DebugLine.js.map