Web: Common: moved DragAndDrop component
This commit is contained in:
parent
9f3413841e
commit
28dc9efd16
@ -1,100 +0,0 @@
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import StyledDragAndDrop from "./StyledDragAndDrop";
|
||||
|
||||
class DragAndDrop extends Component {
|
||||
state = { drag: false };
|
||||
|
||||
dropRef = React.createRef();
|
||||
dragCounter = 0;
|
||||
|
||||
onDragEnter = e => {
|
||||
this.dragCounter++;
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
this.props.onDragEnter && this.props.onDragEnter(e);
|
||||
if (e.dataTransfer.items.length) {
|
||||
this.setState({ drag: true });
|
||||
}
|
||||
};
|
||||
|
||||
onDragLeave = e => {
|
||||
this.dragCounter--;
|
||||
|
||||
if (this.dragCounter === 0) {
|
||||
this.setState({ drag: false });
|
||||
if (this.props.isDropZone) {
|
||||
return false;
|
||||
}
|
||||
this.props.onDragLeave && this.props.onDragLeave(e);
|
||||
}
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
onDrop = e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.setState({ drag: false });
|
||||
this.props.onDrop && this.props.onDrop(e);
|
||||
this.dragCounter = 0;
|
||||
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
||||
e.dataTransfer.clearData();
|
||||
}
|
||||
};
|
||||
|
||||
onMouseDown = e => {
|
||||
this.props.onMouseDown && this.props.onMouseDown(e);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let div = this.dropRef.current;
|
||||
div.addEventListener("drop", this.onDrop);
|
||||
div.addEventListener("dragenter", this.onDragEnter);
|
||||
div.addEventListener("dragleave", this.onDragLeave);
|
||||
div.addEventListener("mousedown", this.onMouseDown);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
let div = this.dropRef.current;
|
||||
div.removeEventListener("drop", this.onDrop);
|
||||
div.removeEventListener("dragenter", this.onDragEnter);
|
||||
div.removeEventListener("dragleave", this.onDragLeave);
|
||||
div.removeEventListener("mousedown", this.onMouseDown);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children, dragging, isDropZone, className, ...rest } = this.props;
|
||||
const classNameProp = className ? className : "";
|
||||
|
||||
return (
|
||||
<StyledDragAndDrop
|
||||
dragging={dragging}
|
||||
className={`drag-and-drop draggable${classNameProp}`}
|
||||
drag={this.state.drag && isDropZone}
|
||||
{...rest}
|
||||
ref={this.dropRef}
|
||||
>
|
||||
{children}
|
||||
</StyledDragAndDrop>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DragAndDrop.propTypes = {
|
||||
children: PropTypes.any,
|
||||
className: PropTypes.string,
|
||||
isDropZone: PropTypes.bool,
|
||||
dragging: PropTypes.bool,
|
||||
onDragEnter: PropTypes.func,
|
||||
onDragLeave: PropTypes.func,
|
||||
onDrop: PropTypes.func,
|
||||
onMouseDown: PropTypes.func
|
||||
};
|
||||
|
||||
DragAndDrop.defaultProps = {
|
||||
dragging: false
|
||||
};
|
||||
|
||||
export default DragAndDrop;
|
||||
@ -1,43 +0,0 @@
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import withReadme from "storybook-readme/with-readme";
|
||||
import Readme from "./README.md";
|
||||
import DragAndDrop from "./";
|
||||
import { Text } from "asc-web-components";
|
||||
|
||||
storiesOf("Components| DragAndDrop", module)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add("base", () => {
|
||||
|
||||
const traverseFileTree = (item, path) => {
|
||||
if (item.isFile) {
|
||||
item.file(file => console.log("File:", path + file.name));
|
||||
} else if (item.isDirectory) {
|
||||
const dirReader = item.createReader();
|
||||
dirReader.readEntries(entries => {
|
||||
for (let i = 0; i < entries.length; i++) {
|
||||
traverseFileTree(entries[i], path + item.name + "/");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const onDrop = event => {
|
||||
console.log("onDrop", event);
|
||||
const items = event.dataTransfer.items;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const item = items[i].webkitGetAsEntry();
|
||||
if (item) {
|
||||
traverseFileTree(item, "");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const dropDownStyles = { margin: 16, width: 200, height: 200, border: "5px solid #999" };
|
||||
const textStyles = {textAlign: "center", lineHeight: "9.5em"};
|
||||
|
||||
return(
|
||||
<DragAndDrop onDrop={onDrop} style={dropDownStyles}>
|
||||
<Text style={textStyles} color="#999" fontSize="20px">Drop items here</Text>
|
||||
</DragAndDrop>
|
||||
)});
|
||||
@ -1,31 +0,0 @@
|
||||
# DragAndDrop
|
||||
|
||||
Drag And Drop component can be used as Dropzone
|
||||
|
||||
### Usage
|
||||
|
||||
```js
|
||||
import { DragAndDrop } from "asc-web-common";
|
||||
```
|
||||
|
||||
```jsx
|
||||
<DragAndDrop onDrop={onDrop} style={width: 200, height: 200, border: "5px solid #999"}>
|
||||
<Text style={textStyles} color="#999" fontSize="20px">
|
||||
Drop items here
|
||||
</Text>
|
||||
</DragAndDrop>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------- | :--------: | :------: | :----: | :-----: | ------------------------------------------------------------- |
|
||||
| `draggable` | `bool` | | | `false` | Sets the value of the draggable attribute to true |
|
||||
| `dragging` | `bool` | | | `false` | Show that the item is being dragged now. |
|
||||
| `isDropZone` | `bool` | | | `false` | Sets the component as a dropzone |
|
||||
| `onDragStart` | `function` | | | | Occurs when the user starts to drag an element |
|
||||
| `onDragEnd` | `function` | | | | Occurs when the user has finished dragging the element |
|
||||
| `onDragEnter` | `function` | | | | Occurs when the dragged element enters the drop target |
|
||||
| `onDragLeave` | `function` | | | | Occurs when the dragged element leaves the drop target |
|
||||
| `onDragOver` | `function` | | | | Occurs when the dragged element is over the drop target |
|
||||
| `onDrop` | `function` | | | | Occurs when the dragged element is dropped on the drop target |
|
||||
@ -1,13 +0,0 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledDragAndDrop = styled.div`
|
||||
/*-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;*/
|
||||
border: ${props => props.drag ? "1px dashed #bbb" : "1px solid transparent"};
|
||||
background: ${props => props.dragging ? "#F8F7BF" : "none !important"};
|
||||
`;
|
||||
|
||||
export default StyledDragAndDrop;
|
||||
@ -1 +0,0 @@
|
||||
export default from "./DragAndDrop";
|
||||
@ -1,8 +1,7 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import styled, { css } from "styled-components";
|
||||
import { utils, Scrollbar } from "asc-web-components";
|
||||
import DragAndDrop from "../../DragAndDrop";
|
||||
import { utils, Scrollbar, DragAndDrop } from "asc-web-components";
|
||||
import SelectedFrame from "./SelectedFrame";
|
||||
import isEqual from "lodash/isEqual";
|
||||
|
||||
|
||||
@ -13,5 +13,4 @@ export { default as ProfileMenu } from './ProfileMenu';
|
||||
export { default as ErrorContainer } from './ErrorContainer';
|
||||
export { default as ErrorBoundary } from './ErrorBoundary';
|
||||
export { default as FilterInput } from './FilterInput';
|
||||
export { default as MediaViewer } from './MediaViewer';
|
||||
export { default as DragAndDrop } from './DragAndDrop';
|
||||
export { default as MediaViewer } from './MediaViewer';
|
||||
Loading…
Reference in New Issue
Block a user