70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
import React from "react";
|
|
import DragAndDrop from "./";
|
|
import Text from "../text";
|
|
|
|
export default {
|
|
title: "Components/DragAndDrop",
|
|
component: DragAndDrop,
|
|
argTypes: {
|
|
dragging: { description: "Show that the item is being dragged now." },
|
|
isDropZone: { description: "Sets the component as a dropzone" },
|
|
onDrop: {
|
|
action: "onDrop",
|
|
description:
|
|
"Occurs when the dragged element is dropped on the drop target",
|
|
},
|
|
targetFile: { action: "File: ", table: { disable: true } },
|
|
className: { description: "Accepts class" },
|
|
onMouseDown: {
|
|
description: "Occurs when the mouse button is pressed",
|
|
action: "onMouseDown",
|
|
},
|
|
children: { table: { disable: true } },
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: `Drag And Drop component can be used as Dropzone
|
|
See documentation: https://github.com/react-dropzone/react-dropzone
|
|
`,
|
|
},
|
|
source: {
|
|
code: `
|
|
import DragAndDrop from "@appserver/components/drag-and-drop";
|
|
|
|
<DragAndDrop onDrop={onDrop} style={width: 200, height: 200, border: "5px solid #999"}>
|
|
<Text style={textStyles} color="#999" fontSize="20px">
|
|
Drop items here
|
|
</Text>
|
|
</DragAndDrop>
|
|
`,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const Template = (args) => {
|
|
const onDrop = (items) => {
|
|
args.onDrop(items);
|
|
for (let file of items) {
|
|
if (file) {
|
|
args.targetFile(file.name);
|
|
}
|
|
}
|
|
};
|
|
|
|
const dropDownStyles = { margin: 16, width: 200, height: 200 };
|
|
const textStyles = { textAlign: "center", lineHeight: "9.5em" };
|
|
|
|
return (
|
|
<DragAndDrop {...args} isDropZone onDrop={onDrop} style={dropDownStyles}>
|
|
<Text style={textStyles} color="#999" fontSize="20px">
|
|
Drop items here
|
|
</Text>
|
|
</DragAndDrop>
|
|
);
|
|
};
|
|
|
|
export const Default = Template.bind({});
|
|
|