lucid-ui
Version:
A UI component library from Xandr.
66 lines • 2.73 kB
JavaScript
import _, { concat, slice, reverse, map } from 'lodash';
import React, { useState } from 'react';
import DragCaptureZone from './DragCaptureZone';
export default {
title: 'Utility/DragCaptureZone',
component: DragCaptureZone,
parameters: {
docs: {
description: {
component: DragCaptureZone.peek.description,
},
},
},
args: DragCaptureZone.defaultProps,
decorators: [
(Story) => (React.createElement("div", { style: { margin: '2em' } },
React.createElement(Story, null))),
],
};
/* Interactive */
export const Interactive = (args) => {
const [events, setEvents] = useState([]);
const handleDragEnded = (coordinates) => {
const newEndEvents = concat(events, { type: 'end', coordinates });
setEvents([...newEndEvents]);
};
const handleDragStarted = (coordinates) => {
const newStartEvents = concat(events, { type: 'start', coordinates });
setEvents([...newStartEvents]);
};
const handleDragged = (coordinates) => {
const lastEvent = _.last(events);
const alreadyDragging = lastEvent.type === 'start';
const newDraggedEvents = concat(alreadyDragging ? events : slice(events, 0, -1), { type: 'drag', coordinates });
setEvents([...newDraggedEvents]);
};
return (React.createElement("section", { style: {
alignItems: 'center',
display: 'flex',
} },
React.createElement(DragCaptureZone, { onDrag: handleDragged, onDragEnd: handleDragEnded, onDragStart: handleDragStarted },
React.createElement("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!")),
React.createElement("div", { style: {
height: 300,
marginLeft: 50,
overflow: 'auto',
width: 600,
} }, reverse(map(events, ({ type, coordinates }, index) => (React.createElement("div", { key: index },
React.createElement("div", { style: {
fontWeight: 'bold',
} }, type),
React.createElement("div", null, `dx: ${coordinates.dX}, dy: ${coordinates.dY},
px: ${coordinates.pageX}, py: ${coordinates.pageY}`))))))));
};
//# sourceMappingURL=DragCaptureZone.stories.js.map