carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 3.05 kB
JavaScript
import{jsx as e}from"react/jsx-runtime";import r,{useState as t,useRef as n,useEffect as i}from"react";import o from"invariant";import"../../style/utils/filter-styled-system-padding-props.js";import a from"../../style/utils/filter-styled-system-margin-props.js";import l from"./draggable-item/draggable-item.component.js";import{StyledDraggableContainer as d}from"./draggable-item/draggable-item.style.js";import{DragDropProvider as p}from"./__internal__/drag-drop-provider.js";import s from"../../__internal__/utils/helpers/array-move/index.js";import{extractClosestEdge as c}from"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";import{reorderWithEdge as m}from"@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge";function f(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const g=y=>{var{"data-element":b,"data-role":u="draggable-container",children:O,getOrder:j,flexDirection:x="row"}=y,h=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(y,["data-element","data-role","children","getOrder","flexDirection"]);const[v,w]=t(r.Children.toArray(O)),P=n(!0);i((()=>{P.current?P.current=!1:w(r.Children.toArray(O))}),[O]);const D=v.every((e=>{return t=e,r.isValidElement(t)&&"DraggableItem"===t.type.displayName;var t}));o(D,`\`${g.displayName}\` only accepts children of type \`${l.displayName}\`.`);const I=a(h);return e(d,(S=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){f(e,r,t[r])}))}return e}({"data-component":"draggable-container","data-element":b,"data-role":u},I),_={children:e(p,{onDrop:({dragged:e,target:r})=>{if(r){const t=c(r);if(!t)return;const n=m({list:v,startIndex:v.findIndex((r=>String(r.props.id)===e.id)),indexOfTarget:v.findIndex((e=>String(e.props.id)===r.id)),closestEdgeOfTarget:t,axis:"vertical"});w(n);const i=n.map((e=>e.props.id));null==j||j(i,e.id)}else w(s({array:v,startIndex:v.findIndex((r=>String(r.props.id)===e.id)),endIndex:e.initialIndex}))},children:v.map(((e,t)=>r.cloneElement(e,{id:e.props.id,index:t,flexDirection:x},[e.props.children])))})},_=null!=_?_:{},Object.getOwnPropertyDescriptors?Object.defineProperties(S,Object.getOwnPropertyDescriptors(_)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(_)).forEach((function(e){Object.defineProperty(S,e,Object.getOwnPropertyDescriptor(_,e))})),S));var S,_};g.displayName="DraggableContainer";export{g as default};