Skip to main content

Draggable - Vivid Component

Just a wrapper around 3rd party drag and drop library: https://github.com/atlassian/react-beautiful-dnd

Components​

DraggableProvider​

Provides context to the drag and drop interactions and allows you to hook into the events (https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/drag-drop-context.md)

<DraggableProvider
  onBeforeCapture={Function}
  onBeforeDragStart={Function}
  onDragStart={Function}
  onDragUpdate={Function}
  onDragEnd={Function}
/>

Droppable​

Drop target (https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md)

<Droppable
  droppaleId={String}
  type={String} // to only allow specific draggables
>
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      {...provided.droppableProps}
      {...s.with('droppable', { droppableActive: snapshot.isDraggingOver })({
        className: provided.droppableProps?.className,
      })}
    >
      I am a droppable!
    </div>
  )}
</Droppable>

Draggable​

Defines dragable item (https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/draggable.md)

<Draggable draggableId={String} index={Int} isDragDisabled={Bool}>
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      {...provided.draggableProps}
      {...s('draggable', { draggableActive: snapshot.isDragging })}
    >
      <span {...provided.dragHandleProps}>Drag Handle</span>
      <span>My draggable</span>
    </div>
  )}
</Draggable>

Development​

Install dependencies

$ yarn

Available Commands

$ yarn start              # starts storybook, for visually testing file-upload
$ yarn test               # runs all units tests
$ yarn test:watch         # runs unit tests when files change
$ yarn build              # bundles the package for production

Todos​

Copyright © 2020 Rex Software All Rights Reserved.