carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 3.76 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useState as n,useEffect as o}from"react";import a from"invariant";import{draggable as i,dropTargetForElements as d}from"@atlaskit/pragmatic-drag-and-drop/element/adapter";import{combine as c}from"@atlaskit/pragmatic-drag-and-drop/combine";import{extractClosestEdge as l,attachClosestEdge as s}from"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";import g from"../../../__internal__/utils/helpers/tags/tags.js";import p from"../../../style/utils/filter-styled-system-padding-props.js";import{StyledDraggableItem as f,StyledItemContent as m}from"./draggable-item.style.js";import u from"../../icon/icon.component.js";import{useDragDropContext as y}from"../__internal__/drag-drop-provider.js";import{getDraggable as b,isDraggable as O,getDropTarget as j}from"../__internal__/data.js";function D(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function h(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){D(e,t,r[t])}))}return e}function v(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const x=D=>{var{id:x,index:P,children:w,py:_=1,flexDirection:E,"data-element":S,"data-role":I="draggable-item"}=D,k=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(D,["id","index","children","py","flexDirection","data-element","data-role"]);const R=String(x),L=P,A=r(null),B=y(),[C,N]=n({type:"idle"}),q=p(k),z="is-dragging"===C.type,F="is-covered"===C.type,G="is-dragging-and-left-self"===C.type;return o((()=>{const e=A.current;if(!e)return;a(B,"Expected context to be defined. Please ensure your component is within a DragDropProvider.");const{contextId:t}=B;return c(i({element:e,getInitialData:()=>b({id:R,initialIndex:L,rect:e.getBoundingClientRect(),contextId:t}),onDragStart:()=>N({type:"is-dragging"}),onDrop:()=>N({type:"idle"})}),d({element:e,getData:({input:r})=>{const n=j({id:R,contextId:t});return s(n,{element:e,input:r,allowedEdges:["top","bottom"]})},canDrop:({source:e})=>O(e.data)&&e.data.contextId===t,onDragEnter:({source:e,self:t})=>{if(!O(e.data))return;const r=l(t.data);r&&N({type:"is-covered",draggedRect:e.data.rect,closestEdge:r})},onDrag:({source:e,self:t})=>{if(!O(e.data))return;if(e.data.id===R)return;const r=l(t.data);r&&(F&&C.closestEdge===r||N({type:"is-covered",draggedRect:e.data.rect,closestEdge:r}))},onDragLeave:({source:e})=>{O(e.data)&&(e.data.id===R?N({type:"is-dragging-and-left-self"}):N({type:"idle"}))},onDrop:()=>{N({type:"idle"})}}))}),[B,R,L,F,A,C]),e(f,v(h({ref:A,isDragging:z,isDraggingAndLeftSelf:G,shadowStyling:F?{closestEdge:C.closestEdge,height:C.draggedRect.height}:void 0},g("draggable-item",{"data-element":S,"data-role":I})),{children:t(m,v(h({py:_,"data-role":"draggable-item-content",flexDirection:E},q),{children:[w,e(u,{type:"drag"})]}))}))};x.displayName="DraggableItem";export{x as default};