dinocollab-core 2.2.6 → 2.2.7
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/src/components/rich-tooltip.js +1 -1
- package/dist/src/components/rich-tooltip.js.map +1 -1
- package/dist/src/lab/data-surface/index.create.js +1 -1
- package/dist/src/lab/data-surface/index.create.js.map +1 -1
- package/dist/src/lab/data-surface/types.js.map +1 -1
- package/dist/src/lab/data-surface/ui.units.js +1 -1
- package/dist/src/lab/data-surface/ui.units.js.map +1 -1
- package/dist/src/lab/data-surface/view-grid.js.map +1 -1
- package/dist/src/lab/data-surface/view-list.js +1 -1
- package/dist/src/lab/data-surface/view-list.js.map +1 -1
- package/dist/src/lab/data-surface/view-list.types.js.map +1 -1
- package/dist/types/components/rich-tooltip.d.ts +3 -7
- package/dist/types/lab/data-surface/index.create.d.ts +4 -4
- package/dist/types/lab/data-surface/types.d.ts +2 -0
- package/dist/types/lab/data-surface/ui.units.d.ts +4 -3
- package/dist/types/lab/data-surface/view-grid.d.ts +1 -1
- package/dist/types/lab/data-surface/view-list.types.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as
|
|
1
|
+
import{defineProperty as t,objectWithoutProperties as e,objectSpread2 as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a,jsxs as r}from"react/jsx-runtime";import{useMemo as i}from"react";import{styled as n,Stack as l,Tooltip as p,tooltipClasses as c,Box as d,Typography as s,Divider as u}from"@mui/material";import m from"@mui/icons-material/HelpOutline";var h=["className"],f=function(t){var e,n=t.children,l=t.panel,p=t.renderPanel,c=t.slots,m=t.isTouch,h=i(function(){return void 0!==m?m:"undefined"!=typeof window&&("ontouchstart"in window||navigator.maxTouchPoints>0||(navigator.msMaxTouchPoints||0)>0||(null===(t=(e=window).matchMedia)||void 0===t?void 0:t.call(e,"(pointer: coarse)").matches));var t,e},[m]),f=function(t){return t?"string"!=typeof t?t:a(s,{variant:"body2",children:t}):null},b=o(o({},h?{enterTouchDelay:0,leaveTouchDelay:3e3}:{}),null==c?void 0:c.tooltipProps);return a(v,o(o({arrow:!0,placement:"bottom",title:p?p():l?r(g,{className:x.titlePanel,children:[(e=l.title,e?"string"!=typeof e?e:a(s,{variant:"subtitle1",className:x.title,children:e}):null),a(u,{}),a(d,{className:x.content,children:f(l.content)})]}):a(s,{variant:"body2",children:"Please provide a panel configuration"}),className:x.root},b),{},{children:a(d,o(o({},null==c?void 0:c.wrapperProps),{},{children:n}))}))},x={root:"RichTooltip-root",titlePanel:"RichTooltip-titlePanel",title:"RichTooltip-title",content:"RichTooltip-content"},b=function(t,e){return"".concat((null==e?void 0:e.prefix)||"",".").concat(x[t]).concat((null==e?void 0:e.suffix)||"")},g=n(l)(function(e){var o=e.theme;return t(t(t({},b("titlePanel",{prefix:"&"}),{gap:"6px"}),b("title"),{color:o.palette.primary.main,fontWeight:700,padding:o.spacing(1,1.5,0)}),b("content"),{padding:o.spacing(1,1.5,1.5),color:o.palette.text.primary})}),v=n(function(t){var r=t.className,i=e(t,h);return a(p,o(o({},i),{},{classes:{popper:r}}))})(function(e){var o=e.theme;return t(t({},"& .".concat(c.tooltip),{backgroundColor:o.palette.background.paper,color:o.palette.text.primary,padding:0,minWidth:"360px",maxWidth:"450px",borderRadius:o.shape.borderRadius,boxShadow:"dark"===o.palette.mode?"rgba(0, 0, 0, 0.4) 0px 6px 30px":"rgba(0, 0, 0, 0.08) 0px 6px 30px",border:"1px solid ".concat(o.palette.divider)}),"& .".concat(c.arrow),{color:o.palette.background.paper})}),w=n(m)(function(t){var e=t.theme;return{position:"relative",zIndex:1,color:e.palette.primary.main,borderRadius:"50%",cursor:"help",animation:"pulseGlow 1.5s infinite","@keyframes pulseGlow":{"0%":{boxShadow:"dark"===e.palette.mode?"0 0 0 0 rgba(144, 202, 249, 0.3)":"0 0 0 0 rgba(33, 150, 243, 0.3)"},"70%":{boxShadow:"dark"===e.palette.mode?"0 0 0 10px rgba(144, 202, 249, 0)":"0 0 0 10px rgba(33, 150, 243, 0)"},"100%":{boxShadow:"dark"===e.palette.mode?"0 0 0 0 rgba(144, 202, 249, 0)":"0 0 0 0 rgba(33, 150, 243, 0)"}}}});export{w as HelpOutlinePulseIcon,f as RichTooltip,f as default};
|
|
2
2
|
//# sourceMappingURL=rich-tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rich-tooltip.js","sources":["../../../src/components/rich-tooltip.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"rich-tooltip.js","sources":["../../../src/components/rich-tooltip.tsx"],"sourcesContent":["import { useMemo } from 'react'\r\nimport { Box, Divider, Stack, Tooltip, Typography, styled, tooltipClasses } from '@mui/material'\r\nimport type { ReactNode } from 'react'\r\nimport type { BoxProps, TooltipProps } from '@mui/material'\r\nimport HelpOutlineIcon from '@mui/icons-material/HelpOutline'\r\n\r\nexport interface IRichTooltipPanelConfig {\r\n title: ReactNode\r\n content: ReactNode\r\n}\r\n\r\nexport interface IRichTooltipProps {\r\n panel?: IRichTooltipPanelConfig\r\n renderPanel?: () => ReactNode\r\n children: React.ReactNode\r\n /** Optional: manually set touch mode. If not provided, auto-detect touch device */\r\n isTouch?: boolean\r\n slots?: {\r\n tooltipProps?: Partial<TooltipProps>\r\n wrapperProps?: BoxProps\r\n }\r\n}\r\n\r\n/**\r\n * Detect if the current device supports touch\r\n */\r\nconst isTouchDevice = (): boolean => {\r\n if (typeof window === 'undefined') return false\r\n return (\r\n 'ontouchstart' in window ||\r\n navigator.maxTouchPoints > 0 ||\r\n // @ts-ignore\r\n (navigator.msMaxTouchPoints || 0) > 0 ||\r\n window.matchMedia?.('(pointer: coarse)').matches\r\n )\r\n}\r\n\r\nexport const RichTooltip = (props: IRichTooltipProps) => {\r\n const { children, panel, renderPanel, slots, isTouch } = props\r\n\r\n // Auto-detect touch device if isTouch prop is not provided\r\n const shouldUseTouchMode = useMemo(() => {\r\n return isTouch !== undefined ? isTouch : isTouchDevice()\r\n }, [isTouch])\r\n\r\n const renderTitle = (value: ReactNode) => {\r\n if (!value) return null\r\n if (typeof value !== 'string') return value\r\n return (\r\n <Typography variant='subtitle1' className={richTooltipClasses.title}>\r\n {value}\r\n </Typography>\r\n )\r\n }\r\n\r\n const renderContent = (value: ReactNode) => {\r\n if (!value) return null\r\n if (typeof value !== 'string') return value\r\n return <Typography variant='body2'>{value}</Typography>\r\n }\r\n\r\n const renderTitlePanel = () => {\r\n if (renderPanel) return renderPanel()\r\n if (!panel) return <Typography variant='body2'>Please provide a panel configuration</Typography>\r\n return (\r\n <TooltipTitlePanelStyled className={richTooltipClasses.titlePanel}>\r\n {renderTitle(panel.title)}\r\n <Divider />\r\n <Box className={richTooltipClasses.content}>{renderContent(panel.content)}</Box>\r\n </TooltipTitlePanelStyled>\r\n )\r\n }\r\n\r\n // Merge touch-specific props with user-provided tooltip props\r\n const tooltipProps: Partial<TooltipProps> = {\r\n ...(shouldUseTouchMode ? { enterTouchDelay: 0, leaveTouchDelay: 3000 } : {}),\r\n ...slots?.tooltipProps\r\n }\r\n\r\n return (\r\n <TooltipStyled arrow placement='bottom' title={renderTitlePanel()} className={richTooltipClasses.root} {...tooltipProps}>\r\n <Box {...slots?.wrapperProps}>{children}</Box>\r\n </TooltipStyled>\r\n )\r\n}\r\n\r\nexport default RichTooltip\r\n\r\nconst richTooltipClasses = {\r\n root: 'RichTooltip-root',\r\n titlePanel: 'RichTooltip-titlePanel',\r\n title: 'RichTooltip-title',\r\n content: 'RichTooltip-content'\r\n}\r\n\r\nconst getRichTooltipClass = (key: keyof typeof richTooltipClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${richTooltipClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nconst TooltipTitlePanelStyled = styled(Stack)(({ theme }) => ({\r\n [getRichTooltipClass('titlePanel', { prefix: '&' })]: {\r\n gap: '6px'\r\n },\r\n [getRichTooltipClass('title')]: {\r\n color: theme.palette.primary.main,\r\n fontWeight: 700,\r\n padding: theme.spacing(1, 1.5, 0)\r\n },\r\n [getRichTooltipClass('content')]: {\r\n padding: theme.spacing(1, 1.5, 1.5),\r\n color: theme.palette.text.primary\r\n }\r\n}))\r\n\r\nconst TooltipStyled = styled(({ className, ...props }: TooltipProps) => <Tooltip {...props} classes={{ popper: className }} />)(({ theme }) => ({\r\n [`& .${tooltipClasses.tooltip}`]: {\r\n backgroundColor: theme.palette.background.paper,\r\n color: theme.palette.text.primary,\r\n padding: 0,\r\n minWidth: '360px',\r\n maxWidth: '450px',\r\n borderRadius: theme.shape.borderRadius,\r\n boxShadow: theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.4) 0px 6px 30px' : 'rgba(0, 0, 0, 0.08) 0px 6px 30px',\r\n border: `1px solid ${theme.palette.divider}`\r\n },\r\n [`& .${tooltipClasses.arrow}`]: {\r\n color: theme.palette.background.paper\r\n }\r\n}))\r\n\r\nexport const HelpOutlinePulseIcon = styled(HelpOutlineIcon)(({ theme }) => ({\r\n position: 'relative',\r\n zIndex: 1,\r\n color: theme.palette.primary.main,\r\n borderRadius: '50%',\r\n cursor: 'help',\r\n animation: 'pulseGlow 1.5s infinite',\r\n '@keyframes pulseGlow': {\r\n '0%': {\r\n boxShadow: theme.palette.mode === 'dark' ? '0 0 0 0 rgba(144, 202, 249, 0.3)' : '0 0 0 0 rgba(33, 150, 243, 0.3)'\r\n },\r\n '70%': {\r\n boxShadow: theme.palette.mode === 'dark' ? '0 0 0 10px rgba(144, 202, 249, 0)' : '0 0 0 10px rgba(33, 150, 243, 0)'\r\n },\r\n '100%': {\r\n boxShadow: theme.palette.mode === 'dark' ? '0 0 0 0 rgba(144, 202, 249, 0)' : '0 0 0 0 rgba(33, 150, 243, 0)'\r\n }\r\n }\r\n}))\r\n"],"names":["RichTooltip","props","value","children","panel","renderPanel","slots","isTouch","shouldUseTouchMode","useMemo","undefined","window","navigator","maxTouchPoints","msMaxTouchPoints","_window$matchMedia","_window","matchMedia","call","matches","renderContent","_jsx","Typography","variant","tooltipProps","_objectSpread","enterTouchDelay","leaveTouchDelay","TooltipStyled","arrow","placement","title","_jsxs","TooltipTitlePanelStyled","className","richTooltipClasses","titlePanel","Divider","Box","content","root","wrapperProps","getRichTooltipClass","key","options","concat","prefix","suffix","styled","Stack","_ref","theme","_defineProperty","gap","color","palette","primary","main","fontWeight","padding","spacing","text","_ref3","_objectWithoutProperties","_excluded","Tooltip","classes","popper","_ref4","tooltipClasses","tooltip","backgroundColor","background","paper","minWidth","maxWidth","borderRadius","shape","boxShadow","mode","border","divider","HelpOutlinePulseIcon","HelpOutlineIcon","_ref6","position","zIndex","cursor","animation"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
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{
|
|
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
2
|
//# sourceMappingURL=index.create.js.map
|
|
@@ -1 +1 @@
|
|
|
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 { createViewGrid, createViewGridLoading } from './view-grid'\r\nimport { createViewList, createViewListLoading, viewListClasses } from './view-list'\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, ReactNode } from 'react'\r\nimport type { TPagination, TDataSurfaceState } 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?: string | ((currentStatus: string) => ReactNode)\r\n range?: string | ((currentRange: string) => ReactNode)\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
|
+
{"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 +1 @@
|
|
|
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\nexport type TGetterId<T> = (item: T, index: number) => string | number\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\
|
|
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 +1,2 @@
|
|
|
1
|
-
import{objectSpread2 as e
|
|
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
2
|
//# sourceMappingURL=ui.units.js.map
|
|
@@ -1 +1 @@
|
|
|
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 } from '@mui/material'\r\n// types\r\nimport type { FC, ReactNode } from 'react'\r\nimport type { BoxProps } from '@mui/material'\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?: string | ((currentStatus: string) => ReactNode)\r\n rangeText?: string | ((currentRange: string) => ReactNode)\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\nexport const PanelInfiniteScrollFooter: FC<IPanelInfiniteScrollFooterProps> = (props) => {\r\n const { slots, loading, hasNext, currentCount, total } = props\r\n // Status text on the left\r\n let statusText = ''\r\n if (loading) {\r\n statusText = 'Loading more...'\r\n } else if (hasNext) {\r\n statusText = 'Scroll for more'\r\n } else {\r\n statusText = 'No more items'\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 finalStatusText = typeof slots?.statusText === 'function' ? slots.statusText(statusText) : (slots?.statusText ?? statusText)\r\n const finalRangeText = typeof slots?.rangeText === 'function' ? slots.rangeText(rangeText) : (slots?.rangeText ?? rangeText)\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 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$statusText","_slots$rangeText","slots","loading","hasNext","currentCount","total","statusText","rangeText","finalStatusText","finalRangeText","renderText","value","PanelInfiniteScrollFooterStyled","_ref3","_defineProperty","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","_ref5","background","paper"],"mappings":"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"}
|
|
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 +1 @@
|
|
|
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 { TGetterId, LoadingModeRule, TPagination, TVirtualizedConfig, RenderStrategyRule } from './types'\r\nimport type { IViewGridItemProps, TGridSizes } from './view-grid.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
|
+
{"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 +1,2 @@
|
|
|
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=e.valueGetter?e.valueGetter(l,n):l[e.field],i={value:t,row:l,index:n,field:e.field};if(e.renderCell)return e.renderCell(i);var r=String(null!=t?t:"");return a(C,{variant:"body2",noWrap:!0,title:r,children:r})}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};
|
|
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
2
|
//# sourceMappingURL=view-list.js.map
|
|
@@ -1 +1 @@
|
|
|
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 value = column.valueGetter ? column.valueGetter(row, index) : (row as any)[column.field]\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","value","valueGetter","field","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
|
+
{"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 +1 @@
|
|
|
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?: (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
|
+
{"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,4 +1,3 @@
|
|
|
1
|
-
import { Component } from 'react';
|
|
2
1
|
import type { ReactNode } from 'react';
|
|
3
2
|
import type { BoxProps, TooltipProps } from '@mui/material';
|
|
4
3
|
export interface IRichTooltipPanelConfig {
|
|
@@ -9,17 +8,14 @@ export interface IRichTooltipProps {
|
|
|
9
8
|
panel?: IRichTooltipPanelConfig;
|
|
10
9
|
renderPanel?: () => ReactNode;
|
|
11
10
|
children: React.ReactNode;
|
|
11
|
+
/** Optional: manually set touch mode. If not provided, auto-detect touch device */
|
|
12
|
+
isTouch?: boolean;
|
|
12
13
|
slots?: {
|
|
13
14
|
tooltipProps?: Partial<TooltipProps>;
|
|
14
15
|
wrapperProps?: BoxProps;
|
|
15
16
|
};
|
|
16
17
|
}
|
|
17
|
-
export declare
|
|
18
|
-
render(): import("react/jsx-runtime").JSX.Element;
|
|
19
|
-
renderTitlePanel: () => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
|
|
20
|
-
renderTitle: (value: ReactNode) => number | true | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null;
|
|
21
|
-
renderContent: (value: ReactNode) => number | true | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null;
|
|
22
|
-
}
|
|
18
|
+
export declare const RichTooltip: (props: IRichTooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
19
|
export default RichTooltip;
|
|
24
20
|
export declare const HelpOutlinePulseIcon: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
|
|
25
21
|
ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { DataSurfaceViewMode, LoadingModeRule } from './types';
|
|
2
2
|
import type { BoxProps } from '@mui/material';
|
|
3
|
-
import type { ComponentType, FC
|
|
4
|
-
import type { TPagination, TDataSurfaceState } from './types';
|
|
3
|
+
import type { ComponentType, FC } from 'react';
|
|
4
|
+
import type { TPagination, TDataSurfaceState, TRenderableNode } from './types';
|
|
5
5
|
import type { IViewGridConfig, IViewGridProps } from './view-grid';
|
|
6
6
|
import type { IViewListConfig, IViewListProps } from './view-list';
|
|
7
7
|
export interface IDataSurfaceSlots {
|
|
8
8
|
footer?: {
|
|
9
|
-
status?:
|
|
10
|
-
range?:
|
|
9
|
+
status?: TRenderableNode;
|
|
10
|
+
range?: TRenderableNode;
|
|
11
11
|
};
|
|
12
12
|
}
|
|
13
13
|
export interface IDataSurfaceProps<T> {
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
1
2
|
export type TGetterId<T> = (item: T, index: number) => string | number;
|
|
3
|
+
export type TRenderableNode = ReactNode | ((currentNode: ReactNode, rawText: string) => ReactNode);
|
|
2
4
|
export type TPagination = {
|
|
3
5
|
page?: number;
|
|
4
6
|
pageSize?: number;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type { FC
|
|
1
|
+
import type { FC } from 'react';
|
|
2
2
|
import type { BoxProps } from '@mui/material';
|
|
3
|
+
import { TRenderableNode } from './types';
|
|
3
4
|
export declare const PanelLoading: FC<BoxProps>;
|
|
4
5
|
export declare const PanelError: FC<{
|
|
5
6
|
error: string;
|
|
@@ -9,8 +10,8 @@ export declare const PanelWaiting: FC;
|
|
|
9
10
|
export declare const PanelMissingConfig: FC;
|
|
10
11
|
export declare const PanelLoadMore: FC;
|
|
11
12
|
export interface IPanelInfiniteScrollFooterSlots {
|
|
12
|
-
statusText?:
|
|
13
|
-
rangeText?:
|
|
13
|
+
statusText?: TRenderableNode;
|
|
14
|
+
rangeText?: TRenderableNode;
|
|
14
15
|
}
|
|
15
16
|
export interface IPanelInfiniteScrollFooterProps {
|
|
16
17
|
loading?: boolean;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ComponentType, FC } from 'react';
|
|
2
|
-
import type { TGetterId, LoadingModeRule, TPagination, TVirtualizedConfig, RenderStrategyRule } from './types';
|
|
3
2
|
import type { IViewGridItemProps, TGridSizes } from './view-grid.types';
|
|
3
|
+
import type { TGetterId, LoadingModeRule, TPagination, TVirtualizedConfig, RenderStrategyRule } from './types';
|
|
4
4
|
export interface IViewGridBase<T> {
|
|
5
5
|
gap?: number;
|
|
6
6
|
sizes?: TGridSizes;
|
|
@@ -49,7 +49,7 @@ export interface TListColumn<T> {
|
|
|
49
49
|
/** Custom cell render function - receives CellParams, returns ReactNode. */
|
|
50
50
|
renderCell?: (params: IListCellParams<T>) => ReactNode;
|
|
51
51
|
/** Derives a value from the row before it is passed to the render step. */
|
|
52
|
-
valueGetter?: (row: T, index: number) => any;
|
|
52
|
+
valueGetter?: (value: string, row: T, index: number) => any;
|
|
53
53
|
}
|
|
54
54
|
export type TListColumns<T> = Partial<Record<keyof T, Omit<TListColumn<T>, 'field'>>>;
|
|
55
55
|
/**
|