Commit 7ed6d6a6 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov
Browse files

react-dnd update fixed

parent a876066e
......@@ -30,7 +30,7 @@ class ReorderTraitsStep extends StepperTemplate<IReorderTraitsStep> {
}
this.props.onGotoStep(id);
}
protected renderContent = () => (<DescriptorOrder onRef={ this.onRef } descriptors={ this.props.item.descriptors }/>);
protected renderContent = () => (<DescriptorOrder onRef={ this.onRef } descriptors={ this.props.item && this.props.item.descriptors }/>);
private onRef = (that) => {
this.setState({ ...this.state, childrenRef: that });
}
......
import * as React from 'react';
import {DragDropContext, DragDropContextProvider, DropTargetMonitor} from 'react-dnd';
import {DndProvider, DropTargetMonitor} from 'react-dnd';
import HTML5Backend, {NativeTypes} from 'react-dnd-html5-backend';
import TargetBox from './TargetBox';
......@@ -23,7 +23,7 @@ class FileUploader extends React.PureComponent<IFileUploaderProps, any> {
const { multiple = false } = this.props;
return (
<DragDropContextProvider backend={ HTML5Backend }>
<DndProvider backend={ HTML5Backend }>
<div>
<TargetBox
accepts={ [FILE] }
......@@ -33,9 +33,9 @@ class FileUploader extends React.PureComponent<IFileUploaderProps, any> {
multiple={ multiple }
/>
</div>
</DragDropContextProvider>
</DndProvider>
);
}
}
export default DragDropContext(HTML5Backend)(FileUploader);
export default FileUploader;
......@@ -15,7 +15,7 @@ interface ICardProps extends React.ClassAttributes<any> {
isDragging: boolean;
id: any;
text: string;
moveCard: () => void;
moveCard: (dragIndex: number, hoverIndex: number) => void;
}
const cardSource = {
......@@ -74,16 +74,14 @@ const cardTarget = {
},
};
const Card = ({
text,
isDragging,
connectDragSource,
connectDropTarget,
}: ICardProps) => {
const opacity = isDragging ? 0 : 1;
return connectDragSource(
connectDropTarget(
class DraggableCard extends React.Component<ICardProps> {
public render() {
const {text, isDragging, connectDragSource, connectDropTarget} = this.props;
const opacity = isDragging ? 0 : 1;
return connectDragSource(connectDropTarget((
<div>
<ListItem style={ { opacity } } className="list-item-rtl">
<ListItemIcon className="list-item-icon-rtl">
......@@ -93,10 +91,10 @@ const Card = ({
primary={ text }
/>
</ListItem>
</div>,
),
);
};
</div>
)));
}
}
const dropTargetWrap = DropTarget(ItemTypes.CARD, cardTarget, (connect) => ({
connectDropTarget: connect.dropTarget(),
......@@ -107,4 +105,4 @@ const dragSourceWrap = DragSource(ItemTypes.CARD, cardSource, (connect, monitor)
isDragging: monitor.isDragging(),
}));
export default dropTargetWrap(dragSourceWrap(Card));
export default dropTargetWrap(dragSourceWrap(DraggableCard));
import * as React from 'react';
import List from '@material-ui/core/List';
import { DragDropContext } from 'react-dnd';
import { DndProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';
......@@ -57,6 +57,7 @@ class DescriptorOrder extends React.PureComponent<IDescriptorOrderProps, any> {
return (
<div className="p-20">
{ descriptorsLoading && <Loading /> }
<DndProvider backend={ HTML5Backend }>
<List>
{ descriptors.map((descriptor, i) => (
<Card
......@@ -68,9 +69,10 @@ class DescriptorOrder extends React.PureComponent<IDescriptorOrderProps, any> {
/>
)) }
</List>
</DndProvider>
</div>
);
}
}
export default DragDropContext(HTML5Backend)(DescriptorOrder);
export default DescriptorOrder;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment