amotify/dist/fn/Table/Drag.js

UI Component for React,NextJS,esbuild

import{b as e,c as h,e as P}from"../../chunk-C5N2D3ZX.js";import{Fragment as Y,jsx as a,jsxs as z}from"react/jsx-runtime";import w,{UUID as _,useStore as N}from"jmini";import{useState as j,useEffect as L}from"react";import{$$fromRoot as H}from"../../@utils";import{FAI as k}from"../../atoms";import{Button as A}from"../Button";import O from"../Tooltips";import C from"./Parts";import W from"./Wrapper";import{faGripVertical as U}from"@fortawesome/free-solid-svg-icons/faGripVertical";import{DefaultCellSystemAdjustingStyles as E}from"./cellStyling";import{TableClasses as n}from"../../@styles/componentClasses";const x={HeadRow:o=>{let{cellStyles:t={},cellClassName:i="",cellStylesCallback:s,colLength:c,head:l,rows:p}=o;if(!l)return null;let u=[];for(let d=0;d<c;d++){let f=l[d],v=C[f.type=="th"?"TH":"TD"],b={top:!0,bottom:!p.length,left:d==0,right:d==c-1,rowIndex:0,colIndex:d,isBody:!1,isHeader:!0},y=E(b),r=s?s(b):{};u.push(a(v,h(e(e(e(e({},t),y),f),r),{freeCSS:e(e(e({},t.freeCSS),r.freeCSS),f.freeCSS),className:[n("Cell"),i,f.className].join(" ")}),d))}return a(C.Row,{className:[n("Row"),n("HeadRow")].join(" "),children:u})},BodyRows:o=>{let{cellStyles:t={},cellClassName:i="",cellStylesCallback:s,head:c,rows:l,colLength:p,onOrderChanged:u}=o,[d]=j(_()),[f,v]=j({rows:l,origin:0,to:NaN}),b=[];if(f.rows.forEach((y,r)=>{let S=[];{let g={top:r==0&&!c,bottom:r==l.length-1,left:!0,right:!1,rowIndex:r,colIndex:0,isBody:!0,isHeader:!1},m=E(g),D=s?s(g):{};S.push(a(C.TH,h(e(e(e({padding:0,borderRight:!0},t),m),D),{freeCSS:e(e({},t.freeCSS),D.freeCSS),className:[n("Cell"),n("Draggable"),i].join(" "),children:a(A.Clear,{className:n("DragableButton"),fontColor:"4.thin",fontSize:"3.paragraph",margin:"auto",ssSphere:3,tabIndex:-1,onPointerDown:T=>{R.Start(T,{id:d,index:r,rows:f.rows,maxLength:l.length})},children:a(k,{icon:U})})}),"DragOrigin"))}y.forEach((g,m)=>{g=e({},g);let D=C[g.type=="th"?"TH":"TD"],T={top:!!c&&!c.length,bottom:r==l.length-1,left:!1,right:m==p-2,rowIndex:r,colIndex:m,isBody:!0,isHeader:!1},I=E(T),B=s?s(T):{};S.push(a(D,h(e(e(e(e({},t),I),g),B),{freeCSS:e(e(e({},t.freeCSS),B.freeCSS),g.freeCSS),className:[n("Cell"),i,g.className].join(" ")}),m))}),b.push(a(C.Row,{id:"TableRow-"+d+"-"+r,className:[n("Row"),n("BodyRow")].join(" "),children:S},r))}),!isNaN(f.to)){let{origin:y,to:r}=f,S=[];S.push(a(C.TH,{backgroundColor:"theme.opa.low",padding:0,borderRight:"2.normal",className:[n("Cell"),n("Draggable"),i].join(" "),children:a(k.ArrowRight,{fontColor:"theme"})},"dragButton")),f.rows[y].forEach((m,D)=>{m=e({},m);let T=C[m.type=="th"?"TH":"TD"],I={top:!1,bottom:!1,left:!1,right:!1,rowIndex:-1,colIndex:-1,isBody:!0,isHeader:!1},B=E(I),M=s?s(I):{};S.push(a(T,h(e(e(h(e({className:[n("Cell"),i,m.className].join(" ")},B),{backgroundColor:"theme.opa.low"}),M),m),{freeCSS:e(e(e({},t.freeCSS),M.freeCSS),m.freeCSS)})))}),b.splice(r,0,a(C.Row,{className:[n("Row"),n("Pre")].join(" "),children:S},"preSet"))}return L(()=>{N.set({[d]:{swap:(y,r)=>{if(r||r==0){let S=f.rows[y],g=[...f.rows];g.splice(y,1),g.splice(r-(y<r?1:0),0,S),v({rows:g,origin:0,to:NaN}),u(g.map(m=>w.Objectify(m.rowID)))}},preSet:y=>{let{origin:r,index:S}=y;v({rows:f.rows,origin:r,to:S})}}})}),L(()=>()=>{N.delete(d)},[]),a(Y,{children:b})},Drag:o=>(o=e({},o),o.colLength=o.colLength+1,o.head&&(o.head=[{children:a(A.Clear,{ssSphere:3,fontSize:"3.paragraph",fontColor:"theme",onMouseOver:t=>{O.open({parent:t.currentTarget,content:z(O.Body,{children:[a(k,{icon:U}),"\u30DC\u30BF\u30F3\u3092\u30C9\u30E9\u30C3\u30B0\u3057\u3066\u9806\u5E8F\u3092\u5909\u66F4"]})})},children:a(k.QuestionCircle,{})}),padding:[0,1],unitWidth:4},...o.head]),o.rows=o.rows.map((t,i)=>(t.rowID=w.Stringify(t.rowID||i),t)),a(C.Table,{className:n("Table"),children:z(C.Body,{children:[a(x.HeadRow,e({},o)),a(x.BodyRows,e({},o))]})}))},$=o=>a(W,h(e({type:"drag"},o),{JSXChildren:x.Drag})),R={Start:function(o,t){return P(this,null,function*(){o.stopPropagation(),o.preventDefault();let{id:i,index:s,rows:c,maxLength:l}=t;H("#TableRow-"+i+"-"+s).addClass(n("DraggerOrigin")),w(document).addEvent({eventID:"DragMouseMove",eventType:"pointermove",callback:p=>{R.Move(p,t)},options:{passive:!1}}).addEvent({eventID:"DragTouchMove",eventType:"touchmove",callback:p=>{R.Move(p,t)},options:{passive:!1}}).addEvent({eventID:"DragMouseUp",eventType:"pointerup",callback:p=>{R.End(p,t)}}).addEvent({eventID:"DragTouchEnd",eventType:"touchend",callback:p=>{R.End(p,t)}})})},Move:function(o,t){let{id:i,maxLength:s}=t,c=w.getCursor(o).y-w.getScreenSize().scrollY;for(let l=0;l<s;l++){let p=H("#TableRow-"+i+"-"+l),{top:u,bottom:d,height:f}=p.position();l==0&&c<u?t.insertIndex=0:l===s-1&&d<=c?t.insertIndex=s:c>=u&&c<d&&(t.insertIndex=l+1)}{let{index:l,insertIndex:p}=t,u=N.get(i);u&&u.preSet&&u.preSet({origin:l,index:p})}return o.stopPropagation(),o.preventDefault(),!1},End:function(o,t){let{id:i,index:s,insertIndex:c}=t,l=N.get(i);l&&l.swap&&l.swap(s,c),H("#TableRow-"+i+"-"+s).removeClass(n("DraggerOrigin")),w(document).removeEvent(["DragMouseMove","DragTouchMove","DragMouseUp","DragTouchEnd"])}};export{$ as Drag,$ as default};