@dnd-kit/sortable
Advanced tools
Comparing version 1.0.2 to 1.1.0
# @dnd-kit/sortable | ||
## 1.1.0 | ||
### Minor Changes | ||
- [`79f6088`](https://github.com/clauderic/dnd-kit/commit/79f6088dab2d4e7443743f85b329a25a023ecd87) [#144](https://github.com/clauderic/dnd-kit/pull/144) Thanks [@clauderic](https://github.com/clauderic)! - Allow consumers to determine whether to animate layout changes and when to measure nodes. Consumers can now use the `animateLayoutChanges` prop of `useSortable` to determine whether layout animations should occur. Consumers can now also decide when to measure layouts, and at what frequency using the `layoutMeasuring` prop of `DndContext`. By default, `DndContext` will measure layouts just-in-time after sorting has begun. Consumers can override this behaviour to either only measure before dragging begins (on mount and after dragging), or always (on mount, before dragging, after dragging). Pairing the `layoutMeasuring` prop on `DndContext` and the `animateLayoutChanges` prop of `useSortable` opens up a number of new possibilities for consumers, such as animating insertion and removal of items in a sortable list. | ||
### Patch Changes | ||
- Updated dependencies [[`adb7bd5`](https://github.com/clauderic/dnd-kit/commit/adb7bd58d7d95db5e450a1518541d3d71704529d), [`79f6088`](https://github.com/clauderic/dnd-kit/commit/79f6088dab2d4e7443743f85b329a25a023ecd87), [`a76cd5a`](https://github.com/clauderic/dnd-kit/commit/a76cd5abcc0b17eae20d4a6256d95b47f2e9d050)]: | ||
- @dnd-kit/core@1.2.0 | ||
## 1.0.2 | ||
@@ -4,0 +15,0 @@ |
@@ -19,2 +19,3 @@ import React from 'react'; | ||
strategy: SortingStrategy; | ||
wasSorting: boolean; | ||
} | ||
@@ -21,0 +22,0 @@ export declare const Context: React.Context<ContextDescriptor>; |
export { useSortable } from './useSortable'; | ||
export type { Arguments as UseSortableArguments } from './useSortable'; | ||
export { defaultAnimateLayoutChanges } from './defaults'; | ||
export type { AnimateLayoutChanges } from './types'; |
/// <reference types="react" /> | ||
import { UseDraggableArguments } from '@dnd-kit/core'; | ||
import { Transition } from '@dnd-kit/utilities'; | ||
import type { SortingStrategy } from '../types'; | ||
import type { AnimateLayoutChanges, SortableTransition } from './types'; | ||
export interface Arguments extends UseDraggableArguments { | ||
animateLayoutChanges?: AnimateLayoutChanges; | ||
strategy?: SortingStrategy; | ||
transition?: SortableTransition | null; | ||
} | ||
declare type SortableTransition = Pick<Transition, 'easing' | 'duration'>; | ||
export declare const defaultTransition: SortableTransition; | ||
export declare function useSortable({ disabled, id, attributes: userDefinedAttributes, strategy: localStrategy, transition: sortingTransition, }: Arguments): { | ||
export declare function useSortable({ animateLayoutChanges, attributes: userDefinedAttributes, disabled, id, strategy: localStrategy, transition, }: Arguments): { | ||
attributes: { | ||
@@ -35,4 +34,3 @@ role: string; | ||
transform: import("@dnd-kit/utilities").Transform | null; | ||
transition: string | undefined; | ||
transition: string | null; | ||
}; | ||
export {}; |
export { SortableContext, SortableContextProps } from './components'; | ||
export { useSortable } from './hooks'; | ||
export { useSortable, defaultAnimateLayoutChanges } from './hooks'; | ||
export type { UseSortableArguments, AnimateLayoutChanges } from './hooks'; | ||
export { horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, verticalListSortingStrategy, } from './strategies'; | ||
@@ -4,0 +5,0 @@ export { sortableKeyboardCoordinates } from './sensors'; |
@@ -255,3 +255,4 @@ 'use strict'; | ||
sortedRects: [], | ||
strategy: rectSortingStrategy | ||
strategy: rectSortingStrategy, | ||
wasSorting: false | ||
}); | ||
@@ -277,2 +278,4 @@ function SortableContext(_ref) { | ||
var isSorting = activeIndex !== -1; | ||
var prevSorting = React.useRef(isSorting); | ||
var wasSorting = !isSorting && prevSorting.current === true; | ||
var overIndex = over ? items.indexOf(over.id) : -1; | ||
@@ -292,2 +295,11 @@ var previousItemsRef = React.useRef(items); | ||
}, [items]); | ||
React.useEffect(function () { | ||
if (isSorting) { | ||
prevSorting.current = isSorting; | ||
} else { | ||
requestAnimationFrame(function () { | ||
prevSorting.current = isSorting; | ||
}); | ||
} | ||
}, [isSorting]); | ||
var contextValue = React.useMemo(function () { | ||
@@ -302,5 +314,6 @@ return { | ||
sortedRects: sortedRects, | ||
strategy: strategy | ||
strategy: strategy, | ||
wasSorting: wasSorting | ||
}; | ||
}, [activeIndex, containerId, disableTransforms, items, overIndex, sortedRects, useDragOverlay, strategy]); | ||
}, [activeIndex, containerId, disableTransforms, items, overIndex, sortedRects, useDragOverlay, strategy, wasSorting]); | ||
return React__default.createElement(Context.Provider, { | ||
@@ -315,2 +328,32 @@ value: contextValue | ||
var defaultAnimateLayoutChanges = function defaultAnimateLayoutChanges(_ref) { | ||
var isSorting = _ref.isSorting, | ||
index = _ref.index, | ||
newIndex = _ref.newIndex, | ||
transition = _ref.transition; | ||
if (!transition) { | ||
return false; | ||
} | ||
if (isSorting) { | ||
return true; | ||
} | ||
return newIndex !== index; | ||
}; | ||
var defaultTransition = { | ||
duration: 200, | ||
easing: 'ease' | ||
}; | ||
var transitionProperty = 'transform'; | ||
var disabledTransition = /*#__PURE__*/utilities.CSS.Transition.toString({ | ||
property: transitionProperty, | ||
duration: 0, | ||
easing: 'linear' | ||
}); | ||
var defaultAttributes = { | ||
roleDescription: 'sortable' | ||
}; | ||
/* | ||
@@ -354,6 +397,8 @@ * When the index of an item changes while sorting, | ||
} | ||
}, [rect, disabled, index, node]); | ||
}, [disabled, index, node, rect]); | ||
React.useEffect(function () { | ||
if (derivedTransform) { | ||
setDerivedtransform(null); | ||
requestAnimationFrame(function () { | ||
setDerivedtransform(null); | ||
}); | ||
} | ||
@@ -364,22 +409,11 @@ }, [derivedTransform]); | ||
var defaultTransition = { | ||
duration: 200, | ||
easing: 'ease' | ||
}; | ||
var property = 'transform'; | ||
var disabledTransition = /*#__PURE__*/utilities.CSS.Transition.toString({ | ||
property: property, | ||
duration: 0, | ||
easing: 'linear' | ||
}); | ||
var defaultAttributes = { | ||
roleDescription: 'sortable' | ||
}; | ||
function useSortable(_ref) { | ||
var disabled = _ref.disabled, | ||
var _ref$animateLayoutCha = _ref.animateLayoutChanges, | ||
animateLayoutChanges = _ref$animateLayoutCha === void 0 ? defaultAnimateLayoutChanges : _ref$animateLayoutCha, | ||
userDefinedAttributes = _ref.attributes, | ||
disabled = _ref.disabled, | ||
id = _ref.id, | ||
userDefinedAttributes = _ref.attributes, | ||
localStrategy = _ref.strategy, | ||
_ref$transition = _ref.transition, | ||
sortingTransition = _ref$transition === void 0 ? defaultTransition : _ref$transition; | ||
transition = _ref$transition === void 0 ? defaultTransition : _ref$transition; | ||
@@ -394,3 +428,4 @@ var _useContext = React.useContext(Context), | ||
useDragOverlay = _useContext.useDragOverlay, | ||
globalStrategy = _useContext.strategy; | ||
globalStrategy = _useContext.strategy, | ||
wasSorting = _useContext.wasSorting; | ||
@@ -444,5 +479,15 @@ var _useDraggable = core.useDraggable({ | ||
var prevNewIndex = React.useRef(newIndex); | ||
var transition = !sortingTransition || !isSorting && index === prevNewIndex.current ? null : sortingTransition; | ||
var shouldAnimateLayoutChanges = animateLayoutChanges({ | ||
active: active, | ||
isDragging: isDragging, | ||
isSorting: isSorting, | ||
id: id, | ||
index: index, | ||
items: items, | ||
newIndex: prevNewIndex.current, | ||
transition: transition, | ||
wasSorting: wasSorting | ||
}); | ||
var derivedTransform = useDerivedTransform({ | ||
disabled: transition === null, | ||
disabled: !shouldAnimateLayoutChanges, | ||
index: index, | ||
@@ -472,6 +517,23 @@ node: node, | ||
transform: derivedTransform != null ? derivedTransform : finalTransform, | ||
transition: derivedTransform ? disabledTransition : transition === null || shouldDisplaceDragSource ? undefined : utilities.CSS.Transition.toString(_extends({}, transition, { | ||
property: property | ||
})) | ||
transition: getTransition() | ||
}; | ||
function getTransition() { | ||
if (derivedTransform) { | ||
// Temporarily disable transitions for a single frame to set up derived transforms | ||
return disabledTransition; | ||
} | ||
if (shouldDisplaceDragSource || !transition) { | ||
return null; | ||
} | ||
if (isSorting || shouldAnimateLayoutChanges) { | ||
return utilities.CSS.Transition.toString(_extends({}, transition, { | ||
property: transitionProperty | ||
})); | ||
} | ||
return null; | ||
} | ||
} | ||
@@ -562,2 +624,3 @@ | ||
exports.arrayMove = arrayMove; | ||
exports.defaultAnimateLayoutChanges = defaultAnimateLayoutChanges; | ||
exports.horizontalListSortingStrategy = horizontalListSortingStrategy; | ||
@@ -564,0 +627,0 @@ exports.rectSortingStrategy = rectSortingStrategy; |
@@ -1,2 +0,2 @@ | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,o=require("@dnd-kit/core"),n=require("@dnd-kit/utilities");function i(e,t,r){var o=e.slice();return o.splice(r<0?o.length+r:r,0,o.splice(t,1)[0]),o}function a(e){return null!==e&&e>=0}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}var f={scaleX:1,scaleY:1},u=function(e){var t=e.layoutRects,r=e.index,o=i(t,e.overIndex,e.activeIndex),n=t[r],a=o[r];return a&&n?{x:a.offsetLeft-n.offsetLeft,y:a.offsetTop-n.offsetTop,scaleX:a.width/n.width,scaleY:a.height/n.height}:null},d={scaleX:1,scaleY:1},c=r.createContext({activeIndex:-1,containerId:"Sortable",disableTransforms:!1,items:[],overIndex:-1,useDragOverlay:!1,sortedRects:[],strategy:u}),l={duration:200,easing:"ease"},v=n.CSS.Transition.toString({property:"transform",duration:0,easing:"linear"}),h={roleDescription:"sortable"},p=[o.KeyboardCode.Down,o.KeyboardCode.Right,o.KeyboardCode.Up,o.KeyboardCode.Left];exports.SortableContext=function(e){var i,a=e.children,s=e.id,f=e.items,d=e.strategy,l=void 0===d?u:d,v=o.useDndContext(),h=v.active,p=v.overlayNode,g=v.droppableRects,x=v.over,y=v.recomputeLayouts,b=v.willRecomputeLayouts,R=n.useUniqueId("Sortable",s),w=Boolean(null!==p.rect),L=h?f.indexOf(h):-1,I=-1!==L,T=x?f.indexOf(x.id):-1,S=t.useRef(f),m=function(e,t){return e.reduce((function(e,r,o){var n=t.get(r);return n&&(e[o]=n),e}),Array(e.length))}(f,g),C=(i=S.current,!(f.join()===i.join())),D=-1!==T&&-1===L||C;n.useIsomorphicLayoutEffect((function(){C&&I&&!b&&y()}),[C,I,y,b]),t.useEffect((function(){S.current=f}),[f]);var O=t.useMemo((function(){return{activeIndex:L,containerId:R,disableTransforms:D,items:f,overIndex:T,useDragOverlay:w,sortedRects:m,strategy:l}}),[L,R,D,f,T,m,w,l]);return r.createElement(c.Provider,{value:O},a)},exports.arrayMove=i,exports.horizontalListSortingStrategy=function(e){var t,r=e.layoutRects,o=e.activeIndex,n=e.overIndex,i=e.index,a=null!=(t=r[o])?t:e.activeNodeRect;if(!a)return null;var u=function(e,t,r){var o=e[t],n=e[t-1],i=e[t+1];return n||i?r<t?n?o.offsetLeft-(n.offsetLeft+n.width):i.offsetLeft-(o.offsetLeft+o.width):i?i.offsetLeft-(o.offsetLeft+o.width):o.offsetLeft-(n.offsetLeft+n.width):0}(r,i,o);if(i===o){var d=r[n];return d?s({x:o<n?d.offsetLeft+d.width-(a.offsetLeft+a.width):d.offsetLeft-a.offsetLeft,y:0},f):null}return s(i>o&&i<=n?{x:-a.width-u,y:0}:i<o&&i>=n?{x:a.width+u,y:0}:{x:0,y:0},f)},exports.rectSortingStrategy=u,exports.rectSwappingStrategy=function(e){var t,r,o=e.activeIndex,n=e.index,i=e.layoutRects,a=e.overIndex;return n===o&&(t=i[n],r=i[a]),n===a&&(t=i[n],r=i[o]),r&&t?{x:r.offsetLeft-t.offsetLeft,y:r.offsetTop-t.offsetTop,scaleX:r.width/t.width,scaleY:r.height/t.height}:null},exports.sortableKeyboardCoordinates=function(e,t){var r=t.context,i=r.translatedRect,a=r.droppableContainers;if(p.includes(e.code)){if(e.preventDefault(),!i)return;var s=[];Object.entries(a).forEach((function(t){var r=t[0],n=t[1];if(!(null==n?void 0:n.disabled)){var a=null==n?void 0:n.node.current;if(a){var f=o.getViewRect(a);switch(e.code){case o.KeyboardCode.Down:i.top+i.height<=f.top&&s.push([r,f]);break;case o.KeyboardCode.Up:i.top>=f.top+f.height&&s.push([r,f]);break;case o.KeyboardCode.Left:i.left>=f.left+f.width&&s.push([r,f]);break;case o.KeyboardCode.Right:i.left+i.width<=f.left&&s.push([r,f])}}}}));var f=o.closestCorners(s,i);if(f){var u,d=null==(u=a[f])?void 0:u.node.current;if(d){var c=o.getViewRect(d);return n.subtract({x:c.left-(i.width-c.width),y:c.top-(i.height-c.height)})}}}},exports.useSortable=function(e){var r=e.disabled,f=e.id,u=e.attributes,d=e.strategy,p=e.transition,g=void 0===p?l:p,x=t.useContext(c),y=x.items,b=x.containerId,R=x.activeIndex,w=x.disableTransforms,L=x.sortedRects,I=x.overIndex,T=x.useDragOverlay,S=x.strategy,m=o.useDraggable({id:f,attributes:s({},h,u),disabled:r}),C=m.active,D=m.activeNodeRect,O=m.activatorEvent,N=m.attributes,E=m.setNodeRef,K=m.listeners,j=m.isDragging,k=m.over,X=m.transform,Y=y.indexOf(f),q=t.useMemo((function(){return{containerId:b,index:Y,items:y}}),[b,Y,y]),M=o.useDroppable({id:f,data:q}),B=M.rect,P=M.node,U=M.setNodeRef,V=n.useCombinedRefs(U,E),_=Boolean(C),z=_&&!w&&a(R)&&a(I),A=!T&&j,F=A&&z?X:null,G=z?null!=F?F:(null!=d?d:S)({layoutRects:L,activeNodeRect:D,activeIndex:R,overIndex:I,index:Y}):null,H=a(R)&&a(I)?i(y,R,I).indexOf(f):Y,J=t.useRef(H),Q=!g||!_&&Y===J.current?null:g,W=function(e){var r=e.rect,n=e.disabled,i=e.index,a=e.node,s=t.useState(null),f=s[0],u=s[1],d=t.useRef(i);return t.useEffect((function(){if(!n&&i!==d.current&&a.current){var e=r.current;if(e){var t=o.getBoundingClientRect(a.current),s={x:e.offsetLeft-t.offsetLeft,y:e.offsetTop-t.offsetTop,scaleX:e.width/t.width,scaleY:e.height/t.height};(s.x||s.y)&&u(s)}}i!==d.current&&(d.current=i)}),[r,n,i,a]),t.useEffect((function(){f&&u(null)}),[f]),f}({disabled:null===Q,index:Y,node:P,rect:B});return t.useEffect((function(){_&&(J.current=H)}),[_,H]),{attributes:N,activatorEvent:O,rect:B,index:Y,isSorting:_,isDragging:j,listeners:K,node:P,overIndex:I,over:k,setNodeRef:V,setDroppableNodeRef:U,setDraggableNodeRef:E,transform:null!=W?W:G,transition:W?v:null===Q||A?void 0:n.CSS.Transition.toString(s({},Q,{property:"transform"}))}},exports.verticalListSortingStrategy=function(e){var t,r=e.activeIndex,o=e.index,n=e.layoutRects,i=e.overIndex,a=null!=(t=n[r])?t:e.activeNodeRect;if(!a)return null;if(o===r){var f=n[i];return f?s({x:0,y:r<i?f.offsetTop+f.height-(a.offsetTop+a.height):f.offsetTop-a.offsetTop},d):null}var u=function(e,t,r){var o=e[t],n=e[t-1],i=e[t+1];return o?r<t?n?o.offsetTop-(n.offsetTop+n.height):i?i.offsetTop-(o.offsetTop+o.height):0:i?i.offsetTop-(o.offsetTop+o.height):n?o.offsetTop-(n.offsetTop+n.height):0:0}(n,o,r);return s(o>r&&o<=i?{x:0,y:-a.height-u}:o<r&&o>=i?{x:0,y:a.height+u}:{x:0,y:0},d)}; | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("@dnd-kit/core"),o=require("@dnd-kit/utilities");function i(e,t,r){var n=e.slice();return n.splice(r<0?n.length+r:r,0,n.splice(t,1)[0]),n}function a(e){return null!==e&&e>=0}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var f={scaleX:1,scaleY:1},u=function(e){var t=e.layoutRects,r=e.index,n=i(t,e.overIndex,e.activeIndex),o=t[r],a=n[r];return a&&o?{x:a.offsetLeft-o.offsetLeft,y:a.offsetTop-o.offsetTop,scaleX:a.width/o.width,scaleY:a.height/o.height}:null},d={scaleX:1,scaleY:1},c=r.createContext({activeIndex:-1,containerId:"Sortable",disableTransforms:!1,items:[],overIndex:-1,useDragOverlay:!1,sortedRects:[],strategy:u,wasSorting:!1}),l=function(e){return!(!e.transition||!e.isSorting&&e.newIndex===e.index)},v={duration:200,easing:"ease"},h=o.CSS.Transition.toString({property:"transform",duration:0,easing:"linear"}),g={roleDescription:"sortable"},p=[n.KeyboardCode.Down,n.KeyboardCode.Right,n.KeyboardCode.Up,n.KeyboardCode.Left];exports.SortableContext=function(e){var i,a=e.children,s=e.id,f=e.items,d=e.strategy,l=void 0===d?u:d,v=n.useDndContext(),h=v.active,g=v.overlayNode,p=v.droppableRects,x=v.over,y=v.recomputeLayouts,b=v.willRecomputeLayouts,w=o.useUniqueId("Sortable",s),R=Boolean(null!==g.rect),L=h?f.indexOf(h):-1,m=-1!==L,S=t.useRef(m),I=!m&&!0===S.current,T=x?f.indexOf(x.id):-1,C=t.useRef(f),D=function(e,t){return e.reduce((function(e,r,n){var o=t.get(r);return o&&(e[n]=o),e}),Array(e.length))}(f,p),O=(i=C.current,!(f.join()===i.join())),E=-1!==T&&-1===L||O;o.useIsomorphicLayoutEffect((function(){O&&m&&!b&&y()}),[O,m,y,b]),t.useEffect((function(){C.current=f}),[f]),t.useEffect((function(){m?S.current=m:requestAnimationFrame((function(){S.current=m}))}),[m]);var N=t.useMemo((function(){return{activeIndex:L,containerId:w,disableTransforms:E,items:f,overIndex:T,useDragOverlay:R,sortedRects:D,strategy:l,wasSorting:I}}),[L,w,E,f,T,D,R,l,I]);return r.createElement(c.Provider,{value:N},a)},exports.arrayMove=i,exports.defaultAnimateLayoutChanges=l,exports.horizontalListSortingStrategy=function(e){var t,r=e.layoutRects,n=e.activeIndex,o=e.overIndex,i=e.index,a=null!=(t=r[n])?t:e.activeNodeRect;if(!a)return null;var u=function(e,t,r){var n=e[t],o=e[t-1],i=e[t+1];return o||i?r<t?o?n.offsetLeft-(o.offsetLeft+o.width):i.offsetLeft-(n.offsetLeft+n.width):i?i.offsetLeft-(n.offsetLeft+n.width):n.offsetLeft-(o.offsetLeft+o.width):0}(r,i,n);if(i===n){var d=r[o];return d?s({x:n<o?d.offsetLeft+d.width-(a.offsetLeft+a.width):d.offsetLeft-a.offsetLeft,y:0},f):null}return s(i>n&&i<=o?{x:-a.width-u,y:0}:i<n&&i>=o?{x:a.width+u,y:0}:{x:0,y:0},f)},exports.rectSortingStrategy=u,exports.rectSwappingStrategy=function(e){var t,r,n=e.activeIndex,o=e.index,i=e.layoutRects,a=e.overIndex;return o===n&&(t=i[o],r=i[a]),o===a&&(t=i[o],r=i[n]),r&&t?{x:r.offsetLeft-t.offsetLeft,y:r.offsetTop-t.offsetTop,scaleX:r.width/t.width,scaleY:r.height/t.height}:null},exports.sortableKeyboardCoordinates=function(e,t){var r=t.context,i=r.translatedRect,a=r.droppableContainers;if(p.includes(e.code)){if(e.preventDefault(),!i)return;var s=[];Object.entries(a).forEach((function(t){var r=t[0],o=t[1];if(!(null==o?void 0:o.disabled)){var a=null==o?void 0:o.node.current;if(a){var f=n.getViewRect(a);switch(e.code){case n.KeyboardCode.Down:i.top+i.height<=f.top&&s.push([r,f]);break;case n.KeyboardCode.Up:i.top>=f.top+f.height&&s.push([r,f]);break;case n.KeyboardCode.Left:i.left>=f.left+f.width&&s.push([r,f]);break;case n.KeyboardCode.Right:i.left+i.width<=f.left&&s.push([r,f])}}}}));var f=n.closestCorners(s,i);if(f){var u,d=null==(u=a[f])?void 0:u.node.current;if(d){var c=n.getViewRect(d);return o.subtract({x:c.left-(i.width-c.width),y:c.top-(i.height-c.height)})}}}},exports.useSortable=function(e){var r=e.animateLayoutChanges,f=void 0===r?l:r,u=e.attributes,d=e.disabled,p=e.id,x=e.strategy,y=e.transition,b=void 0===y?v:y,w=t.useContext(c),R=w.items,L=w.containerId,m=w.activeIndex,S=w.disableTransforms,I=w.sortedRects,T=w.overIndex,C=w.useDragOverlay,D=w.strategy,O=w.wasSorting,E=n.useDraggable({id:p,attributes:s({},g,u),disabled:d}),N=E.active,K=E.activeNodeRect,j=E.activatorEvent,q=E.attributes,k=E.setNodeRef,X=E.listeners,Y=E.isDragging,A=E.over,M=E.transform,B=R.indexOf(p),P=t.useMemo((function(){return{containerId:L,index:B,items:R}}),[L,B,R]),U=n.useDroppable({id:p,data:P}),F=U.rect,V=U.node,_=U.setNodeRef,z=o.useCombinedRefs(_,k),G=Boolean(N),H=G&&!S&&a(m)&&a(T),J=!C&&Y,Q=J&&H?M:null,W=H?null!=Q?Q:(null!=x?x:D)({layoutRects:I,activeNodeRect:K,activeIndex:m,overIndex:T,index:B}):null,Z=a(m)&&a(T)?i(R,m,T).indexOf(p):B,$=t.useRef(Z),ee=f({active:N,isDragging:Y,isSorting:G,id:p,index:B,items:R,newIndex:$.current,transition:b,wasSorting:O}),te=function(e){var r=e.rect,o=e.disabled,i=e.index,a=e.node,s=t.useState(null),f=s[0],u=s[1],d=t.useRef(i);return t.useEffect((function(){if(!o&&i!==d.current&&a.current){var e=r.current;if(e){var t=n.getBoundingClientRect(a.current),s={x:e.offsetLeft-t.offsetLeft,y:e.offsetTop-t.offsetTop,scaleX:e.width/t.width,scaleY:e.height/t.height};(s.x||s.y)&&u(s)}}i!==d.current&&(d.current=i)}),[o,i,a,r]),t.useEffect((function(){f&&requestAnimationFrame((function(){u(null)}))}),[f]),f}({disabled:!ee,index:B,node:V,rect:F});return t.useEffect((function(){G&&($.current=Z)}),[G,Z]),{attributes:q,activatorEvent:j,rect:F,index:B,isSorting:G,isDragging:Y,listeners:X,node:V,overIndex:T,over:A,setNodeRef:z,setDroppableNodeRef:_,setDraggableNodeRef:k,transform:null!=te?te:W,transition:te?h:J||!b?null:G||ee?o.CSS.Transition.toString(s({},b,{property:"transform"})):null}},exports.verticalListSortingStrategy=function(e){var t,r=e.activeIndex,n=e.index,o=e.layoutRects,i=e.overIndex,a=null!=(t=o[r])?t:e.activeNodeRect;if(!a)return null;if(n===r){var f=o[i];return f?s({x:0,y:r<i?f.offsetTop+f.height-(a.offsetTop+a.height):f.offsetTop-a.offsetTop},d):null}var u=function(e,t,r){var n=e[t],o=e[t-1],i=e[t+1];return n?r<t?o?n.offsetTop-(o.offsetTop+o.height):i?i.offsetTop-(n.offsetTop+n.height):0:i?i.offsetTop-(n.offsetTop+n.height):o?n.offsetTop-(o.offsetTop+o.height):0:0}(o,n,r);return s(n>r&&n<=i?{x:0,y:-a.height-u}:n<r&&n>=i?{x:0,y:a.height+u}:{x:0,y:0},d)}; | ||
//# sourceMappingURL=sortable.cjs.production.min.js.map |
import React, { useRef, useEffect, useMemo, useState, useContext } from 'react'; | ||
import { useDndContext, getBoundingClientRect, useDraggable, useDroppable, getViewRect, KeyboardCode, closestCorners } from '@dnd-kit/core'; | ||
import { useUniqueId, useIsomorphicLayoutEffect, useCombinedRefs, CSS, subtract } from '@dnd-kit/utilities'; | ||
import { useUniqueId, useIsomorphicLayoutEffect, CSS, useCombinedRefs, subtract } from '@dnd-kit/utilities'; | ||
@@ -248,3 +248,4 @@ /** | ||
sortedRects: [], | ||
strategy: rectSortingStrategy | ||
strategy: rectSortingStrategy, | ||
wasSorting: false | ||
}); | ||
@@ -270,2 +271,4 @@ function SortableContext(_ref) { | ||
var isSorting = activeIndex !== -1; | ||
var prevSorting = useRef(isSorting); | ||
var wasSorting = !isSorting && prevSorting.current === true; | ||
var overIndex = over ? items.indexOf(over.id) : -1; | ||
@@ -285,2 +288,11 @@ var previousItemsRef = useRef(items); | ||
}, [items]); | ||
useEffect(function () { | ||
if (isSorting) { | ||
prevSorting.current = isSorting; | ||
} else { | ||
requestAnimationFrame(function () { | ||
prevSorting.current = isSorting; | ||
}); | ||
} | ||
}, [isSorting]); | ||
var contextValue = useMemo(function () { | ||
@@ -295,5 +307,6 @@ return { | ||
sortedRects: sortedRects, | ||
strategy: strategy | ||
strategy: strategy, | ||
wasSorting: wasSorting | ||
}; | ||
}, [activeIndex, containerId, disableTransforms, items, overIndex, sortedRects, useDragOverlay, strategy]); | ||
}, [activeIndex, containerId, disableTransforms, items, overIndex, sortedRects, useDragOverlay, strategy, wasSorting]); | ||
return React.createElement(Context.Provider, { | ||
@@ -308,2 +321,32 @@ value: contextValue | ||
var defaultAnimateLayoutChanges = function defaultAnimateLayoutChanges(_ref) { | ||
var isSorting = _ref.isSorting, | ||
index = _ref.index, | ||
newIndex = _ref.newIndex, | ||
transition = _ref.transition; | ||
if (!transition) { | ||
return false; | ||
} | ||
if (isSorting) { | ||
return true; | ||
} | ||
return newIndex !== index; | ||
}; | ||
var defaultTransition = { | ||
duration: 200, | ||
easing: 'ease' | ||
}; | ||
var transitionProperty = 'transform'; | ||
var disabledTransition = /*#__PURE__*/CSS.Transition.toString({ | ||
property: transitionProperty, | ||
duration: 0, | ||
easing: 'linear' | ||
}); | ||
var defaultAttributes = { | ||
roleDescription: 'sortable' | ||
}; | ||
/* | ||
@@ -347,6 +390,8 @@ * When the index of an item changes while sorting, | ||
} | ||
}, [rect, disabled, index, node]); | ||
}, [disabled, index, node, rect]); | ||
useEffect(function () { | ||
if (derivedTransform) { | ||
setDerivedtransform(null); | ||
requestAnimationFrame(function () { | ||
setDerivedtransform(null); | ||
}); | ||
} | ||
@@ -357,22 +402,11 @@ }, [derivedTransform]); | ||
var defaultTransition = { | ||
duration: 200, | ||
easing: 'ease' | ||
}; | ||
var property = 'transform'; | ||
var disabledTransition = /*#__PURE__*/CSS.Transition.toString({ | ||
property: property, | ||
duration: 0, | ||
easing: 'linear' | ||
}); | ||
var defaultAttributes = { | ||
roleDescription: 'sortable' | ||
}; | ||
function useSortable(_ref) { | ||
var disabled = _ref.disabled, | ||
var _ref$animateLayoutCha = _ref.animateLayoutChanges, | ||
animateLayoutChanges = _ref$animateLayoutCha === void 0 ? defaultAnimateLayoutChanges : _ref$animateLayoutCha, | ||
userDefinedAttributes = _ref.attributes, | ||
disabled = _ref.disabled, | ||
id = _ref.id, | ||
userDefinedAttributes = _ref.attributes, | ||
localStrategy = _ref.strategy, | ||
_ref$transition = _ref.transition, | ||
sortingTransition = _ref$transition === void 0 ? defaultTransition : _ref$transition; | ||
transition = _ref$transition === void 0 ? defaultTransition : _ref$transition; | ||
@@ -387,3 +421,4 @@ var _useContext = useContext(Context), | ||
useDragOverlay = _useContext.useDragOverlay, | ||
globalStrategy = _useContext.strategy; | ||
globalStrategy = _useContext.strategy, | ||
wasSorting = _useContext.wasSorting; | ||
@@ -437,5 +472,15 @@ var _useDraggable = useDraggable({ | ||
var prevNewIndex = useRef(newIndex); | ||
var transition = !sortingTransition || !isSorting && index === prevNewIndex.current ? null : sortingTransition; | ||
var shouldAnimateLayoutChanges = animateLayoutChanges({ | ||
active: active, | ||
isDragging: isDragging, | ||
isSorting: isSorting, | ||
id: id, | ||
index: index, | ||
items: items, | ||
newIndex: prevNewIndex.current, | ||
transition: transition, | ||
wasSorting: wasSorting | ||
}); | ||
var derivedTransform = useDerivedTransform({ | ||
disabled: transition === null, | ||
disabled: !shouldAnimateLayoutChanges, | ||
index: index, | ||
@@ -465,6 +510,23 @@ node: node, | ||
transform: derivedTransform != null ? derivedTransform : finalTransform, | ||
transition: derivedTransform ? disabledTransition : transition === null || shouldDisplaceDragSource ? undefined : CSS.Transition.toString(_extends({}, transition, { | ||
property: property | ||
})) | ||
transition: getTransition() | ||
}; | ||
function getTransition() { | ||
if (derivedTransform) { | ||
// Temporarily disable transitions for a single frame to set up derived transforms | ||
return disabledTransition; | ||
} | ||
if (shouldDisplaceDragSource || !transition) { | ||
return null; | ||
} | ||
if (isSorting || shouldAnimateLayoutChanges) { | ||
return CSS.Transition.toString(_extends({}, transition, { | ||
property: transitionProperty | ||
})); | ||
} | ||
return null; | ||
} | ||
} | ||
@@ -553,3 +615,3 @@ | ||
export { SortableContext, arrayMove, horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy }; | ||
export { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy }; | ||
//# sourceMappingURL=sortable.esm.js.map |
{ | ||
"name": "@dnd-kit/sortable", | ||
"version": "1.0.2", | ||
"version": "1.1.0", | ||
"description": "Official sortable preset and sensors for dnd kit", | ||
@@ -29,3 +29,3 @@ "author": "Claudéric Demers", | ||
"dependencies": { | ||
"@dnd-kit/core": "^1.0.2", | ||
"@dnd-kit/core": "^1.2.0", | ||
"@dnd-kit/utilities": "^1.0.2", | ||
@@ -32,0 +32,0 @@ "tslib": "^2.0.0" |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
155957
33
1213
Updated@dnd-kit/core@^1.2.0