amotify
Version:
UI Component for React,NextJS,esbuild
2 lines (1 loc) • 16.2 kB
JavaScript
import{b as a,c as p,d as G,e as be}from"../../chunk-C5N2D3ZX.js";import{Fragment as Be,jsx as l,jsxs as $}from"react/jsx-runtime";import f,{useStore as ne,UUID as ge}from"jmini";import me,{useState as Re,useEffect as se}from"react";import{ExtractStyles as X,GenerateHTMLProps as xe,dragEffect as ye,useRemote as ie}from"../../@utils";import{faArrowUp as Te}from"@fortawesome/free-solid-svg-icons/faArrowUp";import{faUpDown as De}from"@fortawesome/free-solid-svg-icons/faUpDown";import{Box as K,Flex as we,FAI as _,Span as ke}from"../../atoms";import{Literal as pe,Row as q,MarkerPen as he}from"../../mols";import{Button as ce}from"../Button";import E from"../Input";import{TableClasses as Ke}from"../../@styles/componentClasses";import{faGripVertical as Se}from"@fortawesome/free-solid-svg-icons/faGripVertical";import{Tips as Ce}from"../Tips";const u={reservedKeys:["row_id","onCheckerDisabled","onDraggerDisabled","columnIdx","isSelected","isFilterMatched","isVisible","draggerIndex","onRowClick"],toSafetyHeader:t=>{let e=!!t.some(o=>o.draggable);return(t==null?void 0:t.map((o,n)=>{var d;return f.isRecord(o)||(o={key:o}),f.isString(o.key)&&(o.key=o.key.replace(/[.\s]/g,"_")),e&&(o.sortable=0,o.filterable=!1),o.columnIdx=(d=o.columnIdx)!=null?d:n,o}).toASC("columnIdx"))||[]},toSafetyBody:t=>t==null?void 0:t.map((e,r)=>{var n;let o={};return Object.entries(e).forEach(([d,c])=>{var g,i;if(f.isOneOf(d,...u.reservedKeys))return;let s=c;f.isNullish(s)||(f.isRecord(s)||(s={data:s}),f.isString(d)&&(d=d.replace(/[.\s]/g,"_")),s.sortKey=(i=(g=s.sortKey)!=null?g:String(s.data))!=null?i:"",o[d]=s)}),o=p(a({},o),{row_id:(n=e.row_id)!=null?n:r,onRowClick:e.onRowClick,isSelected:!!e.isSelected,isFilterMatched:!0,isVisible:!0,onCheckerDisabled:e.onCheckerDisabled,onDraggerDisabled:e.onDraggerDisabled,draggerIndex:r}),o}),toSafetyData:t=>{var o,n;let{header:e=[]}=t,r={datagridID:t.datagridID||ge(),sessionID:ge(),body:u.toSafetyBody(t.body||[]),filter:{keyword:t.defaultSearchKey||"",current:[]},sort:{col:-1,dir:1},paging:{rows:t.maxRows||100,total:1,current:1},draggable:!!e.some(d=>d.draggable)};{let d=e==null?void 0:e.findIndex(c=>c.defSort);d!==-1&&(r.sort.col=d,r.sort.dir=(n=(o=e[d])==null?void 0:o.sortable)!=null?n:1)}return r.draggable&&(r.sort.col=-1,r.sort.dir=0),u.updateRowMeta(r,t)},updateRowMeta:(t,e)=>{let r=a({},t);if(r.sort.col>=0&&r.sort.dir){let o=e.header[r.sort.col].key;r.sort.dir==1?r.body.toASC(o+".sortKey"):r.body.toDESC(o+".sortKey")}{let o=String(r.filter.keyword)||"";r.body.forEach(n=>{if(n.isFilterMatched=!0,!o)return;let d=e.header.some(c=>{var i;let s=n[c.key];return!s||!s.sortKey?!1:!!((i=String(s.sortKey||s.data))!=null&&i.match(new RegExp(o.escapeRegExChar(),"i")))});n.isFilterMatched=d})}{let o=r.paging.rows;r.paging.total=Math.ceil(r.body.filter(s=>s.isFilterMatched).length/o);let n=o*(r.paging.current-1),d=n+o,c=0;r.body.forEach(s=>{s.isVisible=!1,s.isFilterMatched&&(s.isVisible=c>=n&&c<d,c++)})}return r.draggable&&r.body.toASC("draggerIndex"),r},index:t=>{var i,b,H,x;let[e,r]=Re(()=>u.toSafetyData(t));se(()=>{ne.set({["reset-"+e.datagridID]:()=>{r(u.toSafetyData(t))},["refresh-"+e.datagridID]:()=>{r(y=>u.updateRowMeta(p(a({},y),{body:u.toSafetyBody(t.body)}),t))}})},[t]),se(()=>{ne.set({["rows-"+e.datagridID]:e.body}),ie.bridge(e.datagridID,{val_config:e,remoteUpdate:{paging:y=>{r(m=>u.updateRowMeta(p(a({},m),{paging:p(a({},m.paging),{current:Math.max(1,Math.min(m.paging.total,y))})}),t))},maxRow:y=>{r(m=>u.updateRowMeta(p(a({},m),{paging:p(a({},m.paging),{rows:y,current:1})}),t))},searchKey:y=>{f.interval.once(()=>{r(m=>{let w=p(a({},m),{paging:p(a({},m.paging),{current:1}),filter:p(a({},m.filter),{keyword:String(y||"").trim()})});return u.updateRowMeta(w,t)})},300,"InputSearchTime")}}})},[e]);const o=me.useRef(!1);se(()=>{if(t.onSelected){if(!o.current){o.current=!0;return}t.onSelected(e.body.filter(y=>y.isSelected))}},[(i=e==null?void 0:e.body)==null?void 0:i.filter(y=>y.isSelected).length]);const n=me.useRef(!1);se(()=>{if(t.onSorted){if(!n.current){n.current=!0;return}t.onSorted(e.sort.col,e.sort.dir)}},[(b=e==null?void 0:e.sort)==null?void 0:b.col,(H=e==null?void 0:e.sort)==null?void 0:H.dir]);let d={input:t,val_config:e,set_config:r},{className:c,style:s}=xe(t),g=(x=t.colLength)!=null?x:t.header.length;return l(K,{className:c,style:s,children:l(D.Table,{className:Ke("DataGrid"),borderRadius:"inherit",children:$(D.Body,{children:[l(u.Header,a({},d)),l(u.Body,a({},d)),l(u.Footer,a({},d))]})},[g,...t.header.map(y=>y.key),e.sessionID].join("."))})},Checker:t=>l(K,{flexCenter:!0,onClick:e=>{e.stopPropagation()},children:l(E.Checker,p(a({wrapStyles:{display:"inlineBlock"},cellStyles:{gap:0}},t),{label:!1}))}),Header:t=>{var g,i,b,H;let{input:e,val_config:r,set_config:o}=t;if(e.headerless)return null;let n="datagrid-dragger-"+r.datagridID,d=["datagrid",r.datagridID,""].join("-"),c=1+r.body.filter(x=>x.isVisible).length+ +!!e.footer,s=(g=e.colLength)!=null?g:e.header.length;return l(ye.DropArea,p(a({jsxElement:D.Row,id:d},e.rowStyles),{dragInfo:{type:n,id:String(((H=(b=(i=r.body)==null?void 0:i.filter(x=>x.isFilterMatched))==null?void 0:b[0])==null?void 0:H.draggerIndex)||0),marker:"bottom"},children:e.header.toASC("columnIdx").map((x,y)=>{var re,oe,le,k,j,F;let[m,w]=X(x),te=w,{isTH:S,key:C,label:M,onLabelRender:B,columnIdx:Y,checkable:N,draggable:J,defSort:de,sortable:P,filterable:A,isHidden:v}=te,T=G(te,["isTH","key","label","onLabelRender","columnIdx","checkable","draggable","defSort","sortable","filterable","isHidden"]);if(v)return null;let I={rowIdx:0,colIdx:y,topIdx:0,leftIdx:y,rightIdx:s-y-1,bottomIdx:c-1,isHeader:!0,isBody:!1,isFooter:!1},Z=J,V=P!=0,O=y==r.sort.col,Q=f.deepMerge(f.deepCopy(e.cellStyles),fe(I,{}),(re=e.cellStyles)==null?void 0:re.onHeader,!I.leftIdx&&((oe=e.cellStyles)==null?void 0:oe.onLeft),!I.rightIdx&&((le=e.cellStyles)==null?void 0:le.onRight),!I.topIdx&&((k=e.cellStyles)==null?void 0:k.onTop),!I.bottomIdx&&((j=e.cellStyles)==null?void 0:j.onBottom),m);e.onCellStyles&&(Q=e.onCellStyles(I,Q||{}));let U=[],ee=[];if(Z&&U.push(l(ce.Clear.S,{ssSphere:2.5,fontColor:"theme",onMouseOver:h=>{Ce.open(h.currentTarget,$(pe.Mini,{children:[l(_,{icon:Se}),"\u30C9\u30E9\u30C3\u30B0\u3067\u5217\u306E\u9806\u756A\u3092\u5909\u66F4"]}),22)},onMouseLeave:h=>Ce.abort(),onClick:h=>{h.stopPropagation()},children:l(_.QuestionCircle,{})},"drag")),N){let h=l(u.Checker,{value:r.body.every(R=>R.isSelected),onUpdateValue:R=>{o(L=>{let z=a({},L);return z.body.forEach(ae=>{ae.isFilterMatched&&(ae.onCheckerDisabled||(ae.isSelected=!!R))}),z})}},"check");N=="left"?U.push(h):ee.push(h)}return V&&U.push(l(_,{fontSize:"1.mini",fontColor:"theme",opacity:O?"max":"low",transition:"middle",xcss:{transform:O&&r.sort.dir==-1?"rotate(180deg)":"none"},icon:O?Te:De},"sort")),l(D.Cell,p(a(a({isTH:!!S,ssPushable:!!P},X(Q||{})[0]),T),{className:[e.cellClassName,T.className].join(" "),onClick:h=>{T.onClick&&T.onClick(h),e.onCellClick&&e.onCellClick(I,h),V&&o(R=>{let L=a({},R);return L.sort={col:y,dir:O?R.sort.dir*-1:P},u.updateRowMeta(L,e)})},children:$(q.Left,{gap:"1/3",height:1,children:[U,(F=B==null?void 0:B(C))!=null?F:l(K,{flexSizing:0,children:M!=null?M:C}),ee]})}),[y,x.key].join("/"))})}))},Body:t=>{var s,g;let{input:e,val_config:r,set_config:o}=t,n=r.body.filter(i=>i.isVisible),d=+!e.headerless+n.length+ +!!e.footer,c=(s=e.colLength)!=null?s:e.header.length;return n.length?l(Be,{children:n.map((i,b)=>{let{onCheckerDisabled:H,onDraggerDisabled:x}=i,y=b;e.headerless||(y+=1);let m="datagrid-dragger-"+r.datagridID,w=["datagrid",r.datagridID,i.row_id].join("-");return l(ye.DropArea,p(a({jsxElement:D.Row,id:w,ssPushable:!!e.onRowClick||!!i.onRowClick},e.rowStyles),{onClick:S=>{i.onRowClick&&i.onRowClick(S),e.onRowClick&&e.onRowClick(i,S)},dragInfo:{type:m,id:String(i.row_id||""),disabled:!r.draggable,marker:"bottom"},children:e.header.toASC("columnIdx").map((S,C)=>{var U,ee,te,re,oe,le;let M=S.draggable,B=i[S.key];if(!B)return null;let[Y,N]=X(B),Q=N,{isTH:J,sortKey:de,data:P,label:A,onLabelRender:v}=Q,T=G(Q,["isTH","sortKey","data","label","onLabelRender"]),I={rowIdx:y,colIdx:C,topIdx:y,leftIdx:C,rightIdx:c-C-1,bottomIdx:d-y-1,isHeader:!1,isBody:!0,isFooter:!1},Z=f.deepMerge(f.deepCopy(e.cellStyles),fe(I,{}),(U=e.cellStyles)==null?void 0:U.onBody,!I.leftIdx&&((ee=e.cellStyles)==null?void 0:ee.onLeft),!I.rightIdx&&((te=e.cellStyles)==null?void 0:te.onRight),!I.topIdx&&((re=e.cellStyles)==null?void 0:re.onTop),!I.bottomIdx&&((oe=e.cellStyles)==null?void 0:oe.onBottom),Y);e.onCellStyles&&(Z=e.onCellStyles(I,Z||{}));let V=[],O=[];return f.scope(()=>{if(M){if(i.onDraggerDisabled){V.push(i.onDraggerDisabled());return}V.push(l(ce.Clear.S,{tabIndex:-1,isRounded:!0,ssSphere:2.5,fontColor:"6.clear",onPointerDown:k=>{let j=f("#"+w)[0],F=j.cloneNode(!0);F.style.width=j.offsetWidth+"px",ye.Start(m,{dragElement:F,startEvent:k,originId:w,horizontal:!1},h=>be(void 0,null,function*(){if(!h.end||!h.onDropArea)return;let R=[...r.body],L=R.findIndex(W=>W.row_id==i.row_id);if(L==-1)return;let z=R.findIndex(W=>W.row_id==h.id);if(z<L&&z++,L==z)return;let ae=R.splice(L,1)[0];R.splice(z,0,ae),R.forEach((W,Ie)=>{W.draggerIndex=Ie}),e.onDragged&&e.onDragged(R),o(W=>p(a({},W),{body:R}))}))},children:l(q.Center,{gap:"1/4",children:l(_,{icon:Se})})},"drag"))}}),f.scope(()=>{if(!S.checkable)return;let k=l(u.Checker,{override:"force",value:!!i.isSelected,onUpdateValue:j=>{o(F=>p(a({},F),{body:F.body.map(h=>(h.row_id==i.row_id&&(h.isSelected=!!j),h))}))}},"check");i.onCheckerDisabled&&(k=i.onCheckerDisabled()),S.checkable=="left"?V.push(k):O.push(k)}),l(D.Cell,p(a(a({isTH:!!J},X(Z||{})[0]),T),{className:[e.cellClassName,T.className].join(" "),onClick:k=>{T.onClick&&T.onClick(k),e.onCellClick&&e.onCellClick(I,k)},children:$(q.Left,{gap:"1/3",height:1,children:[V,(le=v==null?void 0:v(P))!=null?le:l(K,{flexSizing:0,children:he(A!=null?A:String(P),r.filter.keyword)}),O]})}),[C,S.key].join("/"))})}),[i.row_id,y].join("."))})}):l(D.Row,p(a({},e.rowStyles),{children:l(D.Cell,{colSpan:c,padding:1,children:(g=e.onNoRecordsRender)==null?void 0:g.call(e)})}))},Footer:t=>{var c;let{input:e,val_config:r,set_config:o}=t;if(!e.footer)return null;let n=+!e.headerless+r.body.filter(s=>s.isVisible).length+1,d=(c=e.colLength)!=null?c:e.header.length;return l(D.Row,p(a({},e.rowStyles),{children:e.header.toASC("columnIdx").map((s,g)=>{var Y,N,J,de,P,A,v;let i=e.footer[s.key];if(!i)return null;f.isRecord(i)||(i={data:i});let[b,H]=X(i),B=H,{isTH:x,data:y,label:m,onLabelRender:w}=B,S=G(B,["isTH","data","label","onLabelRender"]),C={rowIdx:n-1,colIdx:g,topIdx:n-1,leftIdx:g,rightIdx:d-g-1,bottomIdx:0,isHeader:!1,isBody:!1,isFooter:!0},M=f.deepMerge(f.deepCopy(e.cellStyles),fe(C,{}),(Y=e.cellStyles)==null?void 0:Y.onBody,(N=e.cellStyles)==null?void 0:N.onFooter,!C.leftIdx&&((J=e.cellStyles)==null?void 0:J.onLeft),!C.rightIdx&&((de=e.cellStyles)==null?void 0:de.onRight),!C.topIdx&&((P=e.cellStyles)==null?void 0:P.onTop),!C.bottomIdx&&((A=e.cellStyles)==null?void 0:A.onBottom),b);return e.onCellStyles&&(M=e.onCellStyles(C,M||{})),l(D.Cell,p(a(a({isTH:!!x},X(M||{})[0]),S),{className:[e.cellClassName,S.className].join(" "),onClick:T=>{S.onClick&&S.onClick(T),e.onCellClick&&e.onCellClick(C,T)},children:l(K,{flexSizing:0,children:(v=w==null?void 0:w(y))!=null?v:he(m!=null?m:String(y),r.filter.keyword)})}),[g,s.key].join("/"))})}))}},fe=(t,e)=>{let r=a({},e);return t.topIdx||(r.borderTop="unset"),t.bottomIdx||(r.borderBottom="unset"),t.rightIdx||(r.borderRight="unset"),t.leftIdx||(r.borderLeft="unset"),t.topIdx||(t.leftIdx||(r.borderTopLeftRadius="inherit"),t.rightIdx||(r.borderTopRightRadius="inherit")),t.bottomIdx||(t.leftIdx||(r.borderBottomLeftRadius="inherit"),t.rightIdx||(r.borderBottomRightRadius="inherit")),r},Me=t=>(t=a({datagridID:ge(),tone:"border",maxRows:100,onNoRecordsRender:()=>l(q.Center,{children:l(pe.Mini,{fontColor:"4.thin",children:"(\u30C7\u30FC\u30BF\u306A\u3057)"})})},t),t.rowStyles=a({backgroundColor:"layer.0"},t.rowStyles),t.cellStyles=a(p(a({},f.scope(()=>{if(!t.tone)return{};let e={};return f.isOneOf(t.tone,"border","border.horizontal")&&(e.borderBottom="2.normal"),f.isOneOf(t.tone,"border","border.vertical")&&(e.borderRight="2.normal"),e})),{position:"relative",padding:["1/3","2/3"],transition:"short"}),t.cellStyles),t.tone&&(t=a({border:!0,borderRadius:"2.tone.secondary",backgroundColor:"layer.1"},t)),t.header=u.toSafetyHeader(t.header||[]),t.header.forEach((e,r)=>{var o;e.sortable=(o=e.sortable)!=null?o:1,e.checkable===!0&&(e.checkable="left")}),l(u.index,a({},t))),ue={getBodyRows:t=>ne.get("rows-"+t)||[],toSafetyBody:u.toSafetyBody,reset:t=>{var e;(e=ne.get("reset-"+t))==null||e()},refreshBody:t=>{var e;(e=ne.get("refresh-"+t))==null||e()},reservedKeys:u.reservedKeys,Table:t=>l(K,p(a({htmlTag:"table",borderRadius:"inherit"},t),{border:t.border})),Head:t=>l(K,a({htmlTag:"thead",borderRadius:"inherit"},t)),Body:t=>l(K,a({htmlTag:"tbody",borderRadius:"inherit"},t)),Row:t=>l(K,a({htmlTag:"tr",borderRadius:"inherit"},t)),TH:t=>l(K,a({htmlTag:"th"},t)),TD:t=>l(K,a({htmlTag:"td"},t)),Cell:t=>{let o=t,{isTH:e}=o,r=G(o,["isTH"]);return e?l(ue.TH,a({},r)):l(ue.TD,a({},r))},RightIndicator:{data:"",label:l(q.Right,{children:l(_.AngleRight,{fontColor:"theme",fontSize:"3.paragraph"})})},SearchInput:t=>{let d=t,{datagridID:e}=d,r=G(d,["datagridID"]),o=ie.catch(t.datagridID);if(!o)return console.warn("[DataGrid] SearchInput must be used inside DataGrid."),null;let{val_config:n}=o;return l(E.TextField,p(a({label:"\u691C\u7D22...",clearButton:!0,padding:["1/2","2/3"],rightIcon:l(E.RightIcon,{ssSphere:2,fontColor:"5.translucent",right:"2/3",children:l(_.Search,{})}),value:n.filter.keyword},r),{onUpdateValidValue:(...c)=>{r.onUpdateValidValue&&r.onUpdateValidValue(...c),o.remoteUpdate.searchKey(c[0])}}))},Info:t=>{let e=ie.catch(t.datagridID);if(!e)return null;let{val_config:r}=e,o=t.totalCount||r.body.length,n=r.body.filter(c=>c.isFilterMatched).length,d=n.toRate(o,1)||0;return $(we,{verticalAlign:"baseline",gap:"1/2",fontSize:"1.mini",fontColor:"3.blur",children:[l(ke,{fontSize:"4.thirdTitle",fontColor:"theme",children:n.toLocaleString()}),"/ ",o.toLocaleString(),"\u4EF6 (",d,"%)"]})},Paging:t=>{let s=t,{datagridID:e}=s,r=G(s,["datagridID"]),o=ie.catch(e);if(!o)return null;let{val_config:n}=o,d=[];for(let g=0;g<n.paging.total;g++)d.push({value:g+1,label:(g+1).toString()});const c=g=>{let i=Math.min(Math.max(1,g),n.paging.total),b=a({},n);b.paging.current=i,o.remoteUpdate.paging(i)};return l(E.Select,p(a({emptySelect:!1,padding:["1/3","2/3"],override:"force",gap:0},r),{leftIcon:l(E.LeftIcon,{xcss:{left:2,pointerEvents:"all"},children:l(ce.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(n.paging.current==1){c(n.paging.total);return}c(n.paging.current-1)},children:l(_.ChevronLeft,{})})}),rightIcon:l(E.RightIcon,{xcss:{right:2,pointerEvents:"all"},children:l(ce.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(n.paging.current==n.paging.total){c(1);return}c(n.paging.current+1)},children:l(_.ChevronRight,{})})}),options:d.map(g=>({value:g.value||0,label:$(q.Left,{gap:"1/3",verticalAlign:"baseline",children:[g.label,$(pe.Micro,{fontColor:"4.thin",children:["/ ",n.paging.total]})]})})),value:n.paging.current,onUpdateValidValue:g=>{c(g)}}))},RowCount:t=>{let i=t,{datagridID:e}=i,r=G(i,["datagridID"]),o=ie.catch(e);if(!o)return null;let{val_config:n}=o,d=n.body.filter(b=>b.isFilterMatched).length,c=n.paging.rows,s=0,g=t.options.map(b=>(s|=+(b==c),{value:b,label:b.toString()}));return s||g.push({value:c,label:c.toString()}),l(q.Center,{gap:"1/2",children:l(E.Select,p(a({emptySelect:!1,override:"force",padding:"1/3",paddingLeft:3,paddingRight:2,pickerStyles:{xcss:{minWidth:12*9}},pickerPosition:4,leftIcon:l(E.LeftIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{left:6},children:"\u8868\u793A"}),rightIcon:l(E.RightIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{right:6},children:"\u4EF6"})},r),{value:n.paging.rows,options:g.toASC("value"),onUpdateValidValue:b=>{o.remoteUpdate.maxRow(Number(b))}}))})}},D=Object.assign(Me,ue);export{D as DataGrid,D as default,fe as onDefaultCellStyles};