react-dnd#ConnectableElement TypeScript Examples

The following examples show how to use react-dnd#ConnectableElement. 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: fileitem.tsx    From utopia with MIT License 5 votes vote down vote up 
export function FileBrowserItem(props: FileBrowserItemProps) {
  const [{ isDragging }, drag, dragPreview] = useDrag(
    () => ({
      type: 'files',
      canDrag: () => canDragnDrop(props),
      collect: (monitor) => ({
        isDragging: monitor.isDragging(),
      }),
      item: () => {
        props.dispatch([
          EditorActions.switchEditorMode(
            EditorModes.insertMode(false, dragAndDropInsertionSubject([props.path])),
          ),
        ])
        return props
      },
    }),
    [props],
  )
  const [{ isOver }, drop] = useDrop(
    {
      accept: 'files',
      canDrop: () => true,
      drop: (item, monitor) => {
        onDrop(props, item)
      },
      hover: (item: FileBrowserItemProps) => {
        const targetDirectory =
          props.fileType === 'DIRECTORY' ? props.path : getParentDirectory(props.path)
        // do not trigger highlight when it tries to move to it's descendant directories
        if (targetDirectory.includes(item.path)) {
          if (props.dropTarget != null) {
            props.dispatch([EditorActions.setFilebrowserDropTarget(null)], 'leftpane')
          }
        } else {
          if (props.dropTarget !== targetDirectory) {
            props.dispatch([EditorActions.setFilebrowserDropTarget(targetDirectory)], 'leftpane')
          }
        }
      },
      collect: (monitor) => ({
        isOver: monitor.isOver(),
      }),
    },
    [props],
  )

  const forwardedRef = (node: ConnectableElement) => drag(drop(node))

  return (
    <FileBrowserItemInner
      {...props}
      isDragging={isDragging}
      isOver={isOver}
      connectDragPreview={dragPreview}
      // eslint-disable-next-line react/jsx-no-bind
      forwardedRef={forwardedRef}
    />
  )
}
Example #2
Source File: new-canvas-controls.tsx    From utopia with MIT License 4 votes vote down vote up 
NewCanvasControls = React.memo((props: NewCanvasControlsProps) => {
  const canvasControlProps = useEditorState(
    (store) => ({
      dispatch: store.dispatch,
      editor: store.editor,
      derived: store.derived,
      canvasOffset: store.editor.canvas.roundedCanvasOffset,
      controls: store.derived.controls,
      scale: store.editor.canvas.scale,
      focusedPanel: store.editor.focusedPanel,
      transientCanvasState: store.derived.transientState,
    }),
    'NewCanvasControls',
  )

  const { localSelectedViews, localHighlightedViews, setSelectedViewsLocally } =
    useLocalSelectedHighlightedViews(
      canvasControlProps.editor.selectedViews,
      canvasControlProps.editor.highlightedViews,
      canvasControlProps.transientCanvasState,
    )

  const canvasScrollAnimation = useEditorState(
    (store) => store.editor.canvas.scrollAnimation,
    'NewCanvasControls scrollAnimation',
  )

  // Somehow this being setup and hooked into the div makes the `onDrop` call
  // work properly in `editor-canvas.ts`. I blame React DnD for this.
  const dropSpec: DropTargetHookSpec<FileBrowserItemProps, 'CANVAS', unknown> = {
    accept: 'filebrowser',
    canDrop: () => true,
  }

  const [_, drop] = useDrop(dropSpec)

  const forwardedRef = React.useCallback(
    (node: ConnectableElement) => {
      return drop(node)
    },
    [drop],
  )

  if (isLiveMode(canvasControlProps.editor.mode) && !canvasControlProps.editor.keysPressed.cmd) {
    return null
  } else {
    return (
      <DndProvider backend={HTML5Backend}>
        <div
          key='canvas-controls'
          ref={forwardedRef}
          className={
            canvasControlProps.focusedPanel === 'canvas'
              ? '  canvas-controls focused '
              : ' canvas-controls '
          }
          id='canvas-controls'
          style={{
            pointerEvents: 'initial',
            position: 'absolute',
            top: 0,
            left: 0,
            transform: 'translate3d(0, 0, 0)',
            width: `100%`,
            height: `100%`,
            zoom: canvasControlProps.scale >= 1 ? `${canvasControlProps.scale * 100}%` : 1,
            cursor: props.cursor,
            visibility: canvasScrollAnimation ? 'hidden' : 'initial',
          }}
        >
          <div
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: `${canvasControlProps.scale < 1 ? 100 / canvasControlProps.scale : 100}%`,
              height: `${canvasControlProps.scale < 1 ? 100 / canvasControlProps.scale : 100}%`,
              transformOrigin: 'top left',
              transform: canvasControlProps.scale < 1 ? `scale(${canvasControlProps.scale}) ` : '',
            }}
          >
            <NewCanvasControlsInner
              windowToCanvasPosition={props.windowToCanvasPosition}
              localSelectedViews={localSelectedViews}
              localHighlightedViews={localHighlightedViews}
              setLocalSelectedViews={setSelectedViewsLocally}
              editor={canvasControlProps.editor}
              transientState={canvasControlProps.transientCanvasState}
              dispatch={canvasControlProps.dispatch}
              canvasOffset={canvasControlProps.canvasOffset}
            />
          </div>
          <ElementContextMenu contextMenuInstance='context-menu-canvas' />
        </div>
      </DndProvider>
    )
  }
})