dinocollab-core 2.2.8 → 2.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/data-surface/index.js +2 -0
- package/dist/src/data-surface/button-switch.js +2 -0
- package/dist/src/data-surface/button-switch.js.map +1 -0
- package/dist/src/data-surface/helpers.js +2 -0
- package/dist/src/data-surface/helpers.js.map +1 -0
- package/dist/src/data-surface/index.create.js +2 -0
- package/dist/src/data-surface/index.create.js.map +1 -0
- package/dist/src/data-surface/index.dino.js +2 -0
- package/dist/src/data-surface/index.dino.js.map +1 -0
- package/dist/src/data-surface/types.js.map +1 -0
- package/dist/src/data-surface/ui.units.js +2 -0
- package/dist/src/data-surface/ui.units.js.map +1 -0
- package/dist/src/data-surface/view-grid/helpers.js +2 -0
- package/dist/src/data-surface/view-grid/helpers.js.map +1 -0
- package/dist/src/data-surface/view-grid/hooks.js +2 -0
- package/dist/src/data-surface/view-grid/hooks.js.map +1 -0
- package/dist/src/data-surface/view-grid/index.js +2 -0
- package/dist/src/data-surface/view-grid/index.js.map +1 -0
- package/dist/src/data-surface/view-grid/styleds.js +2 -0
- package/dist/src/data-surface/view-grid/styleds.js.map +1 -0
- package/dist/src/data-surface/view-grid/ui.units.js +2 -0
- package/dist/src/data-surface/view-grid/ui.units.js.map +1 -0
- package/dist/src/data-surface/view-list/helpers.js +2 -0
- package/dist/src/data-surface/view-list/helpers.js.map +1 -0
- package/dist/src/data-surface/view-list/hooks.js +2 -0
- package/dist/src/data-surface/view-list/hooks.js.map +1 -0
- package/dist/src/data-surface/view-list/index.js +2 -0
- package/dist/src/data-surface/view-list/index.js.map +1 -0
- package/dist/src/data-surface/view-list/styled.js +2 -0
- package/dist/src/data-surface/view-list/styled.js.map +1 -0
- package/dist/src/{lab/data-surface/view-list.types.js → data-surface/view-list/types.js} +1 -1
- package/dist/src/data-surface/view-list/types.js.map +1 -0
- package/dist/src/data-surface/view-switch-transition.js +2 -0
- package/dist/src/data-surface/view-switch-transition.js.map +1 -0
- package/dist/src/data-surface/view-switch-transition.units.js +2 -0
- package/dist/src/data-surface/view-switch-transition.units.js.map +1 -0
- package/dist/src/filter-bar/components/filter-input.js +1 -1
- package/dist/src/filter-bar/components/filter-input.js.map +1 -1
- package/dist/src/filter-bar/components/filter-input.units.js +1 -1
- package/dist/src/filter-bar/components/filter-input.units.js.map +1 -1
- package/dist/src/filter-bar/components/filter-menu.js +1 -1
- package/dist/src/filter-bar/components/filter-menu.js.map +1 -1
- package/dist/src/filter-bar/components/filter-sort.js +1 -1
- package/dist/src/filter-bar/components/filter-sort.js.map +1 -1
- package/dist/src/filter-bar/components/filter-summary.js +1 -1
- package/dist/src/filter-bar/components/filter-summary.js.map +1 -1
- package/dist/src/filter-bar/components/hint-icon.js +1 -1
- package/dist/src/filter-bar/components/hint-icon.js.map +1 -1
- package/dist/src/filter-bar/components/units.js +2 -0
- package/dist/src/filter-bar/components/units.js.map +1 -0
- package/dist/src/filter-bar/convert-to-graphql.js +1 -1
- package/dist/src/filter-bar/convert-to-graphql.js.map +1 -1
- package/dist/src/filter-bar/helpers.js +1 -1
- package/dist/src/filter-bar/helpers.js.map +1 -1
- package/dist/src/filter-bar/hooks.js +2 -0
- package/dist/src/filter-bar/hooks.js.map +1 -0
- package/dist/src/filter-bar/index.context.js +1 -1
- package/dist/src/filter-bar/index.context.js.map +1 -1
- package/dist/src/filter-bar/index.create.js +1 -1
- package/dist/src/filter-bar/index.create.js.map +1 -1
- package/dist/src/filter-bar/types.js +1 -1
- package/dist/src/filter-bar/types.js.map +1 -1
- package/dist/src/table/create.table.js +1 -1
- package/dist/src/utils/helpers.js +1 -1
- package/dist/types/{lab/data-surface → data-surface}/index.create.d.ts +1 -1
- package/dist/types/{lab/data-surface → data-surface}/index.d.ts +2 -2
- package/dist/types/{lab/data-surface → data-surface}/index.dino.d.ts +2 -0
- package/dist/types/{lab/data-surface → data-surface}/types.d.ts +0 -11
- package/dist/types/data-surface/view-grid/helpers.d.ts +19 -0
- package/dist/types/data-surface/view-grid/hooks.d.ts +9 -0
- package/dist/types/data-surface/view-grid/index.d.ts +19 -0
- package/dist/types/data-surface/view-grid/styleds.d.ts +12 -0
- package/dist/types/data-surface/view-grid/types.d.ts +39 -0
- package/dist/types/data-surface/view-grid/ui.units.d.ts +3 -0
- package/dist/types/data-surface/view-list/helpers.d.ts +15 -0
- package/dist/types/{lab/data-surface/view-list.units.d.ts → data-surface/view-list/hooks.d.ts} +11 -5
- package/dist/types/data-surface/view-list/index.d.ts +13 -0
- package/dist/types/data-surface/view-list/styled.d.ts +17 -0
- package/dist/types/{lab/data-surface/view-list.types.d.ts → data-surface/view-list/types.d.ts} +38 -0
- package/dist/types/data-view/dino.d.ts +1 -1
- package/dist/types/data-view/query-param-url.d.ts +1 -1
- package/dist/types/filter-bar/components/filter-menu.types.d.ts +2 -0
- package/dist/types/filter-bar/components/filter-sort.types.d.ts +25 -8
- package/dist/types/filter-bar/components/hint-icon.d.ts +4 -0
- package/dist/types/filter-bar/components/units.d.ts +3 -0
- package/dist/types/filter-bar/helpers.d.ts +8 -5
- package/dist/types/filter-bar/{components/hooks.d.ts → hooks.d.ts} +2 -2
- package/dist/types/filter-bar/index.context.d.ts +1 -0
- package/dist/types/filter-bar/index.create.d.ts +4 -1
- package/dist/types/filter-bar/types.d.ts +1 -1
- package/package.json +20 -20
- package/dist/lab/data-surface/index.js +0 -2
- package/dist/src/filter-bar/components/hooks.js +0 -2
- package/dist/src/filter-bar/components/hooks.js.map +0 -1
- package/dist/src/lab/data-surface/button-switch.js +0 -2
- package/dist/src/lab/data-surface/button-switch.js.map +0 -1
- package/dist/src/lab/data-surface/helpers.js +0 -2
- package/dist/src/lab/data-surface/helpers.js.map +0 -1
- package/dist/src/lab/data-surface/index.create.js +0 -2
- package/dist/src/lab/data-surface/index.create.js.map +0 -1
- package/dist/src/lab/data-surface/index.dino.js +0 -2
- package/dist/src/lab/data-surface/index.dino.js.map +0 -1
- package/dist/src/lab/data-surface/types.js.map +0 -1
- package/dist/src/lab/data-surface/ui.units.js +0 -2
- package/dist/src/lab/data-surface/ui.units.js.map +0 -1
- package/dist/src/lab/data-surface/view-grid.js +0 -2
- package/dist/src/lab/data-surface/view-grid.js.map +0 -1
- package/dist/src/lab/data-surface/view-grid.units.js +0 -2
- package/dist/src/lab/data-surface/view-grid.units.js.map +0 -1
- package/dist/src/lab/data-surface/view-list.js +0 -2
- package/dist/src/lab/data-surface/view-list.js.map +0 -1
- package/dist/src/lab/data-surface/view-list.types.js.map +0 -1
- package/dist/src/lab/data-surface/view-list.units.js +0 -2
- package/dist/src/lab/data-surface/view-list.units.js.map +0 -1
- package/dist/src/lab/data-surface/view-switch-transition.js +0 -2
- package/dist/src/lab/data-surface/view-switch-transition.js.map +0 -1
- package/dist/src/lab/data-surface/view-switch-transition.units.js +0 -2
- package/dist/src/lab/data-surface/view-switch-transition.units.js.map +0 -1
- package/dist/types/lab/data-surface/view-grid.d.ts +0 -42
- package/dist/types/lab/data-surface/view-grid.types.d.ts +0 -12
- package/dist/types/lab/data-surface/view-grid.units.d.ts +0 -11
- package/dist/types/lab/data-surface/view-list.d.ts +0 -52
- /package/dist/{lab/data-surface → data-surface}/index.js.map +0 -0
- /package/dist/src/{lab/data-surface → data-surface}/types.js +0 -0
- /package/dist/types/{lab/data-surface → data-surface}/button-switch.d.ts +0 -0
- /package/dist/types/{lab/data-surface → data-surface}/helpers.d.ts +0 -0
- /package/dist/types/{lab/data-surface → data-surface}/ui.units.d.ts +0 -0
- /package/dist/types/{lab/data-surface → data-surface}/view-switch-transition.d.ts +0 -0
- /package/dist/types/{lab/data-surface → data-surface}/view-switch-transition.units.d.ts +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sources":["../../../../src/lab/data-surface/helpers.ts"],"sourcesContent":["import { DataSurfaceViewMode, TPagination } from './types'\r\nimport { QueryParam } from '../../utils/query-param'\r\n\r\nexport interface IViewDataQueryParams {\r\n mode?: DataSurfaceViewMode\r\n}\r\n\r\nexport function setViewModeToURL(mode?: DataSurfaceViewMode, defaultMode?: DataSurfaceViewMode) {\r\n // If window is undefined (e.g., during SSR), do nothing\r\n if (typeof window === 'undefined') return\r\n try {\r\n const updateParams: IViewDataQueryParams = { mode: mode === defaultMode ? undefined : mode }\r\n\r\n // Update URL with view mode\r\n if (updateParams.mode) {\r\n QueryParam.replacePatch<IViewDataQueryParams>(updateParams)\r\n } else {\r\n // If no view mode to update, remove existing mode from URL\r\n QueryParam.replaceDeletes<IViewDataQueryParams>('mode')\r\n }\r\n } catch (error) {\r\n console.error('Error syncing view mode to URL:', error)\r\n }\r\n}\r\n\r\nexport function getViewModeFromURL(defaultMode?: DataSurfaceViewMode): DataSurfaceViewMode | undefined {\r\n // If window is undefined (e.g., during SSR), return defaultViewMode\r\n if (typeof window === 'undefined') return defaultMode\r\n try {\r\n const q = QueryParam.gets<IViewDataQueryParams>('mode')\r\n return q.mode ? (q.mode as DataSurfaceViewMode) : defaultMode\r\n } catch (error) {\r\n console.error('Error getting view mode from URL:', error)\r\n return defaultMode\r\n }\r\n}\r\n\r\nexport interface IPaginationQueryParams {\r\n page?: string\r\n pageSize?: string\r\n}\r\n\r\n/**\r\n * @en Check if two pagination objects are equal (ignoring hasNext/hasPrev/total).\r\n * @vi Kiem tra xem hai pagination co bang nhau khong (bo qua hasNext/hasPrev/total).\r\n */\r\nfunction isPaginationEqual(pagination1?: TPagination, pagination2?: TPagination): boolean {\r\n if (pagination1 === pagination2) return true\r\n if (!pagination1 && !pagination2) return true\r\n if (!pagination1 || !pagination2) return false\r\n\r\n return pagination1.page === pagination2.page && pagination1.pageSize === pagination2.pageSize\r\n}\r\n\r\n/**\r\n * @en Synchronize pagination to URL query parameters. If pagination equals defaultPagination, remove from URL to keep it clean.\r\n * @vi Dong bo pagination vao URL query parameters. Neu pagination bang defaultPagination, xoa khoi URL de giu URL sach.\r\n *\r\n * @param pagination - Current pagination to sync\r\n * @param defaultPagination - Default pagination (if current equals this, don't save to URL)\r\n */\r\nexport function setPaginationToURL(pagination?: TPagination, defaultPagination?: TPagination) {\r\n // If window is undefined (e.g., during SSR), do nothing\r\n if (typeof window === 'undefined') return\r\n\r\n try {\r\n // If pagination equals default, remove from URL\r\n if (isPaginationEqual(pagination, defaultPagination)) {\r\n QueryParam.replaceDeletes<IPaginationQueryParams>('page', 'pageSize')\r\n return\r\n }\r\n\r\n // If pagination is empty/undefined, remove from URL\r\n if (!pagination) {\r\n QueryParam.replaceDeletes<IPaginationQueryParams>('page', 'pageSize')\r\n return\r\n }\r\n\r\n // Build update params (only include values that differ from default)\r\n const updateParams: IPaginationQueryParams = {}\r\n\r\n if (pagination.page !== undefined && pagination.page !== defaultPagination?.page) {\r\n updateParams.page = String(pagination.page)\r\n }\r\n\r\n if (pagination.pageSize !== undefined && pagination.pageSize !== defaultPagination?.pageSize) {\r\n updateParams.pageSize = String(pagination.pageSize)\r\n }\r\n\r\n // If no params to update, remove from URL\r\n if (Object.keys(updateParams).length === 0) {\r\n QueryParam.replaceDeletes<IPaginationQueryParams>('page', 'pageSize')\r\n } else {\r\n QueryParam.replacePatch<IPaginationQueryParams>(updateParams)\r\n }\r\n } catch (error) {\r\n console.error('Error syncing pagination to URL:', error)\r\n }\r\n}\r\n\r\n/**\r\n * @en Retrieve pagination from URL query parameters.\r\n * @vi Lay pagination tu URL query parameters.\r\n *\r\n * @param defaultPagination - Default pagination to return if URL has no pagination\r\n * @returns Pagination from URL or defaultPagination\r\n */\r\nexport function getPaginationFromURL(defaultPagination?: TPagination): TPagination | undefined {\r\n // If window is undefined (e.g., during SSR), return defaultPagination\r\n if (typeof window === 'undefined') return defaultPagination\r\n\r\n try {\r\n const q = QueryParam.gets<IPaginationQueryParams>('page', 'pageSize')\r\n\r\n // Parse values from URL\r\n const page = q.page ? parseInt(q.page, 10) : undefined\r\n const pageSize = q.pageSize ? parseInt(q.pageSize, 10) : undefined\r\n\r\n // If no pagination in URL, return default\r\n if (page === undefined && pageSize === undefined) {\r\n return defaultPagination\r\n }\r\n\r\n // Merge with default pagination\r\n return {\r\n ...defaultPagination,\r\n page: page !== undefined && !isNaN(page) ? page : defaultPagination?.page,\r\n pageSize: pageSize !== undefined && !isNaN(pageSize) ? pageSize : defaultPagination?.pageSize\r\n }\r\n } catch (error) {\r\n console.error('Error getting pagination from URL:', error)\r\n return defaultPagination\r\n }\r\n}\r\n"],"names":["setViewModeToURL","mode","defaultMode","window","updateParams","undefined","QueryParam","replacePatch","replaceDeletes","error","console","getViewModeFromURL","q","gets","setPaginationToURL","pagination","defaultPagination","pagination1","pagination2","page","pageSize","String","Object","keys","length","getPaginationFromURL","parseInt","_objectSpread","isNaN"],"mappings":"uIAOgB,SAAAA,EAAiBC,EAA4BC,GAE3D,GAAsB,oBAAXC,OACX,IACE,IAAMC,EAAqC,CAAEH,KAAMA,IAASC,OAAcG,EAAYJ,GAGlFG,EAAaH,KACfK,EAAWC,aAAmCH,GAG9CE,EAAWE,eAAqC,OAEnD,CAAC,MAAOC,GACPC,QAAQD,MAAM,kCAAmCA,EAClD,CACH,CAEM,SAAUE,EAAmBT,GAEjC,GAAsB,oBAAXC,OAAwB,OAAOD,EAC1C,IACE,IAAMU,EAAIN,EAAWO,KAA2B,QAChD,OAAOD,EAAEX,KAAQW,EAAEX,KAA+BC,CACnD,CAAC,MAAOO,GAEP,OADAC,QAAQD,MAAM,oCAAqCA,GAC5CP,CACR,CACH,CA0BgB,SAAAY,EAAmBC,EAA0BC,GAf7D,IAA2BC,EAA2BC,EAiBpD,GAAsB,oBAAXf,OAEX,IAEE,IArBuBc,EAqBDF,MArB4BG,EAqBhBF,KAnB/BC,IAAgBC,GAChBD,GAAgBC,GAEdD,EAAYE,OAASD,EAAYC,MAAQF,EAAYG,WAAaF,EAAYE,SAkBjF,YADAd,EAAWE,eAAuC,OAAQ,YAK5D,IAAKO,EAEH,YADAT,EAAWE,eAAuC,OAAQ,YAK5D,IAAMJ,EAAuC,CAAE,OAEvBC,IAApBU,EAAWI,MAAsBJ,EAAWI,QAASH,eAAAA,EAAmBG,QAC1Ef,EAAae,KAAOE,OAAON,EAAWI,YAGZd,IAAxBU,EAAWK,UAA0BL,EAAWK,YAAaJ,eAAAA,EAAmBI,YAClFhB,EAAagB,SAAWC,OAAON,EAAWK,WAIH,IAArCE,OAAOC,KAAKnB,GAAcoB,OAC5BlB,EAAWE,eAAuC,OAAQ,YAE1DF,EAAWC,aAAqCH,EAEnD,CAAC,MAAOK,GACPC,QAAQD,MAAM,mCAAoCA,EACnD,CACH,CASM,SAAUgB,EAAqBT,GAEnC,GAAsB,oBAAXb,OAAwB,OAAOa,EAE1C,IACE,IAAMJ,EAAIN,EAAWO,KAA6B,OAAQ,YAGpDM,EAAOP,EAAEO,KAAOO,SAASd,EAAEO,KAAM,SAAMd,EACvCe,EAAWR,EAAEQ,SAAWM,SAASd,EAAEQ,SAAU,SAAMf,EAGzD,YAAaA,IAATc,QAAmCd,IAAbe,EACjBJ,EAITW,EAAAA,EAAA,CAAA,EACKX,GAAiB,CAAA,EAAA,CACpBG,UAAed,IAATc,GAAuBS,MAAMT,GAAeH,aAAAA,EAAAA,EAAmBG,KAA1BA,EAC3CC,cAAuBf,IAAbe,GAA2BQ,MAAMR,GAAuBJ,aAAiB,EAAjBA,EAAmBI,SAA9BA,GAE1D,CAAC,MAAOX,GAEP,OADAC,QAAQD,MAAM,qCAAsCA,GAC7CO,CACR,CACH"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{slicedToArray as n,asyncToGenerator as e,regenerator as i,objectSpread2 as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as a,jsx as t}from"react/jsx-runtime";import{styled as r,Box as l}from"@mui/material";import{useState as u,useMemo as g,useCallback as d,useRef as v}from"react";import{LoadingModeRule as s}from"./types.js";import{createViewList as c,createViewListLoading as f}from"./view-list.js";import{createViewGrid as p,createViewGridLoading as h}from"./view-grid.js";import{createViewSwitchTransition as m}from"./view-switch-transition.js";import{PanelLoading as C,PanelNoData as S,PanelLoadMore as x,PanelInfiniteScrollFooter as P,PanelPaginationFooter as w}from"./ui.units.js";function z(r){if(!r.GridComponent){var z=r.gridConfig||{getterId:function(n,e){return e}};r.gridConfig=z,r.GridComponent=p(z)}if(!r.ListComponent){var y=r.listConfig||{getterId:function(n,e){return e}};r.listConfig=y,r.ListComponent=c(y)}var N=r.defaultViewMode,j=void 0===N?"grid":N,M=r.defaultLoadMode,k=void 0===M?"pagination":M,I=r.defaultPageSize,B=void 0===I?20:I,G=m({}),L=h(r.GridComponent),T=f(r.ListComponent);return function(c){var f,p,h=u({page:0,pageSize:B}),m=n(h,2),z=m[0],y=m[1],N=g(function(){var n,e,i,o,a,t=null!==(n=c.pagination)&&void 0!==n?n:z;return{page:null!==(e=t.page)&&void 0!==e?e:0,pageSize:null!==(i=t.pageSize)&&void 0!==i?i:B,hasNext:null!==(o=t.hasNext)&&void 0!==o&&o,hasPrev:null!==(a=t.hasPrev)&&void 0!==a&&a,total:t.total}},[c.pagination,z]),M=null!==(f=c.viewMode)&&void 0!==f?f:j,I=null!==(p=c.loadMode)&&void 0!==p?p:k,H=g(function(){var n,e,i,o;return"grid"===M?null!==(i=null===(o=r.gridConfig)||void 0===o?void 0:o.renderStrategy)&&void 0!==i?i:"normal":null!==(n=null===(e=r.listConfig)||void 0===e?void 0:e.renderStrategy)&&void 0!==n?n:"normal"},[M]),A=d(e(i().m(function n(){var e,a,t,r,l;return i().w(function(n){for(;;)switch(n.n){case 0:if(!((r=null!==(e=N.page)&&void 0!==e?e:0)<=0)){n.n=1;break}return n.a(2);case 1:return l=r-1,c.pagination||y(function(n){return o(o({},n),{},{page:l})}),n.n=2,null===(a=c.onPageChange)||void 0===a?void 0:a.call(c,l,null!==(t=N.pageSize)&&void 0!==t?t:B);case 2:return n.a(2)}},n)})),[N.page,N.pageSize,c.pagination,c.onPageChange]),_=d(e(i().m(function n(){var e,a,t,r,l;return i().w(function(n){for(;;)switch(n.n){case 0:if(N.hasNext){n.n=1;break}return n.a(2);case 1:return r=null!==(e=N.page)&&void 0!==e?e:0,l=r+1,c.pagination||y(function(n){return o(o({},n),{},{page:l})}),n.n=2,null===(a=c.onPageChange)||void 0===a?void 0:a.call(c,l,null!==(t=N.pageSize)&&void 0!==t?t:B);case 2:return n.a(2)}},n)})),[N.hasNext,N.page,N.pageSize,c.pagination,c.onPageChange]),D=d(function(){var n=e(i().m(function n(e){var a,t;return i().w(function(n){for(;;)switch(n.n){case 0:if(!(e<0)){n.n=1;break}return n.a(2);case 1:return c.pagination||y(function(n){return o(o({},n),{},{page:e})}),n.n=2,null===(a=c.onPageChange)||void 0===a?void 0:a.call(c,e,null!==(t=N.pageSize)&&void 0!==t?t:B);case 2:return n.a(2)}},n)}));return function(e){return n.apply(this,arguments)}}(),[N.pageSize,c.pagination,c.onPageChange]),J=c.value||[],V=0===J.length,q=Boolean(c.loading&&V),E=!c.loading&&V,F=Boolean(c.loading)&&!V,K=d(function(){var n=e(i().m(function n(e,o){var a;return i().w(function(n){for(;;)switch(n.n){case 0:return c.pagination||y({page:e,pageSize:o}),n.n=1,null===(a=c.onPageChange)||void 0===a?void 0:a.call(c,e,o);case 1:return n.a(2)}},n)}));return function(e,i){return n.apply(this,arguments)}}(),[c.pagination,c.onPageChange]),O=g(function(){return{value:J,loadMode:I,loading:c.loading,pagination:N,onPageChange:K}},[J,I,c.loading,N,K]),Q=v(O);Q.current=O;var R=g(function(){var n,e,i,o,a;return{value:J,loadMode:I,loading:c.loading,pagination:N,onPageChange:K,columns:null===(n=r.listConfig)||void 0===n?void 0:n.columns,density:null===(e=r.listConfig)||void 0===e?void 0:e.density,renderStrategy:H,virtualizedConfig:null===(i=r.listConfig)||void 0===i?void 0:i.virtualizedConfig,selectable:null!==(o=c.selectable)&&void 0!==o?o:null===(a=r.listConfig)||void 0===a?void 0:a.selectable,selectedIds:c.selectedIds,onSelectionChange:c.onSelectionChange}},[J,I,c.loading,N,H,K,c.selectable,c.selectedIds,c.onSelectionChange]),U=v(R);U.current=R;var W=g(function(){return function(){return t(T,o({},U.current))}},[T]),X=g(function(){return function(){return t(L,o({},Q.current))}},[L]);return a(b,{sx:c.sx,children:[a(l,{sx:{flex:1,minHeight:0,position:"relative"},children:[q&&t(C,{}),E&&t(S,{}),!q&&!E&&t(G,{value:M,viewA:{value:"list",Content:W},viewB:{value:"grid",Content:X}}),F&&t(x,{})]}),function(){var n,e,i;if(I===s.infiniteScroll){var o,a,r,l=null===(o=c.slots)||void 0===o?void 0:o.footer;return t(P,{loading:c.loading,hasNext:null===(a=c.pagination)||void 0===a?void 0:a.hasNext,currentCount:J.length,total:null===(r=c.pagination)||void 0===r?void 0:r.total,slots:{statusText:null==l?void 0:l.status,rangeText:null==l?void 0:l.range}})}return t(w,{page:null!==(n=N.page)&&void 0!==n?n:0,pageSize:null!==(e=N.pageSize)&&void 0!==e?e:B,total:N.total,hasNext:N.hasNext,hasPrev:(null!==(i=N.page)&&void 0!==i?i:0)>0,loading:c.loading,onPrevPage:A,onNextPage:_,onPageJump:D})}()]})}}var b=r(l)(function(n){return{display:"flex",flexDirection:"column",width:"100%",height:"100%",position:"relative",flex:1,minHeight:0,backgroundColor:n.theme.palette.background.default}});export{z as createDataSurface,z as default};
|
|
2
|
-
//# sourceMappingURL=index.create.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.create.js","sources":["../../../../src/lab/data-surface/index.create.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Box, styled } from '@mui/material'\r\nimport { useCallback, useMemo, useRef, useState } from 'react'\r\nimport { DataSurfaceViewMode, LoadingModeRule } from './types'\r\nimport { createViewList, createViewListLoading } from './view-list'\r\nimport { createViewGrid, createViewGridLoading } from './view-grid'\r\nimport { createViewSwitchTransition } from './view-switch-transition'\r\nimport { PanelInfiniteScrollFooter, PanelLoadMore, PanelLoading, PanelNoData, PanelPaginationFooter } from './ui.units'\r\n// types\r\nimport type { BoxProps } from '@mui/material'\r\nimport type { ComponentType, FC } from 'react'\r\nimport type { TPagination, TDataSurfaceState, TRenderableNode } from './types'\r\nimport type { IViewGridConfig, IViewGridLoadingProps, IViewGridProps } from './view-grid'\r\nimport type { IViewListConfig, IViewListLoadingProps, IViewListProps } from './view-list'\r\n\r\nexport interface IDataSurfaceSlots {\r\n footer?: {\r\n status?: TRenderableNode\r\n range?: TRenderableNode\r\n }\r\n}\r\n\r\nexport interface IDataSurfaceProps<T> {\r\n value?: T[]\r\n /**\r\n * @deprecated No longer used. Use `viewMode` and `loadMode` props directly instead.\r\n * Controlled state. When provided, DataSurface becomes fully controlled.\r\n */\r\n state?: TDataSurfaceState\r\n /**\r\n * @deprecated No longer used. Component now uses uncontrolled mode with props.\r\n * Called on any state change (viewMode, loadMode, page, pageSize).\r\n */\r\n onStateChange?: (state: TDataSurfaceState) => void\r\n viewMode?: DataSurfaceViewMode\r\n /** Pagination metadata shared by both modes. */\r\n pagination?: TPagination\r\n /** True while a page fetch is in flight (shows loading indicator). */\r\n loading?: boolean\r\n /**\r\n * Called when the component needs a new page of data.\r\n * - pagination mode: triggered by user clicking page control\r\n * - infiniteScroll mode: triggered automatically when scrolling near the bottom\r\n * Supports async operations - return a Promise to indicate loading state.\r\n */\r\n onPageChange?: (page: number, pageSize: number) => void | Promise<void>\r\n /** Load orchestration mode. @default 'pagination' */\r\n loadMode?: LoadingModeRule\r\n sx?: BoxProps['sx']\r\n slots?: IDataSurfaceSlots\r\n /** Enable row selection with checkboxes (List view only). */\r\n selectable?: boolean\r\n /** Array of selected row IDs (controlled). */\r\n selectedIds?: (string | number)[]\r\n /** Callback when selection changes. */\r\n onSelectionChange?: (selectedIds: (string | number)[]) => void\r\n}\r\n\r\nexport interface IDataSurfaceConfig<T> {\r\n defaultViewMode?: DataSurfaceViewMode\r\n /** Default load mode when not provided via props. @default 'pagination' */\r\n defaultLoadMode?: LoadingModeRule\r\n /** Default page size. @default 20 */\r\n defaultPageSize?: number\r\n enableSingleViewTransition?: boolean\r\n listConfig?: IViewListConfig<T>\r\n ListComponent?: ComponentType<IViewListProps<T>>\r\n gridConfig?: IViewGridConfig<T>\r\n GridComponent?: ComponentType<IViewGridProps<T>>\r\n}\r\n\r\nexport function createDataSurface<T>(config: IDataSurfaceConfig<T>) {\r\n if (!config.GridComponent) {\r\n const configInput: IViewGridConfig<T> = config.gridConfig || { getterId: (item: T, index: number) => index }\r\n config.gridConfig = configInput\r\n config.GridComponent = createViewGrid<T>(configInput)\r\n }\r\n\r\n if (!config.ListComponent) {\r\n const configInput: IViewListConfig<T> = config.listConfig || { getterId: (item: T, index: number) => index }\r\n config.listConfig = configInput\r\n config.ListComponent = createViewList<T>(configInput)\r\n }\r\n\r\n const { defaultViewMode = 'grid', defaultLoadMode = 'pagination', defaultPageSize = 20 } = config\r\n const ViewSwitchTranstionInstance = createViewSwitchTransition<DataSurfaceViewMode>({})\r\n const GridLoadingComponent = createViewGridLoading<T>(config.GridComponent as ComponentType<IViewGridProps<T>>)\r\n const ListLoadingComponent = createViewListLoading<T>(config.ListComponent as ComponentType<IViewListProps<T>>)\r\n\r\n const DataSurface: FC<IDataSurfaceProps<T>> = (props) => {\r\n // separate pagination state\r\n const [internalPagination, setInternalPagination] = useState<TPagination>({\r\n page: 0,\r\n pageSize: defaultPageSize\r\n })\r\n\r\n // resolved pagination: external takes priority over internal\r\n const paginationState = useMemo<TPagination>(() => {\r\n const p = props.pagination ?? internalPagination\r\n return {\r\n page: p.page ?? 0,\r\n pageSize: p.pageSize ?? defaultPageSize,\r\n hasNext: p.hasNext ?? false,\r\n hasPrev: p.hasPrev ?? false,\r\n total: p.total\r\n }\r\n }, [props.pagination, internalPagination])\r\n\r\n const viewMode = props.viewMode ?? defaultViewMode\r\n const loadMode = props.loadMode ?? defaultLoadMode\r\n\r\n // Determine renderStrategy based on current viewMode\r\n const renderStrategy = useMemo(() => {\r\n if (viewMode === 'grid') {\r\n return config.gridConfig?.renderStrategy ?? 'normal'\r\n }\r\n return config.listConfig?.renderStrategy ?? 'normal'\r\n }, [viewMode])\r\n\r\n const handlePrevPage = useCallback(async () => {\r\n const currentPage = paginationState.page ?? 0\r\n if (currentPage <= 0) return\r\n const prevPage = currentPage - 1\r\n if (!props.pagination) {\r\n setInternalPagination((prev) => ({ ...prev, page: prevPage }))\r\n }\r\n await props.onPageChange?.(prevPage, paginationState.pageSize ?? defaultPageSize)\r\n }, [paginationState.page, paginationState.pageSize, props.pagination, props.onPageChange])\r\n\r\n const handleNextPage = useCallback(async () => {\r\n if (!paginationState.hasNext) return\r\n const currentPage = paginationState.page ?? 0\r\n const nextPage = currentPage + 1\r\n if (!props.pagination) {\r\n setInternalPagination((prev) => ({ ...prev, page: nextPage }))\r\n }\r\n await props.onPageChange?.(nextPage, paginationState.pageSize ?? defaultPageSize)\r\n }, [paginationState.hasNext, paginationState.page, paginationState.pageSize, props.pagination, props.onPageChange])\r\n\r\n const handlePageJump = useCallback(\r\n async (targetPage: number) => {\r\n if (targetPage < 0) return\r\n if (!props.pagination) {\r\n setInternalPagination((prev) => ({ ...prev, page: targetPage }))\r\n }\r\n await props.onPageChange?.(targetPage, paginationState.pageSize ?? defaultPageSize)\r\n },\r\n [paginationState.pageSize, props.pagination, props.onPageChange]\r\n )\r\n\r\n const finalValue = props.value || []\r\n const isEmptyData = finalValue.length === 0\r\n const isInitialLoading = Boolean(props.loading && isEmptyData)\r\n const isNoData = !props.loading && isEmptyData\r\n const showLoadingOverlay = Boolean(props.loading) && !isEmptyData\r\n\r\n const handleGridPageChange = useCallback(\r\n async (page: number, pageSize: number) => {\r\n if (!props.pagination) {\r\n setInternalPagination({ page, pageSize })\r\n }\r\n await props.onPageChange?.(page, pageSize)\r\n },\r\n [props.pagination, props.onPageChange]\r\n )\r\n\r\n const gridPayload = useMemo<IViewGridLoadingProps<T>>(\r\n () => ({\r\n value: finalValue,\r\n loadMode,\r\n loading: props.loading,\r\n pagination: paginationState,\r\n onPageChange: handleGridPageChange\r\n }),\r\n [finalValue, loadMode, props.loading, paginationState, handleGridPageChange]\r\n )\r\n\r\n const gridPayloadRef = useRef<IViewGridLoadingProps<T>>(gridPayload)\r\n gridPayloadRef.current = gridPayload\r\n\r\n const listPayload = useMemo<IViewListLoadingProps<T>>(\r\n () => ({\r\n value: finalValue,\r\n loadMode,\r\n loading: props.loading,\r\n pagination: paginationState,\r\n onPageChange: handleGridPageChange,\r\n columns: config.listConfig?.columns,\r\n density: config.listConfig?.density,\r\n renderStrategy: renderStrategy,\r\n virtualizedConfig: config.listConfig?.virtualizedConfig,\r\n selectable: props.selectable ?? config.listConfig?.selectable,\r\n selectedIds: props.selectedIds,\r\n onSelectionChange: props.onSelectionChange\r\n }),\r\n [\r\n finalValue,\r\n loadMode,\r\n props.loading,\r\n paginationState,\r\n renderStrategy,\r\n handleGridPageChange,\r\n props.selectable,\r\n props.selectedIds,\r\n props.onSelectionChange\r\n ]\r\n )\r\n\r\n const listPayloadRef = useRef<IViewListLoadingProps<T>>(listPayload)\r\n listPayloadRef.current = listPayload\r\n\r\n const ListViewContent = useMemo<ComponentType<{ value: DataSurfaceViewMode }>>(() => {\r\n const ViewListContent: FC<{ value: DataSurfaceViewMode }> = () => {\r\n return <ListLoadingComponent {...listPayloadRef.current} />\r\n }\r\n return ViewListContent\r\n }, [ListLoadingComponent])\r\n\r\n const GridViewContent = useMemo<ComponentType<{ value: DataSurfaceViewMode }>>(() => {\r\n const ViewGridContent: FC<{ value: DataSurfaceViewMode }> = () => {\r\n return <GridLoadingComponent {...gridPayloadRef.current} />\r\n }\r\n return ViewGridContent\r\n }, [GridLoadingComponent])\r\n\r\n const renderFooter = () => {\r\n if (loadMode === LoadingModeRule.infiniteScroll) {\r\n const footerSlots = props.slots?.footer\r\n return (\r\n <PanelInfiniteScrollFooter\r\n loading={props.loading}\r\n hasNext={props.pagination?.hasNext}\r\n currentCount={finalValue.length}\r\n total={props.pagination?.total}\r\n slots={{\r\n statusText: footerSlots?.status,\r\n rangeText: footerSlots?.range\r\n }}\r\n />\r\n )\r\n }\r\n\r\n // pagination mode\r\n return (\r\n <PanelPaginationFooter\r\n page={paginationState.page ?? 0}\r\n pageSize={paginationState.pageSize ?? defaultPageSize}\r\n total={paginationState.total}\r\n hasNext={paginationState.hasNext}\r\n hasPrev={(paginationState.page ?? 0) > 0}\r\n loading={props.loading}\r\n onPrevPage={handlePrevPage}\r\n onNextPage={handleNextPage}\r\n onPageJump={handlePageJump}\r\n />\r\n )\r\n }\r\n\r\n return (\r\n <DataSurfaceStyled sx={props.sx}>\r\n <Box sx={{ flex: 1, minHeight: 0, position: 'relative' }}>\r\n {isInitialLoading && <PanelLoading />}\r\n {isNoData && <PanelNoData />}\r\n {!isInitialLoading && !isNoData && (\r\n <ViewSwitchTranstionInstance\r\n value={viewMode}\r\n viewA={{ value: 'list', Content: ListViewContent }}\r\n viewB={{ value: 'grid', Content: GridViewContent }}\r\n />\r\n )}\r\n {showLoadingOverlay && <PanelLoadMore />}\r\n </Box>\r\n {renderFooter()}\r\n </DataSurfaceStyled>\r\n )\r\n }\r\n return DataSurface\r\n}\r\n\r\nexport default createDataSurface\r\n\r\nconst DataSurfaceStyled = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n height: '100%',\r\n position: 'relative',\r\n flex: 1,\r\n minHeight: 0,\r\n backgroundColor: theme.palette.background.default\r\n}))\r\n"],"names":["createDataSurface","config","GridComponent","configInput","gridConfig","getterId","item","index","createViewGrid","ListComponent","listConfig","createViewList","_config$defaultViewMo","defaultViewMode","_config$defaultLoadMo","defaultLoadMode","_config$defaultPageSi","defaultPageSize","ViewSwitchTranstionInstance","createViewSwitchTransition","GridLoadingComponent","createViewGridLoading","ListLoadingComponent","createViewListLoading","props","_props$viewMode","_props$loadMode","_useState","useState","page","pageSize","_useState2","_slicedToArray","internalPagination","setInternalPagination","paginationState","useMemo","_props$pagination","_p$page","_p$pageSize","_p$hasNext","_p$hasPrev","p","pagination","hasNext","hasPrev","total","viewMode","loadMode","renderStrategy","_config$listConfig$re","_config$listConfig","_config$gridConfig$re","_config$gridConfig","handlePrevPage","useCallback","_asyncToGenerator","_regenerator","m","_callee","_paginationState$page","_props$onPageChange","_paginationState$page2","currentPage","prevPage","w","_context","n","a","prev","_objectSpread","onPageChange","call","handleNextPage","_callee2","_paginationState$page3","_props$onPageChange2","_paginationState$page4","nextPage","_context2","handlePageJump","_ref3","_callee3","targetPage","_props$onPageChange3","_paginationState$page5","_context3","_x","apply","this","arguments","finalValue","value","isEmptyData","length","isInitialLoading","Boolean","loading","isNoData","showLoadingOverlay","handleGridPageChange","_ref4","_callee4","_props$onPageChange4","_context4","_x2","_x3","gridPayload","gridPayloadRef","useRef","current","listPayload","_config$listConfig2","_config$listConfig3","_config$listConfig4","_props$selectable","_config$listConfig5","columns","density","virtualizedConfig","selectable","selectedIds","onSelectionChange","listPayloadRef","ListViewContent","_jsx","GridViewContent","_jsxs","DataSurfaceStyled","sx","children","Box","flex","minHeight","position","PanelLoading","PanelNoData","viewA","Content","viewB","PanelLoadMore","_paginationState$page6","_paginationState$page7","_paginationState$page8","LoadingModeRule","infiniteScroll","_props$slots","_props$pagination2","_props$pagination3","footerSlots","slots","footer","PanelInfiniteScrollFooter","currentCount","statusText","status","rangeText","range","PanelPaginationFooter","onPrevPage","onNextPage","onPageJump","renderFooter","styled","_ref5","display","flexDirection","width","height","backgroundColor","theme","palette","background"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{createClass as t,classCallCheck as e,defineProperty as i}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{setViewModeToURL as r,getViewModeFromURL as o,setPaginationToURL as s,getPaginationFromURL as a}from"./helpers.js";import{createViewGrid as n}from"./view-grid.js";import{ButtonSwitch as h}from"./button-switch.js";import{createDataSurface as c}from"./index.create.js";var m=t(function t(){e(this,t),i(this,"createDataSurface",c),i(this,"createViewGrid",n),i(this,"ButtonSwitch",h),i(this,"createButtonSwitch",function(){return h}),i(this,"setViewModeToURL",r),i(this,"getViewModeFromURL",o),i(this,"setPaginationToURL",s),i(this,"getPaginationFromURL",a)}),l=new m;export{m as DinoDataSurFace,l as dinoDataSurface};
|
|
2
|
-
//# sourceMappingURL=index.dino.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.dino.js","sources":["../../../../src/lab/data-surface/index.dino.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\nimport { setViewModeToURL, getViewModeFromURL, setPaginationToURL, getPaginationFromURL } from './helpers'\r\nimport createViewGrid from './view-grid'\r\nimport ButtonSwitch from './button-switch'\r\nimport createDataSurface from './index.create'\r\n\r\nexport class DinoDataSurFace {\r\n createDataSurface = createDataSurface\r\n createViewGrid = createViewGrid\r\n ButtonSwitch = ButtonSwitch\r\n createButtonSwitch = () => ButtonSwitch\r\n\r\n // helpers\r\n setViewModeToURL = setViewModeToURL\r\n getViewModeFromURL = getViewModeFromURL\r\n setPaginationToURL = setPaginationToURL\r\n getPaginationFromURL = getPaginationFromURL\r\n}\r\n\r\nexport const dinoDataSurface = new DinoDataSurFace()\r\n"],"names":["DinoDataSurFace","_createClass","_classCallCheck","_defineProperty","createDataSurface","createViewGrid","ButtonSwitch","this","setViewModeToURL","getViewModeFromURL","setPaginationToURL","getPaginationFromURL","dinoDataSurface"],"mappings":"uYAOA,IAAaA,EAAeC,EAAA,SAAAD,IAAAE,OAAAF,GAAAG,2BACNC,GAAiBD,wBACpBE,GAAcF,sBAChBG,GAAYH,EACNI,KAAA,qBAAA,WAAA,OAAMD,CAAY,GAEvCH,0BACmBK,GAAgBL,4BACdM,GAAkBN,4BAClBO,GAAkBP,8BAChBQ,EAAoB,GAGhCC,EAAkB,IAAIZ"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../../src/lab/data-surface/types.ts"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\nimport { ReactNode } from 'react'\r\n\r\nexport type TGetterId<T> = (item: T, index: number) => string | number\r\n\r\nexport type TRenderableNode = ReactNode | ((currentNode: ReactNode, rawText: string) => ReactNode)\r\n\r\nexport type TPagination = {\r\n page?: number\r\n pageSize?: number\r\n hasNext?: boolean\r\n hasPrev?: boolean\r\n total?: number\r\n}\r\n\r\n/**\r\n * Virtualized rendering configuration.\r\n * Used by both grid and list views for windowing optimization.\r\n */\r\nexport type TVirtualizedConfig = {\r\n scrollTop: number\r\n viewportHeight: number\r\n /** Number of extra rows/columns rendered outside the viewport as a buffer. Defaults to `4` (grid) / `6` (table). */\r\n overscan?: number\r\n gap?: number\r\n}\r\n\r\n/**\r\n * Controls how the list is rendered into the DOM.\r\n * - `normal` — all rows are mounted (suitable for small datasets)\r\n * - `virtualized` — only visible rows are mounted (optimized for large datasets)\r\n */\r\nexport const RenderStrategyRule = {\r\n normal: 'normal',\r\n virtualized: 'virtualized'\r\n} as const\r\nexport type RenderStrategyRule = keyof typeof RenderStrategyRule\r\n\r\n/**\r\n * Controls how the list is displayed.\r\n * - `list` — items are displayed in a single column\r\n * - `grid` — items are displayed in multiple columns (number of columns is determined by the available width)\r\n */\r\nexport const DataSurfaceViewMode = {\r\n list: 'list',\r\n grid: 'grid'\r\n} as const\r\nexport type DataSurfaceViewMode = keyof typeof DataSurfaceViewMode\r\n/**\r\n * Controls how the data is loaded and when the loading indicator is shown.\r\n * - `pagination` — loading indicator is shown when the user clicks on the pagination controls\r\n * - `infiniteScroll` — loading indicator is shown when the user scrolls to the end of the list\r\n */\r\nexport const LoadingModeRule = {\r\n pagination: 'pagination',\r\n infiniteScroll: 'infiniteScroll'\r\n} as const\r\nexport type LoadingModeRule = keyof typeof LoadingModeRule\r\n\r\nexport type TDataSurfaceState = {\r\n viewMode?: DataSurfaceViewMode\r\n loadMode?: LoadingModeRule\r\n renderStrategy?: RenderStrategyRule\r\n}\r\n"],"names":["RenderStrategyRule","normal","virtualized","DataSurfaceViewMode","list","grid","LoadingModeRule","pagination","infiniteScroll"],"mappings":"AAiCO,IAAMA,EAAqB,CAChCC,OAAQ,SACRC,YAAa,eASFC,EAAsB,CACjCC,KAAM,OACNC,KAAM,QAQKC,EAAkB,CAC7BC,WAAY,aACZC,eAAgB"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{objectSpread2 as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as r,jsxs as n}from"react/jsx-runtime";import{colors as t,styled as o,Box as i,alpha as a,CircularProgress as l,Typography as c,Pagination as d,Stack as u}from"@mui/material";var s={padding:"8px",height:"100%",minHeight:180,width:"100%","& > .inner":{width:"100%",height:"100%",padding:"24px 16px",border:"1px dashed ".concat(t.grey[400]),borderRadius:6,display:"flex",alignItems:"center",justifyContent:"center",textAlign:"center"}},g=function(t){return r(p,e(e({},t),{},{children:n("div",{className:"inner",children:[r(l,{size:24}),r(c,{variant:"body2",color:"primary",children:"Loading..."})]})}))},p=o(i)(e(e({},s),{},{"& > div":{gap:8,borderColor:t.blue[400],backgroundColor:t.blue[50]}}));o(i)(e(e({},s),{},{"& > div":{borderColor:t.red[400],backgroundColor:t.red[50],color:t.red[900],flexDirection:"column"}}));var h=function(){return r(m,{children:n("div",{className:"inner",children:[r(c,{variant:"h6",gutterBottom:!0,children:"No data available"}),r(c,{variant:"body2",children:"Try changing the filter or search keyword"})]})})},m=o(i)(e(e({},s),{},{"& > div":{borderColor:t.grey[400],backgroundColor:t.grey[50],color:t.grey[700],flexDirection:"column"}}));o(i)(e(e({},s),{},{"& > div":{borderColor:t.blue[400],backgroundColor:t.blue[50],color:t.blue[900],flexDirection:"column"}})),o(i)(e(e({},s),{},{"& > div":{borderColor:t.red[700],backgroundColor:t.red[50],color:t.red[900],flexDirection:"column"}}));var b=function(){return r(x,{children:n("div",{children:[r(l,{size:24,thickness:4}),r(c,{variant:"body2",color:"text.primary",children:"Loading more..."})]})})},x=o(i)(function(e){return{position:"absolute",inset:0,bgcolor:"dark"===e.theme.palette.mode?"rgba(0,0,0,0.12)":"rgba(255,255,255,0.12)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:10,backdropFilter:"blur(1px)",transition:"opacity 0.2s","& > div":{display:"flex",alignItems:"center",gap:10}}}),v=function(e){var t,o=e.slots,i=e.loading,a=e.hasNext,d=e.currentCount,s=e.total,g=function(e){return"string"!=typeof e?e:r(c,{variant:"caption",color:"text.secondary",children:e})},p=function(e,t){var o="Loading more...",i="Scroll for more",a="No more items";return e?{currentNode:n(u,{flexDirection:"row",alignItems:"center",gap:1,children:[r(l,{color:"primary",size:12,thickness:3}),r(c,{variant:"caption",color:"primary.main",children:o})]}),rawText:o}:t?{currentNode:i,rawText:i}:{currentNode:a,rawText:a}}(i,a),h=p.currentNode;"function"==typeof(null==o?void 0:o.statusText)?h=o.statusText(g(p.currentNode),p.rawText):null!=o&&o.statusText&&(h=o.statusText);var m=d>0?null!=s?"1–".concat(d," of ").concat(s):"1–".concat(d):"—",b="function"==typeof(null==o?void 0:o.rangeText)?o.rangeText(m,m):null!==(t=null==o?void 0:o.rangeText)&&void 0!==t?t:m;return r(f,{children:n("div",{children:[g(h),g(b)]})})},f=o(i)(function(e){var r=e.theme;return{"& > div":{display:"flex",alignItems:"center",justifyContent:"space-between",padding:r.spacing(1,1.5),backgroundColor:a(r.palette.grey[500],.08),borderTop:"1px solid ".concat(a(r.palette.common.black,.08))},".MuiTypography-root":{lineHeight:1}}}),y=function(e){var t=e.page,o=e.pageSize,i=e.total,a=e.hasNext,l=e.loading,u=e.onPrevPage,s=e.onNextPage,g=e.onPageJump,p=t*o+1,h=null!=i?Math.min(p+o-1,i):p+o-1,m=null!=i?Math.ceil(i/o):void 0;return n(C,{children:[r(c,{variant:"caption",color:"text.secondary",children:null!=i?"".concat(p,"–").concat(h," / ").concat(i):"Page ".concat(t+1)}),r(d,{count:m,page:t+1,onChange:function(e,r){var n=r-1;g?g(n):n<t?null==u||u():n>t&&(null==s||s())},disabled:l,size:"small",showFirstButton:null!=m&&m>5,showLastButton:null!=m&&m>5,siblingCount:0,boundaryCount:1,hidePrevButton:null==m&&!a,hideNextButton:null==m&&!a})]})},C=o(i)(function(e){var r=e.theme;return{padding:"8px 16px",display:"flex",alignItems:"center",justifyContent:"space-between",backgroundColor:r.palette.background.paper,borderTop:"1px solid ".concat("dark"===r.palette.mode?"rgba(255, 255, 255, 0.12)":"rgba(0, 0, 0, 0.12)")}});export{v as PanelInfiniteScrollFooter,b as PanelLoadMore,g as PanelLoading,h as PanelNoData,y as PanelPaginationFooter};
|
|
2
|
-
//# sourceMappingURL=ui.units.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ui.units.js","sources":["../../../../src/lab/data-surface/ui.units.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Box, CircularProgress, Pagination, Typography, colors, styled, alpha, Stack } from '@mui/material'\r\n// types\r\nimport type { FC, ReactNode } from 'react'\r\nimport type { BoxProps } from '@mui/material'\r\nimport { TRenderableNode } from './types'\r\n\r\nconst stateWrapBase = {\r\n padding: '8px',\r\n height: '100%',\r\n minHeight: 180,\r\n width: '100%',\r\n '& > .inner': {\r\n width: '100%',\r\n height: '100%',\r\n padding: '24px 16px',\r\n border: `1px dashed ${colors.grey[400]}`,\r\n borderRadius: 6,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n textAlign: 'center'\r\n }\r\n} as const\r\n\r\nexport const PanelLoading: FC<BoxProps> = (props) => (\r\n <PanelLoadingStyled {...props}>\r\n <div className='inner'>\r\n <CircularProgress size={24} />\r\n <Typography variant='body2' color='primary'>\r\n Loading...\r\n </Typography>\r\n </div>\r\n </PanelLoadingStyled>\r\n)\r\n\r\nconst PanelLoadingStyled = styled(Box)({\r\n ...stateWrapBase,\r\n '& > div': { gap: 8, borderColor: colors.blue[400], backgroundColor: colors.blue[50] }\r\n})\r\n\r\nexport const PanelError: FC<{ error: string }> = ({ error }) => (\r\n <PanelErrorStyled>\r\n <div className='inner'>\r\n <Typography variant='h6' gutterBottom>\r\n An error occurred\r\n </Typography>\r\n {error && <Typography variant='body2'>{error}</Typography>}\r\n </div>\r\n </PanelErrorStyled>\r\n)\r\n\r\nconst PanelErrorStyled = styled(Box)({\r\n ...stateWrapBase,\r\n '& > div': {\r\n borderColor: colors.red[400],\r\n backgroundColor: colors.red[50],\r\n color: colors.red[900],\r\n flexDirection: 'column'\r\n }\r\n})\r\n\r\nexport const PanelNoData: FC = () => (\r\n <PanelNoDataStyled>\r\n <div className='inner'>\r\n <Typography variant='h6' gutterBottom>\r\n No data available\r\n </Typography>\r\n <Typography variant='body2'>Try changing the filter or search keyword</Typography>\r\n </div>\r\n </PanelNoDataStyled>\r\n)\r\n\r\nconst PanelNoDataStyled = styled(Box)({\r\n ...stateWrapBase,\r\n '& > div': {\r\n borderColor: colors.grey[400],\r\n backgroundColor: colors.grey[50],\r\n color: colors.grey[700],\r\n flexDirection: 'column'\r\n }\r\n})\r\n\r\nexport const PanelWaiting: FC = () => (\r\n <PanelWaitingStyled>\r\n <div className='inner'>\r\n <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n Waiting for data...\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n Please wait while we fetch the data.\r\n </Typography>\r\n </div>\r\n </PanelWaitingStyled>\r\n)\r\n\r\nconst PanelWaitingStyled = styled(Box)({\r\n ...stateWrapBase,\r\n '& > div': {\r\n borderColor: colors.blue[400],\r\n backgroundColor: colors.blue[50],\r\n color: colors.blue[900],\r\n flexDirection: 'column'\r\n }\r\n})\r\n\r\nexport const PanelMissingConfig: FC = () => (\r\n <PanelMissingConfigStyled>\r\n <div className='inner'>\r\n <Typography variant='h6' sx={{ fontWeight: 'bold' }}>\r\n Missing Configuration\r\n </Typography>\r\n <Typography variant='body2'>A required configuration is missing for this view to work correctly.</Typography>\r\n </div>\r\n </PanelMissingConfigStyled>\r\n)\r\n\r\nconst PanelMissingConfigStyled = styled(Box)({\r\n ...stateWrapBase,\r\n '& > div': {\r\n borderColor: colors.red[700],\r\n backgroundColor: colors.red[50],\r\n color: colors.red[900],\r\n flexDirection: 'column'\r\n }\r\n})\r\n\r\nexport const PanelLoadMore: FC = () => (\r\n <PanelLoadMoreStyled>\r\n <div>\r\n <CircularProgress size={24} thickness={4} />\r\n <Typography variant='body2' color='text.primary'>\r\n Loading more...\r\n </Typography>\r\n </div>\r\n </PanelLoadMoreStyled>\r\n)\r\n\r\nconst PanelLoadMoreStyled = styled(Box)(({ theme }) => ({\r\n position: 'absolute',\r\n inset: 0,\r\n bgcolor: theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.12)' : 'rgba(255,255,255,0.12)',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n zIndex: 10,\r\n backdropFilter: 'blur(1px)',\r\n transition: 'opacity 0.2s',\r\n '& > div': { display: 'flex', alignItems: 'center', gap: 10 }\r\n}))\r\n\r\nexport interface IPanelInfiniteScrollFooterSlots {\r\n statusText?: TRenderableNode\r\n rangeText?: TRenderableNode\r\n}\r\n\r\nexport interface IPanelInfiniteScrollFooterProps {\r\n loading?: boolean\r\n hasNext?: boolean\r\n currentCount: number\r\n total?: number\r\n slots?: IPanelInfiniteScrollFooterSlots\r\n}\r\n\r\nconst mapStatusText = (loading?: boolean, hasNext?: boolean): { currentNode: ReactNode; rawText: string } => {\r\n const mapRawText: Record<string, string> = { loading: 'Loading more...', hasNext: 'Scroll for more', noMore: 'No more items' }\r\n if (loading) {\r\n return {\r\n currentNode: (\r\n <Stack flexDirection='row' alignItems='center' gap={1}>\r\n <CircularProgress color='primary' size={12} thickness={3} />\r\n <Typography variant='caption' color='primary.main'>\r\n {mapRawText.loading}\r\n </Typography>\r\n </Stack>\r\n ),\r\n rawText: mapRawText.loading\r\n }\r\n } else if (hasNext) {\r\n return { currentNode: mapRawText.hasNext, rawText: mapRawText.hasNext }\r\n } else {\r\n return { currentNode: mapRawText.noMore, rawText: mapRawText.noMore }\r\n }\r\n}\r\n\r\nexport const PanelInfiniteScrollFooter: FC<IPanelInfiniteScrollFooterProps> = (props) => {\r\n const { slots, loading, hasNext, currentCount, total } = props\r\n\r\n const renderText = (value: ReactNode) => {\r\n if (typeof value !== 'string') return value\r\n return (\r\n <Typography variant='caption' color='text.secondary'>\r\n {value}\r\n </Typography>\r\n )\r\n }\r\n\r\n // Status text on the left\r\n let obj = mapStatusText(loading, hasNext)\r\n let finalStatusText: ReactNode = obj.currentNode\r\n if (typeof slots?.statusText === 'function') {\r\n finalStatusText = slots.statusText(renderText(obj.currentNode), obj.rawText)\r\n } else if (slots?.statusText) {\r\n finalStatusText = slots.statusText\r\n }\r\n\r\n // Range text on the right\r\n const rangeText = currentCount > 0 ? (total != null ? `1–${currentCount} of ${total}` : `1–${currentCount}`) : '—'\r\n const finalRangeText = typeof slots?.rangeText === 'function' ? slots.rangeText(rangeText, rangeText) : (slots?.rangeText ?? rangeText)\r\n\r\n return (\r\n <PanelInfiniteScrollFooterStyled>\r\n <div>\r\n {renderText(finalStatusText)}\r\n {renderText(finalRangeText)}\r\n </div>\r\n </PanelInfiniteScrollFooterStyled>\r\n )\r\n}\r\n\r\nconst PanelInfiniteScrollFooterStyled = styled(Box)(({ theme }) => ({\r\n // padding: theme.spacing(0, 1),\r\n '& > div': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n padding: theme.spacing(1, 1.5),\r\n backgroundColor: alpha(theme.palette.grey[500], 0.08),\r\n borderTop: `1px solid ${alpha(theme.palette.common.black, 0.08)}`\r\n },\r\n '.MuiTypography-root': { lineHeight: 1 }\r\n}))\r\n\r\nexport interface IPanelPaginationFooterProps {\r\n page: number\r\n pageSize: number\r\n total?: number\r\n hasNext?: boolean\r\n hasPrev?: boolean\r\n loading?: boolean\r\n onPrevPage?: () => void\r\n onNextPage?: () => void\r\n onPageJump?: (page: number) => void\r\n}\r\n\r\nexport const PanelPaginationFooter: FC<IPanelPaginationFooterProps> = (props) => {\r\n const { page, pageSize, total, hasNext, loading, onPrevPage, onNextPage, onPageJump } = props\r\n const from = page * pageSize + 1\r\n const to = total != null ? Math.min(from + pageSize - 1, total) : from + pageSize - 1\r\n\r\n // Calculate page count for MUI Pagination (1-indexed)\r\n const pageCount = total != null ? Math.ceil(total / pageSize) : undefined\r\n\r\n const handlePageChange = (_event: any, value: number) => {\r\n // MUI Pagination uses 1-indexed, convert to 0-indexed\r\n const targetPage = value - 1\r\n\r\n if (onPageJump) {\r\n // Use direct page jump if available\r\n onPageJump(targetPage)\r\n } else {\r\n // Fallback to prev/next if no jump handler\r\n if (targetPage < page) {\r\n onPrevPage?.()\r\n } else if (targetPage > page) {\r\n onNextPage?.()\r\n }\r\n }\r\n }\r\n\r\n return (\r\n <PanelPaginationFooterStyled>\r\n <Typography variant='caption' color='text.secondary'>\r\n {total != null ? `${from}–${to} / ${total}` : `Page ${page + 1}`}\r\n </Typography>\r\n <Pagination\r\n count={pageCount}\r\n page={page + 1}\r\n onChange={handlePageChange}\r\n disabled={loading}\r\n size='small'\r\n showFirstButton={pageCount != null && pageCount > 5}\r\n showLastButton={pageCount != null && pageCount > 5}\r\n siblingCount={0}\r\n boundaryCount={1}\r\n hidePrevButton={pageCount == null && !hasNext}\r\n hideNextButton={pageCount == null && !hasNext}\r\n />\r\n </PanelPaginationFooterStyled>\r\n )\r\n}\r\n\r\nconst PanelPaginationFooterStyled = styled(Box)(({ theme }) => ({\r\n padding: '8px 16px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n backgroundColor: theme.palette.background.paper,\r\n borderTop: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)'}`\r\n}))\r\n"],"names":["stateWrapBase","padding","height","minHeight","width","border","concat","colors","grey","borderRadius","display","alignItems","justifyContent","textAlign","PanelLoading","props","_jsx","PanelLoadingStyled","_objectSpread","children","_jsxs","className","CircularProgress","size","Typography","variant","color","styled","Box","gap","borderColor","blue","backgroundColor","red","flexDirection","PanelNoData","PanelNoDataStyled","gutterBottom","PanelLoadMore","PanelLoadMoreStyled","thickness","_ref2","position","inset","bgcolor","theme","palette","mode","zIndex","backdropFilter","transition","PanelInfiniteScrollFooter","_slots$rangeText","slots","loading","hasNext","currentCount","total","renderText","value","obj","mapRawText","currentNode","Stack","rawText","mapStatusText","finalStatusText","statusText","rangeText","finalRangeText","PanelInfiniteScrollFooterStyled","_ref3","spacing","alpha","borderTop","common","black","lineHeight","PanelPaginationFooter","page","pageSize","onPrevPage","onNextPage","onPageJump","from","to","Math","min","pageCount","ceil","undefined","PanelPaginationFooterStyled","Pagination","count","onChange","_event","targetPage","disabled","showFirstButton","showLastButton","siblingCount","boundaryCount","hidePrevButton","hideNextButton","_ref4","background","paper"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{defineProperty as e,objectSpread2 as n,asyncToGenerator as i,regenerator as t,slicedToArray as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as o,jsxs as a}from"react/jsx-runtime";import{styled as l,Box as d,Grid as u}from"@mui/material";import{useCallback as c,useMemo as g,useRef as s,useState as v,useLayoutEffect as p}from"react";import{getMaxGridItemHeight as h,GridItemDefault as m,getGridItemSizes as f,getMaxGridGap as x,resolveGridColumnsFromWidth as z}from"./view-grid.units.js";function I(e){var i=function(e){return function(i){var t=g(function(){var n,t,r;return{gap:x(i.gap,e.gap),sizes:f(null!==(n=i.sizes)&&void 0!==n?n:e.sizes),getterId:e.getterId,Component:null!==(t=null!==(r=i.Component)&&void 0!==r?r:e.Component)&&void 0!==t?t:m,gridItemHeight:h(i.gridItemHeight,e.gridItemHeight)}},[i.value,i.gap,i.sizes,i.Component,e]),r=g(function(){return i.value},[i.value]),a=function(e,n){var i=t.Component;return o(i,{value:e,index:n})};return o(w,{className:C.root,children:o("div",{className:C.scrollContainer,onScroll:function(e){var n,t=e.currentTarget;t.scrollHeight-t.scrollTop-t.clientHeight<=80&&(null===(n=i.onNearEnd)||void 0===n||n.call(i))},children:o(u,{container:!0,spacing:"".concat(t.gap,"px"),children:r.map(function(e,i){var r,l=null!==(r=t.getterId(e,i))&&void 0!==r?r:i;return o(u,n(n({className:C.gridItem,item:!0},t.sizes),{},{sx:{height:t.gridItemHeight},children:a(e,i)}),l)})})})})}}(e),t=function(e){return function(n){var i,t,l=g(function(){return n.value},[n.value]),u=g(function(){var i,t,r;return{gap:x(n.gap,e.gap,8),sizes:f(null!==(i=n.sizes)&&void 0!==i?i:e.sizes),getterId:e.getterId,Component:null!==(t=null!==(r=n.Component)&&void 0!==r?r:e.Component)&&void 0!==t?t:m,gridItemHeight:h(n.gridItemHeight,e.gridItemHeight),virtualized:Object.assign({},e.virtualizedConfig,n.virtualizedConfig)}},[n.gap,n.sizes,n.Component,e]),c=u.sizes,I=u.getterId,H=u.virtualized,b=u.gridItemHeight,w=s(null),T=v(0),M=r(T,2),y=M[0],N=M[1],V=v(0),j=r(V,2),G=j[0],D=j[1],R=v(null!==(i=H.scrollTop)&&void 0!==i?i:0),P=r(R,2),k=P[0],E=P[1],Y=h(b),O=Math.max(1,null!==(t=H.overscan)&&void 0!==t?t:4),_=x(u.gap),A=_/2;p(function(){if(w.current){var e=function(){var e,n,i,t,r=null!==(e=null===(n=w.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0,o=null!==(i=null===(t=w.current)||void 0===t?void 0:t.clientHeight)&&void 0!==i?i:0;N(function(e){return e===r?e:r}),D(function(e){return e===o?e:o})};e();var n=new ResizeObserver(function(){e()});return n.observe(w.current),function(){return n.disconnect()}}},[]),p(function(){"number"==typeof H.scrollTop&&E(H.scrollTop)},[H.scrollTop]);var B=z(y,c),W=Y+_,q=g(function(){var e,n,i=l.length;if(0===i)return{startRow:0,endRow:-1,topSpacerHeight:0,bottomSpacerHeight:0,startIndex:0,endIndex:-1};var t=Math.ceil(i/B),r=Math.max(1,null!==(e=null!==(n=H.viewportHeight)&&void 0!==n?n:G)&&void 0!==e?e:1),o="number"==typeof H.scrollTop?H.scrollTop:k,a=Math.max(0,Math.floor(o/W)-O),d=Math.ceil(r/W),u=Math.min(t-1,a+d+2*O),c=a*B,g=Math.min(i-1,(u+1)*B-1);return{startRow:a,endRow:u,topSpacerHeight:a*W,bottomSpacerHeight:Math.max(0,(t-u-1)*W),startIndex:c,endIndex:g}},[B,l.length,O,W,H,k,G]),F=q.endIndex>=q.startIndex?l.slice(q.startIndex,q.endIndex+1):[],J=function(e,n){var i=u.Component;return o(i,{value:e,index:n})},K=[C.gridVirtualized,C.grid].join(" ");return o(S,{className:K,children:a(d,{ref:w,sx:{p:"".concat(A,"px"),overflowY:"auto",height:"100%",boxSizing:"border-box"},onScroll:function(e){var i,t=e.currentTarget;"number"!=typeof H.scrollTop&&E(t.scrollTop),t.scrollHeight-t.scrollTop-t.clientHeight<=80&&(null===(i=n.onNearEnd)||void 0===i||i.call(n))},children:[q.topSpacerHeight>0?o(d,{sx:{height:q.topSpacerHeight}}):null,o(d,{sx:{display:"grid",gap:"".concat(_,"px"),gridTemplateColumns:"repeat(".concat(B,", minmax(0, 1fr))")},children:F.map(function(e,n){var i,t=q.startIndex+n,r=null!==(i=I(e,t))&&void 0!==i?i:t;return o(d,{sx:{minHeight:Y,height:Y},children:J(e,t)},r)})}),q.bottomSpacerHeight>0?o(d,{sx:{height:q.bottomSpacerHeight}}):null]})})}}(e);return function(r){var a,l,d=null!==(a=null!==(l=r.renderStrategy)&&void 0!==l?l:e.renderStrategy)&&void 0!==a?a:"normal";return o("virtualized"===d?t:i,n({},r))}}function H(e){return function(n){var r,a,l,d=c(i(t().m(function e(){var i,r,o,a,l,d,u,c,g;return t().w(function(e){for(;;)switch(e.n){case 0:if("infiniteScroll"===n.loadMode){e.n=1;break}return e.a(2);case 1:if(null!==(i=n.pagination)&&void 0!==i&&i.hasNext){e.n=2;break}return e.a(2);case 2:if(!n.loading){e.n=3;break}return e.a(2);case 3:return u=null!==(r=null===(o=n.pagination)||void 0===o?void 0:o.page)&&void 0!==r?r:0,c=null!==(a=null===(l=n.pagination)||void 0===l?void 0:l.pageSize)&&void 0!==a?a:20,g=u+1,e.n=4,null===(d=n.onPageChange)||void 0===d?void 0:d.call(n,g,c);case 4:return e.a(2)}},e)})),[n.loadMode,null===(r=n.pagination)||void 0===r?void 0:r.hasNext,null===(a=n.pagination)||void 0===a?void 0:a.page,null===(l=n.pagination)||void 0===l?void 0:l.pageSize,n.loading,n.onPageChange]);return o(e,{value:n.value,gap:n.gap,sizes:n.sizes,gridItemHeight:n.gridItemHeight,renderStrategy:n.renderStrategy,Component:n.Component,virtualizedConfig:n.virtualizedConfig,onNearEnd:"infiniteScroll"===n.loadMode?d:void 0})}}var b={root:"DinoViewGrid-root",scrollContainer:"DinoViewGrid-scrollContainer",grid:"DinoViewGrid-grid",gridVirtualized:"DinoViewGrid-gridVirtualized",gridItem:"DinoViewGrid-item"},C=b,w=l(d)(function(n){var i=n.theme;return e({position:"relative",width:"100%",height:"100%",overflow:"hidden"},"& .".concat(C.scrollContainer),{position:"absolute",top:0,left:0,right:0,bottom:0,overflowY:"auto",padding:i.spacing(1)})}),S=l(d)(function(n){var i=n.theme;return e({position:"relative",width:"100%",height:"100%",overflow:"hidden",boxSizing:"border-box","& > div":{height:"100%"}},"& .".concat(C.scrollContainer),{position:"absolute",top:0,left:0,right:0,bottom:0,overflowY:"auto",padding:i.spacing(1)})});export{I as createViewGrid,H as createViewGridLoading,I as default,b as viewGridClasses};
|
|
2
|
-
//# sourceMappingURL=view-grid.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"view-grid.js","sources":["../../../../src/lab/data-surface/view-grid.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Box, Grid, styled } from '@mui/material'\r\nimport { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'\r\nimport { getGridItemSizes, getMaxGridGap, getMaxGridItemHeight, GridItemDefault, resolveGridColumnsFromWidth } from './view-grid.units'\r\n// types\r\nimport type { BoxProps } from '@mui/material'\r\nimport type { ComponentType, FC } from 'react'\r\nimport type { IViewGridItemProps, TGridSizes } from './view-grid.types'\r\nimport type { TGetterId, LoadingModeRule, TPagination, TVirtualizedConfig, RenderStrategyRule } from './types'\r\n\r\nexport interface IViewGridBase<T> {\r\n gap?: number\r\n sizes?: TGridSizes\r\n gridItemHeight?: number\r\n /**\r\n * Controls how the list is rendered into the DOM.\r\n * - `normal` — all rows are mounted (suitable for small datasets)\r\n * - `virtualized` — only visible rows are mounted (optimized for large datasets)\r\n * @default 'normal'\r\n */\r\n renderStrategy?: RenderStrategyRule\r\n Component?: ComponentType<IViewGridItemProps<T>>\r\n virtualizedConfig?: TVirtualizedConfig\r\n /** Called when user scrolls near the bottom of the list. Use this to trigger pagination or infinity load. */\r\n onNearEnd?: () => void\r\n}\r\n\r\nexport interface IViewGridConfig<T> extends IViewGridBase<T> {\r\n getterId: TGetterId<T>\r\n}\r\n\r\nexport interface IViewGridProps<T> extends IViewGridBase<T> {\r\n value: T[]\r\n}\r\n\r\nexport interface IViewGridLoadingProps<T> extends IViewGridBase<T> {\r\n value: T[]\r\n loadMode: LoadingModeRule\r\n loading?: boolean\r\n pagination?: TPagination\r\n onPageChange?: (page: number, pageSize: number) => void | Promise<void>\r\n}\r\n\r\nfunction createViewGridNormal<T>(config: IViewGridConfig<T>) {\r\n const ViewGridNormal: FC<IViewGridProps<T>> = (props) => {\r\n const mergedConfig = useMemo(() => {\r\n return {\r\n gap: getMaxGridGap(props.gap, config.gap),\r\n sizes: getGridItemSizes(props.sizes ?? config.sizes),\r\n getterId: config.getterId,\r\n Component: props.Component ?? config.Component ?? GridItemDefault,\r\n gridItemHeight: getMaxGridItemHeight(props.gridItemHeight, config.gridItemHeight)\r\n }\r\n }, [props.value, props.gap, props.sizes, props.Component, config])\r\n\r\n const gridItems = useMemo(() => {\r\n return props.value\r\n }, [props.value])\r\n\r\n const renderItem = (item: T, index: number) => {\r\n const ItemComponent = mergedConfig.Component\r\n return <ItemComponent value={item} index={index} />\r\n }\r\n\r\n return (\r\n <ViewGridNormalStyled className={classes.root}>\r\n <div\r\n className={classes.scrollContainer}\r\n onScroll={(e) => {\r\n const t = e.currentTarget\r\n if (t.scrollHeight - t.scrollTop - t.clientHeight <= 80) {\r\n props.onNearEnd?.()\r\n }\r\n }}\r\n >\r\n <Grid container spacing={`${mergedConfig.gap}px`}>\r\n {gridItems.map((item, index) => {\r\n const key = mergedConfig.getterId(item, index) ?? index\r\n return (\r\n <Grid key={key} className={classes.gridItem} item {...mergedConfig.sizes} sx={{ height: mergedConfig.gridItemHeight }}>\r\n {renderItem(item, index)}\r\n </Grid>\r\n )\r\n })}\r\n </Grid>\r\n </div>\r\n </ViewGridNormalStyled>\r\n )\r\n }\r\n return ViewGridNormal\r\n}\r\n\r\nfunction createViewGridVirtualized<T>(config: IViewGridConfig<T>) {\r\n const ViewGridVirtualized: FC<IViewGridProps<T>> = (props) => {\r\n const finalItems = useMemo(() => {\r\n return props.value\r\n }, [props.value])\r\n\r\n const mergedConfig = useMemo(() => {\r\n return {\r\n gap: getMaxGridGap(props.gap, config.gap, 8),\r\n sizes: getGridItemSizes(props.sizes ?? config.sizes),\r\n getterId: config.getterId,\r\n Component: props.Component ?? config.Component ?? GridItemDefault,\r\n gridItemHeight: getMaxGridItemHeight(props.gridItemHeight, config.gridItemHeight),\r\n virtualized: Object.assign({}, config.virtualizedConfig, props.virtualizedConfig) as TVirtualizedConfig\r\n }\r\n }, [props.gap, props.sizes, props.Component, config])\r\n\r\n const { sizes, getterId, virtualized, gridItemHeight } = mergedConfig\r\n\r\n const wrapRef = useRef<HTMLDivElement | null>(null)\r\n const [containerWidth, setContainerWidth] = useState(0)\r\n const [containerHeight, setContainerHeight] = useState(0)\r\n const [scrollTopState, setScrollTopState] = useState(virtualized.scrollTop ?? 0)\r\n\r\n const itemHeight = getMaxGridItemHeight(gridItemHeight)\r\n const overscan = Math.max(1, virtualized.overscan ?? 4)\r\n const gapPx = getMaxGridGap(mergedConfig.gap)\r\n const outerGutterPx = gapPx / 2\r\n\r\n useLayoutEffect(() => {\r\n if (!wrapRef.current) return\r\n\r\n const updateSize = () => {\r\n const nextWidth = wrapRef.current?.clientWidth ?? 0\r\n const nextHeight = wrapRef.current?.clientHeight ?? 0\r\n setContainerWidth((prev) => (prev === nextWidth ? prev : nextWidth))\r\n setContainerHeight((prev) => (prev === nextHeight ? prev : nextHeight))\r\n }\r\n\r\n updateSize()\r\n\r\n const observer = new ResizeObserver(() => {\r\n updateSize()\r\n })\r\n\r\n observer.observe(wrapRef.current)\r\n return () => observer.disconnect()\r\n }, [])\r\n\r\n // sync external virtualized.scrollTop when provided\r\n useLayoutEffect(() => {\r\n if (typeof virtualized.scrollTop === 'number') {\r\n setScrollTopState(virtualized.scrollTop)\r\n }\r\n }, [virtualized.scrollTop])\r\n\r\n const columns = resolveGridColumnsFromWidth(containerWidth, sizes)\r\n const rowHeight = itemHeight + gapPx\r\n\r\n const windowed = useMemo(() => {\r\n const totalItems = finalItems.length\r\n if (totalItems === 0) {\r\n return { startRow: 0, endRow: -1, topSpacerHeight: 0, bottomSpacerHeight: 0, startIndex: 0, endIndex: -1 }\r\n }\r\n\r\n const totalRows = Math.ceil(totalItems / columns)\r\n const safeViewportHeight = Math.max(1, virtualized.viewportHeight ?? containerHeight ?? 1)\r\n const effectiveScrollTop = typeof virtualized.scrollTop === 'number' ? virtualized.scrollTop : scrollTopState\r\n const startRow = Math.max(0, Math.floor(effectiveScrollTop / rowHeight) - overscan)\r\n const visibleRows = Math.ceil(safeViewportHeight / rowHeight)\r\n const endRow = Math.min(totalRows - 1, startRow + visibleRows + overscan * 2)\r\n const startIndex = startRow * columns\r\n const endIndex = Math.min(totalItems - 1, (endRow + 1) * columns - 1)\r\n const topSpacerHeight = startRow * rowHeight\r\n const bottomSpacerHeight = Math.max(0, (totalRows - endRow - 1) * rowHeight)\r\n\r\n return { startRow, endRow, topSpacerHeight, bottomSpacerHeight, startIndex, endIndex }\r\n }, [columns, finalItems.length, overscan, rowHeight, virtualized, scrollTopState, containerHeight])\r\n\r\n const getSxForContent = (): BoxProps['sx'] => ({\r\n display: 'grid',\r\n gap: `${gapPx}px`,\r\n gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`\r\n })\r\n\r\n const visibleItems = windowed.endIndex >= windowed.startIndex ? finalItems.slice(windowed.startIndex, windowed.endIndex + 1) : []\r\n\r\n const renderItem = (item: T, index: number) => {\r\n const ItemComponent = mergedConfig.Component\r\n return <ItemComponent value={item} index={index} />\r\n }\r\n\r\n const rootClasses = [classes.gridVirtualized, classes.grid].join(' ')\r\n return (\r\n <ViewGridVirtualizedStyled className={rootClasses}>\r\n <Box\r\n ref={wrapRef}\r\n sx={{ p: `${outerGutterPx}px`, overflowY: 'auto', height: '100%', boxSizing: 'border-box' }}\r\n onScroll={(e) => {\r\n const t = e.currentTarget as HTMLDivElement\r\n if (typeof virtualized.scrollTop !== 'number') {\r\n setScrollTopState(t.scrollTop)\r\n }\r\n if (t.scrollHeight - t.scrollTop - t.clientHeight <= 80) {\r\n props.onNearEnd?.()\r\n }\r\n }}\r\n >\r\n {windowed.topSpacerHeight > 0 ? <Box sx={{ height: windowed.topSpacerHeight }} /> : null}\r\n\r\n <Box sx={getSxForContent()}>\r\n {visibleItems.map((item, offset) => {\r\n const index = windowed.startIndex + offset\r\n const key = getterId(item, index) ?? index\r\n return (\r\n <Box key={key} sx={{ minHeight: itemHeight, height: itemHeight }}>\r\n {renderItem(item, index)}\r\n </Box>\r\n )\r\n })}\r\n </Box>\r\n\r\n {windowed.bottomSpacerHeight > 0 ? <Box sx={{ height: windowed.bottomSpacerHeight }} /> : null}\r\n </Box>\r\n </ViewGridVirtualizedStyled>\r\n )\r\n }\r\n return ViewGridVirtualized\r\n}\r\n\r\nexport function createViewGrid<T>(config: IViewGridConfig<T>) {\r\n const ViewGridNormal = createViewGridNormal<T>(config)\r\n const ViewGridVirtualized = createViewGridVirtualized<T>(config)\r\n\r\n const ViewGrid: FC<IViewGridProps<T>> = (props) => {\r\n const renderStrategy = props.renderStrategy ?? config.renderStrategy ?? 'normal'\r\n if (renderStrategy === 'virtualized') {\r\n return <ViewGridVirtualized {...props} />\r\n }\r\n return <ViewGridNormal {...props} />\r\n }\r\n return ViewGrid\r\n}\r\n\r\nexport function createViewGridLoading<T>(GridComponent: ComponentType<IViewGridProps<T>>) {\r\n const ViewGridLoading: FC<IViewGridLoadingProps<T>> = (props) => {\r\n const handleNearEnd = useCallback(async () => {\r\n if (props.loadMode !== 'infiniteScroll') return\r\n if (!props.pagination?.hasNext) return\r\n if (props.loading) return\r\n\r\n const currentPage = props.pagination?.page ?? 0\r\n const currentPageSize = props.pagination?.pageSize ?? 20\r\n const nextPage = currentPage + 1\r\n await props.onPageChange?.(nextPage, currentPageSize)\r\n }, [props.loadMode, props.pagination?.hasNext, props.pagination?.page, props.pagination?.pageSize, props.loading, props.onPageChange])\r\n\r\n return (\r\n <GridComponent\r\n value={props.value}\r\n gap={props.gap}\r\n sizes={props.sizes}\r\n gridItemHeight={props.gridItemHeight}\r\n renderStrategy={props.renderStrategy}\r\n Component={props.Component}\r\n virtualizedConfig={props.virtualizedConfig}\r\n onNearEnd={props.loadMode === 'infiniteScroll' ? handleNearEnd : undefined}\r\n />\r\n )\r\n }\r\n\r\n return ViewGridLoading\r\n}\r\n\r\nexport default createViewGrid\r\n\r\nexport const viewGridClasses = {\r\n root: 'DinoViewGrid-root',\r\n scrollContainer: 'DinoViewGrid-scrollContainer',\r\n grid: 'DinoViewGrid-grid',\r\n gridVirtualized: 'DinoViewGrid-gridVirtualized',\r\n gridItem: 'DinoViewGrid-item'\r\n}\r\nconst classes = viewGridClasses\r\n\r\nconst ViewGridNormalStyled = styled(Box)(({ theme }) => ({\r\n position: 'relative',\r\n width: '100%',\r\n height: '100%',\r\n overflow: 'hidden',\r\n [`& .${classes.scrollContainer}`]: {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n overflowY: 'auto',\r\n padding: theme.spacing(1)\r\n }\r\n}))\r\n\r\nconst ViewGridVirtualizedStyled = styled(Box)(({ theme }) => ({\r\n position: 'relative',\r\n width: '100%',\r\n height: '100%',\r\n overflow: 'hidden',\r\n boxSizing: 'border-box',\r\n '& > div': {\r\n height: '100%'\r\n },\r\n [`& .${classes.scrollContainer}`]: {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n overflowY: 'auto',\r\n padding: theme.spacing(1)\r\n }\r\n}))\r\n"],"names":["createViewGrid","config","ViewGridNormal","props","mergedConfig","useMemo","_props$sizes","_ref","_props$Component","gap","getMaxGridGap","sizes","getGridItemSizes","getterId","Component","GridItemDefault","gridItemHeight","getMaxGridItemHeight","value","gridItems","renderItem","item","index","ItemComponent","_jsx","ViewGridNormalStyled","className","classes","root","children","scrollContainer","onScroll","e","_props$onNearEnd","t","currentTarget","scrollHeight","scrollTop","clientHeight","onNearEnd","call","Grid","container","spacing","concat","map","_mergedConfig$getterI","key","_objectSpread","gridItem","sx","height","createViewGridNormal","ViewGridVirtualized","_virtualized$scrollTo","_virtualized$overscan","finalItems","_props$sizes2","_ref2","_props$Component2","virtualized","Object","assign","virtualizedConfig","wrapRef","useRef","_useState","useState","_useState2","_slicedToArray","containerWidth","setContainerWidth","_useState3","_useState4","containerHeight","setContainerHeight","_useState5","_useState6","scrollTopState","setScrollTopState","itemHeight","overscan","Math","max","gapPx","outerGutterPx","useLayoutEffect","current","updateSize","_wrapRef$current$clie","_wrapRef$current","_wrapRef$current$clie2","_wrapRef$current2","nextWidth","clientWidth","nextHeight","prev","observer","ResizeObserver","observe","disconnect","columns","resolveGridColumnsFromWidth","rowHeight","windowed","_ref3","_virtualized$viewport","totalItems","length","startRow","endRow","topSpacerHeight","bottomSpacerHeight","startIndex","endIndex","totalRows","ceil","safeViewportHeight","viewportHeight","effectiveScrollTop","floor","visibleRows","min","visibleItems","slice","rootClasses","gridVirtualized","grid","join","ViewGridVirtualizedStyled","_jsxs","Box","ref","p","overflowY","boxSizing","_props$onNearEnd2","display","gridTemplateColumns","offset","_getterId","minHeight","createViewGridVirtualized","_ref4","_props$renderStrategy","renderStrategy","createViewGridLoading","GridComponent","_props$pagination4","_props$pagination5","_props$pagination6","handleNearEnd","useCallback","_asyncToGenerator","_regenerator","m","_callee","_props$pagination","_props$pagination$pag","_props$pagination2","_props$pagination$pag2","_props$pagination3","_props$onPageChange","currentPage","currentPageSize","nextPage","w","_context","n","loadMode","a","pagination","hasNext","loading","page","pageSize","onPageChange","undefined","viewGridClasses","styled","_ref6","theme","_defineProperty","position","width","overflow","top","left","right","bottom","padding","_ref8"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{toConsumableArray as l}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{Card as i,Stack as o,Typography as t}from"@mui/material";var u=8,a=function(){for(var n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];var o=r.filter(Boolean);return 0===o.length?8:Math.max.apply(Math,[0].concat(l(o.map(function(l){return null!=l?l:8}))))},e=120,d=function(){for(var n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];return 0===r.length?120:Math.max.apply(Math,l(r.map(function(l){return null!=l?l:120})))},m={xs:12,sm:6,md:4,lg:3},v=function(l){return null!=l?l:m},h=function(l){var n,r,i,o,t,u,a,e,d,v,h,x,s,c,f,p=null!=l?l:{},g=p.xs,w=p.sm,y=p.md,M=p.lg,b=p.xl;return{xs:null!==(n=null!=g?g:m.xs)&&void 0!==n?n:12,sm:null!==(r=null!==(i=null!=w?w:g)&&void 0!==i?i:m.sm)&&void 0!==r?r:6,md:null!==(o=null!==(t=null!==(u=null!=y?y:w)&&void 0!==u?u:g)&&void 0!==t?t:m.md)&&void 0!==o?o:4,lg:null!==(a=null!==(e=null!==(d=null!==(v=null!=M?M:y)&&void 0!==v?v:w)&&void 0!==d?d:g)&&void 0!==e?e:m.lg)&&void 0!==a?a:3,xl:null!==(h=null!==(x=null!==(s=null!==(c=null!==(f=null!=b?b:M)&&void 0!==f?f:y)&&void 0!==c?c:w)&&void 0!==s?s:g)&&void 0!==x?x:m.xl)&&void 0!==h?h:3}},x=function(l,n){var r,i=h(n),o=function(l){return l>=1536?"xl":l>=1200?"lg":l>=900?"md":l>=600?"sm":"xs"}(l),t=null!==(r=i[o])&&void 0!==r?r:12,u=Math.min(12,Math.max(1,t));return Math.max(1,Math.floor(12/u))},s=function(l){var u=JSON.stringify(l.value,null,2);return n(i,{variant:"outlined",sx:{height:"100%",width:"100%",overflow:"hidden",p:1,boxSizing:"border-box!important"},title:u,children:r(o,{spacing:1,children:[r(t,{children:["Index: ",l.index]}),r(t,{variant:"body2",sx:{fontFamily:"monospace",whiteSpace:"pre-wrap",wordBreak:"break-word"},children:["Data: ",u]})]})})};export{u as DEFAULT_GRID_GAP_PX,e as DEFAULT_GRID_ITEM_MAX_HEIGHT,m as DEFAULT_GRID_ITEM_SIZES,s as GridItemDefault,v as getGridItemSizes,a as getMaxGridGap,d as getMaxGridItemHeight,h as normalizeGridSizes,x as resolveGridColumnsFromWidth};
|
|
2
|
-
//# sourceMappingURL=view-grid.units.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"view-grid.units.js","sources":["../../../../src/lab/data-surface/view-grid.units.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Card, Stack, Typography } from '@mui/material'\r\n// types\r\nimport type { FC } from 'react'\r\nimport type { IViewGridItemProps, TGridSizes } from './view-grid.types'\r\n\r\nexport const DEFAULT_GRID_GAP_PX = 8\r\nexport const getMaxGridGap = (...gap: (number | undefined)[]) => {\r\n const finalGaps = gap.filter(Boolean)\r\n if (finalGaps.length === 0) return DEFAULT_GRID_GAP_PX\r\n return Math.max(0, ...finalGaps.map((g) => g ?? DEFAULT_GRID_GAP_PX))\r\n}\r\n\r\nexport const DEFAULT_GRID_ITEM_MAX_HEIGHT = 120\r\n// export const DEFAULT_GRID_ITEM_MIN_HEIGHT = 60\r\nexport const getMaxGridItemHeight = (...height: (number | undefined)[]) => {\r\n if (height.length === 0) return DEFAULT_GRID_ITEM_MAX_HEIGHT\r\n return Math.max(...height.map((h) => h ?? DEFAULT_GRID_ITEM_MAX_HEIGHT))\r\n}\r\n\r\nexport const DEFAULT_GRID_ITEM_SIZES: TGridSizes = { xs: 12, sm: 6, md: 4, lg: 3 }\r\nexport const getGridItemSizes = (sizes?: TGridSizes): TGridSizes => {\r\n return sizes ?? DEFAULT_GRID_ITEM_SIZES\r\n}\r\nexport const normalizeGridSizes = (sizes?: TGridSizes): Required<TGridSizes> => {\r\n const { xs, sm, md, lg, xl } = sizes ?? {}\r\n return {\r\n xs: xs ?? DEFAULT_GRID_ITEM_SIZES.xs ?? 12,\r\n sm: sm ?? xs ?? DEFAULT_GRID_ITEM_SIZES.sm ?? 6,\r\n md: md ?? sm ?? xs ?? DEFAULT_GRID_ITEM_SIZES.md ?? 4,\r\n lg: lg ?? md ?? sm ?? xs ?? DEFAULT_GRID_ITEM_SIZES.lg ?? 3,\r\n xl: xl ?? lg ?? md ?? sm ?? xs ?? DEFAULT_GRID_ITEM_SIZES.xl ?? 3\r\n }\r\n}\r\n\r\nconst resolveActiveBreakpoint = (width: number): keyof TGridSizes => {\r\n if (width >= 1536) return 'xl'\r\n if (width >= 1200) return 'lg'\r\n if (width >= 900) return 'md'\r\n if (width >= 600) return 'sm'\r\n return 'xs'\r\n}\r\n\r\nexport const resolveGridColumnsFromWidth = (width: number, sizes?: TGridSizes): number => {\r\n const normalized = normalizeGridSizes(sizes)\r\n const breakpoint = resolveActiveBreakpoint(width)\r\n const span = normalized[breakpoint] ?? 12\r\n const safeSpan = Math.min(12, Math.max(1, span))\r\n return Math.max(1, Math.floor(12 / safeSpan))\r\n}\r\n\r\nexport const GridItemDefault: FC<IViewGridItemProps<any>> = (props) => {\r\n const content = JSON.stringify(props.value, null, 2)\r\n return (\r\n <Card variant='outlined' sx={{ height: '100%', width: '100%', overflow: 'hidden', p: 1, boxSizing: 'border-box!important' }} title={content}>\r\n <Stack spacing={1}>\r\n <Typography>Index: {props.index}</Typography>\r\n <Typography variant='body2' sx={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>\r\n Data: {content}\r\n </Typography>\r\n </Stack>\r\n </Card>\r\n )\r\n}\r\n"],"names":["DEFAULT_GRID_GAP_PX","getMaxGridGap","_len","arguments","length","gap","Array","_key","finalGaps","filter","Boolean","Math","max","apply","concat","_toConsumableArray","map","g","DEFAULT_GRID_ITEM_MAX_HEIGHT","getMaxGridItemHeight","_len2","height","_key2","h","DEFAULT_GRID_ITEM_SIZES","xs","sm","md","lg","getGridItemSizes","sizes","normalizeGridSizes","_ref2","_ref3","_ref4","_ref5","_ref6","_ref7","_ref8","_ref9","_ref0","_ref1","_ref10","_ref11","_ref12","_ref13","_ref14","_ref","xl","resolveGridColumnsFromWidth","width","_normalized$breakpoin","normalized","breakpoint","resolveActiveBreakpoint","span","safeSpan","min","floor","GridItemDefault","props","content","JSON","stringify","value","_jsx","Card","variant","sx","overflow","p","boxSizing","title","children","_jsxs","Stack","spacing","Typography","index","fontFamily","whiteSpace","wordBreak"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{defineProperty as e,objectSpread2 as l,asyncToGenerator as n,regenerator as t,slicedToArray as i}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a,jsxs as r}from"react/jsx-runtime";import{useCallback as o,useMemo as d,useRef as c,useState as s,useLayoutEffect as u}from"react";import{styled as h,Box as v,alpha as g,TableContainer as p,Table as f,TableHead as m,TableRow as b,TableCell as w,Checkbox as S,TableBody as x,Typography as C}from"@mui/material";import{ListDensity as y}from"./view-list.types.js";import{useListSelection as H,LIST_HEADER_HEIGHT as N,LIST_ROW_HEIGHT_BY_DENSITY as k,LIST_CELL_PADDING_BY_DENSITY as T}from"./view-list.units.js";var W=function(e,l){if(void 0!==e.width)return e.width;if(e.flex&&e.flex>0&&l>0){var n=e.flex/l*100;return"".concat(n,"%")}};function z(e,l,n){var t=l[e.field],i=e.valueGetter?e.valueGetter(t,l,n):t,r={value:i,row:l,index:n,field:e.field};if(e.renderCell)return e.renderCell(r);var o=String(null!=i?i:"");return a(C,{variant:"body2",noWrap:!0,title:o,children:o})}var B=function(e,n){return n?Object.keys(n).map(function(e){var t,i=null!==(t=n[e])&&void 0!==t?t:{};return l({field:e},i)}):function(e){if(0===e.length)return[];var l=e[0];return Object.keys(l).map(function(e){return{field:e,label:String(e),flex:1}})}(e)};function L(e){var n=function(e){return function(l){var n,t,i,o,d,c,s=null!==(n=null!==(t=l.density)&&void 0!==t?t:e.density)&&void 0!==n?n:y.standard,u=B(l.value,null!==(i=l.columns)&&void 0!==i?i:e.columns),h=u.reduce(function(e,l){return e+(l.flex&&l.flex>0?l.flex:0)},0),g=k[s],C=T[s],N=null!==(o=null!==(d=l.selectable)&&void 0!==d?d:e.selectable)&&void 0!==o&&o,L=null!==(c=l.onSelectionChange)&&void 0!==c?c:e.onSelectionChange,I=H(l.value,e.getterId,N,l.selectedIds,L),M=I.selectedIds,j=I.isAllSelected,O=I.isSomeSelected,R=I.handleToggleAll,A=I.handleToggleRow;return a(V,{className:D.root,children:a(p,{className:D.scrollContainer,onScroll:function(e){var n,t=e.currentTarget;t.scrollHeight-t.scrollTop-t.clientHeight<=80&&(null===(n=l.onNearEnd)||void 0===n||n.call(l))},children:r(f,{size:"small",className:D.table,children:[a(m,{className:D.tableHeader,children:r(b,{children:[N&&a(w,{padding:"checkbox",className:D.tableHeaderCell,sx:{width:48},children:a(S,{checked:j,indeterminate:O,onChange:R})}),u.map(function(e){var l,n,t=W(e,h),i=void 0!==e.width;return a(w,{className:D.tableHeaderCell,align:e.align,sx:{width:t,minWidth:i?t:e.minWidth,maxWidth:null!==(l=e.maxWidth)&&void 0!==l?l:t,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:null!==(n=e.label)&&void 0!==n?n:String(e.field)},String(e.field))})]})}),a(x,{children:l.value.map(function(l,n){var t,i=null!==(t=e.getterId(l,n))&&void 0!==t?t:n,o=M.includes(i);return r(b,{hover:!0,sx:{height:g},selected:o,children:[N&&a(w,{padding:"checkbox",className:D.tableBodyCell,sx:{height:g,padding:C},children:a(S,{checked:o,onChange:function(){return A(i)}})}),u.map(function(e){var t,r=W(e,h),o=void 0!==e.width;return a(w,{className:D.tableBodyCell,align:e.align,sx:{height:g,padding:C,width:r,minWidth:o?r:e.minWidth,maxWidth:null!==(t=e.maxWidth)&&void 0!==t?t:r,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:a(v,{className:D.tableCellContent,children:z(e,l,n)})},"".concat(String(i),"-").concat(String(e.field)))})]},i)})})]})})})}}(e),t=function(e){return function(l){var n,t,o,h,g,C,L,I=null!==(n=null!==(t=l.density)&&void 0!==t?t:e.density)&&void 0!==n?n:y.standard,M=B(l.value,l.columns||e.columns),j=M.reduce(function(e,l){return e+(l.flex&&l.flex>0?l.flex:0)},0),O=k[I],R=T[I],A=null!==(o=null!==(h=l.selectable)&&void 0!==h?h:e.selectable)&&void 0!==o&&o,P=null!==(g=l.onSelectionChange)&&void 0!==g?g:e.onSelectionChange,E=H(l.value,e.getterId,A,l.selectedIds,P),G=E.selectedIds,_=E.isAllSelected,Y=E.isSomeSelected,q=E.handleToggleAll,F=E.handleToggleRow,J=d(function(){return Object.assign({},e.virtualizedConfig,l.virtualizedConfig)},[l.virtualizedConfig]),K=c(null),Q=c(null),U=s(0),X=i(U,2),Z=X[0],$=X[1],ee=s(null!==(C=null==J?void 0:J.scrollTop)&&void 0!==C?C:0),le=i(ee,2),ne=le[0],te=le[1],ie=s(N),ae=i(ie,2),re=ae[0],oe=ae[1],de=Math.max(1,null!==(L=null==J?void 0:J.overscan)&&void 0!==L?L:6);u(function(){if(K.current){var e=function(){var e,l,n=null!==(e=null===(l=K.current)||void 0===l?void 0:l.clientHeight)&&void 0!==e?e:0;$(function(e){return e===n?e:n})};e();var l=new ResizeObserver(function(){e()});return l.observe(K.current),function(){return l.disconnect()}}},[]),u(function(){J&&"number"==typeof J.scrollTop&&te(J.scrollTop)},[null==J?void 0:J.scrollTop]),u(function(){var e,l,n=null!==(e=null===(l=Q.current)||void 0===l?void 0:l.offsetHeight)&&void 0!==e?e:0;n>0&&n!==re&&oe(n)},[M.length,re]);var ce=d(function(){var e,n=l.value.length;if(0===n)return{start:0,end:-1,topSpacerHeight:0,bottomSpacerHeight:0};var t=J&&"number"==typeof J.scrollTop?J.scrollTop:ne,i=Math.max(1,(null!==(e=null==J?void 0:J.viewportHeight)&&void 0!==e?e:Z)-re),a=Math.max(0,t-re),r=Math.max(0,Math.floor(a/O)-de),o=Math.ceil(i/O),d=Math.min(n-1,r+o+2*de);return{start:r,end:d,topSpacerHeight:r*O,bottomSpacerHeight:Math.max(0,(n-d-1)*O)}},[l.value.length,re,de,O,J,ne,Z]),se=ce.end>=ce.start?l.value.slice(ce.start,ce.end+1):[],ue=[D.root,D.virtualized].filter(Boolean).join(" ");return a(V,{className:ue,children:a(p,{ref:K,className:D.scrollContainer,onScroll:function(e){var n,t=e.currentTarget;J&&"number"==typeof J.scrollTop||te(t.scrollTop),t.scrollHeight-t.scrollTop-t.clientHeight<=80&&(null===(n=l.onNearEnd)||void 0===n||n.call(l))},children:r(f,{size:"small",className:D.table,children:[a(m,{className:D.tableHeader,children:r(b,{ref:Q,children:[A&&a(w,{padding:"checkbox",className:D.tableHeaderCell,sx:{width:48},children:a(S,{checked:_,indeterminate:Y,onChange:q})}),M.map(function(e){var l,n,t=W(e,j),i=void 0!==e.width;return a(w,{className:D.tableHeaderCell,align:e.align,sx:{width:t,minWidth:i?t:e.minWidth,maxWidth:null!==(l=e.maxWidth)&&void 0!==l?l:t,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:null!==(n=e.label)&&void 0!==n?n:String(e.field)},String(e.field))})]})}),r(x,{children:[ce.topSpacerHeight>0?a(b,{className:D.tableSpacerRow,children:a(w,{colSpan:M.length+(A?1:0),className:D.tableSpacerCell,sx:{height:ce.topSpacerHeight,padding:0,border:0}})}):null,se.map(function(l,n){var t,i=ce.start+n,o=null!==(t=e.getterId(l,i))&&void 0!==t?t:i,d=G.includes(o);return r(b,{hover:!0,sx:{height:O},selected:d,children:[A&&a(w,{padding:"checkbox",className:D.tableBodyCell,sx:{height:O,padding:R},children:a(S,{checked:d,onChange:function(){return F(o)}})}),M.map(function(e){var n,t=W(e,j),r=void 0!==e.width;return a(w,{className:D.tableBodyCell,align:e.align,sx:{height:O,padding:R,width:t,minWidth:r?t:e.minWidth,maxWidth:null!==(n=e.maxWidth)&&void 0!==n?n:t,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:a(v,{className:D.tableCellContent,children:z(e,l,i)})},"".concat(String(o),"-").concat(String(e.field)))})]},o)}),ce.bottomSpacerHeight>0?a(b,{className:D.tableSpacerRow,children:a(w,{colSpan:M.length+(A?1:0),className:D.tableSpacerCell,sx:{height:ce.bottomSpacerHeight,padding:0,border:0}})}):null]})]})})})}}(e);return function(i){var r,o,d=null!==(r=null!==(o=i.renderStrategy)&&void 0!==o?o:e.renderStrategy)&&void 0!==r?r:"normal";return a("virtualized"===d?t:n,l({},i))}}function I(e){return function(l){var i,r,d,c=o(n(t().m(function e(){var n,i,a,r,o,d,c,s,u;return t().w(function(e){for(;;)switch(e.n){case 0:if("infiniteScroll"===l.loadMode){e.n=1;break}return e.a(2);case 1:if(null!==(n=l.pagination)&&void 0!==n&&n.hasNext){e.n=2;break}return e.a(2);case 2:if(!l.loading){e.n=3;break}return e.a(2);case 3:return c=null!==(i=null===(a=l.pagination)||void 0===a?void 0:a.page)&&void 0!==i?i:0,s=null!==(r=null===(o=l.pagination)||void 0===o?void 0:o.pageSize)&&void 0!==r?r:20,u=c+1,e.n=4,null===(d=l.onPageChange)||void 0===d?void 0:d.call(l,u,s);case 4:return e.a(2)}},e)})),[l.loadMode,null===(i=l.pagination)||void 0===i?void 0:i.hasNext,null===(r=l.pagination)||void 0===r?void 0:r.page,null===(d=l.pagination)||void 0===d?void 0:d.pageSize,l.loading,l.onPageChange]);return a(e,{value:l.value,columns:l.columns,density:l.density,renderStrategy:l.renderStrategy,virtualizedConfig:l.virtualizedConfig,onNearEnd:"infiniteScroll"===l.loadMode?c:void 0,selectable:l.selectable,selectedIds:l.selectedIds,onSelectionChange:l.onSelectionChange})}}var M={root:"DinoViewList-root",virtualized:"DinoViewList-virtualized",scrollContainer:"DinoViewList-scrollContainer",table:"DinoViewList-table",tableHeader:"DinoViewList-tableHeader",tableHeaderCell:"DinoViewList-tableHeaderCell",tableBodyCell:"DinoViewList-tableBodyCell",tableSpacerRow:"DinoViewList-tableSpacerRow",tableSpacerCell:"DinoViewList-tableSpacerCell",tableCellContent:"DinoViewList-tableCellContent"},D=M,V=h(v)(function(l){var n=l.theme,t=n.palette.mode,i=g(n.palette.common.black,"dark"===t?.24:.08),a="dark"===t?n.palette.grey[800]:n.palette.grey[50];return e(e(e(e(e(e(e(e({},"&.".concat(D.root),{position:"relative",width:"100%",height:"100%",overflow:"hidden"}),".".concat(D.scrollContainer),{position:"absolute",inset:0,overflowY:"auto",padding:n.spacing(0,.5),margin:n.spacing(0,-.5),"&::-webkit-scrollbar":{width:8,height:8},"&::-webkit-scrollbar-thumb":{backgroundColor:n.palette.grey[300],borderRadius:4},"&::-webkit-scrollbar-thumb:hover":{backgroundColor:n.palette.grey[500]}}),".".concat(D.table),{tableLayout:"auto",width:"100%",borderCollapse:"separate",borderSpacing:"0 ".concat(n.spacing(.5)),marginTop:n.spacing(-.5)}),".".concat(D.tableHeader),{position:"sticky",top:0,zIndex:2,backgroundColor:a}),".".concat(D.tableHeaderCell),{fontWeight:500,paddingTop:n.spacing(1.5),paddingBottom:n.spacing(1.5),overflow:"hidden",borderBottom:"unset"}),".".concat(D.tableBodyCell),{overflow:"hidden",borderTop:"0.5px dashed ".concat(i),borderBottom:"0.5px dashed ".concat(i),"&:first-of-type":{borderLeft:"0.5px dashed ".concat(i)},"&:last-of-type":{borderRight:"0.5px dashed ".concat(i)}}),".".concat(D.tableCellContent),{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0,width:"100%"}),"&.".concat(D.virtualized),{boxSizing:"border-box"})});export{L as createViewList,I as createViewListLoading,L as default,M as viewListClasses};
|
|
2
|
-
//# sourceMappingURL=view-list.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"view-list.js","sources":["../../../../src/lab/data-surface/view-list.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'\r\nimport { Box, Checkbox, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, alpha, styled } from '@mui/material'\r\nimport { ListDensity } from './view-list.types'\r\nimport { LIST_CELL_PADDING_BY_DENSITY, LIST_HEADER_HEIGHT, LIST_ROW_HEIGHT_BY_DENSITY, useListSelection } from './view-list.units'\r\n// types\r\nimport type { ComponentType, FC, ReactNode } from 'react'\r\nimport type { IListCellParams, TListColumn, TListColumns } from './view-list.types'\r\nimport type { TGetterId, LoadingModeRule, TPagination, TVirtualizedConfig, RenderStrategyRule } from './types'\r\n\r\nexport interface IViewListBase<T> {\r\n columns?: TListColumns<T>\r\n density?: ListDensity\r\n /**\r\n * Controls how the list is rendered into the DOM.\r\n * - `normal` — all rows are mounted (suitable for small datasets)\r\n * - `virtualized` — only visible rows are mounted (optimized for large datasets)\r\n * @default 'normal'\r\n */\r\n renderStrategy?: RenderStrategyRule\r\n virtualizedConfig?: TVirtualizedConfig\r\n /** Called when user scrolls near the bottom of the list. Use this to trigger pagination or infinity load. */\r\n onNearEnd?: () => void\r\n /** Enable row selection with checkboxes. */\r\n selectable?: boolean\r\n /** Array of selected row IDs (controlled). */\r\n selectedIds?: (string | number)[]\r\n /** Callback when selection changes. */\r\n onSelectionChange?: (selectedIds: (string | number)[]) => void\r\n}\r\n\r\nexport interface IViewListConfig<T> extends IViewListBase<T> {\r\n getterId: TGetterId<T>\r\n}\r\n\r\nexport interface IViewListProps<T> extends IViewListBase<T> {\r\n value: T[]\r\n}\r\n\r\nexport interface IViewListLoadingProps<T> extends IViewListBase<T> {\r\n value: T[]\r\n loadMode: LoadingModeRule\r\n loading?: boolean\r\n pagination?: TPagination\r\n onPageChange?: (page: number, pageSize: number) => void | Promise<void>\r\n}\r\n\r\nconst getColumnWidth = <T,>(column: TListColumn<T>, totalFlex: number): number | string | undefined => {\r\n // Priority 1: Explicit width always wins\r\n if (column.width !== undefined) return column.width\r\n\r\n // Priority 2: Flex-based proportional width\r\n if (column.flex && column.flex > 0 && totalFlex > 0) {\r\n const percent = (column.flex / totalFlex) * 100\r\n return `${percent}%`\r\n }\r\n\r\n // Priority 3: Auto-width (no width or flex specified)\r\n // Let the table auto-calculate based on content\r\n return undefined\r\n}\r\n\r\nfunction renderCellValue<T>(column: TListColumn<T>, row: T, index: number): ReactNode {\r\n const currentValue = (row as any)[column.field]\r\n const value = column.valueGetter ? column.valueGetter(currentValue, row, index) : currentValue\r\n const params: IListCellParams<T> = { value, row, index, field: column.field }\r\n if (column.renderCell) return column.renderCell(params)\r\n const valueLabel = String(value ?? '')\r\n return (\r\n <Typography variant='body2' noWrap title={valueLabel}>\r\n {valueLabel}\r\n </Typography>\r\n )\r\n}\r\n\r\nconst buildDefaultColumns = <T,>(data: T[]): TListColumn<T>[] => {\r\n if (data.length === 0) return []\r\n const firstRow = data[0]\r\n return Object.keys(firstRow as object).map((key) => ({\r\n field: key as keyof T,\r\n label: String(key),\r\n flex: 1\r\n }))\r\n}\r\n\r\n/**\r\n * Converts TListColumns<T> Record type to TListColumn<T>[] array for internal use.\r\n */\r\nconst columnsRecordToArray = <T,>(value: T[], columnsRecord?: TListColumns<T>): TListColumn<T>[] => {\r\n if (!columnsRecord) return buildDefaultColumns(value)\r\n const keys = Object.keys(columnsRecord) as (keyof T)[]\r\n return keys.map((key) => {\r\n const colConfig = columnsRecord[key] ?? {}\r\n return { field: key, ...colConfig } as TListColumn<T>\r\n })\r\n}\r\n\r\nfunction createViewListNormal<T>(config: IViewListConfig<T>) {\r\n const ViewListNormal: FC<IViewListProps<T>> = (props) => {\r\n const density = props.density ?? config.density ?? ListDensity.standard\r\n\r\n const columnsArray = columnsRecordToArray(props.value, props.columns ?? config.columns)\r\n const columns = columnsArray\r\n const totalFlex = columns.reduce((sum, col) => sum + (col.flex && col.flex > 0 ? col.flex : 0), 0)\r\n const rowHeight = LIST_ROW_HEIGHT_BY_DENSITY[density]\r\n const cellPadding = LIST_CELL_PADDING_BY_DENSITY[density]\r\n\r\n const selectable = props.selectable ?? config.selectable ?? false\r\n const onSelectionChange = props.onSelectionChange ?? config.onSelectionChange\r\n\r\n // Use selection hook to manage checkbox state and handlers\r\n const selection = useListSelection(props.value, config.getterId, selectable, props.selectedIds, onSelectionChange)\r\n const { selectedIds, isAllSelected, isSomeSelected, handleToggleAll, handleToggleRow } = selection\r\n\r\n return (\r\n <ViewListStyled className={classes.root}>\r\n <TableContainer\r\n className={classes.scrollContainer}\r\n onScroll={(e) => {\r\n const t = e.currentTarget\r\n if (t.scrollHeight - t.scrollTop - t.clientHeight <= 80) {\r\n props.onNearEnd?.()\r\n }\r\n }}\r\n >\r\n <Table size='small' className={classes.table}>\r\n <TableHead className={classes.tableHeader}>\r\n <TableRow>\r\n {selectable && (\r\n <TableCell padding='checkbox' className={classes.tableHeaderCell} sx={{ width: 48 }}>\r\n <Checkbox checked={isAllSelected} indeterminate={isSomeSelected} onChange={handleToggleAll} />\r\n </TableCell>\r\n )}\r\n {columns.map((col) => {\r\n const colWidth = getColumnWidth(col, totalFlex)\r\n const hasFixedWidth = col.width !== undefined\r\n return (\r\n <TableCell\r\n key={String(col.field)}\r\n className={classes.tableHeaderCell}\r\n align={col.align}\r\n sx={{\r\n width: colWidth,\r\n // For fixed-width columns, enforce minWidth = width to prevent shrinking\r\n minWidth: hasFixedWidth ? colWidth : col.minWidth,\r\n // Lock all columns with maxWidth to prevent text overflow expansion\r\n maxWidth: col.maxWidth ?? colWidth,\r\n // Prevent text overflow from expanding cells\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap'\r\n }}\r\n >\r\n {col.label ?? String(col.field)}\r\n </TableCell>\r\n )\r\n })}\r\n </TableRow>\r\n </TableHead>\r\n <TableBody>\r\n {props.value.map((row, index) => {\r\n const rowKey = config.getterId(row, index) ?? index\r\n const isSelected = selectedIds.includes(rowKey)\r\n return (\r\n <TableRow key={rowKey} hover sx={{ height: rowHeight }} selected={isSelected}>\r\n {selectable && (\r\n <TableCell padding='checkbox' className={classes.tableBodyCell} sx={{ height: rowHeight, padding: cellPadding }}>\r\n <Checkbox checked={isSelected} onChange={() => handleToggleRow(rowKey)} />\r\n </TableCell>\r\n )}\r\n {columns.map((col) => {\r\n const colWidth = getColumnWidth(col, totalFlex)\r\n const hasFixedWidth = col.width !== undefined\r\n return (\r\n <TableCell\r\n key={`${String(rowKey)}-${String(col.field)}`}\r\n className={classes.tableBodyCell}\r\n align={col.align}\r\n sx={{\r\n height: rowHeight,\r\n padding: cellPadding,\r\n width: colWidth,\r\n // For fixed-width columns, enforce minWidth = width to prevent shrinking\r\n minWidth: hasFixedWidth ? colWidth : col.minWidth,\r\n // Lock all columns with maxWidth to prevent text overflow expansion\r\n maxWidth: col.maxWidth ?? colWidth,\r\n // Prevent text overflow from expanding cells\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap'\r\n }}\r\n >\r\n <Box className={classes.tableCellContent}>{renderCellValue(col, row, index)}</Box>\r\n </TableCell>\r\n )\r\n })}\r\n </TableRow>\r\n )\r\n })}\r\n </TableBody>\r\n </Table>\r\n </TableContainer>\r\n </ViewListStyled>\r\n )\r\n }\r\n return ViewListNormal\r\n}\r\n\r\nfunction createViewListVirtualized<T>(config: IViewListConfig<T>) {\r\n const ViewListVirtualized: FC<IViewListProps<T>> = (props) => {\r\n const density = props.density ?? config.density ?? ListDensity.standard\r\n const columnsArray = columnsRecordToArray(props.value, props.columns || config.columns)\r\n const columns = columnsArray\r\n const totalFlex = columns.reduce((sum, col) => sum + (col.flex && col.flex > 0 ? col.flex : 0), 0)\r\n const rowHeight = LIST_ROW_HEIGHT_BY_DENSITY[density]\r\n const cellPadding = LIST_CELL_PADDING_BY_DENSITY[density]\r\n\r\n const selectable = props.selectable ?? config.selectable ?? false\r\n const onSelectionChange = props.onSelectionChange ?? config.onSelectionChange\r\n\r\n // Use selection hook to manage checkbox state and handlers\r\n const selection = useListSelection(props.value, config.getterId, selectable, props.selectedIds, onSelectionChange)\r\n const { selectedIds, isAllSelected, isSomeSelected, handleToggleAll, handleToggleRow } = selection\r\n\r\n const virtualized = useMemo(() => {\r\n return Object.assign({}, config.virtualizedConfig, props.virtualizedConfig) as TVirtualizedConfig | undefined\r\n }, [props.virtualizedConfig])\r\n\r\n const wrapRef = useRef<HTMLDivElement | null>(null)\r\n const headerRowRef = useRef<HTMLTableRowElement | null>(null)\r\n const [containerHeight, setContainerHeight] = useState(0)\r\n const [scrollTopState, setScrollTopState] = useState(virtualized?.scrollTop ?? 0)\r\n const [headerHeight, setHeaderHeight] = useState(LIST_HEADER_HEIGHT)\r\n\r\n const overscan = Math.max(1, virtualized?.overscan ?? 6)\r\n\r\n useLayoutEffect(() => {\r\n if (!wrapRef.current) return\r\n\r\n const updateSize = () => {\r\n const nextHeight = wrapRef.current?.clientHeight ?? 0\r\n setContainerHeight((prev) => (prev === nextHeight ? prev : nextHeight))\r\n }\r\n\r\n updateSize()\r\n\r\n const observer = new ResizeObserver(() => {\r\n updateSize()\r\n })\r\n\r\n observer.observe(wrapRef.current)\r\n return () => observer.disconnect()\r\n }, [])\r\n\r\n // sync external virtualized.scrollTop when provided\r\n useLayoutEffect(() => {\r\n if (virtualized && typeof virtualized.scrollTop === 'number') {\r\n setScrollTopState(virtualized.scrollTop)\r\n }\r\n }, [virtualized?.scrollTop])\r\n\r\n useLayoutEffect(() => {\r\n const measured = headerRowRef.current?.offsetHeight ?? 0\r\n if (measured > 0 && measured !== headerHeight) {\r\n setHeaderHeight(measured)\r\n }\r\n }, [columns.length, headerHeight])\r\n\r\n const windowed = useMemo(() => {\r\n const totalItems = props.value.length\r\n if (totalItems === 0) {\r\n return { start: 0, end: -1, topSpacerHeight: 0, bottomSpacerHeight: 0 }\r\n }\r\n\r\n const effectiveScrollTop = virtualized && typeof virtualized.scrollTop === 'number' ? virtualized.scrollTop : scrollTopState\r\n const safeViewportHeight = Math.max(1, (virtualized?.viewportHeight ?? containerHeight) - headerHeight)\r\n const adjustedScrollTop = Math.max(0, effectiveScrollTop - headerHeight)\r\n const start = Math.max(0, Math.floor(adjustedScrollTop / rowHeight) - overscan)\r\n const visibleCount = Math.ceil(safeViewportHeight / rowHeight)\r\n const end = Math.min(totalItems - 1, start + visibleCount + overscan * 2)\r\n\r\n const topSpacerHeight = start * rowHeight\r\n const bottomSpacerHeight = Math.max(0, (totalItems - end - 1) * rowHeight)\r\n\r\n return { start, end, topSpacerHeight, bottomSpacerHeight }\r\n }, [props.value.length, headerHeight, overscan, rowHeight, virtualized, scrollTopState, containerHeight])\r\n\r\n const rowsToRender = windowed.end >= windowed.start ? props.value.slice(windowed.start, windowed.end + 1) : []\r\n const rootClasses = [classes.root, classes.virtualized].filter(Boolean).join(' ')\r\n return (\r\n <ViewListStyled className={rootClasses}>\r\n <TableContainer\r\n ref={wrapRef}\r\n className={classes.scrollContainer}\r\n onScroll={(e) => {\r\n const t = e.currentTarget as HTMLDivElement\r\n if (!virtualized || typeof virtualized.scrollTop !== 'number') {\r\n setScrollTopState(t.scrollTop)\r\n }\r\n if (t.scrollHeight - t.scrollTop - t.clientHeight <= 80) {\r\n props.onNearEnd?.()\r\n }\r\n }}\r\n >\r\n <Table size='small' className={classes.table}>\r\n <TableHead className={classes.tableHeader}>\r\n <TableRow ref={headerRowRef}>\r\n {selectable && (\r\n <TableCell padding='checkbox' className={classes.tableHeaderCell} sx={{ width: 48 }}>\r\n <Checkbox checked={isAllSelected} indeterminate={isSomeSelected} onChange={handleToggleAll} />\r\n </TableCell>\r\n )}\r\n {columns.map((col) => {\r\n const colWidth = getColumnWidth(col, totalFlex)\r\n const hasFixedWidth = col.width !== undefined\r\n return (\r\n <TableCell\r\n key={String(col.field)}\r\n className={classes.tableHeaderCell}\r\n align={col.align}\r\n sx={{\r\n width: colWidth,\r\n // For fixed-width columns, enforce minWidth = width to prevent shrinking\r\n minWidth: hasFixedWidth ? colWidth : col.minWidth,\r\n // Lock all columns with maxWidth to prevent text overflow expansion\r\n maxWidth: col.maxWidth ?? colWidth,\r\n // Prevent text overflow from expanding cells\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap'\r\n }}\r\n >\r\n {col.label ?? String(col.field)}\r\n </TableCell>\r\n )\r\n })}\r\n </TableRow>\r\n </TableHead>\r\n <TableBody>\r\n {windowed.topSpacerHeight > 0 ? (\r\n <TableRow className={classes.tableSpacerRow}>\r\n <TableCell\r\n colSpan={columns.length + (selectable ? 1 : 0)}\r\n className={classes.tableSpacerCell}\r\n sx={{ height: windowed.topSpacerHeight, padding: 0, border: 0 }}\r\n />\r\n </TableRow>\r\n ) : null}\r\n\r\n {rowsToRender.map((row, offset) => {\r\n const index = windowed.start + offset\r\n const rowKey = config.getterId(row, index) ?? index\r\n const isSelected = selectedIds.includes(rowKey)\r\n\r\n return (\r\n <TableRow key={rowKey} hover sx={{ height: rowHeight }} selected={isSelected}>\r\n {selectable && (\r\n <TableCell padding='checkbox' className={classes.tableBodyCell} sx={{ height: rowHeight, padding: cellPadding }}>\r\n <Checkbox checked={isSelected} onChange={() => handleToggleRow(rowKey)} />\r\n </TableCell>\r\n )}\r\n {columns.map((col) => {\r\n const colWidth = getColumnWidth(col, totalFlex)\r\n const hasFixedWidth = col.width !== undefined\r\n return (\r\n <TableCell\r\n key={`${String(rowKey)}-${String(col.field)}`}\r\n className={classes.tableBodyCell}\r\n align={col.align}\r\n sx={{\r\n height: rowHeight,\r\n padding: cellPadding,\r\n width: colWidth,\r\n // For fixed-width columns, enforce minWidth = width to prevent shrinking\r\n minWidth: hasFixedWidth ? colWidth : col.minWidth,\r\n // Lock all columns with maxWidth to prevent text overflow expansion\r\n maxWidth: col.maxWidth ?? colWidth,\r\n // Prevent text overflow from expanding cells\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap'\r\n }}\r\n >\r\n <Box className={classes.tableCellContent}>{renderCellValue(col, row, index)}</Box>\r\n </TableCell>\r\n )\r\n })}\r\n </TableRow>\r\n )\r\n })}\r\n\r\n {windowed.bottomSpacerHeight > 0 ? (\r\n <TableRow className={classes.tableSpacerRow}>\r\n <TableCell\r\n colSpan={columns.length + (selectable ? 1 : 0)}\r\n className={classes.tableSpacerCell}\r\n sx={{ height: windowed.bottomSpacerHeight, padding: 0, border: 0 }}\r\n />\r\n </TableRow>\r\n ) : null}\r\n </TableBody>\r\n </Table>\r\n </TableContainer>\r\n </ViewListStyled>\r\n )\r\n }\r\n return ViewListVirtualized\r\n}\r\n\r\nexport function createViewList<T>(config: IViewListConfig<T>) {\r\n const ViewListNormal = createViewListNormal<T>(config)\r\n const ViewListVirtualized = createViewListVirtualized<T>(config)\r\n\r\n const ViewList: FC<IViewListProps<T>> = (props) => {\r\n const renderStrategy = props.renderStrategy ?? config.renderStrategy ?? 'normal'\r\n if (renderStrategy === 'virtualized') {\r\n return <ViewListVirtualized {...props} />\r\n }\r\n return <ViewListNormal {...props} />\r\n }\r\n return ViewList\r\n}\r\n\r\nexport function createViewListLoading<T>(ListComponent: ComponentType<IViewListProps<T>>) {\r\n const ViewListLoading: FC<IViewListLoadingProps<T>> = (props) => {\r\n const handleNearEnd = useCallback(async () => {\r\n if (props.loadMode !== 'infiniteScroll') return\r\n if (!props.pagination?.hasNext) return\r\n if (props.loading) return\r\n\r\n const currentPage = props.pagination?.page ?? 0\r\n const currentPageSize = props.pagination?.pageSize ?? 20\r\n const nextPage = currentPage + 1\r\n await props.onPageChange?.(nextPage, currentPageSize)\r\n }, [props.loadMode, props.pagination?.hasNext, props.pagination?.page, props.pagination?.pageSize, props.loading, props.onPageChange])\r\n\r\n return (\r\n <ListComponent\r\n value={props.value}\r\n columns={props.columns}\r\n density={props.density}\r\n renderStrategy={props.renderStrategy}\r\n virtualizedConfig={props.virtualizedConfig}\r\n onNearEnd={props.loadMode === 'infiniteScroll' ? handleNearEnd : undefined}\r\n selectable={props.selectable}\r\n selectedIds={props.selectedIds}\r\n onSelectionChange={props.onSelectionChange}\r\n />\r\n )\r\n }\r\n\r\n return ViewListLoading\r\n}\r\n\r\nexport default createViewList\r\n\r\nexport const viewListClasses = {\r\n root: 'DinoViewList-root',\r\n virtualized: 'DinoViewList-virtualized',\r\n scrollContainer: 'DinoViewList-scrollContainer',\r\n table: 'DinoViewList-table',\r\n tableHeader: 'DinoViewList-tableHeader',\r\n tableHeaderCell: 'DinoViewList-tableHeaderCell',\r\n tableBodyCell: 'DinoViewList-tableBodyCell',\r\n tableSpacerRow: 'DinoViewList-tableSpacerRow',\r\n tableSpacerCell: 'DinoViewList-tableSpacerCell',\r\n tableCellContent: 'DinoViewList-tableCellContent'\r\n}\r\nconst classes = viewListClasses\r\n\r\nconst ViewListStyled = styled(Box)(({ theme }) => {\r\n const mode = theme.palette.mode\r\n const borderColor = alpha(theme.palette.common.black, mode === 'dark' ? 0.24 : 0.08)\r\n const bgHeader = mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[50]\r\n\r\n return {\r\n [`&.${classes.root}`]: {\r\n position: 'relative',\r\n width: '100%',\r\n height: '100%',\r\n overflow: 'hidden'\r\n // border: `1px solid ${theme.palette.divider}`,\r\n // borderRadius: theme.spacing(1),\r\n },\r\n [`.${classes.scrollContainer}`]: {\r\n position: 'absolute',\r\n inset: 0, // top: 0, left: 0, right: 0, bottom: 0\r\n overflowY: 'auto',\r\n padding: theme.spacing(0, 0.5),\r\n margin: theme.spacing(0, -0.5),\r\n // Scrollbar styling\r\n '&::-webkit-scrollbar': { width: 8, height: 8 },\r\n '&::-webkit-scrollbar-thumb': { backgroundColor: theme.palette.grey[300], borderRadius: 4 },\r\n '&::-webkit-scrollbar-thumb:hover': { backgroundColor: theme.palette.grey[500] }\r\n },\r\n [`.${classes.table}`]: {\r\n tableLayout: 'auto',\r\n width: '100%',\r\n borderCollapse: 'separate',\r\n borderSpacing: `0 ${theme.spacing(0.5)}`,\r\n marginTop: theme.spacing(-0.5)\r\n },\r\n [`.${classes.tableHeader}`]: {\r\n position: 'sticky',\r\n top: 0,\r\n zIndex: 2,\r\n backgroundColor: bgHeader\r\n },\r\n [`.${classes.tableHeaderCell}`]: {\r\n fontWeight: 500,\r\n paddingTop: theme.spacing(1.5),\r\n paddingBottom: theme.spacing(1.5),\r\n overflow: 'hidden',\r\n borderBottom: 'unset'\r\n // borderTop: `1px dashed ${borderColor}`,\r\n // borderBottom: `1px dashed ${borderColor}`,\r\n // '&:first-of-type': { borderLeft: `1px dashed ${borderColor}` },\r\n // '&:last-of-type': { borderRight: `1px dashed ${borderColor}` }\r\n },\r\n [`.${classes.tableBodyCell}`]: {\r\n overflow: 'hidden',\r\n borderTop: `0.5px dashed ${borderColor}`,\r\n borderBottom: `0.5px dashed ${borderColor}`,\r\n '&:first-of-type': { borderLeft: `0.5px dashed ${borderColor}` },\r\n '&:last-of-type': { borderRight: `0.5px dashed ${borderColor}` }\r\n },\r\n [`.${classes.tableCellContent}`]: {\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n minWidth: 0, // Allow shrinking below content size\r\n width: '100%' // Fill parent TableCell\r\n },\r\n // Virtualized styles\r\n [`&.${classes.virtualized}`]: {\r\n boxSizing: 'border-box'\r\n }\r\n }\r\n})\r\n"],"names":["getColumnWidth","column","totalFlex","undefined","width","flex","percent","concat","renderCellValue","row","index","currentValue","field","value","valueGetter","params","renderCell","valueLabel","String","_jsx","Typography","variant","noWrap","title","columnsRecordToArray","columnsRecord","Object","keys","map","key","_columnsRecord$key","colConfig","_objectSpread","data","length","firstRow","label","buildDefaultColumns","createViewList","config","ViewListNormal","props","_ref","_props$density","_props$columns","_ref2","_props$selectable","_props$onSelectionCha","density","ListDensity","standard","columns","reduce","sum","col","rowHeight","LIST_ROW_HEIGHT_BY_DENSITY","cellPadding","LIST_CELL_PADDING_BY_DENSITY","selectable","onSelectionChange","selection","useListSelection","getterId","selectedIds","isAllSelected","isSomeSelected","handleToggleAll","handleToggleRow","ViewListStyled","className","classes","root","children","TableContainer","scrollContainer","onScroll","e","_props$onNearEnd","t","currentTarget","scrollHeight","scrollTop","clientHeight","onNearEnd","call","_jsxs","Table","size","table","TableHead","tableHeader","TableRow","TableCell","padding","tableHeaderCell","sx","Checkbox","checked","indeterminate","onChange","_col$maxWidth","_col$label","colWidth","hasFixedWidth","align","minWidth","maxWidth","overflow","textOverflow","whiteSpace","TableBody","_config$getterId","rowKey","isSelected","includes","hover","height","selected","tableBodyCell","_col$maxWidth2","Box","tableCellContent","createViewListNormal","ViewListVirtualized","_ref3","_props$density2","_ref4","_props$selectable2","_props$onSelectionCha2","_virtualized$scrollTo","_virtualized$overscan","virtualized","useMemo","assign","virtualizedConfig","wrapRef","useRef","headerRowRef","_useState","useState","_useState2","_slicedToArray","containerHeight","setContainerHeight","_useState3","_useState4","scrollTopState","setScrollTopState","_useState5","LIST_HEADER_HEIGHT","_useState6","headerHeight","setHeaderHeight","overscan","Math","max","useLayoutEffect","current","updateSize","_wrapRef$current$clie","_wrapRef$current","nextHeight","prev","observer","ResizeObserver","observe","disconnect","_headerRowRef$current","_headerRowRef$current2","measured","offsetHeight","windowed","_virtualized$viewport","totalItems","start","end","topSpacerHeight","bottomSpacerHeight","effectiveScrollTop","safeViewportHeight","viewportHeight","adjustedScrollTop","floor","visibleCount","ceil","min","rowsToRender","slice","rootClasses","filter","Boolean","join","ref","_props$onNearEnd2","_col$maxWidth3","_col$label2","tableSpacerRow","colSpan","tableSpacerCell","border","offset","_config$getterId2","_col$maxWidth4","createViewListVirtualized","_ref5","_props$renderStrategy","renderStrategy","createViewListLoading","ListComponent","_props$pagination4","_props$pagination5","_props$pagination6","handleNearEnd","useCallback","_asyncToGenerator","_regenerator","m","_callee","_props$pagination","_props$pagination$pag","_props$pagination2","_props$pagination$pag2","_props$pagination3","_props$onPageChange","currentPage","currentPageSize","nextPage","w","_context","n","loadMode","a","pagination","hasNext","loading","page","pageSize","onPageChange","viewListClasses","styled","_ref7","theme","mode","palette","borderColor","alpha","common","black","bgHeader","grey","_defineProperty","position","inset","overflowY","spacing","margin","backgroundColor","borderRadius","tableLayout","borderCollapse","borderSpacing","marginTop","top","zIndex","fontWeight","paddingTop","paddingBottom","borderBottom","borderTop","borderLeft","borderRight","boxSizing"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"view-list.types.js","sources":["../../../../src/lab/data-surface/view-list.types.ts"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\nimport type { ReactNode } from 'react'\r\n\r\n/**\r\n * Props received by the custom render function for each row in List view.\r\n * @template T - The shape of a single data row object.\r\n */\r\nexport interface IViewListItemProps<T> {\r\n /** The data object for this list row. */\r\n value: T\r\n /** Zero-based position of this item in the data array. */\r\n index: number\r\n /** Whether this row is currently selected. */\r\n selected?: boolean\r\n}\r\n\r\n/** Horizontal alignment for list cell content. */\r\nexport type TListAlign = 'left' | 'right' | 'center'\r\n\r\n/**\r\n * Context passed to a column's render callback.\r\n * @template T - The shape of a single data row object.\r\n */\r\nexport interface IListCellParams<T> {\r\n /** Resolved cell value (after valueGetter if provided). */\r\n value: any\r\n /** The full row object. */\r\n row: T\r\n /** Zero-based row index. */\r\n index: number\r\n /** The column field key this cell belongs to. */\r\n field: keyof T\r\n}\r\n\r\n/**\r\n * Definition of a single column in List view.\r\n * @template T - The shape of a single data row object.\r\n */\r\nexport interface TListColumn<T> {\r\n /** Key of the row object this column maps to. */\r\n field: keyof T\r\n /** Column header label shown in the header. */\r\n label?: string\r\n /** Explicit column width. Accepts px number or CSS string (e.g. '120px', '20%'). */\r\n width?: number | string\r\n /** Minimum column width in pixels. */\r\n minWidth?: number\r\n /** Maximum column width in pixels. */\r\n maxWidth?: number\r\n /** Flex grow ratio used when no explicit width is set. */\r\n flex?: number\r\n /** Horizontal alignment of the cell content. */\r\n align?: TListAlign\r\n /** Custom cell render function - receives CellParams, returns ReactNode. */\r\n renderCell?: (params: IListCellParams<T>) => ReactNode\r\n /** Derives a value from the row before it is passed to the render step. */\r\n valueGetter?: (value: string, row: T, index: number) => any\r\n}\r\n\r\nexport type TListColumns<T> = Partial<Record<keyof T, Omit<TListColumn<T>, 'field'>>>\r\n\r\n/**\r\n * Row density preset for List view.\r\n * Controls the row height and cell padding.\r\n */\r\nexport const ListDensity = {\r\n compact: 'compact',\r\n standard: 'standard',\r\n comfortable: 'comfortable'\r\n} as const\r\nexport type ListDensity = keyof typeof ListDensity\r\n"],"names":["ListDensity","compact","standard","comfortable"],"mappings":"AAkEO,IAAMA,EAAc,CACzBC,QAAS,UACTC,SAAU,WACVC,YAAa"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{toConsumableArray as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useMemo as r}from"react";var n=48,t={compact:36,standard:48,comfortable:56},l={compact:"6px 10px",standard:"10px 12px",comfortable:"12px 14px"};function o(n,t,l,o,a){var c=null!=o?o:[],u=r(function(){var e=new Map;return n.forEach(function(r,n){var l=t(r,n);null!=l&&e.set(l,r)}),e},[n,t]),i=r(function(){return Array.from(u.keys())},[u]),f=i.length>0&&i.every(function(e){return c.includes(e)}),p=c.length>0&&!f;return{selectedIds:c,isAllSelected:f,isSomeSelected:p,handleToggleAll:function(){l&&a&&a(f?[]:i)},handleToggleRow:function(r){if(l&&a){var n=c.includes(r)?c.filter(function(e){return e!==r}):[].concat(e(c),[r]);a(n)}}}}export{l as LIST_CELL_PADDING_BY_DENSITY,n as LIST_HEADER_HEIGHT,t as LIST_ROW_HEIGHT_BY_DENSITY,o as useListSelection};
|
|
2
|
-
//# sourceMappingURL=view-list.units.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"view-list.units.js","sources":["../../../../src/lab/data-surface/view-list.units.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\nimport { useMemo } from 'react'\r\nimport { ListDensity } from './view-list.types'\r\nimport type { TGetterId } from './types'\r\n\r\nexport const LIST_HEADER_HEIGHT = 48\r\n\r\nexport const LIST_ROW_HEIGHT_BY_DENSITY: Record<ListDensity, number> = {\r\n compact: 36,\r\n standard: 48,\r\n comfortable: 56\r\n}\r\n\r\nexport const LIST_CELL_PADDING_BY_DENSITY: Record<ListDensity, string> = {\r\n compact: '6px 10px',\r\n standard: '10px 12px',\r\n comfortable: '12px 14px'\r\n}\r\n\r\n/**\r\n * Custom hook to manage list row selection logic.\r\n * Handles select all, individual row selection, and indeterminate state.\r\n *\r\n * @param value - The array of data items\r\n * @param getterId - Function to extract unique ID from each row\r\n * @param selectable - Whether selection is enabled\r\n * @param selectedIds - Controlled array of selected row IDs\r\n * @param onSelectionChange - Callback when selection changes\r\n * @returns Selection state and handlers\r\n */\r\nexport function useListSelection<T>(\r\n value: T[],\r\n getterId: TGetterId<T>,\r\n selectable: boolean,\r\n selectedIds?: (string | number)[],\r\n onSelectionChange?: (selectedIds: (string | number)[]) => void\r\n) {\r\n const safeSelectedIds = selectedIds ?? []\r\n\r\n // Build map of row IDs for quick lookup\r\n const rowIdMap = useMemo(() => {\r\n const map = new Map<string | number, T>()\r\n value.forEach((row, index) => {\r\n const id = getterId(row, index)\r\n if (id !== null && id !== undefined) {\r\n map.set(id, row)\r\n }\r\n })\r\n return map\r\n }, [value, getterId])\r\n\r\n const allRowIds = useMemo(() => Array.from(rowIdMap.keys()), [rowIdMap])\r\n\r\n const isAllSelected = allRowIds.length > 0 && allRowIds.every((id) => safeSelectedIds.includes(id))\r\n const isSomeSelected = safeSelectedIds.length > 0 && !isAllSelected\r\n\r\n const handleToggleAll = () => {\r\n if (!selectable || !onSelectionChange) return\r\n if (isAllSelected) {\r\n onSelectionChange([])\r\n } else {\r\n onSelectionChange(allRowIds)\r\n }\r\n }\r\n\r\n const handleToggleRow = (rowId: string | number) => {\r\n if (!selectable || !onSelectionChange) return\r\n const newSelected = safeSelectedIds.includes(rowId) ? safeSelectedIds.filter((id) => id !== rowId) : [...safeSelectedIds, rowId]\r\n onSelectionChange(newSelected)\r\n }\r\n\r\n return {\r\n selectedIds: safeSelectedIds,\r\n isAllSelected,\r\n isSomeSelected,\r\n handleToggleAll,\r\n handleToggleRow\r\n }\r\n}\r\n"],"names":["LIST_HEADER_HEIGHT","LIST_ROW_HEIGHT_BY_DENSITY","compact","standard","comfortable","LIST_CELL_PADDING_BY_DENSITY","useListSelection","value","getterId","selectable","selectedIds","onSelectionChange","safeSelectedIds","rowIdMap","useMemo","map","Map","forEach","row","index","id","set","allRowIds","Array","from","keys","isAllSelected","length","every","includes","isSomeSelected","handleToggleAll","handleToggleRow","rowId","newSelected","filter","concat","_toConsumableArray"],"mappings":"mHAMO,IAAMA,EAAqB,GAErBC,EAA0D,CACrEC,QAAS,GACTC,SAAU,GACVC,YAAa,IAGFC,EAA4D,CACvEH,QAAS,WACTC,SAAU,YACVC,YAAa,aAcT,SAAUE,EACdC,EACAC,EACAC,EACAC,EACAC,GAEA,IAAMC,EAAkBF,QAAAA,EAAe,GAGjCG,EAAWC,EAAQ,WACvB,IAAMC,EAAM,IAAIC,IAOhB,OANAT,EAAMU,QAAQ,SAACC,EAAKC,GAClB,IAAMC,EAAKZ,EAASU,EAAKC,GACrBC,SACFL,EAAIM,IAAID,EAAIF,EAEhB,GACOH,CACT,EAAG,CAACR,EAAOC,IAELc,EAAYR,EAAQ,WAAA,OAAMS,MAAMC,KAAKX,EAASY,SAAS,CAACZ,IAExDa,EAAgBJ,EAAUK,OAAS,GAAKL,EAAUM,MAAM,SAACR,GAAE,OAAKR,EAAgBiB,SAAST,KACzFU,EAAiBlB,EAAgBe,OAAS,IAAMD,EAiBtD,MAAO,CACLhB,YAAaE,EACbc,cAAAA,EACAI,eAAAA,EACAC,gBAnBsB,WACjBtB,GAAeE,GAElBA,EADEe,EACgB,GAEAJ,EAErB,EAaCU,gBAXsB,SAACC,GACvB,GAAKxB,GAAeE,EAApB,CACA,IAAMuB,EAActB,EAAgBiB,SAASI,GAASrB,EAAgBuB,OAAO,SAACf,GAAE,OAAKA,IAAOa,IAAM,GAAAG,OAAAC,EAAOzB,GAAe,CAAEqB,IAC1HtB,EAAkBuB,EAFqB,CAGxC,EASH"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{slicedToArray as n}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,jsxs as e}from"react/jsx-runtime";import{useRef as t,useState as r,useMemo as l,useEffect as o}from"react";import{DEFAULT_ANIMATION as u,ViewDefault as v,ViewSwitchTransitionStyled as a,viewSwitchTransitionClasses as c,CombinedTransition as d}from"./view-switch-transition.units.js";function s(s){var f=c,w="".concat(f.view," ").concat(f.viewA),m="".concat(f.view," ").concat(f.viewB);return function(c){var g,h,p,A,y,B,C,x,T=t(null),O=t(null),b=t(null),j=r(null!==(g=c.value)&&void 0!==g?g:null==s||null===(h=s.viewA)||void 0===h?void 0:h.value),D=n(j,2),H=D[0],N=D[1],_=r(!0),q=n(_,2),F=q[0],G=q[1],P=t(null),W=t(null),k=l(function(){var n,i;return{viewA:null!==(n=c.viewA)&&void 0!==n?n:null==s?void 0:s.viewA,viewB:null!==(i=c.viewB)&&void 0!==i?i:null==s?void 0:s.viewB}},[c.viewA,c.viewB,null==s?void 0:s.viewA,null==s?void 0:s.viewB]),z=l(function(){var n;return Object.assign({},u,null==s?void 0:s.transitionConfig,null!==(n=c.transitionConfig)&&void 0!==n?n:{})},[null==s?void 0:s.transitionConfig,c.transitionConfig]);o(function(){var n,i;if(c.value!==H){W.current&&(window.clearTimeout(W.current),W.current=null),P.current=null!==(n=c.value)&&void 0!==n?n:null;var e=null===(i=T.current)||void 0===i?void 0:i.offsetHeight;return T.current&&"number"==typeof e&&(T.current.style.height="".concat(e,"px"),T.current.style.transition="height ".concat(z.enter,"ms ").concat(z.ease)),G(!1),W.current=window.setTimeout(function(){var n=P.current;P.current=null,n&&(N(n),requestAnimationFrame(function(){var i,e,t,r,l,o=null!==(e=null!==(t=null===(r=(n===(null===(i=k.viewA)||void 0===i?void 0:i.value)?O:b).current)||void 0===r?void 0:r.offsetHeight)&&void 0!==t?t:null===(l=T.current)||void 0===l?void 0:l.offsetHeight)&&void 0!==e?e:0;G(!0),T.current&&(T.current.style.height="".concat(o,"px"),window.setTimeout(function(){T.current&&(T.current.style.height="")},z.enter))})),W.current=null},z.exit+z.hold),function(){W.current&&(window.clearTimeout(W.current),W.current=null)}}},[z,c.value,H]);var E=l(function(){var n,i;return null!==(n=null===(i=k.viewA)||void 0===i?void 0:i.Content)&&void 0!==n?n:v},[null===(p=k.viewA)||void 0===p?void 0:p.Content]),I=l(function(){var n,i;return null!==(n=null===(i=k.viewB)||void 0===i?void 0:i.Content)&&void 0!==n?n:v},[null===(A=k.viewB)||void 0===A?void 0:A.Content]);return i(a,{className:f.root,children:e("div",{ref:T,className:f.viewWrapper,children:[H===(null===(y=k.viewA)||void 0===y?void 0:y.value)&&i(d,{open:F,timeout:{enter:z.enter,exit:z.exit},mountDelay:z.mountDelay,animationConfig:z,style:{transformOrigin:z.transformOriginGrid},children:i("div",{ref:O,className:w,children:i(E,{value:null===(B=k.viewA)||void 0===B?void 0:B.value})})}),H===(null===(C=k.viewB)||void 0===C?void 0:C.value)&&i(d,{open:F,timeout:{enter:z.enter,exit:z.exit},mountDelay:z.mountDelay,animationConfig:z,style:{transformOrigin:z.transformOriginTable},children:i("div",{ref:b,className:m,children:i(I,{value:null===(x=k.viewB)||void 0===x?void 0:x.value})})})]})})}}export{s as createViewSwitchTransition};
|
|
2
|
-
//# sourceMappingURL=view-switch-transition.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"view-switch-transition.js","sources":["../../../../src/lab/data-surface/view-switch-transition.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { useEffect, useMemo, useRef, useState } from 'react'\r\nimport { CombinedTransition, DEFAULT_ANIMATION, ViewDefault } from './view-switch-transition.units'\r\nimport { viewSwitchTransitionClasses, ViewSwitchTransitionStyled } from './view-switch-transition.units'\r\n// types\r\nimport type { FC, ReactNode, ComponentType } from 'react'\r\nimport { TAnimationConfig } from './view-switch-transition.units'\r\n\r\ntype TViewSwitchTransitionConfig<T extends string = string> = {\r\n value: T\r\n label?: string\r\n Content: ComponentType<{ value: T }>\r\n icon?: ReactNode\r\n}\r\n\r\ntype TViewSwitchTransitionParam<T extends string = string> = {\r\n viewA?: TViewSwitchTransitionConfig<T>\r\n viewB?: TViewSwitchTransitionConfig<T>\r\n transitionConfig?: TAnimationConfig\r\n}\r\n\r\ninterface IViewSwitchTransitionProps<T extends string = string> {\r\n value?: T\r\n viewA?: TViewSwitchTransitionConfig<T>\r\n viewB?: TViewSwitchTransitionConfig<T>\r\n transitionConfig?: TAnimationConfig\r\n}\r\n\r\nexport function createViewSwitchTransition<T extends string = string>(config?: TViewSwitchTransitionParam<T>) {\r\n const classes = viewSwitchTransitionClasses\r\n const viewAClass = `${classes.view} ${classes.viewA}`\r\n const viewBClass = `${classes.view} ${classes.viewB}`\r\n\r\n const ViewSwitchTransition: FC<IViewSwitchTransitionProps<T>> = (props) => {\r\n const wrapperRef = useRef<HTMLDivElement | null>(null)\r\n const viewARef = useRef<HTMLDivElement | null>(null)\r\n const viewBRef = useRef<HTMLDivElement | null>(null)\r\n\r\n const [mountedMode, setMountedMode] = useState<T | undefined>(props.value ?? config?.viewA?.value)\r\n const [mountedOpen, setMountedOpen] = useState<boolean>(true)\r\n\r\n const pendingModeRef = useRef<T | null>(null)\r\n const exitTimerRef = useRef<number | null>(null)\r\n\r\n const finalConfig = useMemo(() => {\r\n return {\r\n viewA: props.viewA ?? config?.viewA,\r\n viewB: props.viewB ?? config?.viewB\r\n }\r\n }, [props.viewA, props.viewB, config?.viewA, config?.viewB])\r\n\r\n const animations = useMemo(() => {\r\n return Object.assign({}, DEFAULT_ANIMATION, config?.transitionConfig, props.transitionConfig ?? {})\r\n }, [config?.transitionConfig, props.transitionConfig])\r\n\r\n useEffect(() => {\r\n if (props.value === mountedMode) return\r\n\r\n if (exitTimerRef.current) {\r\n window.clearTimeout(exitTimerRef.current)\r\n exitTimerRef.current = null\r\n }\r\n\r\n pendingModeRef.current = props.value ?? null\r\n\r\n const currentHeight = wrapperRef.current?.offsetHeight\r\n if (wrapperRef.current && typeof currentHeight === 'number') {\r\n wrapperRef.current.style.height = `${currentHeight}px`\r\n wrapperRef.current.style.transition = `height ${animations.enter}ms ${animations.ease}`\r\n }\r\n\r\n setMountedOpen(false)\r\n\r\n exitTimerRef.current = window.setTimeout(() => {\r\n const nextMode = pendingModeRef.current\r\n pendingModeRef.current = null\r\n\r\n if (nextMode) {\r\n setMountedMode(nextMode)\r\n requestAnimationFrame(() => {\r\n const targetRef = nextMode === finalConfig.viewA?.value ? viewARef : viewBRef\r\n const nextHeight = targetRef.current?.offsetHeight ?? wrapperRef.current?.offsetHeight ?? 0\r\n setMountedOpen(true)\r\n\r\n if (wrapperRef.current) {\r\n wrapperRef.current.style.height = `${nextHeight}px`\r\n window.setTimeout(() => {\r\n if (wrapperRef.current) wrapperRef.current.style.height = ''\r\n }, animations.enter)\r\n }\r\n })\r\n }\r\n\r\n exitTimerRef.current = null\r\n }, animations.exit + animations.hold)\r\n\r\n return () => {\r\n if (exitTimerRef.current) {\r\n window.clearTimeout(exitTimerRef.current)\r\n exitTimerRef.current = null\r\n }\r\n }\r\n }, [animations, props.value, mountedMode])\r\n\r\n const ViewAContent = useMemo(() => {\r\n return finalConfig.viewA?.Content ?? ViewDefault\r\n }, [finalConfig.viewA?.Content])\r\n\r\n const ViewBContent = useMemo(() => {\r\n return finalConfig.viewB?.Content ?? ViewDefault\r\n }, [finalConfig.viewB?.Content])\r\n\r\n return (\r\n <ViewSwitchTransitionStyled className={classes.root}>\r\n <div ref={wrapperRef} className={classes.viewWrapper}>\r\n {mountedMode === finalConfig.viewA?.value && (\r\n <CombinedTransition\r\n open={mountedOpen}\r\n timeout={{ enter: animations.enter, exit: animations.exit }}\r\n mountDelay={animations.mountDelay}\r\n animationConfig={animations}\r\n style={{ transformOrigin: animations.transformOriginGrid }}\r\n >\r\n <div ref={viewARef} className={viewAClass}>\r\n <ViewAContent value={finalConfig.viewA?.value!} />\r\n </div>\r\n </CombinedTransition>\r\n )}\r\n\r\n {mountedMode === finalConfig.viewB?.value && (\r\n <CombinedTransition\r\n open={mountedOpen}\r\n timeout={{ enter: animations.enter, exit: animations.exit }}\r\n mountDelay={animations.mountDelay}\r\n animationConfig={animations}\r\n style={{ transformOrigin: animations.transformOriginTable }}\r\n >\r\n <div ref={viewBRef} className={viewBClass}>\r\n <ViewBContent value={finalConfig.viewB?.value!} />\r\n </div>\r\n </CombinedTransition>\r\n )}\r\n </div>\r\n </ViewSwitchTransitionStyled>\r\n )\r\n }\r\n\r\n return ViewSwitchTransition\r\n}\r\n\r\nexport const ViewSwitchTransition = createViewSwitchTransition({})\r\n\r\nexport default ViewSwitchTransition\r\n"],"names":["createViewSwitchTransition","config","classes","viewSwitchTransitionClasses","viewAClass","concat","view","viewA","viewBClass","viewB","props","_props$value","_config$viewA","_finalConfig$viewA3","_finalConfig$viewB2","_finalConfig$viewA4","_finalConfig$viewA5","_finalConfig$viewB3","_finalConfig$viewB4","wrapperRef","useRef","viewARef","viewBRef","_useState","useState","value","_useState2","_slicedToArray","mountedMode","setMountedMode","_useState3","_useState4","mountedOpen","setMountedOpen","pendingModeRef","exitTimerRef","finalConfig","useMemo","_props$viewA","_props$viewB","animations","_props$transitionConf","Object","assign","DEFAULT_ANIMATION","transitionConfig","useEffect","_props$value2","_wrapperRef$current","current","window","clearTimeout","currentHeight","offsetHeight","style","height","transition","enter","ease","setTimeout","nextMode","requestAnimationFrame","_finalConfig$viewA","_ref","_targetRef$current$of","_targetRef$current","_wrapperRef$current2","nextHeight","exit","hold","ViewAContent","_finalConfig$viewA$Co","_finalConfig$viewA2","Content","ViewDefault","ViewBContent","_finalConfig$viewB$Co","_finalConfig$viewB","_jsx","ViewSwitchTransitionStyled","className","root","children","_jsxs","ref","viewWrapper","CombinedTransition","open","timeout","mountDelay","animationConfig","transformOrigin","transformOriginGrid","transformOriginTable"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{defineProperty as t,slicedToArray as r,objectSpread2 as i}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n}from"react/jsx-runtime";import{styled as e,Card as o}from"@mui/material";import{useState as a,useRef as c,useEffect as l,cloneElement as u}from"react";var w={root:"DinoViewSwitchTransition-root",viewWrapper:"DinoViewSwitchTransition-viewWrapper",view:"DinoViewSwitchTransition-view",viewA:"DinoViewSwitchTransition-viewA",viewB:"DinoViewSwitchTransition-viewB"},s=w,m=e("div")(function(r){return r.theme,t(t(t({},"&.".concat(s.root),{flex:1,width:"100%",height:"100%",overflow:"hidden"}),".".concat(s.viewWrapper),{minHeight:0,position:"relative",width:"100%",height:"100%",overflow:"hidden"}),".".concat(s.view),{width:"100%",height:"100%"})}),d=function(){return n(o,{variant:"outlined",sx:{p:2},children:"Default view content"})},f={enter:220,exit:140,ease:"cubic-bezier(0.22, 0.61, 0.36, 1)",delayEnter:12,delayExit:0,transformOriginGrid:"top center",transformOriginTable:"top center",translateY:6,horizontalScale:.992,mountDelay:12,hold:30},h=function(t){var n=t.open,e=t.timeout,o=t.mountDelay,w=t.animationConfig,s=t.style,m=t.children,d=a(n),f=r(d,2),h=f[0],p=f[1],v=a(n),y=r(v,2),T=y[0],g=y[1],x=c(null),D=c(null);if(l(function(){if(n)return D.current&&(window.clearTimeout(D.current),D.current=null),p(!0),void(o>0?(x.current&&window.clearTimeout(x.current),x.current=window.setTimeout(function(){g(!0),x.current=null},o)):g(!0));g(!1),x.current&&(window.clearTimeout(x.current),x.current=null),D.current&&window.clearTimeout(D.current),D.current=window.setTimeout(function(){p(!1),D.current=null},e.exit)},[o,n,e.exit]),l(function(){return function(){x.current&&window.clearTimeout(x.current),D.current&&window.clearTimeout(D.current)}},[]),!h)return null;var S=i({transitionProperty:"opacity, transform",transitionTimingFunction:w.ease,transitionDuration:"".concat(T?e.enter:e.exit,"ms"),transitionDelay:"".concat(T?w.delayEnter:w.delayExit,"ms"),transformOrigin:(null==s?void 0:s.transformOrigin)||w.transformOriginGrid,willChange:"opacity, transform",backfaceVisibility:"hidden",opacity:T?1:0,transform:T?"translate3d(0, 0, 0) scaleX(1)":"translate3d(0, ".concat(w.translateY,"px, 0) scaleX(").concat(w.horizontalScale,")")},s);return u(m,{style:S})};export{h as CombinedTransition,f as DEFAULT_ANIMATION,d as ViewDefault,m as ViewSwitchTransitionStyled,w as viewSwitchTransitionClasses};
|
|
2
|
-
//# sourceMappingURL=view-switch-transition.units.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"view-switch-transition.units.js","sources":["../../../../src/lab/data-surface/view-switch-transition.units.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Card, styled } from '@mui/material'\r\nimport { cloneElement, useEffect, useRef, useState } from 'react'\r\n// types\r\nimport type { CSSProperties, FC, ReactElement } from 'react'\r\n\r\nexport const viewSwitchTransitionClasses = {\r\n root: 'DinoViewSwitchTransition-root',\r\n viewWrapper: 'DinoViewSwitchTransition-viewWrapper',\r\n view: 'DinoViewSwitchTransition-view',\r\n viewA: 'DinoViewSwitchTransition-viewA',\r\n viewB: 'DinoViewSwitchTransition-viewB'\r\n}\r\n\r\nconst classes = viewSwitchTransitionClasses\r\n\r\nexport const ViewSwitchTransitionStyled = styled('div')(({ theme }) => ({\r\n [`&.${classes.root}`]: { flex: 1, width: '100%', height: '100%', overflow: 'hidden' },\r\n // use minHeight: 0 so flex children can shrink and inner scroll areas work\r\n [`.${classes.viewWrapper}`]: { minHeight: 0, position: 'relative', width: '100%', height: '100%', overflow: 'hidden' },\r\n [`.${classes.view}`]: { width: '100%', height: '100%' }\r\n}))\r\n\r\nexport const ViewDefault: FC = () => (\r\n <Card variant='outlined' sx={{ p: 2 }}>\r\n Default view content\r\n </Card>\r\n)\r\n\r\n/**\r\n * Fine-grained control over the animation that plays when switching between Grid and Table view.\r\n * All timing values are in milliseconds unless noted.\r\n */\r\nexport type TAnimationConfig = {\r\n /** Duration of the enter (fade-in) animation. Defaults to `220`. */\r\n enter?: number\r\n /** Duration of the exit (fade-out) animation. Defaults to `140`. */\r\n exit?: number\r\n /** CSS easing function for both enter and exit. Defaults to `'cubic-bezier(0.22, 0.61, 0.36, 1)'`. */\r\n ease?: string\r\n /** Delay before the enter animation starts. Defaults to `12`. */\r\n delayEnter?: number\r\n /** Delay before the exit animation starts. Defaults to `0`. */\r\n delayExit?: number\r\n /** CSS `transform-origin` used during the Grid enter/exit. Defaults to `'top center'`. */\r\n transformOriginGrid?: string\r\n /** CSS `transform-origin` used during the Table enter/exit. Defaults to `'top center'`. */\r\n transformOriginTable?: string\r\n /** Vertical translation offset (px) applied at the start of the enter animation. Defaults to `6`. */\r\n translateY?: number\r\n /** Horizontal scale factor applied at the start of the enter animation. Defaults to `0.992`. */\r\n horizontalScale?: number\r\n /** Delay after the new pane mounts before its enter animation begins. Defaults to `12`. */\r\n mountDelay?: number\r\n /** Extra wait time (ms) after the exit animation completes before swapping the DOM. Defaults to `30`. */\r\n hold?: number\r\n}\r\n\r\n/**\r\n * Default motion profile used when callers do not provide custom switch config.\r\n *\r\n * The values are tuned for a quick but readable transition between Grid and Table\r\n * while minimizing layout jump perception.\r\n */\r\nexport const DEFAULT_ANIMATION: Required<TAnimationConfig> = {\r\n enter: 220,\r\n exit: 140,\r\n ease: 'cubic-bezier(0.22, 0.61, 0.36, 1)',\r\n delayEnter: 12,\r\n delayExit: 0,\r\n transformOriginGrid: 'top center',\r\n transformOriginTable: 'top center',\r\n translateY: 6,\r\n horizontalScale: 0.992,\r\n mountDelay: 12,\r\n hold: 30\r\n}\r\n\r\n/**\r\n * Props for `CombinedTransition`, the low-level transition wrapper.\r\n */\r\ninterface ICombinedTransitionProps {\r\n /** Controls whether the child should be shown. */\r\n open: boolean\r\n /** Enter/exit durations in milliseconds. */\r\n timeout: { enter: number; exit: number }\r\n /** Delay before applying the enter animation after mount. */\r\n mountDelay: number\r\n /** Resolved animation config (fully required). */\r\n animationConfig: Required<TAnimationConfig>\r\n /** Optional style overrides (commonly transform origin). */\r\n style?: CSSProperties\r\n /** Single child element to receive animated inline style. */\r\n children: ReactElement\r\n}\r\n\r\n/**\r\n * Reusable transition wrapper combining fade + transform with controlled\r\n * mount/unmount timing to avoid abrupt content flashing.\r\n */\r\nexport const CombinedTransition: FC<ICombinedTransitionProps> = (props) => {\r\n const { open, timeout, mountDelay, animationConfig, style, children } = props\r\n const [mounted, setMounted] = useState(open)\r\n const [showing, setShowing] = useState(open)\r\n\r\n const mountTimerRef = useRef<number | null>(null)\r\n const unmountTimerRef = useRef<number | null>(null)\r\n\r\n useEffect(() => {\r\n if (open) {\r\n if (unmountTimerRef.current) {\r\n window.clearTimeout(unmountTimerRef.current)\r\n unmountTimerRef.current = null\r\n }\r\n setMounted(true)\r\n if (mountDelay > 0) {\r\n if (mountTimerRef.current) window.clearTimeout(mountTimerRef.current)\r\n mountTimerRef.current = window.setTimeout(() => {\r\n setShowing(true)\r\n mountTimerRef.current = null\r\n }, mountDelay)\r\n } else {\r\n setShowing(true)\r\n }\r\n return\r\n }\r\n\r\n setShowing(false)\r\n if (mountTimerRef.current) {\r\n window.clearTimeout(mountTimerRef.current)\r\n mountTimerRef.current = null\r\n }\r\n\r\n if (unmountTimerRef.current) {\r\n window.clearTimeout(unmountTimerRef.current)\r\n }\r\n unmountTimerRef.current = window.setTimeout(() => {\r\n setMounted(false)\r\n unmountTimerRef.current = null\r\n }, timeout.exit)\r\n }, [mountDelay, open, timeout.exit])\r\n\r\n useEffect(() => {\r\n return () => {\r\n if (mountTimerRef.current) {\r\n window.clearTimeout(mountTimerRef.current)\r\n }\r\n if (unmountTimerRef.current) {\r\n window.clearTimeout(unmountTimerRef.current)\r\n }\r\n }\r\n }, [])\r\n\r\n if (!mounted) return null\r\n\r\n const transitionStyle: CSSProperties = {\r\n transitionProperty: 'opacity, transform',\r\n transitionTimingFunction: animationConfig.ease,\r\n transitionDuration: `${showing ? timeout.enter : timeout.exit}ms`,\r\n transitionDelay: `${showing ? animationConfig.delayEnter : animationConfig.delayExit}ms`,\r\n transformOrigin: style?.transformOrigin || animationConfig.transformOriginGrid,\r\n willChange: 'opacity, transform',\r\n backfaceVisibility: 'hidden',\r\n opacity: showing ? 1 : 0,\r\n transform: showing\r\n ? 'translate3d(0, 0, 0) scaleX(1)'\r\n : `translate3d(0, ${animationConfig.translateY}px, 0) scaleX(${animationConfig.horizontalScale})`,\r\n ...style\r\n }\r\n\r\n return cloneElement(children, { style: transitionStyle })\r\n}\r\n"],"names":["viewSwitchTransitionClasses","root","viewWrapper","view","viewA","viewB","classes","ViewSwitchTransitionStyled","styled","_ref","theme","_defineProperty","concat","flex","width","height","overflow","minHeight","position","ViewDefault","_jsx","Card","variant","sx","p","children","DEFAULT_ANIMATION","enter","exit","ease","delayEnter","delayExit","transformOriginGrid","transformOriginTable","translateY","horizontalScale","mountDelay","hold","CombinedTransition","props","open","timeout","animationConfig","style","_useState","useState","_useState2","_slicedToArray","mounted","setMounted","_useState3","_useState4","showing","setShowing","mountTimerRef","useRef","unmountTimerRef","useEffect","current","window","clearTimeout","setTimeout","transitionStyle","_objectSpread","transitionProperty","transitionTimingFunction","transitionDuration","transitionDelay","transformOrigin","willChange","backfaceVisibility","opacity","transform","cloneElement"],"mappings":"6RAQO,IAAMA,EAA8B,CACzCC,KAAM,gCACNC,YAAa,uCACbC,KAAM,gCACNC,MAAO,iCACPC,MAAO,kCAGHC,EAAUN,EAEHO,EAA6BC,EAAO,MAAPA,CAAc,SAAAC,GAAQ,OAAAA,EAALC,MAAKC,EAAAA,EAAAA,EAAAC,CAAAA,EAAAA,KAAAA,OACxDN,EAAQL,MAAS,CAAEY,KAAM,EAAGC,MAAO,OAAQC,OAAQ,OAAQC,SAAU,eAAUJ,OAEhFN,EAAQJ,aAAgB,CAAEe,UAAW,EAAGC,SAAU,WAAYJ,MAAO,OAAQC,OAAQ,OAAQC,SAAU,eAAUJ,OACjHN,EAAQH,MAAS,CAAEW,MAAO,OAAQC,OAAQ,QAAQ,GAG5CI,EAAkB,WAAP,OACtBC,EAACC,EAAK,CAAAC,QAAQ,WAAWC,GAAI,CAAEC,EAAG,GAE3BC,SAAA,wBAAA,EAsCIC,EAAgD,CAC3DC,MAAO,IACPC,KAAM,IACNC,KAAM,oCACNC,WAAY,GACZC,UAAW,EACXC,oBAAqB,aACrBC,qBAAsB,aACtBC,WAAY,EACZC,gBAAiB,KACjBC,WAAY,GACZC,KAAM,IAyBKC,EAAmD,SAACC,GAC/D,IAAQC,EAAgED,EAAhEC,KAAMC,EAA0DF,EAA1DE,QAASL,EAAiDG,EAAjDH,WAAYM,EAAqCH,EAArCG,gBAAiBC,EAAoBJ,EAApBI,MAAOlB,EAAac,EAAbd,SAC3DmB,EAA8BC,EAASL,GAAKM,EAAAC,EAAAH,EAAA,GAArCI,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GAC1BI,EAA8BL,EAASL,GAAKW,EAAAJ,EAAAG,EAAA,GAArCE,EAAOD,EAAA,GAAEE,EAAUF,EAAA,GAEpBG,EAAgBC,EAAsB,MACtCC,EAAkBD,EAAsB,MA+C9C,GA7CAE,EAAU,WACR,GAAIjB,EAeF,OAdIgB,EAAgBE,UAClBC,OAAOC,aAAaJ,EAAgBE,SACpCF,EAAgBE,QAAU,MAE5BT,GAAW,QACPb,EAAa,GACXkB,EAAcI,SAASC,OAAOC,aAAaN,EAAcI,SAC7DJ,EAAcI,QAAUC,OAAOE,WAAW,WACxCR,GAAW,GACXC,EAAcI,QAAU,IACzB,EAAEtB,IAEHiB,GAAW,IAKfA,GAAW,GACPC,EAAcI,UAChBC,OAAOC,aAAaN,EAAcI,SAClCJ,EAAcI,QAAU,MAGtBF,EAAgBE,SAClBC,OAAOC,aAAaJ,EAAgBE,SAEtCF,EAAgBE,QAAUC,OAAOE,WAAW,WAC1CZ,GAAW,GACXO,EAAgBE,QAAU,IAC5B,EAAGjB,EAAQb,KACZ,EAAE,CAACQ,EAAYI,EAAMC,EAAQb,OAE9B6B,EAAU,WACR,OAAO,WACDH,EAAcI,SAChBC,OAAOC,aAAaN,EAAcI,SAEhCF,EAAgBE,SAClBC,OAAOC,aAAaJ,EAAgBE,QAEvC,CACF,EAAE,KAEEV,EAAS,OAAO,KAErB,IAAMc,EAAeC,EAAA,CACnBC,mBAAoB,qBACpBC,yBAA0BvB,EAAgBb,KAC1CqC,mBAAkBtD,GAAAA,OAAKwC,EAAUX,EAAQd,MAAQc,EAAQb,KAAQ,MACjEuC,gBAAevD,GAAAA,OAAKwC,EAAUV,EAAgBZ,WAAaY,EAAgBX,UAAa,MACxFqC,iBAAiBzB,aAAK,EAALA,EAAOyB,kBAAmB1B,EAAgBV,oBAC3DqC,WAAY,qBACZC,mBAAoB,SACpBC,QAASnB,EAAU,EAAI,EACvBoB,UAAWpB,EACP,mDAAgCxC,OACd8B,EAAgBR,WAAUtB,kBAAAA,OAAiB8B,EAAgBP,gBAAe,MAC7FQ,GAGL,OAAO8B,EAAahD,EAAU,CAAEkB,MAAOmB,GACzC"}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import type { ComponentType, FC } from 'react';
|
|
2
|
-
import type { IViewGridItemProps, TGridSizes } from './view-grid.types';
|
|
3
|
-
import type { TGetterId, LoadingModeRule, TPagination, TVirtualizedConfig, RenderStrategyRule } from './types';
|
|
4
|
-
export interface IViewGridBase<T> {
|
|
5
|
-
gap?: number;
|
|
6
|
-
sizes?: TGridSizes;
|
|
7
|
-
gridItemHeight?: number;
|
|
8
|
-
/**
|
|
9
|
-
* Controls how the list is rendered into the DOM.
|
|
10
|
-
* - `normal` — all rows are mounted (suitable for small datasets)
|
|
11
|
-
* - `virtualized` — only visible rows are mounted (optimized for large datasets)
|
|
12
|
-
* @default 'normal'
|
|
13
|
-
*/
|
|
14
|
-
renderStrategy?: RenderStrategyRule;
|
|
15
|
-
Component?: ComponentType<IViewGridItemProps<T>>;
|
|
16
|
-
virtualizedConfig?: TVirtualizedConfig;
|
|
17
|
-
/** Called when user scrolls near the bottom of the list. Use this to trigger pagination or infinity load. */
|
|
18
|
-
onNearEnd?: () => void;
|
|
19
|
-
}
|
|
20
|
-
export interface IViewGridConfig<T> extends IViewGridBase<T> {
|
|
21
|
-
getterId: TGetterId<T>;
|
|
22
|
-
}
|
|
23
|
-
export interface IViewGridProps<T> extends IViewGridBase<T> {
|
|
24
|
-
value: T[];
|
|
25
|
-
}
|
|
26
|
-
export interface IViewGridLoadingProps<T> extends IViewGridBase<T> {
|
|
27
|
-
value: T[];
|
|
28
|
-
loadMode: LoadingModeRule;
|
|
29
|
-
loading?: boolean;
|
|
30
|
-
pagination?: TPagination;
|
|
31
|
-
onPageChange?: (page: number, pageSize: number) => void | Promise<void>;
|
|
32
|
-
}
|
|
33
|
-
export declare function createViewGrid<T>(config: IViewGridConfig<T>): FC<IViewGridProps<T>>;
|
|
34
|
-
export declare function createViewGridLoading<T>(GridComponent: ComponentType<IViewGridProps<T>>): FC<IViewGridLoadingProps<T>>;
|
|
35
|
-
export default createViewGrid;
|
|
36
|
-
export declare const viewGridClasses: {
|
|
37
|
-
root: string;
|
|
38
|
-
scrollContainer: string;
|
|
39
|
-
grid: string;
|
|
40
|
-
gridVirtualized: string;
|
|
41
|
-
gridItem: string;
|
|
42
|
-
};
|