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>
);
};
|