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