react-box-tools/dist/table.cjs

Box tools react components, utils and hooks

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),T=require("./clsx-CeOg4f1g.cjs"),d=require("react");require("./form-CbCMpsmd.cjs");const K=require("./checkbox-DLLQgfAc.cjs"),R=require("./ArrowUpSorted-CqDX3yj8.cjs"),G=require("./textbox-CBKvZigd.cjs"),p=d.createContext({columnKeys:[],filters:{},filterValue:()=>{},columns:{},groups:[],dataGrid:[],selectedRows:new Set,selectAll:()=>{},sortedColumn:"",sort:()=>{},sortOrder:"asc",selectRow:()=>{}}),I={dataGrid:[]},V=d.forwardRef(({columns:n,columnGroup:c,data:u,selection:l,children:a,className:b},w)=>{const r=O({columns:n,columnGroup:c,data:u}),S={...r,columnKeys:r.columnKeys,selection:l};return d.useImperativeHandle(w,()=>({dataGrid:r.dataGrid}),[r.dataGrid]),e.jsx(p.Provider,{value:S,children:e.jsx("table",{className:T.clsx(`table ${b}`),children:a(r)})})}),B=({children:n,className:c})=>{const{columns:u,groups:l,columnKeys:a,selectAll:b,selectedRows:w,dataGrid:r,sortedColumn:S,sort:m,sortOrder:v,selection:j}=d.useContext(p);return e.jsxs("thead",{className:T.clsx(`${c}`),children:[l.length>0&&e.jsxs("tr",{className:"group-row",children:[j&&e.jsx("td",{}),l.map((h,C)=>{const g=h.columns.length;return g===0?e.jsx("td",{},C):e.jsx("th",{scope:"col",colSpan:g,children:e.jsx("div",{className:"content",children:h.value})},C)})]}),e.jsxs("tr",{className:"header-row",children:[j&&e.jsx("td",{scope:"col",children:e.jsx("div",{className:"selection-col",children:e.jsx(K.CheckBox,{checked:w.size===r.length,onChange:b})})}),a.map((h,C)=>{const g=u[h];return e.jsx("th",{scope:"col",children:e.jsxs("div",{className:"content",children:[u[h].shortable&&e.jsx("div",{onClick:()=>{m(h)},children:S===h?v==="asc"?e.jsx(R.ArrowUpSortedIcon,{}):e.jsx(R.ArrowDownSortedIcon,{}):e.jsx(R.ArrowUnsortedIcon,{})}),g.text]})},C)})]}),e.jsxs("tr",{className:"control-row",children:[j&&e.jsx("td",{className:"selection-col"}),a.map((h,C)=>{const g=u[h];return e.jsx("td",{className:"content",children:g.control},C)})]}),n&&e.jsx("tr",{children:n})]})};function $({data:n,children:c,className:u}){const{columnKeys:l,selection:a,dataGrid:b,selectRow:w}=d.useContext(p),r=n||b;return e.jsxs("tbody",{className:T.clsx(`${u}`),children:[r.map((S,m)=>e.jsxs("tr",{className:"data-row",children:[a&&e.jsx("td",{className:"selection-col",children:e.jsx(K.CheckBox,{checked:S.id.selected??!1,onChange:()=>{w(S)}})}),l.map((v,j)=>e.jsx("td",{className:"content",children:S[v].value},j))]},m)),c&&e.jsx("tr",{children:c})]})}function E({data:n,children:c,className:u}){const{columnKeys:l,selection:a}=d.useContext(p);return e.jsxs("tfoot",{className:T.clsx(`${u}`),children:[n&&e.jsxs("tr",{children:[a&&e.jsx("th",{}),l.map((b,w)=>e.jsx("th",{children:n[b].value},w))]}),c,e.jsx("tr",{children:e.jsx("td",{colSpan:a?l.length+1:l.length})})]})}const H=({name:n,children:c})=>{const{filterValue:u}=d.useContext(p),l=a=>{u(n,a)};return e.jsx(e.Fragment,{children:c?c({filterValue:l}):e.jsx(G.TextBox,{onChange:a=>l(a.target.value)})})};function O({columns:n,columnGroup:c,data:u}){const[l,a]=d.useState(Object.keys(n)),[b,w]=d.useState([]),[r,S]=d.useState(null),[m,v]=d.useState("asc"),[j,h]=d.useState({}),[C,g]=d.useState(new Set),k=t=>{n[t].shortable&&(t===r?v(m==="asc"?"desc":"asc"):(S(t),v("asc")))},q=(t,x)=>{h(s=>({...s,[t]:x}))},A=()=>{g(t=>{const x=new Set(t);return t.size===N.length?(N.forEach(s=>{s.id.selected=!1}),new Set):(N.forEach(s=>{s.id.selected=!0,x.add(s.id.value)}),x)})},F=t=>{const x=t.id.value;g(s=>{const o=new Set(s);return o.has(x)?(o.delete(x),t.id.selected=!1):(o.add(x),t.id.selected=!0),o})},N=d.useMemo(()=>{const t=u.filter(x=>Object.keys(j).every(s=>{var f,y;const o=(f=j[s])==null?void 0:f.toLowerCase(),i=(y=x[s].value)==null?void 0:y.toString().toLowerCase();return i==null?void 0:i.includes(o??"")}));return r?[...t].sort((s,o)=>{const i=s[r].value??"",f=o[r].value??"";return i===null||i===""?m==="asc"?-1:1:f===null||f===""?m==="asc"?1:-1:m==="asc"?i<f?-1:i>f?1:0:i>f?-1:i<f?1:0}):t},[u,j,r,m]);return d.useEffect(()=>{if(c){let t=l.map(o=>({value:o,columns:[]}));Object.keys(c).map(o=>{const i=c[o];return t=[...t.filter(y=>!i.columns.includes(y.value)),i],null});let s=[];t.map(o=>(o.columns.length===0?s=[...s,o.value]:s=[...s,...o.columns],null)),w(t),a(s)}},[c,l]),{dataGrid:N,selectedRows:C,sort:k,filterValue:q,selectAll:A,selectRow:F,columnKeys:l,sortedColumn:r,sortOrder:m,filters:j,groups:b,columns:n}}exports.ColumnFilter=H;exports.Table=V;exports.TableBody=$;exports.TableContext=p;exports.TableFoot=E;exports.TableHead=B;exports.tableRefInit=I;exports.useTable=O;