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