All files / DragCaptureZone DragCaptureZone.stories.tsx

37.5% Statements 6/16
0% Branches 0/2
16.66% Functions 1/6
37.5% Lines 6/16

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110                                                      1x 1x   1x         1x         1x                     1x                                                                                                                    
import _, { concat, slice, reverse, map } from 'lodash';
import React, { useState } from 'react';
import { Meta, Story } from '@storybook/react';
 
import DragCaptureZone, { IDragCaptureZoneProps } from './DragCaptureZone';
 
export default {
	title: 'Utility/DragCaptureZone',
	component: DragCaptureZone,
	parameters: {
		docs: {
			description: {
				component: (DragCaptureZone as any).peek.description,
			},
		},
	},
	args: DragCaptureZone.defaultProps,
	decorators: [
		(Story) => (
			<div style={{ margin: '2em' }}>
				<Story />
			</div>
		),
	],
} as Meta;
 
/* Interactive */
export const Interactive: Story<IDragCaptureZoneProps> = (args) => {
	const [events, setEvents] = useState<Array<{ type; coordinates }>>([]);
 
	const handleDragEnded = (coordinates: any) => {
		const newEndEvents = concat(events, { type: 'end', coordinates });
		setEvents([...newEndEvents]);
	};
 
	const handleDragStarted = (coordinates: any) => {
		const newStartEvents = concat(events, { type: 'start', coordinates });
		setEvents([...newStartEvents]);
	};
 
	const handleDragged = (coordinates: any) => {
		const lastEvent: any = _.last(events);
		const alreadyDragging = lastEvent.type === 'start';
 
		const newDraggedEvents = concat(
			alreadyDragging ? events : slice(events, 0, -1),
			{ type: 'drag', coordinates }
		);
		setEvents([...newDraggedEvents]);
	};
 
	return (
		<section
			style={{
				alignItems: 'center',
				display: 'flex',
			}}
		>
			<DragCaptureZone
				onDrag={handleDragged}
				onDragEnd={handleDragEnded}
				onDragStart={handleDragStarted}
			>
				<div
					style={{
						alignItems: 'center',
						backgroundColor: '#b7b7b7',
						display: 'flex',
						fontFamily: 'Helvetica, sans-serif',
						fontSize: '24px',
						fontWeight: 300,
						height: 300,
						justifyContent: 'center',
						textTransform: 'uppercase',
						width: 400,
					}}
				>
					Go wild!
				</div>
			</DragCaptureZone>
			<div
				style={{
					height: 300,
					marginLeft: 50,
					overflow: 'auto',
					width: 600,
				}}
			>
				{reverse(
					map(events, ({ type, coordinates }, index) => (
						<div key={index}>
							<div
								style={{
									fontWeight: 'bold',
								}}
							>
								{type}
							</div>
							<div>
								{`dx: ${coordinates.dX}, dy: ${coordinates.dY},
									px: ${coordinates.pageX}, py: ${coordinates.pageY}`}
							</div>
						</div>
					))
				)}
			</div>
		</section>
	);
};