tinybase/min/ui-react-dom/with-schemas/index.js

A reactive data store and sync engine.

import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import n from"react";import{useRowIds as r,useTableCellIds as a,useRowCount as o,useSortedRowIds as s,useValueIds as c,ValueView as i,useIndexesOrIndexesById as d,useSliceRowIds as h,useRelationshipsOrRelationshipsById as u,useResultRowIds as m,useResultTableCellIds as p,useResultRowCount as b,useResultSortedRowIds as C,useStoreOrStoreById as I,useSetCellCallback as g,useCell as f,useSetValueCallback as y,useValue as N,CellView as w,ResultCellView as k,useRemoteRowId as v}from"../../ui-react/with-schemas/index.js";const T=e=>typeof e,S=T(""),x=T(!0),R=T(0),q="Value",E="currentTarget",P="value",O=Math.min,V=isFinite,j=e=>null==e,A=(e,l)=>e.map(l),L=(e,l,t,n)=>e==S?l:e==R?t:n,M=Object,F=M.entries,$=(e=[])=>M.fromEntries(e),z=(e,l)=>A(F(e),(([e,t])=>l(t,e))),{PureComponent:B,createContext:D,useCallback:G,useContext:H,useEffect:J,useLayoutEffect:K,useMemo:Q,useRef:U,useState:W,useSyncExternalStore:X}=n,Y=(e,...l)=>j(e)?{}:e(...l),Z="editable",_=(e,l)=>A(a(e,l),(l=>e+"."+l)),ee=(e,l,t)=>{const n=G(e,l);return t?n:void 0},le=(...e)=>Q((()=>e),e),te=(e,l)=>Q((()=>({store:e,tableId:l})),[e,l]),ne=(e,l)=>Q((()=>({queries:e,queryId:l})),[e,l]),re=(l,t=!1,n,r=0,a,o,s,c)=>{const[[i,d,h],u]=W([l,t,r]),m=G((e=>{u(e),c?.(e)}),[c]),p=ee((e=>m([e,e==i&&!d,h])),[m,i,d,h],n),b=G((e=>m([i,d,e])),[m,i,d]),C=!0===s?fe:s;return[[i,d,h],p,Q((()=>!1===s?null:e(C,{offset:h,limit:a,total:o,onChange:b})),[s,C,h,a,o,b])]},ae=(e,l,t)=>Q((()=>{const n=l??e;return r=Array.isArray(n)?$(A(n,(e=>[e,e]))):n,a=(e,l)=>{return{label:l,component:t,...(n=e,T(n)==S?{label:e}:e)};var n},$(z(r,((e,l)=>[l,a(e,l)])));var r,a}),[l,t,e]),oe=({className:t,headerRow:n,idColumn:r,params:[a,o,s,c,i,d]})=>l("table",{className:t,children:[d?e("caption",{children:d}):null,!1===n?null:e("thead",{children:l("tr",{children:[!1===r?null:e(se,{sort:c??[],label:"Id",onClick:i}),z(a,(({label:l},t)=>e(se,{cellId:t,label:l,sort:c??[],onClick:i},t)))]})}),e("tbody",{children:A(s,(t=>l("tr",{children:[!1===r?null:e("th",{children:t}),z(a,(({component:l,getComponentProps:n},r)=>e("td",{children:e(l,{...Y(n,t,r),...o,rowId:t,cellId:r})},r)))]},t)))})]}),se=({cellId:e,sort:[t,n],label:r=e??"",onClick:a})=>l("th",{onClick:ee((()=>a?.(e)),[a,e],a),className:j(n)||t!=e?void 0:`sorted ${n?"de":"a"}scending`,children:[j(n)||t!=e?null:(n?"↓":"↑")+" ",r]}),ce=({localRowId:n,params:[r,a,o,s,c,i,d]})=>{const h=v(c,n,i);return l("tr",{children:[!1===r?null:l(t,{children:[e("th",{children:n}),e("th",{children:h})]}),z(a,(({component:l,getComponentProps:t},r)=>{const[a,c]=((e,l="",t)=>e.split(l,t))(r,".",2),i=a===o?n:a===s?h:null;return j(i)?null:e("td",{children:e(l,{...Y(t,i,c),store:d,tableId:a,rowId:i,cellId:c})},r)}))]})},ie=({thing:t,onThingChange:n,className:r,hasSchema:a,showType:o=!0})=>{const[s,c]=W(),[i,d]=W(),[h,u]=W(),[m,p]=W(),[b,C]=W();i!==t&&(c((e=>{const l=T(e);return(e=>e==S||e==x)(l)||l==R&&V(e)?l:void 0})(t)),d(t),u(t+""),p(Number(t)||0),C(!!t));const I=G(((e,l)=>{l(e),d(e),n(e)}),[n]),g=G((()=>{if(!a?.()){const e=L(s,R,x,S),l=L(e,h,m,b);c(e),d(l),n(l)}}),[a,n,h,m,b,s]);return l("div",{className:r,children:[o?e("button",{className:s,onClick:g,children:s}):null,L(s,e("input",{value:h,onChange:G((e=>I(e[E][P]+"",u)),[I])},s),e("input",{type:"number",value:m,onChange:G((e=>I(Number(e[E][P]||0),p)),[I])},s),e("input",{type:"checkbox",checked:b,onChange:G((e=>I(!!e[E].checked,C)),[I])},s))]})},de=({tableId:l,store:t,editable:n,customCells:o,...s})=>e(oe,{...s,params:le(ae(a(l,t),o,n?Ie:w),te(t,l),r(l,t))}),he=({tableId:l,cellId:t,descending:n,offset:r,limit:c,store:i,editable:d,sortOnClick:h,paginator:u=!1,onChange:m,customCells:p,...b})=>{const[C,I,g]=re(t,n,h,r,c,o(l,i),u,m);return e(oe,{...b,params:le(ae(a(l,i),p,d?Ie:w),te(i,l),s(l,...C,c,i),C,I,g)})},ue=({store:t,editable:n=!1,valueComponent:r=(n?ge:i),getValueComponentProps:a,className:o,headerRow:s,idColumn:d})=>l("table",{className:o,children:[!1===s?null:e("thead",{children:l("tr",{children:[!1===d?null:e("th",{children:"Id"}),e("th",{children:q})]})}),e("tbody",{children:A(c(t),(n=>l("tr",{children:[!1===d?null:e("th",{children:n}),e("td",{children:e(r,{...Y(a,n),valueId:n,store:t})})]},n)))})]}),me=({indexId:l,sliceId:t,indexes:n,editable:r,customCells:o,...s})=>{const[c,i,u]=((e,l)=>[e,e?.getStore(),e?.getTableId(l)])(d(n),l);return e(oe,{...s,params:le(ae(a(u,i),o,r?Ie:w),te(i,u),h(l,t,c))})},pe=({relationshipId:n,relationships:a,editable:o,customCells:s,className:c,headerRow:i,idColumn:d=!0})=>{const[h,m,p,b]=((e,l)=>[e,e?.getStore(),e?.getLocalTableId(l),e?.getRemoteTableId(l)])(u(a),n),C=ae([..._(p,m),..._(b,m)],s,o?Ie:w),I=le(d,C,p,b,n,h,m);return l("table",{className:c,children:[!1===i?null:e("thead",{children:l("tr",{children:[!1===d?null:l(t,{children:[l("th",{children:[p,".Id"]}),l("th",{children:[b,".Id"]})]}),z(C,(({label:l},t)=>e("th",{children:l},t)))]})}),e("tbody",{children:A(r(p,m),(l=>e(ce,{localRowId:l,params:I},l)))})]})},be=({queryId:l,queries:t,customCells:n,...r})=>e(oe,{...r,params:le(ae(p(l,t),n,k),ne(t,l),m(l,t))}),Ce=({queryId:l,cellId:t,descending:n,offset:r,limit:a,queries:o,sortOnClick:s,paginator:c=!1,customCells:i,onChange:d,...h})=>{const[u,m,I]=re(t,n,s,r,a,b(l,o),c,d);return e(oe,{...h,params:le(ae(p(l,o),i,k),ne(o,l),C(l,...u,a,o),u,m,I)})},Ie=({tableId:l,rowId:t,cellId:n,store:r,className:a,showType:o})=>e(ie,{thing:f(l,t,n,r),onThingChange:g(l,t,n,(e=>e),[],r),className:a??Z+"Cell",showType:o,hasSchema:I(r)?.hasTablesSchema}),ge=({valueId:l,store:t,className:n,showType:r})=>e(ie,{thing:N(l,t),onThingChange:y(l,(e=>e),[],t),className:n??Z+q,showType:r,hasSchema:I(t)?.hasValuesSchema}),fe=({onChange:n,total:r,offset:a=0,limit:o=r,singular:s="row",plural:c=s+"s"})=>{(a>r||a<0)&&(a=0,n(0));const i=ee((()=>n(a-o)),[n,a,o],a>0),d=ee((()=>n(a+o)),[n,a,o],a+o<r);return l(t,{children:[r>o&&l(t,{children:[e("button",{className:"previous",disabled:0==a,onClick:i,children:"←"}),e("button",{className:"next",disabled:a+o>=r,onClick:d,children:"→"}),a+1," to ",O(r,a+o)," of "]}),r," ",1!=r?c:s]})};export{Ie as EditableCellView,ge as EditableValueView,pe as RelationshipInHtmlTable,Ce as ResultSortedTableInHtmlTable,be as ResultTableInHtmlTable,me as SliceInHtmlTable,he as SortedTableInHtmlTable,fe as SortedTablePaginator,de as TableInHtmlTable,ue as ValuesInHtmlTable};