@@ -266,8 +293,6 @@ class Discipline extends React.Component {
- )}
-
);
}
let item = node.name;
@@ -277,16 +302,12 @@ class Discipline extends React.Component {
}
return (
-
- {(provided) => (
+ {closestEdge && }
{item}
- )}
-
);
}
}
@@ -320,6 +339,7 @@ Discipline.propTypes = {
subAnalysisOption: PropTypes.number,
limited: PropTypes.bool.isRequired,
connected: PropTypes.bool.isRequired,
+ flash: PropTypes.bool,
onDisciplineUpdate: PropTypes.func.isRequired,
onDisciplineDelete: PropTypes.func.isRequired,
onSubAnalysisSearch: PropTypes.func.isRequired,
@@ -329,30 +349,56 @@ class DisciplinesEditor extends React.Component {
constructor(props) {
super(props);
const { db } = this.props;
- this.state = { nodes: db.getDisciplines() };
+ this.state = { nodes: db.getDisciplines(), flashId: null };
+ }
- this.onDragEnd = this.onDragEnd.bind(this);
+ componentDidMount() {
+ this.cleanupMonitor = monitorForElements({
+ onDrop: ({ source, location }) => {
+ const target = location.current.dropTargets[0];
+ if (!target) return;
+
+ const sourceIndex = source.data.index;
+ const targetIndex = target.data.index;
+ const sourceId = source.data.id;
+ const closestEdge = extractClosestEdge(target.data);
+
+ if (closestEdge === null) return;
+
+ const destinationIndex = getReorderDestinationIndex({
+ startIndex: sourceIndex,
+ indexOfTarget: targetIndex,
+ closestEdgeOfTarget: closestEdge,
+ axis: 'vertical',
+ });
+
+ if (sourceIndex === destinationIndex) return;
+
+ this.setState({ flashId: sourceId });
+ setTimeout(() => this.setState({ flashId: null }), 700);
+
+ this.props.onDisciplineUpdate(
+ this.props.db.nodes[sourceIndex + 1],
+ { position: destinationIndex + 1 },
+ );
+ },
+ });
}
- onDragEnd(result) {
- if (!result.destination) {
- return;
+ componentWillUnmount() {
+ if (this.cleanupMonitor) {
+ this.cleanupMonitor();
}
- const { db: { nodes }, onDisciplineUpdate } = this.props;
- onDisciplineUpdate(
- nodes[result.source.index + 1],
- { position: result.destination.index + 1 },
- );
}
// Take into account in this.state of discipline changes coming
// from Discipline components that should arrive through new props
- static getDerivedStateFromProps(nextProps) {
- return { nodes: nextProps.db.getDisciplines() };
+ static getDerivedStateFromProps(nextProps, prevState) {
+ return { nodes: nextProps.db.getDisciplines(), flashId: prevState.flashId };
}
render() {
- const { nodes } = this.state;
+ const { nodes, flashId } = this.state;
const {
db, api,
name,
@@ -373,6 +419,7 @@ class DisciplinesEditor extends React.Component {
node={node}
limited={limited}
connected={db.isConnected(node.id)}
+ flash={flashId === node.id}
onDisciplineUpdate={onDisciplineUpdate}
onDisciplineDelete={onDisciplineDelete}
onSubAnalysisSearch={onSubAnalysisSearch}
@@ -402,23 +449,9 @@ class DisciplinesEditor extends React.Component {
Disciplines
{nbNodes}
-