kibana/x-pack/plugins/lens/public/drag_drop
2020-11-17 10:19:13 +01:00
..
__snapshots__ [Lens] Consistent Drag and Drop styles (#78674) 2020-10-01 11:58:23 -04:00
drag_drop.scss [Lens] Color in dimension trigger (#76871) 2020-11-17 10:19:13 +01:00
drag_drop.test.tsx [Lens] Functional tests for drag and drop (#82796) 2020-11-11 12:36:04 +01:00
drag_drop.tsx [Lens] Functional tests for drag and drop (#82796) 2020-11-11 12:36:04 +01:00
index.ts
providers.test.tsx
providers.tsx [Lens] Drag within dimension group to reorder (#80547) 2020-11-03 21:18:44 +01:00
readme.md [Lens] Drag within dimension group to reorder (#80547) 2020-11-03 21:18:44 +01:00

Drag / Drop

This is a simple drag / drop mechanism that plays nice with React.

We aren't using EUI or another library, due to the fact that Lens visualizations and datasources may or may not be written in React. Even visualizations which are written in React will end up having their own ReactDOM.render call, and in that sense will be a standalone React application. We want to enable drag / drop across React and native DOM boundaries.

Getting started

First, place a RootDragDropProvider at the root of your application.

<RootDragDropProvider>
  ... your app here ...
</RootDragDropProvider>

If you have a child React application (e.g. a visualization), you will need to pass the drag / drop context down into it. This can be obtained like so:

const context = useContext(DragContext);

In your child application, place a ChildDragDropProvider at the root of that, and spread the context into it:

<ChildDragDropProvider {...context}>
  ... your child app here ...
</ChildDragDropProvider>

This enables your child application to share the same drag / drop context as the root application.

Dragging

An item can be both draggable and droppable at the same time, but for simplicity's sake, we'll treat these two cases separately.

To enable dragging an item, use DragDrop with both a draggable and a value attribute. Property value has to be of a type object with a unique id property.

<div className="field-list">
  {fields.map((f) => (
    <DragDrop key={f.id} className="field-list-item" value={f} draggable>
      {f.name}
    </DragDrop>
  ))}
</div>

Dropping

To enable dropping, use DragDrop with both a droppable attribute and an onDrop handler attribute. Droppable should only be set to true if there is an item being dragged, and if a drop of the dragged item is supported.

const { dragging } = useContext(DragContext);

return (
  <DragDrop
    className="axis"
    droppable={dragging && canHandleDrop(dragging)}
    onDrop={(item) => onChange([...items, item])}
  >
    {items.map((x) => (
      <div>{x.name}</div>
    ))}
  </DragDrop>
);

Reordering

To create a reordering group, surround the elements from the same group with a ReorderProvider:

<ReorderProvider id="groupId">
  ... elements from one group here ...
</ReorderProvider>

The children DragDrop components must have props defined as in the example:

<ReorderProvider id="groupId">
  <div className="field-list">
    {fields.map((f) => (
      <DragDrop
        key={f.id}
        draggable
        droppable
        dragType="reorder"
        dropType="reorder"
        itemsInGroup={fields.map((f) => f.id)} // consists ids of all reorderable elements in the group, eg. ['3', '5', '1']
        value={{
          id: f.id,
        }}
        onDrop={/*handler*/}
      >
        {f.name}
      </DragDrop>
    ))}
  </div>
</ReorderProvider>