You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
713 B
35 lines
713 B
import type { CSSProperties } from 'vue';
|
|
|
|
export default function DropIndicator({
|
|
dropPosition,
|
|
dropLevelOffset,
|
|
indent,
|
|
}: {
|
|
dropPosition: -1 | 0 | 1;
|
|
dropLevelOffset: number;
|
|
indent: number;
|
|
}) {
|
|
const style: CSSProperties = {
|
|
pointerEvents: 'none',
|
|
position: 'absolute',
|
|
right: 0,
|
|
backgroundColor: 'red',
|
|
height: `${2}px`,
|
|
};
|
|
switch (dropPosition) {
|
|
case -1:
|
|
style.top = 0;
|
|
style.left = `${-dropLevelOffset * indent}px`;
|
|
break;
|
|
case 1:
|
|
style.bottom = 0;
|
|
style.left = `${-dropLevelOffset * indent}px`;
|
|
break;
|
|
case 0:
|
|
style.bottom = 0;
|
|
style.left = `${indent}`;
|
|
break;
|
|
}
|
|
return <div style={style} />;
|
|
}
|