react-beautiful-dnd#DragUpdate TypeScript Examples

The following examples show how to use react-beautiful-dnd#DragUpdate. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Tree.tsx    From react-beautiful-tree with Apache License 2.0 6 votes vote down vote up 
onDragUpdate = (update: DragUpdate) => {
    const { onExpand } = this.props
    const { flattenedTree } = this.state
    if (!this.dragState) {
      return
    }

    this.expandTimer.stop()
    if (update.combine) {
      const { draggableId } = update.combine
      const item: FlattenedItem | undefined = getItemById(
        flattenedTree,
        draggableId
      )
      if (item && this.isExpandable(item)) {
        this.expandTimer.start(() => onExpand(draggableId, item.path))
      }
    }
    this.dragState = {
      ...this.dragState,
      destination: update.destination,
      combine: update.combine,
    }
  }
Example #2
Source File: index.tsx    From peterportal-client with MIT License 4 votes vote down vote up 
RoadmapPage: FC = () => {
  const dispatch = useAppDispatch();
  const showSearch = useAppSelector(state => state.roadmap.showSearch);

  const onDragEnd = useCallback((result: DropResult) => {
    if (result.reason === 'DROP') {
      // no destination or dragging to search bar
      if (!result.destination || result.destination.droppableId === 'search') {
        // removing from quarter
        if (result.source.droppableId != 'search') {
          let [yearIndex, quarterIndex] = result.source.droppableId.split('-');
          dispatch(deleteCourse({
            yearIndex: parseInt(yearIndex),
            quarterIndex: parseInt(quarterIndex),
            courseIndex: result.source.index
          }))
        }
        return;
      }

      let movePayload = {
        from: {
          yearIndex: -1,
          quarterIndex: -1,
          courseIndex: -1,
        },
        to: {
          yearIndex: -1,
          quarterIndex: -1,
          courseIndex: -1
        }
      };

      console.log(result.source.droppableId, '=>', result.destination.droppableId)

      // roadmap to roadmap has source
      if (result.source.droppableId != 'search') {
        let [yearIndex, quarterIndex] = result.source.droppableId.split('-');
        movePayload.from.yearIndex = parseInt(yearIndex);
        movePayload.from.quarterIndex = parseInt(quarterIndex);
        movePayload.from.courseIndex = result.source.index;
      }
      // search to roadmap has no source (use activeCourse in global state)      

      // both have destination
      let [yearIndex, quarterIndex] = result.destination.droppableId.split('-');
      movePayload.to.yearIndex = parseInt(yearIndex);
      movePayload.to.quarterIndex = parseInt(quarterIndex);
      movePayload.to.courseIndex = result.destination.index;

      console.log(movePayload);
      dispatch(moveCourse(movePayload));
    }
  }, []);

  const onDragUpdate = useCallback((initial: DragUpdate) => {
    console.log(initial)
  }, []);

  // do not conditionally renderer because it would remount planner which would discard unsaved changes
  const mobileVersion = <>
    <div className={`main-wrapper mobile ${showSearch ? 'hide' : ''}`}>
      <Planner />
    </div>
    <div className={`sidebar-wrapper mobile ${!showSearch ? 'hide' : ''}`}>
      <SearchSidebar />
    </div>
  </>

  const desktopVersion = <>
    <div className='main-wrapper'>
      <Planner />
    </div>
    <div className='sidebar-wrapper'>
      <SearchSidebar />
    </div>
  </>

  return (
    <>
      <div className='roadmap-page'>
        <AddCoursePopup />
        <DragDropContext onDragEnd={onDragEnd} onDragUpdate={onDragUpdate}>
          {isMobile && mobileVersion}
          {!isMobile && desktopVersion}
        </DragDropContext>
      </div>
    </>
  );
}