Skip to content

Release 0.2.0

Compare
Choose a tag to compare
@martinpengellyphillips martinpengellyphillips released this 12 Jul 21:03
· 149 commits to main since this release

Update to work with Solid 1.0 and streamline the interface with new directives.

Added

  • Update createDraggable, createDroppable and createSortable to provide
    a custom directive. These can be used with the Solid use:___ syntactic sugar
    for common usage setup - no need to pass refs and props around:
const MyComponent = (props) => {
  const draggable = createDraggable({ id: props.id });
  return <div use:draggable>Drag me!</div>;
};

If finer control needed, the underlying primitives are accessible by property
lookup on the directive::

const MyComponent = (props) => {
  const draggable = createDraggable({ id: props.id });
  return (
    <div ref={draggable.ref}>
      <div {...draggable.dragActivators}>Drag Handle</div>
      Drag me!
    </div>
  );
};
  • Automatically detect and register usage of DragOverlay. Add to
    DragDropContext state a usingDragOverlay property that can be checked.
  • Return a new function displace as part of the DragDropContext that can be
    used to set the transform for a droppable or draggable. See usage in
    createSortable for example.

Changed

  • Update to work with Solid 1.0! This is a breaking change that requires
    updating peer dependency of Solid to 1.0 or greater.
  • Refactor isActiveDraggable and isActiveDroppable to appear as resolved
    properties rather than functions to call (this is more consistent with the
    rest of interface). E.g. draggable.isActiveDraggable()
    -> draggable.isActivateDraggable.
  • Refactor sensor interface to use event type rather than handler name. For
    example, make createPointerSensor use pointerdown rather than
    onPointerDown for activation. As part of this, add a asHandlers option to
    draggableActivators to control whether to return object with on___ form or
    not (default is false).
  • Rename occurrences of translate to transform, which feels a more
    appropriate name. E.g. translateStyle should now be transformStyle and the
    translate property returned from create___ calls should be called
    transform.
  • Assume valid transform value is always present. In particular,
    transformStyle no longer checks for a null transform value.
  • Improve vertical sort algorithm to better handle arbitrary gaps (such as those
    created by the CSS gap property on flexbox). As part of this, remove the now
    redundant outerHeight and outerWidth properties from the layout data
    returned by elementLayout.
  • Update README.md to reflect simpler directive interface for draggables and
    droppables.

Removed

  • Remove support for explicitly managing droppable disabled state. The current
    implementation feels limiting and potentially confusing. For example, it
    prevents detecting when a draggable is over a disabled droppable and styling
    it appropriately. Note that a similar effect to disabled can be achieved by
    determining drop suitability in onDragEnd.