-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
index.js
35 lines (29 loc) · 960 Bytes
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React from 'react';
import styled from 'styled-components';
import { Spring, animated } from 'react-spring/renderprops';
const Container = styled(animated.div)`
position: fixed;
border: 1px solid ${props => props.theme.secondary};
background-color: ${props => props.theme.secondary.clearer(0.5)};
pointer-events: none;
`;
export function getBounds(startX, startY, endX, endY) {
const top = startY > endY ? endY : startY;
const left = startX > endX ? endX : startX;
const width = startX > endX ? startX - endX : endX - startX;
const height = startY > endY ? startY - endY : endY - startY;
return {
top,
height,
left,
width,
};
}
export const Selection = ({ startX, startY, endX, endY }) => {
const { top, height, left, width } = getBounds(startX, startY, endX, endY);
return (
<Spring native immediate to={{ top, height, left, width }}>
{style => <Container style={style} />}
</Spring>
);
};