@economic/taco 2.47.0-server-1 → 2.47.0-server.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -84,6 +84,7 @@ import '../../../components/Header/Header.js';
84
84
  import '../../../components/Layout/Layout.js';
85
85
  import '../../../components/Navigation2/components/Link.js';
86
86
  import '../../../components/Navigation2/Navigation2.js';
87
+ import '../../../primitives/Table/useTableDataLoader2.js';
87
88
  import '../../../hooks/useBoundaryOverflowDetection.js';
88
89
  import '../../../utils/hooks/useOnClickOutside.js';
89
90
 
@@ -1 +1 @@
1
- {"version":3,"file":"Legend.js","sources":["../../../../../../../../src/charts/components/Donut/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Button, Icon, OverflowGroup } from '../../../index';\n\nimport { getThemeColor } from '../../utils/color';\nimport { DonutChartProps, DonutChartSegmentProps, SegmentIds } from './DonutChart';\n\ntype LegendProps = Pick<DonutChartProps, 'formatter' | 'label' | 'legendPosition'> & {\n data: DonutChartSegmentProps[];\n hoveredItem: SegmentIds;\n onClick: (entry: DonutChartSegmentProps | DonutChartSegmentProps[]) => void;\n selectedItem: SegmentIds;\n setHoveredItem: React.Dispatch<React.SetStateAction<SegmentIds>>;\n total: number;\n visibleItems: Record<string, boolean>;\n};\n\nexport const Legend = ({\n legendPosition,\n hoveredItem,\n selectedItem,\n data,\n onClick,\n setHoveredItem,\n formatter,\n total,\n visibleItems,\n label,\n}: LegendProps) => {\n const isTotalLegendSelected = selectedItem.length === data.length;\n const isTotalLegendHovered = hoveredItem.length === data.length;\n\n const handleMouseLeave = () => setHoveredItem([]);\n\n const renderLegendItem = (entry: DonutChartSegmentProps | null, index?: number) => {\n const isTotal = entry === null;\n // We can't use `isTotal` here because TypeScript is unable to infer the type when `entry` is not null.\n const itemData = entry === null ? { id: 'total', label, value: total, color: 'grey-300' } : entry;\n const isSelected = isTotal ? isTotalLegendSelected : selectedItem.includes(itemData.id);\n const isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);\n\n return (\n <li\n key={isTotal ? 'total' : `${itemData.label}-${index}`}\n className={cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {\n 'bg-grey-100': isHovered && (!isTotal || legendPosition === 'right'),\n 'bg-grey-200': isSelected && (!isTotal || legendPosition === 'right'),\n })}\n onClick={() => onClick(isTotal ? data : itemData)}\n onMouseEnter={() => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id])}\n onMouseLeave={handleMouseLeave}>\n {legendPosition === 'bottom' ? (\n <div className=\"flex items-center gap-1\">\n <span\n className={cn('ml-1 h-3 w-3 rounded-sm', {\n 'border-grey-300 border !bg-white': !visibleItems[itemData.id],\n })}\n style={{ backgroundColor: getThemeColor(itemData.color) }}>\n {visibleItems[itemData.id] && isHovered && (\n <Icon name=\"tick-bold\" className=\"mb-2.5 !h-full !w-full text-white\" />\n )}\n </span>\n <div>{itemData.label}</div>\n </div>\n ) : (\n <>\n <span\n className=\"ml-1 mt-1 h-9 w-2 rounded-[1px]\"\n style={{ backgroundColor: getThemeColor(itemData.color) }}\n />\n <div>\n {itemData.label}\n <span className=\"-mt-1 flex w-full text-lg font-bold\">\n {formatter ? formatter(itemData.value) : itemData.value}\n </span>\n </div>\n </>\n )}\n </li>\n );\n };\n\n const moreButton = moreButtonText => (\n <Button appearance=\"transparent\" className=\"text-grey-700\">\n {moreButtonText}\n </Button>\n );\n\n const className = cn('flex-grow pl-4', {\n 'w-full': legendPosition === 'bottom',\n });\n return (\n <div className={className}>\n <ul\n className={cn(\n 'mb-0 ml-0 mt-4 flex justify-center space-y-1',\n legendPosition === 'right' ? 'flex-col gap-1' : 'flex-row'\n )}>\n {legendPosition === 'right' ? (\n <>\n {renderLegendItem(null)}\n {data.map(renderLegendItem)}\n </>\n ) : (\n <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n {data.map(renderLegendItem)}\n </OverflowGroup>\n )}\n </ul>\n </div>\n );\n};\n"],"names":["Legend","legendPosition","hoveredItem","selectedItem","data","onClick","setHoveredItem","formatter","total","visibleItems","label","isTotalLegendSelected","length","isTotalLegendHovered","handleMouseLeave","renderLegendItem","entry","index","isTotal","itemData","id","value","color","isSelected","includes","isHovered","React","key","className","cn","onMouseEnter","map","item","onMouseLeave","style","backgroundColor","getThemeColor","Icon","name","moreButton","moreButtonText","Button","appearance","OverflowGroup"],"mappings":"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"}
1
+ {"version":3,"file":"Legend.js","sources":["../../../../../../../../src/charts/components/Donut/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Button, Icon, OverflowGroup } from '../../../index';\n\nimport { getThemeColor } from '../../utils/color';\nimport { DonutChartProps, DonutChartSegmentProps, SegmentIds } from './DonutChart';\n\ntype LegendProps = Pick<DonutChartProps, 'formatter' | 'label' | 'legendPosition'> & {\n data: DonutChartSegmentProps[];\n hoveredItem: SegmentIds;\n onClick: (entry: DonutChartSegmentProps | DonutChartSegmentProps[]) => void;\n selectedItem: SegmentIds;\n setHoveredItem: React.Dispatch<React.SetStateAction<SegmentIds>>;\n total: number;\n visibleItems: Record<string, boolean>;\n};\n\nexport const Legend = ({\n legendPosition,\n hoveredItem,\n selectedItem,\n data,\n onClick,\n setHoveredItem,\n formatter,\n total,\n visibleItems,\n label,\n}: LegendProps) => {\n const isTotalLegendSelected = selectedItem.length === data.length;\n const isTotalLegendHovered = hoveredItem.length === data.length;\n\n const handleMouseLeave = () => setHoveredItem([]);\n\n const renderLegendItem = (entry: DonutChartSegmentProps | null, index?: number) => {\n const isTotal = entry === null;\n // We can't use `isTotal` here because TypeScript is unable to infer the type when `entry` is not null.\n const itemData = entry === null ? { id: 'total', label, value: total, color: 'grey-300' } : entry;\n const isSelected = isTotal ? isTotalLegendSelected : selectedItem.includes(itemData.id);\n const isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);\n\n return (\n <li\n key={isTotal ? 'total' : `${itemData.label}-${index}`}\n className={cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {\n 'bg-grey-100': isHovered && (!isTotal || legendPosition === 'right'),\n 'bg-grey-200': isSelected && (!isTotal || legendPosition === 'right'),\n })}\n onClick={() => onClick(isTotal ? data : itemData)}\n onMouseEnter={() => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id])}\n onMouseLeave={handleMouseLeave}>\n {legendPosition === 'bottom' ? (\n <div className=\"flex items-center gap-1\">\n <span\n className={cn('ml-1 h-3 w-3 rounded-sm', {\n 'border-grey-300 border !bg-white': !visibleItems[itemData.id],\n })}\n style={{ backgroundColor: getThemeColor(itemData.color) }}>\n {visibleItems[itemData.id] && isHovered && (\n <Icon name=\"tick-bold\" className=\"mb-2.5 !h-full !w-full text-white\" />\n )}\n </span>\n <div>{itemData.label}</div>\n </div>\n ) : (\n <>\n <span\n className=\"ml-1 mt-1 h-9 w-2 rounded-[1px]\"\n style={{ backgroundColor: getThemeColor(itemData.color) }}\n />\n <div>\n {itemData.label}\n <span className=\"-mt-1 flex w-full text-lg font-bold\">\n {formatter ? formatter(itemData.value) : itemData.value}\n </span>\n </div>\n </>\n )}\n </li>\n );\n };\n\n const moreButton = moreButtonText => (\n <Button appearance=\"transparent\" className=\"text-grey-700\">\n {moreButtonText}\n </Button>\n );\n\n const className = cn('flex-grow pl-4', {\n 'w-full': legendPosition === 'bottom',\n });\n return (\n <div className={className}>\n <ul\n className={cn(\n 'mb-0 ml-0 mt-4 flex justify-center space-y-1',\n legendPosition === 'right' ? 'flex-col gap-1' : 'flex-row'\n )}>\n {legendPosition === 'right' ? (\n <>\n {renderLegendItem(null)}\n {data.map(renderLegendItem)}\n </>\n ) : (\n <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n {data.map(renderLegendItem)}\n </OverflowGroup>\n )}\n </ul>\n </div>\n );\n};\n"],"names":["Legend","legendPosition","hoveredItem","selectedItem","data","onClick","setHoveredItem","formatter","total","visibleItems","label","isTotalLegendSelected","length","isTotalLegendHovered","handleMouseLeave","renderLegendItem","entry","index","isTotal","itemData","id","value","color","isSelected","includes","isHovered","React","key","className","cn","onMouseEnter","map","item","onMouseLeave","style","backgroundColor","getThemeColor","Icon","name","moreButton","moreButtonText","Button","appearance","OverflowGroup"],"mappings":"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"}
@@ -83,6 +83,7 @@ import '../../components/Header/Header.js';
83
83
  import '../../components/Layout/Layout.js';
84
84
  import '../../components/Navigation2/components/Link.js';
85
85
  import '../../components/Navigation2/Navigation2.js';
86
+ import '../../primitives/Table/useTableDataLoader2.js';
86
87
  import '../../hooks/useBoundaryOverflowDetection.js';
87
88
  import '../../utils/hooks/useOnClickOutside.js';
88
89
 
@@ -1 +1 @@
1
- {"version":3,"file":"Legend.js","sources":["../../../../../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'clsx';\nimport { Icon, OverflowGroup, Button } from '../../index';\n\nimport { ActiveChartItems, PayloadType } from './types';\n\ntype InternalProps<TType> = {\n payload: PayloadType<TType>[];\n layout: string;\n activeIndex: number | undefined;\n};\n\nexport type LegendProps<TType> = {\n activeItems: ActiveChartItems<TType>;\n onMouseEnter: (entry: PayloadType<TType>, index: number) => void;\n onMouseLeave: () => void;\n onClick: (entry: PayloadType<TType>) => void;\n};\n\nexport type Props<TType> = LegendProps<TType> & InternalProps<TType>;\n\nexport function Legend<TType>(props: LegendProps<TType>) {\n const { activeIndex, onMouseEnter, onMouseLeave, onClick, payload, layout, activeItems } = props as Props<TType>;\n const [hoverIndex, setHoverIndex] = useState<number | null>(null);\n\n const handleMouseEnter = (entry: PayloadType<TType>, index: number) => {\n setHoverIndex(index);\n if (activeItems[entry.dataKey]) onMouseEnter(entry, index);\n };\n\n const handleMouseLeave = () => {\n onMouseLeave();\n setHoverIndex(null);\n };\n\n const moreButton = moreButtonText => (\n <Button appearance=\"transparent\" className=\"text-grey-700\">\n {moreButtonText}\n </Button>\n );\n\n return (\n <div className=\"mx-auto w-auto max-w-full overflow-hidden\">\n <div className={cn('mb-0 ml-0 flex justify-center', { 'flex-col': layout === 'vertical' })}>\n {/** py-1 is need to make sure the more button focus outline doesn't get cropped */}\n <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n {payload.map((entry, index) => (\n <span\n key={`${entry.dataKey}-${index}`}\n className={cn(' hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]', {\n 'bg-grey-100 rounded': activeIndex === index,\n })}\n onMouseEnter={() => handleMouseEnter(entry, index)}\n onMouseLeave={handleMouseLeave}\n onClick={onClick ? () => onClick(entry) : undefined}>\n <span className=\"text-grey-700 flex items-center gap-[4px]\">\n <span\n className={cn('-mt-px ml-1 flex h-3 w-3 rounded-sm', {\n 'border-grey-300 border !bg-white': !activeItems[entry.dataKey],\n })}\n style={{ backgroundColor: entry.color }}>\n {hoverIndex === index && activeItems[entry.dataKey] && (\n <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" />\n )}\n </span>\n {entry.value}\n </span>\n </span>\n ))}\n </OverflowGroup>\n </div>\n </div>\n );\n}\n"],"names":["Legend","props","activeIndex","onMouseEnter","onMouseLeave","onClick","payload","layout","activeItems","hoverIndex","setHoverIndex","useState","handleMouseEnter","entry","index","dataKey","handleMouseLeave","moreButton","moreButtonText","React","Button","appearance","className","cn","OverflowGroup","map","key","undefined","style","backgroundColor","color","Icon","name","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqBgBA,MAAMA,CAAQC,KAAyB;EACnD,MAAM;IAAEC,WAAW;IAAEC,YAAY;IAAEC,YAAY;IAAEC,OAAO;IAAEC,OAAO;IAAEC,MAAM;IAAEC;GAAa,GAAGP,KAAqB;EAChH,MAAM,CAACQ,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAAgB,IAAI,CAAC;EAEjE,MAAMC,gBAAgB,GAAGA,CAACC,KAAyB,EAAEC,KAAa;IAC9DJ,aAAa,CAACI,KAAK,CAAC;IACpB,IAAIN,WAAW,CAACK,KAAK,CAACE,OAAO,CAAC,EAAEZ,YAAY,CAACU,KAAK,EAAEC,KAAK,CAAC;GAC7D;EAED,MAAME,gBAAgB,GAAGA;IACrBZ,YAAY,EAAE;IACdM,aAAa,CAAC,IAAI,CAAC;GACtB;EAED,MAAMO,UAAU,GAAGC,cAAc,kBAC7BC,6BAACC,MAAM;IAACC,UAAU,EAAC,aAAa;IAACC,SAAS,EAAC;KACtCJ,cAAc,CACV,CACZ;EAED,oBACIC;IAAKG,SAAS,EAAC;kBACXH;IAAKG,SAAS,EAAEC,EAAE,CAAC,+BAA+B,EAAE;MAAE,UAAU,EAAEhB,MAAM,KAAK;KAAY;kBAErFY,6BAACK,aAAa;IAACF,SAAS,EAAC,0BAA0B;IAACL,UAAU,EAAEA;KAC3DX,OAAO,CAACmB,GAAG,CAAC,CAACZ,KAAK,EAAEC,KAAK,mBACtBK;IACIO,GAAG,EAAE,GAAGb,KAAK,CAACE,OAAO,IAAID,KAAK,EAAE;IAChCQ,SAAS,EAAEC,EAAE,CAAC,yEAAyE,EAAE;MACrF,qBAAqB,EAAErB,WAAW,KAAKY;KAC1C,CAAC;IACFX,YAAY,EAAEA,MAAMS,gBAAgB,CAACC,KAAK,EAAEC,KAAK,CAAC;IAClDV,YAAY,EAAEY,gBAAgB;IAC9BX,OAAO,EAAEA,OAAO,GAAG,MAAMA,OAAO,CAACQ,KAAK,CAAC,GAAGc;kBAC1CR;IAAMG,SAAS,EAAC;kBACZH;IACIG,SAAS,EAAEC,EAAE,CAAC,qCAAqC,EAAE;MACjD,kCAAkC,EAAE,CAACf,WAAW,CAACK,KAAK,CAACE,OAAO;KACjE,CAAC;IACFa,KAAK,EAAE;MAAEC,eAAe,EAAEhB,KAAK,CAACiB;;KAC/BrB,UAAU,KAAKK,KAAK,IAAIN,WAAW,CAACK,KAAK,CAACE,OAAO,CAAC,kBAC/CI,6BAACY,IAAI;IAACC,IAAI,EAAC,WAAW;IAACV,SAAS,EAAC;IAA+B,CACnE,CACE,EACNT,KAAK,CAACoB,KAAK,CACT,CACJ,CACV,CAAC,CACU,CACd,CACJ;AAEd;;;;"}
1
+ {"version":3,"file":"Legend.js","sources":["../../../../../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'clsx';\nimport { Icon, OverflowGroup, Button } from '../../index';\n\nimport { ActiveChartItems, PayloadType } from './types';\n\ntype InternalProps<TType> = {\n payload: PayloadType<TType>[];\n layout: string;\n activeIndex: number | undefined;\n};\n\nexport type LegendProps<TType> = {\n activeItems: ActiveChartItems<TType>;\n onMouseEnter: (entry: PayloadType<TType>, index: number) => void;\n onMouseLeave: () => void;\n onClick: (entry: PayloadType<TType>) => void;\n};\n\nexport type Props<TType> = LegendProps<TType> & InternalProps<TType>;\n\nexport function Legend<TType>(props: LegendProps<TType>) {\n const { activeIndex, onMouseEnter, onMouseLeave, onClick, payload, layout, activeItems } = props as Props<TType>;\n const [hoverIndex, setHoverIndex] = useState<number | null>(null);\n\n const handleMouseEnter = (entry: PayloadType<TType>, index: number) => {\n setHoverIndex(index);\n if (activeItems[entry.dataKey]) onMouseEnter(entry, index);\n };\n\n const handleMouseLeave = () => {\n onMouseLeave();\n setHoverIndex(null);\n };\n\n const moreButton = moreButtonText => (\n <Button appearance=\"transparent\" className=\"text-grey-700\">\n {moreButtonText}\n </Button>\n );\n\n return (\n <div className=\"mx-auto w-auto max-w-full overflow-hidden\">\n <div className={cn('mb-0 ml-0 flex justify-center', { 'flex-col': layout === 'vertical' })}>\n {/** py-1 is need to make sure the more button focus outline doesn't get cropped */}\n <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n {payload.map((entry, index) => (\n <span\n key={`${entry.dataKey}-${index}`}\n className={cn(' hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]', {\n 'bg-grey-100 rounded': activeIndex === index,\n })}\n onMouseEnter={() => handleMouseEnter(entry, index)}\n onMouseLeave={handleMouseLeave}\n onClick={onClick ? () => onClick(entry) : undefined}>\n <span className=\"text-grey-700 flex items-center gap-[4px]\">\n <span\n className={cn('-mt-px ml-1 flex h-3 w-3 rounded-sm', {\n 'border-grey-300 border !bg-white': !activeItems[entry.dataKey],\n })}\n style={{ backgroundColor: entry.color }}>\n {hoverIndex === index && activeItems[entry.dataKey] && (\n <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" />\n )}\n </span>\n {entry.value}\n </span>\n </span>\n ))}\n </OverflowGroup>\n </div>\n </div>\n );\n}\n"],"names":["Legend","props","activeIndex","onMouseEnter","onMouseLeave","onClick","payload","layout","activeItems","hoverIndex","setHoverIndex","useState","handleMouseEnter","entry","index","dataKey","handleMouseLeave","moreButton","moreButtonText","React","Button","appearance","className","cn","OverflowGroup","map","key","undefined","style","backgroundColor","color","Icon","name","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqBgBA,MAAMA,CAAQC,KAAyB;EACnD,MAAM;IAAEC,WAAW;IAAEC,YAAY;IAAEC,YAAY;IAAEC,OAAO;IAAEC,OAAO;IAAEC,MAAM;IAAEC;GAAa,GAAGP,KAAqB;EAChH,MAAM,CAACQ,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAAgB,IAAI,CAAC;EAEjE,MAAMC,gBAAgB,GAAGA,CAACC,KAAyB,EAAEC,KAAa;IAC9DJ,aAAa,CAACI,KAAK,CAAC;IACpB,IAAIN,WAAW,CAACK,KAAK,CAACE,OAAO,CAAC,EAAEZ,YAAY,CAACU,KAAK,EAAEC,KAAK,CAAC;GAC7D;EAED,MAAME,gBAAgB,GAAGA;IACrBZ,YAAY,EAAE;IACdM,aAAa,CAAC,IAAI,CAAC;GACtB;EAED,MAAMO,UAAU,GAAGC,cAAc,kBAC7BC,6BAACC,MAAM;IAACC,UAAU,EAAC,aAAa;IAACC,SAAS,EAAC;KACtCJ,cAAc,CACV,CACZ;EAED,oBACIC;IAAKG,SAAS,EAAC;kBACXH;IAAKG,SAAS,EAAEC,EAAE,CAAC,+BAA+B,EAAE;MAAE,UAAU,EAAEhB,MAAM,KAAK;KAAY;kBAErFY,6BAACK,aAAa;IAACF,SAAS,EAAC,0BAA0B;IAACL,UAAU,EAAEA;KAC3DX,OAAO,CAACmB,GAAG,CAAC,CAACZ,KAAK,EAAEC,KAAK,mBACtBK;IACIO,GAAG,EAAE,GAAGb,KAAK,CAACE,OAAO,IAAID,KAAK,EAAE;IAChCQ,SAAS,EAAEC,EAAE,CAAC,yEAAyE,EAAE;MACrF,qBAAqB,EAAErB,WAAW,KAAKY;KAC1C,CAAC;IACFX,YAAY,EAAEA,MAAMS,gBAAgB,CAACC,KAAK,EAAEC,KAAK,CAAC;IAClDV,YAAY,EAAEY,gBAAgB;IAC9BX,OAAO,EAAEA,OAAO,GAAG,MAAMA,OAAO,CAACQ,KAAK,CAAC,GAAGc;kBAC1CR;IAAMG,SAAS,EAAC;kBACZH;IACIG,SAAS,EAAEC,EAAE,CAAC,qCAAqC,EAAE;MACjD,kCAAkC,EAAE,CAACf,WAAW,CAACK,KAAK,CAACE,OAAO;KACjE,CAAC;IACFa,KAAK,EAAE;MAAEC,eAAe,EAAEhB,KAAK,CAACiB;;KAC/BrB,UAAU,KAAKK,KAAK,IAAIN,WAAW,CAACK,KAAK,CAACE,OAAO,CAAC,kBAC/CI,6BAACY,IAAI;IAACC,IAAI,EAAC,WAAW;IAACV,SAAS,EAAC;IAA+B,CACnE,CACE,EACNT,KAAK,CAACoB,KAAK,CACT,CACJ,CACV,CAAC,CACU,CACd,CACJ;AAEd;;;;"}
@@ -82,6 +82,7 @@ export { Header } from './components/Header/Header.js';
82
82
  export { Layout } from './components/Layout/Layout.js';
83
83
  export { getNavigationLinkClasses } from './components/Navigation2/components/Link.js';
84
84
  export { Navigation2 } from './components/Navigation2/Navigation2.js';
85
+ export { useTableDataLoader2 } from './primitives/Table/useTableDataLoader2.js';
85
86
  export { useBoundaryOverflowDetection } from './hooks/useBoundaryOverflowDetection.js';
86
87
  export { useOnClickOutside } from './utils/hooks/useOnClickOutside.js';
87
88
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sources":["../../../../../../../src/primitives/Table/types.ts"],"sourcesContent":["import {\n ColumnFilter as ReactTableColumnFilter,\n ColumnFiltersState as ReactTableColumnFilterState,\n ColumnOrderState as ReactTableColumnOrderState,\n ColumnPinningState as ReactTableColumnPinningState,\n ColumnSort as ReactTableColumnSort,\n ColumnSizingState as ReactTableColumnSizingState,\n VisibilityState as ReactTableColumnVisibilityState,\n SortingState as ReactTableSortingState,\n BuiltInAggregationFn as ReactTableBuiltInAggregationFn,\n BuiltInSortingFn as ReactTableBuiltInSortingFn,\n} from '@tanstack/react-table';\nimport { FontSize, FontSizes, StringWithAutocompleteOptions, ValueOf } from '../../types';\nimport { MenuItemProps } from '../../components/Menu/components/Item';\n\nexport type TableRef = HTMLTableElement & {\n instance: {\n resetFiltering: () => void;\n resetRowExpansion: () => void;\n resetRowSelection: () => void;\n resetSorting: () => void;\n };\n};\n\n// filtering\nexport enum TableFilterComparator {\n Contains,\n DoesNotContain,\n IsEqualTo,\n IsNotEqualTo,\n IsGreaterThan,\n IsLessThan,\n IsBetween,\n IsEmpty,\n IsNotEmpty,\n IsLessThanOrEqualTo,\n IsGreaterThanOrEqualTo,\n HasAnyOf,\n HasAllOf,\n HasNoneOf,\n}\nexport type TableFilterValue = {\n comparator: TableFilterComparator;\n value: any;\n};\nexport type TableFilter = {\n id: string;\n value: TableFilterValue;\n};\n\n// columns\nexport type TableColumnAlignment = 'left' | 'center' | 'right';\nexport type TableColumnClassNameHandler<TType = unknown> = string | ((row: TType) => string | undefined);\nexport type TableColumnDataType =\n // base\n | 'text'\n | 'number'\n | 'datetime'\n | 'boolean'\n // advanced\n | 'amount';\nexport type TableColumnFilter = ReactTableColumnFilter;\nexport type TableColumnMenu = ((columnId: string) => React.ReactNode | null)[];\nexport type TableColumnRenderer<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererAggregate<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererControl<TType = unknown> =\n | ((props: TableColumnRendererControlProps, row?: TType) => JSX.Element)\n | 'datepicker'\n | 'input'\n | 'switch'\n | 'checkbox'\n | 'textarea';\nexport type TableColumnRendererControlProps = {\n className?: string;\n disabled?: boolean;\n fontSize?: FontSize;\n invalid?: boolean;\n onBlur?: (value: any) => void;\n onFocus?: React.FocusEventHandler;\n readOnly?: boolean;\n ref: React.RefObject<HTMLElement> | ((instance: HTMLElement | null | undefined) => void);\n setValue: (value: any) => void;\n value: any;\n};\nexport type TableColumnRendererHeader = string;\nexport type TableColumnRendererFooter<TType> = (rows: TType[]) => JSX.Element | string | number | null;\nexport type TableColumnSort = ReactTableColumnSort;\nexport type TableColumnSortDirection = 'asc' | 'desc';\nexport type TableColumnSortFn<TType = unknown> =\n | ((rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1)\n | ReactTableBuiltInSortingFn\n | 'auto';\nexport type TableColumnWidth = number | 'grow';\n\n// rows\nexport type TableRowActionRenderer<TType = unknown> = (row: TType, internalRowId: string) => JSX.Element | null;\nexport type TableRowActionGroupRenderer<TType = unknown> = (rows: TType[]) => JSX.Element | null;\nexport type TableRowClickHandler<TType = unknown> = (row: TType) => void;\nexport type TableRowDragHandler<TType = unknown> = (\n rows: TType[],\n showPlaceholder: (string) => void,\n setDataTransfer: (data: string) => void\n) => void;\nexport type TableRowDropHandler<TType = unknown> = (event: React.DragEvent, row: TType) => void;\nexport type TableRowGotoHandler = (\n column: string,\n query: string,\n sorting: TableColumnSort[],\n filters: TableColumnFilter[],\n search: string | undefined\n) => Promise<number>;\nexport type TableRowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';\nexport type TableRowSelectHandler<TType = unknown> = (rows: TType[], ids: (keyof TType)[]) => void;\nexport type TableRowWithMetaData<TType = unknown> = TType & {\n _meta?: {\n layout?: 'heading' | 'summary' | 'item';\n };\n};\n\n// shortcuts\nexport type TableShortcutHandlerFn<TType = unknown> = (row: TType) => void;\nexport type TableShortcutHandlerObject<TType = unknown> = {\n handler: TableShortcutHandlerFn<TType>;\n meta?: boolean;\n shift?: boolean;\n};\n\n// table\nexport type TableSortHandler = (sorting: TableColumnSort[]) => Promise<void>;\nexport type TableFilterHandler = (filters: TableColumnFilter[], hiddenColumns: string[]) => Promise<void>;\nexport type TableSearchHandler = (search: string | undefined, hiddenColumns: string[]) => Promise<void>;\nexport type TableFontSize = keyof typeof FontSizes;\nexport type TablePreset = 'complex' | 'list' | 'simple';\nexport type TableRowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;\nexport type TableScrollToIndexHandler = (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;\nexport type TableServerLoadPageHandler = (\n pageIndex: number,\n sorting: TableColumnSort[],\n filters: TableColumnFilter[],\n search: string | undefined,\n hiddenColumns: string[]\n) => Promise<void>;\nexport type TableServerLoadAllHandler = (\n sorting: TableColumnSort[],\n filters: TableColumnFilter[],\n search: string | undefined,\n hiddenColumns: string[]\n) => Promise<void>;\nexport enum TableServerLoadAllState {\n Incomplete,\n Loading,\n Completed,\n}\nexport type TableSettingsHandler = (settings: TableSettings) => void | Promise<void>;\nexport type TableShortcuts<TType = unknown> = Record<string, TableShortcutHandlerFn<TType> | TableShortcutHandlerObject<TType>>;\nexport type TableCustomSettingsRenderer = (props: TableSettings) => React.ReactElement<MenuItemProps>[];\nexport type TableEmptyStateReason = 'empty' | 'filtering' | 'searching';\nexport type TableEmptyStateRenderer = (props: { reason: TableEmptyStateReason }) => JSX.Element | null;\n\n// settings\nexport type TableSettings = {\n columnFilters?: ReactTableColumnFilterState;\n columnOrder?: ReactTableColumnOrderState;\n columnPinning?: ReactTableColumnPinningState;\n columnSizing?: ReactTableColumnSizingState;\n columnVisibility?: ReactTableColumnVisibilityState;\n excludeUnmatchedRecordsInSearch?: boolean;\n fontSize?: TableFontSize;\n rowHeight?: TableRowHeight;\n searchQuery?: string;\n sorting?: ReactTableSortingState;\n};\nexport type TableEnableSettingsOptions = {\n columnOrder: boolean;\n columnPinning: boolean;\n columnSizing: boolean;\n columnVisibility: boolean;\n excludeUnmatchedRecordsInSearch: boolean;\n fontSize: boolean;\n grouping: boolean;\n rowHeight: boolean;\n sorting: boolean;\n};\n\n// props\nexport type TableConditionalRowProp<TType = unknown> = boolean | ((row: TType) => boolean);\nexport type TableFeatureProps<TType = unknown> = {\n // react-table built-in\n enableFiltering?: boolean;\n enableSearch?: boolean;\n enableSorting?: boolean;\n enableColumnFreezing?: boolean;\n enableColumnHiding?: boolean;\n enableColumnResizing?: boolean;\n enableRowExpansion?: boolean;\n enableRowExpansionAll?: boolean;\n enableRowSelection?: TableConditionalRowProp<TType>;\n\n // custom -- common between all table types\n enableColumnOrdering?: boolean;\n enableFontSize?: boolean;\n enableFooter?: boolean;\n enablePrinting?: boolean;\n enableRowActions?: boolean;\n enableRowActive?: boolean;\n enableRowClick?: TableConditionalRowProp<TType>;\n enableRowDrag?: boolean;\n enableRowDrop?: boolean;\n enableRowGoto?: boolean;\n enableRowHeight?: boolean;\n enableSaveSettings?: boolean | Partial<TableEnableSettingsOptions>;\n};\n\nexport type TableChild = JSX.Element | boolean | null | undefined;\n\nexport type TableCommonProps<TType = unknown> = TableFeatureProps<TType> & {\n children: TableChild | TableChild[];\n data: TType[];\n id: string;\n\n // misc\n customSettings?: TableCustomSettingsRenderer;\n defaultColumnFreezingIndex?: number;\n defaultRowActiveIndex?: number;\n defaultRowGroupColumnId?: keyof TType;\n defaultSettings?: TableSettings;\n emptyState?: TableEmptyStateRenderer;\n preset?: TablePreset;\n rowActions?: TableRowActionRenderer<TType>[];\n rowActionsForGroup?: TableRowActionGroupRenderer<TType>[];\n rowActionsLength?: number;\n rowExpansionRenderer?: TableRowExpansionRenderer<TType>;\n rowIdentityAccessor?: keyof TType;\n shortcuts?: TableShortcuts<TType>;\n toolbarLeft?: JSX.Element;\n toolbarRight?: JSX.Element;\n toolbarPanel?: JSX.Element;\n\n // handlers\n onRowClick?: TableRowClickHandler<TType>;\n onRowDrag?: TableRowDragHandler<TType>;\n onRowDrop?: TableRowDropHandler<TType>;\n onRowGoto?: TableRowGotoHandler;\n onRowSelect?: TableRowSelectHandler<TType>;\n\n // state change handlers\n onChangeFilter?: TableFilterHandler;\n onChangeSearch?: TableSearchHandler;\n onChangeSettings?: TableSettingsHandler;\n onChangeSort?: TableSortHandler;\n};\n\nexport interface TableClientProps<TType = unknown> extends TableCommonProps<TType> {\n length?: never;\n loadAll?: never;\n loadPage?: never;\n pageSize?: never;\n pages?: never;\n\n // experimental\n _experimentalDataLoader2?: never;\n}\n\nexport interface TableServerProps<TType = unknown> extends TableCommonProps<TType> {\n length: number | undefined;\n loadAll: TableServerLoadAllHandler;\n loadPage: TableServerLoadPageHandler;\n pageSize?: number;\n pages?: number[];\n\n // experimental\n _experimentalDataLoader2?: boolean;\n}\n\nexport type TableProps<TType = unknown> = TableClientProps<TType> | TableServerProps<TType>;\n\nexport type TableColumnProps<TType = unknown> = ValueOf<{\n [Key in keyof TType]: {\n accessor?: Key;\n id: StringWithAutocompleteOptions<Key>;\n // renderers\n renderer?: TableColumnRenderer<TType, TType[Key]>;\n /** Renderer to use if the cell is an aggregate cell and part of a grouped row */\n aggregate?: TableColumnRendererAggregate<TType, TType[Key]>;\n control?: TableColumnRendererControl<TType>;\n footer?: TableColumnRendererFooter<TType>;\n header: TableColumnRendererHeader;\n // options\n /** Aggregation function to be used when the column is part of a grouped row */\n aggregationFn?: 'auto' | ReactTableBuiltInAggregationFn;\n align?: TableColumnAlignment;\n className?: TableColumnClassNameHandler<TType>;\n dataType?: TableColumnDataType;\n defaultHidden?: boolean;\n defaultWidth?: TableColumnWidth;\n enableEditing?: boolean;\n enableFiltering?: boolean;\n enableGrouping?: boolean;\n enableHiding?: boolean;\n enableOrdering?: boolean;\n enablePrinting?: boolean;\n enableResizing?: boolean;\n enableSearch?: boolean;\n enableSorting?: boolean;\n enableTruncate?: boolean;\n filters?: TableFilterComparator[];\n headerClassName?: string;\n menu?: TableColumnMenu;\n minWidth?: number;\n sort?: TableColumnSortDirection;\n sortFn?: TableColumnSortFn<TType>;\n tooltip?: string;\n };\n}>;\n\nexport type TableGroupProps = {\n children: (JSX.Element | boolean | null | undefined)[];\n header: string;\n id: string;\n};\n\nexport type TableTexts = {\n columns: {\n actions: {\n tooltip: string;\n };\n drag: {\n tooltip: string;\n };\n expansion: {\n collapse: string;\n collapseAll: string;\n expand: string;\n expandAll: string;\n };\n menu: {\n editFilter: string;\n filter: string;\n freezeFirstColumn: string;\n freezeUptoColumn: string;\n gotoRow: string;\n hideColumn: string;\n unfreezeColumns: string;\n sorting: string;\n sortingOrder: {\n ascending: string;\n descending: string;\n unsorted: string;\n };\n };\n resize: {\n tooltip: string;\n };\n select: {\n deselect: string;\n deselectAll: string;\n select: string;\n selectAll: string;\n };\n };\n columnSettings: {\n button: string;\n noResults: string;\n search: string;\n tooltip: string;\n };\n filters: {\n button: string;\n buttons: {\n addFilter: string;\n clearFilters: string;\n cancel: string;\n clear: string;\n apply: string;\n };\n comparators: {\n contains: string;\n doesNotContain: string;\n isEqualTo: string;\n isNotEqualTo: string;\n isGreaterThan: string;\n isLessThan: string;\n isBetween: string;\n isEmpty: string;\n isNotEmpty: string;\n isBefore: string;\n isAfter: string;\n isLessThanOrEqualTo: string;\n isGreaterThanOrEqualTo: string;\n isOnOrBefore: string;\n isOnOrAfter: string;\n hasAnyOf: string;\n hasAllOf: string;\n hasNoneOf: string;\n };\n conditions: {\n and: string;\n where: string;\n };\n emptyFilter: {\n condition: string;\n value: string;\n };\n hiddenColumn: string;\n hiddenGroupedColumn: string;\n tooltip: string;\n total: string;\n };\n fontSize: {\n tooltip: string;\n sizes: {\n small: string;\n medium: string;\n large: string;\n };\n };\n footer: {\n summary: {\n count: string;\n records: string;\n selected: string;\n };\n };\n print: {\n error: string;\n loading: string;\n tooltip: string;\n warningDialog: {\n title: string;\n description: string;\n checkboxVisibilityLabel: string;\n cancelButtonText: string;\n printButtonText: string;\n };\n settingsDialog: {\n title: string;\n size: string;\n sizeA5: string;\n sizeA4: string;\n sizeA3: string;\n sizeLetter: string;\n sizeLegal: string;\n orientation: string;\n orientationLandscape: string;\n orientationPortrait: string;\n rows: string;\n rowsAll: string;\n rowsSelected: string;\n layout: string;\n layoutSplitGroups: string;\n };\n };\n rowHeight: {\n tooltip: string;\n sizes: {\n short: string;\n medium: string;\n tall: string;\n extraTall: string;\n };\n };\n search: {\n excludeUnmatchedResults: string;\n placeholder: string;\n };\n otherOptions: {\n tooltip: string;\n };\n};\n"],"names":["TableFilterComparator","TableServerLoadAllState"],"mappings":"AAwBA;IACYA;AAAZ,WAAYA,qBAAqB;EAC7BA,yEAAQ;EACRA,qFAAc;EACdA,2EAAS;EACTA,iFAAY;EACZA,mFAAa;EACbA,6EAAU;EACVA,2EAAS;EACTA,uEAAO;EACPA,6EAAU;EACVA,+FAAmB;EACnBA,sGAAsB;EACtBA,0EAAQ;EACRA,0EAAQ;EACRA,4EAAS;AACb,CAAC,EAfWA,qBAAqB,KAArBA,qBAAqB;IA2HrBC;AAAZ,WAAYA,uBAAuB;EAC/BA,iFAAU;EACVA,2EAAO;EACPA,+EAAS;AACb,CAAC,EAJWA,uBAAuB,KAAvBA,uBAAuB;;;;"}
1
+ {"version":3,"file":"types.js","sources":["../../../../../../../src/primitives/Table/types.ts"],"sourcesContent":["import {\n ColumnFilter as ReactTableColumnFilter,\n ColumnFiltersState as ReactTableColumnFilterState,\n ColumnOrderState as ReactTableColumnOrderState,\n ColumnPinningState as ReactTableColumnPinningState,\n ColumnSort as ReactTableColumnSort,\n ColumnSizingState as ReactTableColumnSizingState,\n VisibilityState as ReactTableColumnVisibilityState,\n SortingState as ReactTableSortingState,\n BuiltInAggregationFn as ReactTableBuiltInAggregationFn,\n BuiltInSortingFn as ReactTableBuiltInSortingFn,\n} from '@tanstack/react-table';\nimport { FontSize, FontSizes, StringWithAutocompleteOptions, ValueOf } from '../../types';\nimport { MenuItemProps } from '../../components/Menu/components/Item';\n\nexport type TableRef = HTMLTableElement & {\n instance: {\n resetFiltering: () => void;\n resetRowExpansion: () => void;\n resetRowSelection: () => void;\n resetSorting: () => void;\n };\n};\n\n// filtering\nexport enum TableFilterComparator {\n Contains,\n DoesNotContain,\n IsEqualTo,\n IsNotEqualTo,\n IsGreaterThan,\n IsLessThan,\n IsBetween,\n IsEmpty,\n IsNotEmpty,\n IsLessThanOrEqualTo,\n IsGreaterThanOrEqualTo,\n HasAnyOf,\n HasAllOf,\n HasNoneOf,\n}\nexport type TableFilterValue = {\n comparator: TableFilterComparator;\n value: any;\n};\nexport type TableFilter = {\n id: string;\n value: TableFilterValue;\n};\n\n// columns\nexport type TableColumnAlignment = 'left' | 'center' | 'right';\nexport type TableColumnClassNameHandler<TType = unknown> = string | ((row: TType) => string | undefined);\nexport type TableColumnDataType =\n // base\n | 'text'\n | 'number'\n | 'datetime'\n | 'boolean'\n // advanced\n | 'amount';\nexport type TableColumnFilter = ReactTableColumnFilter;\nexport type TableColumnMenu = ((columnId: string) => React.ReactNode | null)[];\nexport type TableColumnRenderer<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererAggregate<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererControl<TType = unknown> =\n | ((props: TableColumnRendererControlProps, row?: TType) => JSX.Element)\n | 'datepicker'\n | 'input'\n | 'switch'\n | 'checkbox'\n | 'textarea';\nexport type TableColumnRendererControlProps = {\n className?: string;\n disabled?: boolean;\n fontSize?: FontSize;\n invalid?: boolean;\n onBlur?: (value: any) => void;\n onFocus?: React.FocusEventHandler;\n readOnly?: boolean;\n ref: React.RefObject<HTMLElement> | ((instance: HTMLElement | null | undefined) => void);\n setValue: (value: any) => void;\n value: any;\n};\nexport type TableColumnRendererHeader = string;\nexport type TableColumnRendererFooter<TType> = (rows: TType[]) => JSX.Element | string | number | null;\nexport type TableColumnSort = ReactTableColumnSort;\nexport type TableColumnSortDirection = 'asc' | 'desc';\nexport type TableColumnSortFn<TType = unknown> =\n | ((rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1)\n | ReactTableBuiltInSortingFn\n | 'auto';\nexport type TableColumnWidth = number | 'grow';\n\n// rows\nexport type TableRowActionRenderer<TType = unknown> = (row: TType, internalRowId: string) => JSX.Element | null;\nexport type TableRowActionGroupRenderer<TType = unknown> = (rows: TType[]) => JSX.Element | null;\nexport type TableRowClickHandler<TType = unknown> = (row: TType) => void;\nexport type TableRowDragHandler<TType = unknown> = (\n rows: TType[],\n showPlaceholder: (string) => void,\n setDataTransfer: (data: string) => void\n) => void;\nexport type TableRowDropHandler<TType = unknown> = (event: React.DragEvent, row: TType) => void;\nexport type TableRowGotoHandler = (\n column: string,\n query: string,\n sorting: TableColumnSort[],\n filters: TableColumnFilter[],\n search: string | undefined\n) => Promise<number>;\nexport type TableRowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';\nexport type TableRowSelectHandler<TType = unknown> = (rows: TType[], ids: string[]) => void;\nexport type TableRowWithMetaData<TType = unknown> = TType & {\n _meta?: {\n layout?: 'heading' | 'summary' | 'item';\n };\n};\n\n// shortcuts\nexport type TableShortcutHandlerFn<TType = unknown> = (row: TType) => void;\nexport type TableShortcutHandlerObject<TType = unknown> = {\n handler: TableShortcutHandlerFn<TType>;\n meta?: boolean;\n shift?: boolean;\n};\n\n// table\nexport type TableSortHandler = (sorting: TableColumnSort[]) => Promise<void>;\nexport type TableFilterHandler = (filters: TableColumnFilter[], hiddenColumns: string[]) => Promise<void>;\nexport type TableSearchHandler = (search: string | undefined, hiddenColumns: string[]) => Promise<void>;\nexport type TableFontSize = keyof typeof FontSizes;\nexport type TablePreset = 'complex' | 'list' | 'simple';\nexport type TableRowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;\nexport type TableScrollToIndexHandler = (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;\nexport type TableServerLoadPageHandler = (\n pageIndex: number,\n sorting: TableColumnSort[],\n filters: TableColumnFilter[],\n search: string | undefined,\n hiddenColumns: string[]\n) => Promise<void>;\nexport type TableServerLoadAllHandler = (\n sorting: TableColumnSort[],\n filters: TableColumnFilter[],\n search: string | undefined,\n hiddenColumns: string[]\n) => Promise<void>;\nexport enum TableServerLoadAllState {\n Incomplete,\n Loading,\n Completed,\n}\nexport type TableSettingsHandler = (settings: TableSettings) => void | Promise<void>;\nexport type TableShortcuts<TType = unknown> = Record<string, TableShortcutHandlerFn<TType> | TableShortcutHandlerObject<TType>>;\nexport type TableCustomSettingsRenderer = (props: TableSettings) => React.ReactElement<MenuItemProps>[];\nexport type TableEmptyStateReason = 'empty' | 'filtering' | 'searching';\nexport type TableEmptyStateRenderer = (props: { reason: TableEmptyStateReason }) => JSX.Element | null;\n\n// settings\nexport type TableSettings = {\n columnFilters?: ReactTableColumnFilterState;\n columnOrder?: ReactTableColumnOrderState;\n columnPinning?: ReactTableColumnPinningState;\n columnSizing?: ReactTableColumnSizingState;\n columnVisibility?: ReactTableColumnVisibilityState;\n excludeUnmatchedRecordsInSearch?: boolean;\n fontSize?: TableFontSize;\n rowHeight?: TableRowHeight;\n searchQuery?: string;\n sorting?: ReactTableSortingState;\n};\nexport type TableEnableSettingsOptions = {\n columnOrder: boolean;\n columnPinning: boolean;\n columnSizing: boolean;\n columnVisibility: boolean;\n excludeUnmatchedRecordsInSearch: boolean;\n fontSize: boolean;\n grouping: boolean;\n rowHeight: boolean;\n sorting: boolean;\n};\n\n// props\nexport type TableConditionalRowProp<TType = unknown> = boolean | ((row: TType) => boolean);\nexport type TableFeatureProps<TType = unknown> = {\n // react-table built-in\n enableFiltering?: boolean;\n enableSearch?: boolean;\n enableSorting?: boolean;\n enableColumnFreezing?: boolean;\n enableColumnHiding?: boolean;\n enableColumnResizing?: boolean;\n enableRowExpansion?: boolean;\n enableRowExpansionAll?: boolean;\n enableRowSelection?: TableConditionalRowProp<TType>;\n\n // custom -- common between all table types\n enableColumnOrdering?: boolean;\n enableFontSize?: boolean;\n enableFooter?: boolean;\n enablePrinting?: boolean;\n enableRowActions?: boolean;\n enableRowActive?: boolean;\n enableRowClick?: TableConditionalRowProp<TType>;\n enableRowDrag?: boolean;\n enableRowDrop?: boolean;\n enableRowGoto?: boolean;\n enableRowHeight?: boolean;\n enableSaveSettings?: boolean | Partial<TableEnableSettingsOptions>;\n};\n\nexport type TableChild = JSX.Element | boolean | null | undefined;\n\nexport type TableCommonProps<TType = unknown> = TableFeatureProps<TType> & {\n children: TableChild | TableChild[];\n data: TType[];\n id: string;\n\n // misc\n customSettings?: TableCustomSettingsRenderer;\n defaultColumnFreezingIndex?: number;\n defaultRowActiveIndex?: number;\n defaultRowGroupColumnId?: keyof TType;\n defaultSettings?: TableSettings;\n emptyState?: TableEmptyStateRenderer;\n preset?: TablePreset;\n rowActions?: TableRowActionRenderer<TType>[];\n rowActionsForGroup?: TableRowActionGroupRenderer<TType>[];\n rowActionsLength?: number;\n rowExpansionRenderer?: TableRowExpansionRenderer<TType>;\n rowIdentityAccessor?: keyof TType;\n shortcuts?: TableShortcuts<TType>;\n toolbarLeft?: JSX.Element;\n toolbarRight?: JSX.Element;\n toolbarPanel?: JSX.Element;\n\n // handlers\n onRowClick?: TableRowClickHandler<TType>;\n onRowDrag?: TableRowDragHandler<TType>;\n onRowDrop?: TableRowDropHandler<TType>;\n onRowGoto?: TableRowGotoHandler;\n onRowSelect?: TableRowSelectHandler<TType>;\n\n // state change handlers\n onChangeFilter?: TableFilterHandler;\n onChangeSearch?: TableSearchHandler;\n onChangeSettings?: TableSettingsHandler;\n onChangeSort?: TableSortHandler;\n};\n\nexport interface TableClientProps<TType = unknown> extends TableCommonProps<TType> {\n length?: never;\n loadAll?: never;\n loadPage?: never;\n pageSize?: never;\n pages?: never;\n\n // experimental\n _experimentalDataLoader2?: never;\n}\n\nexport interface TableServerProps<TType = unknown> extends TableCommonProps<TType> {\n length: number | undefined;\n loadAll: TableServerLoadAllHandler;\n loadPage: TableServerLoadPageHandler;\n pageSize?: number;\n pages?: number[];\n\n // experimental\n _experimentalDataLoader2?: boolean;\n}\n\nexport type TableProps<TType = unknown> = TableClientProps<TType> | TableServerProps<TType>;\n\nexport type TableColumnProps<TType = unknown> = ValueOf<{\n [Key in keyof TType]: {\n accessor?: Key;\n id: StringWithAutocompleteOptions<Key>;\n // renderers\n renderer?: TableColumnRenderer<TType, TType[Key]>;\n /** Renderer to use if the cell is an aggregate cell and part of a grouped row */\n aggregate?: TableColumnRendererAggregate<TType, TType[Key]>;\n control?: TableColumnRendererControl<TType>;\n footer?: TableColumnRendererFooter<TType>;\n header: TableColumnRendererHeader;\n // options\n /** Aggregation function to be used when the column is part of a grouped row */\n aggregationFn?: 'auto' | ReactTableBuiltInAggregationFn;\n align?: TableColumnAlignment;\n className?: TableColumnClassNameHandler<TType>;\n dataType?: TableColumnDataType;\n defaultHidden?: boolean;\n defaultWidth?: TableColumnWidth;\n enableEditing?: boolean;\n enableFiltering?: boolean;\n enableGrouping?: boolean;\n enableHiding?: boolean;\n enableOrdering?: boolean;\n enablePrinting?: boolean;\n enableResizing?: boolean;\n enableSearch?: boolean;\n enableSorting?: boolean;\n enableTruncate?: boolean;\n filters?: TableFilterComparator[];\n headerClassName?: string;\n menu?: TableColumnMenu;\n minWidth?: number;\n sort?: TableColumnSortDirection;\n sortFn?: TableColumnSortFn<TType>;\n tooltip?: string;\n };\n}>;\n\nexport type TableGroupProps = {\n children: (JSX.Element | boolean | null | undefined)[];\n header: string;\n id: string;\n};\n\nexport type TableTexts = {\n columns: {\n actions: {\n tooltip: string;\n };\n drag: {\n tooltip: string;\n };\n expansion: {\n collapse: string;\n collapseAll: string;\n expand: string;\n expandAll: string;\n };\n menu: {\n editFilter: string;\n filter: string;\n freezeFirstColumn: string;\n freezeUptoColumn: string;\n gotoRow: string;\n hideColumn: string;\n unfreezeColumns: string;\n sorting: string;\n sortingOrder: {\n ascending: string;\n descending: string;\n unsorted: string;\n };\n };\n resize: {\n tooltip: string;\n };\n select: {\n deselect: string;\n deselectAll: string;\n select: string;\n selectAll: string;\n };\n };\n columnSettings: {\n button: string;\n noResults: string;\n search: string;\n tooltip: string;\n };\n filters: {\n button: string;\n buttons: {\n addFilter: string;\n clearFilters: string;\n cancel: string;\n clear: string;\n apply: string;\n };\n comparators: {\n contains: string;\n doesNotContain: string;\n isEqualTo: string;\n isNotEqualTo: string;\n isGreaterThan: string;\n isLessThan: string;\n isBetween: string;\n isEmpty: string;\n isNotEmpty: string;\n isBefore: string;\n isAfter: string;\n isLessThanOrEqualTo: string;\n isGreaterThanOrEqualTo: string;\n isOnOrBefore: string;\n isOnOrAfter: string;\n hasAnyOf: string;\n hasAllOf: string;\n hasNoneOf: string;\n };\n conditions: {\n and: string;\n where: string;\n };\n emptyFilter: {\n condition: string;\n value: string;\n };\n hiddenColumn: string;\n hiddenGroupedColumn: string;\n tooltip: string;\n total: string;\n };\n fontSize: {\n tooltip: string;\n sizes: {\n small: string;\n medium: string;\n large: string;\n };\n };\n footer: {\n summary: {\n count: string;\n records: string;\n selected: string;\n };\n };\n print: {\n error: string;\n loading: string;\n tooltip: string;\n warningDialog: {\n title: string;\n description: string;\n checkboxVisibilityLabel: string;\n cancelButtonText: string;\n printButtonText: string;\n };\n settingsDialog: {\n title: string;\n size: string;\n sizeA5: string;\n sizeA4: string;\n sizeA3: string;\n sizeLetter: string;\n sizeLegal: string;\n orientation: string;\n orientationLandscape: string;\n orientationPortrait: string;\n rows: string;\n rowsAll: string;\n rowsSelected: string;\n layout: string;\n layoutSplitGroups: string;\n };\n };\n rowHeight: {\n tooltip: string;\n sizes: {\n short: string;\n medium: string;\n tall: string;\n extraTall: string;\n };\n };\n search: {\n excludeUnmatchedResults: string;\n placeholder: string;\n };\n otherOptions: {\n tooltip: string;\n };\n};\n"],"names":["TableFilterComparator","TableServerLoadAllState"],"mappings":"AAwBA;IACYA;AAAZ,WAAYA,qBAAqB;EAC7BA,yEAAQ;EACRA,qFAAc;EACdA,2EAAS;EACTA,iFAAY;EACZA,mFAAa;EACbA,6EAAU;EACVA,2EAAS;EACTA,uEAAO;EACPA,6EAAU;EACVA,+FAAmB;EACnBA,sGAAsB;EACtBA,0EAAQ;EACRA,0EAAQ;EACRA,4EAAS;AACb,CAAC,EAfWA,qBAAqB,KAArBA,qBAAqB;IA2HrBC;AAAZ,WAAYA,uBAAuB;EAC/BA,iFAAU;EACVA,2EAAO;EACPA,+EAAS;AACb,CAAC,EAJWA,uBAAuB,KAAvBA,uBAAuB;;;;"}
@@ -0,0 +1,249 @@
1
+ import React__default from 'react';
2
+ import { _finallyRethrows, _catch } from '../../../../../node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js';
3
+ import { DEFAULT_PAGE_SIZE } from './useTableDataLoader.js';
4
+
5
+ const DATASET_SIZE_MULTIPLIER = 15;
6
+ function useTableDataLoader2(fetchPage, fetchAll, options = {
7
+ pageSize: DEFAULT_PAGE_SIZE
8
+ }) {
9
+ const loadPage = function (pageIndex, sorting, filters, search, hiddenColumns, reset = false) {
10
+ try {
11
+ if (_hasFetchedAll.current) {
12
+ return Promise.resolve();
13
+ }
14
+ // if page is already loading, abort, otherwise mark it as loading
15
+ if (_pendingPageRequests.current[pageIndex]) {
16
+ return Promise.resolve();
17
+ } else {
18
+ _pendingPageRequests.current[pageIndex] = true;
19
+ }
20
+ // if the page is already loaded and has actual rows, abort
21
+ if (data.pages.includes(pageIndex)) {
22
+ const position = data.pages.indexOf(pageIndex);
23
+ if (data.rows[position * pageSize] !== undefined) {
24
+ return Promise.resolve();
25
+ }
26
+ }
27
+ // set the sorting so we can track if it changed between loads
28
+ _lastUsedSorting.current = sorting;
29
+ // set the filters so we can track if it changed between loads
30
+ _lastUsedFilters.current = filters;
31
+ const direction = getDirection2(pageIndex, _lastFetchedPage.current);
32
+ const _temp2 = _finallyRethrows(function () {
33
+ return _catch(function () {
34
+ return Promise.resolve(fetchPage(pageIndex, pageSize, sorting, filters, search, hiddenColumns)).then(function (response) {
35
+ length.current = response.length;
36
+ // update state, here we do some "magic" to support "load in place"
37
+ setData(currentData => {
38
+ const nextPages = getPages(pageIndex, _lastFetchedPage.current, reset ? [] : currentData.pages, direction);
39
+ let nextRows = currentData.rows;
40
+ if (reset || !direction) {
41
+ const index = nextPages.indexOf(pageIndex);
42
+ const startIndex = (index > -1 ? index : 0) * pageSize;
43
+ if (reset) {
44
+ nextRows = [].concat(response.data);
45
+ } else if (startIndex > 0 || pageIndex === 0) {
46
+ nextRows = Array(startIndex).fill(undefined).concat(response.data);
47
+ } else if (startIndex === 0) {
48
+ nextRows = response.data.concat(currentData.rows.slice(pageSize));
49
+ }
50
+ } else if (direction === 'forward') {
51
+ // if the new data will exceed the dataset size, then chop off the start or end
52
+ // this keeps the stored dataset to our preferred size
53
+ if (currentData.rows.length >= DATASET_SIZE) {
54
+ nextRows = currentData.rows.slice(DEFAULT_PAGE_SIZE).concat(response.data);
55
+ } else {
56
+ nextRows = currentData.rows.concat(response.data);
57
+ }
58
+ } else if (direction === 'backward') {
59
+ if (currentData.rows.length >= DATASET_SIZE) {
60
+ nextRows = response.data.concat(currentData.rows.slice(0, -1 * pageSize));
61
+ } else {
62
+ nextRows = currentData.rows.concat(response.data);
63
+ }
64
+ }
65
+ return {
66
+ rows: nextRows,
67
+ pages: nextPages
68
+ };
69
+ });
70
+ });
71
+ }, function () {});
72
+ }, function (_wasThrown2, _result2) {
73
+ _hasFetchedAll.current = false;
74
+ // reset pending requests
75
+ delete _pendingPageRequests.current[pageIndex];
76
+ // update the last loaded page
77
+ _lastFetchedPage.current = {
78
+ index: pageIndex,
79
+ direction
80
+ };
81
+ if (_wasThrown2) throw _result2;
82
+ return _result2;
83
+ });
84
+ return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
85
+ } catch (e) {
86
+ return Promise.reject(e);
87
+ }
88
+ };
89
+ const {
90
+ pageSize
91
+ } = options;
92
+ const DATASET_SIZE = DATASET_SIZE_MULTIPLIER * pageSize;
93
+ // track the data length, we don't know it until the first request
94
+ const length = React__default.useRef(0);
95
+ // data will be filled after the first request
96
+ const [data, setData] = React__default.useState({
97
+ rows: [],
98
+ pages: []
99
+ });
100
+ // track which pages have been loaded to dedupe requests
101
+ const _pendingPageRequests = React__default.useRef({});
102
+ const _lastUsedSorting = React__default.useRef([]);
103
+ const _lastUsedFilters = React__default.useRef([]);
104
+ const _lastUsedSearch = React__default.useRef();
105
+ const _lastUsedHiddenColumns = React__default.useRef([]);
106
+ const _lastFetchedPage = React__default.useRef({
107
+ index: undefined,
108
+ direction: undefined
109
+ });
110
+ const _hasFetchedAll = React__default.useRef(false);
111
+ const loadAll = function (sorting, filters, search, hiddenColumns) {
112
+ try {
113
+ _hasFetchedAll.current = true;
114
+ // set the sorting so we can track if it changed between loads
115
+ _lastUsedSorting.current = sorting;
116
+ // set the filters so we can track if it changed between loads
117
+ _lastUsedFilters.current = filters;
118
+ const _temp = _finallyRethrows(function () {
119
+ return _catch(function () {
120
+ return Promise.resolve(fetchAll(sorting, filters, search, hiddenColumns)).then(function (response) {
121
+ length.current = response.length;
122
+ setData({
123
+ rows: response.data,
124
+ pages: Array.from(Array(response.length / pageSize).keys())
125
+ });
126
+ });
127
+ }, function () {});
128
+ }, function (_wasThrown, _result) {
129
+ // reset pending requests
130
+ _pendingPageRequests.current = {};
131
+ if (_wasThrown) throw _result;
132
+ return _result;
133
+ });
134
+ return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
135
+ } catch (e) {
136
+ return Promise.reject(e);
137
+ }
138
+ };
139
+ const invalidate = function () {
140
+ try {
141
+ // reset stuff
142
+ _pendingPageRequests.current = {};
143
+ _hasFetchedAll.current = false;
144
+ // load the last page that we scrolled to
145
+ return loadPage(getCurrentPage(data.pages, _lastFetchedPage.current), _lastUsedSorting.current, _lastUsedFilters.current, _lastUsedSearch.current, _lastUsedHiddenColumns.current, true);
146
+ } catch (e) {
147
+ return Promise.reject(e);
148
+ }
149
+ };
150
+ // search works client side - it fetches all then works client side - so these handlers are a little "weird"
151
+ // if a search is currently "active", we need to re load all because
152
+ const handleSort = function (sorting) {
153
+ try {
154
+ _lastUsedSorting.current = sorting;
155
+ // reset stuff
156
+ _pendingPageRequests.current = {};
157
+ _hasFetchedAll.current = false;
158
+ return loadPage(getCurrentPage(data.pages, _lastFetchedPage.current), sorting, _lastUsedFilters.current, _lastUsedSearch.current, _lastUsedHiddenColumns.current, true);
159
+ } catch (e) {
160
+ return Promise.reject(e);
161
+ }
162
+ };
163
+ const handleFilter = function (filters, hiddenColumns) {
164
+ try {
165
+ _lastUsedFilters.current = filters;
166
+ _lastUsedHiddenColumns.current = hiddenColumns;
167
+ // reset stuff
168
+ _pendingPageRequests.current = {};
169
+ _hasFetchedAll.current = false;
170
+ return loadPage(getCurrentPage(data.pages, _lastFetchedPage.current), _lastUsedSorting.current, filters, _lastUsedSearch.current, hiddenColumns, true);
171
+ } catch (e) {
172
+ return Promise.reject(e);
173
+ }
174
+ };
175
+ const handleSearch = function (search, hiddenColumns) {
176
+ try {
177
+ _lastUsedSearch.current = search;
178
+ _lastUsedHiddenColumns.current = hiddenColumns;
179
+ // reset stuff
180
+ _pendingPageRequests.current = {};
181
+ _hasFetchedAll.current = false;
182
+ return loadPage(getCurrentPage(data.pages, _lastFetchedPage.current), _lastUsedSorting.current, _lastUsedFilters.current, search, hiddenColumns, true);
183
+ } catch (e) {
184
+ return Promise.reject(e);
185
+ }
186
+ };
187
+ return [{
188
+ data: data.rows,
189
+ pages: data.pages,
190
+ length: length.current,
191
+ loadAll,
192
+ loadPage,
193
+ onChangeFilter: handleFilter,
194
+ onChangeSearch: handleSearch,
195
+ onChangeSort: handleSort,
196
+ pageSize,
197
+ _experimentalDataLoader2: true
198
+ }, invalidate];
199
+ }
200
+ function getCurrentPage(currentPages, lastFetchedPage) {
201
+ if (currentPages.length <= 2) {
202
+ var _currentPages$;
203
+ return (_currentPages$ = currentPages[0]) !== null && _currentPages$ !== void 0 ? _currentPages$ : 0;
204
+ }
205
+ const middle = Math.floor(DATASET_SIZE_MULTIPLIER / 2);
206
+ if (lastFetchedPage.index) {
207
+ if (!lastFetchedPage.direction) {
208
+ return lastFetchedPage.index;
209
+ }
210
+ return lastFetchedPage.direction === 'forward' ? lastFetchedPage.index + middle : lastFetchedPage.index - middle;
211
+ }
212
+ return 0;
213
+ }
214
+ function getDirection2(pageIndex, lastUsedPage) {
215
+ if (lastUsedPage.index === undefined) {
216
+ return undefined;
217
+ }
218
+ if (pageIndex > lastUsedPage.index) {
219
+ if (lastUsedPage.index + 1 === pageIndex || lastUsedPage.index + DATASET_SIZE_MULTIPLIER === pageIndex) {
220
+ return 'forward';
221
+ }
222
+ } else if (pageIndex < lastUsedPage.index) {
223
+ if (lastUsedPage.index - 1 === pageIndex || lastUsedPage.index - DATASET_SIZE_MULTIPLIER === pageIndex) {
224
+ return 'backward';
225
+ }
226
+ }
227
+ return undefined;
228
+ }
229
+ function getPages(pageIndex, lastUsedPage, currentPages, direction) {
230
+ if (currentPages.length && (pageIndex === lastUsedPage.index || currentPages.includes(pageIndex))) {
231
+ return currentPages;
232
+ }
233
+ if (direction === 'forward') {
234
+ const nextPages = currentPages.length === DATASET_SIZE_MULTIPLIER ? currentPages.slice(1) : currentPages;
235
+ return nextPages.concat(pageIndex);
236
+ }
237
+ if (direction === 'backward') {
238
+ const nextPages = currentPages.length === DATASET_SIZE_MULTIPLIER ? currentPages.slice(0, -1) : currentPages;
239
+ return [pageIndex].concat(nextPages);
240
+ }
241
+ if (pageIndex === 0) {
242
+ return [0];
243
+ }
244
+ // don't go forward, the current page will trigger load of the next page
245
+ return [pageIndex - 1, pageIndex];
246
+ }
247
+
248
+ export { useTableDataLoader2 };
249
+ //# sourceMappingURL=useTableDataLoader2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useTableDataLoader2.js","sources":["../../../../../../../src/primitives/Table/useTableDataLoader2.ts"],"sourcesContent":["import React from 'react';\nimport {\n TableColumnFilter,\n TableColumnSort,\n TableFilterHandler,\n TableServerLoadPageHandler,\n TableServerLoadAllHandler,\n TableSortHandler,\n TableSearchHandler,\n} from './types';\nimport { DEFAULT_PAGE_SIZE, useTableDataLoaderOptions } from './useTableDataLoader';\n\nconst DATASET_SIZE_MULTIPLIER = 15;\n\nexport type useTableDataPageFetcher2<TType = unknown> = (\n pageIndex: number,\n pageSize: number,\n sorting: TableColumnSort[],\n filters: TableColumnFilter[],\n search: string | undefined,\n hiddenColumns: string[]\n) => Promise<{ data: TType[]; length: number }>;\n\nexport type useTableDataAllFetcher2<TType = unknown> = (\n sorting: TableColumnSort[],\n filters: TableColumnFilter[],\n search: string | undefined,\n hiddenColumns: string[]\n) => Promise<{ data: TType[]; length: number }>;\n\nexport type useTableDataLoaderValues2<TType = unknown> = {\n data: TType[];\n length: number | undefined;\n loadAll: TableServerLoadAllHandler;\n loadPage: TableServerLoadPageHandler;\n onChangeFilter: TableFilterHandler;\n onChangeSearch: TableSearchHandler;\n onChangeSort: TableSortHandler;\n pageSize: number;\n pages: number[];\n _experimentalDataLoader2: boolean;\n};\n\ntype Data<TType = unknown> = {\n rows: TType[];\n pages: number[];\n};\ntype Direction = 'forward' | 'backward' | undefined;\ntype LastFetchedPage = {\n index: number | undefined;\n direction: Direction;\n};\n\nexport function useTableDataLoader2<TType = unknown>(\n fetchPage: useTableDataPageFetcher2<TType>,\n fetchAll: useTableDataAllFetcher2<TType>,\n options: useTableDataLoaderOptions = { pageSize: DEFAULT_PAGE_SIZE }\n): [useTableDataLoaderValues2<TType>, () => void] {\n const { pageSize } = options;\n const DATASET_SIZE = DATASET_SIZE_MULTIPLIER * pageSize;\n\n // track the data length, we don't know it until the first request\n const length = React.useRef<number>(0);\n // data will be filled after the first request\n const [data, setData] = React.useState<Data<TType>>({ rows: [], pages: [] });\n // track which pages have been loaded to dedupe requests\n const _pendingPageRequests = React.useRef({});\n const _lastUsedSorting = React.useRef<TableColumnSort[]>([]);\n const _lastUsedFilters = React.useRef<TableColumnFilter[]>([]);\n const _lastUsedSearch = React.useRef<string | undefined>();\n const _lastUsedHiddenColumns = React.useRef<string[]>([]);\n const _lastFetchedPage = React.useRef<LastFetchedPage>({\n index: undefined,\n direction: undefined,\n });\n const _hasFetchedAll = React.useRef<boolean>(false);\n\n async function loadPage(\n pageIndex: number,\n sorting: TableColumnSort[],\n filters: TableColumnFilter[],\n search: string | undefined,\n hiddenColumns: string[],\n reset = false\n ) {\n if (_hasFetchedAll.current) {\n return;\n }\n\n // if page is already loading, abort, otherwise mark it as loading\n if (_pendingPageRequests.current[pageIndex]) {\n return;\n } else {\n _pendingPageRequests.current[pageIndex] = true;\n }\n\n // if the page is already loaded and has actual rows, abort\n if (data.pages.includes(pageIndex)) {\n const position = data.pages.indexOf(pageIndex);\n\n if (data.rows[position * pageSize] !== undefined) {\n return;\n }\n }\n\n // set the sorting so we can track if it changed between loads\n _lastUsedSorting.current = sorting;\n // set the filters so we can track if it changed between loads\n _lastUsedFilters.current = filters;\n\n const direction = getDirection2(pageIndex, _lastFetchedPage.current);\n\n try {\n const response = await fetchPage(pageIndex, pageSize, sorting, filters, search, hiddenColumns);\n length.current = response.length;\n\n // update state, here we do some \"magic\" to support \"load in place\"\n setData(currentData => {\n const nextPages = getPages(pageIndex, _lastFetchedPage.current, reset ? [] : currentData.pages, direction);\n let nextRows = currentData.rows;\n\n if (reset || !direction) {\n const index = nextPages.indexOf(pageIndex);\n const startIndex = (index > -1 ? index : 0) * pageSize;\n\n if (reset) {\n nextRows = ([] as TType[]).concat(response.data);\n } else if (startIndex > 0 || pageIndex === 0) {\n nextRows = Array(startIndex).fill(undefined).concat(response.data);\n } else if (startIndex === 0) {\n nextRows = response.data.concat(currentData.rows.slice(pageSize));\n }\n } else if (direction === 'forward') {\n // if the new data will exceed the dataset size, then chop off the start or end\n // this keeps the stored dataset to our preferred size\n if (currentData.rows.length >= DATASET_SIZE) {\n nextRows = currentData.rows.slice(DEFAULT_PAGE_SIZE).concat(response.data);\n } else {\n nextRows = currentData.rows.concat(response.data);\n }\n } else if (direction === 'backward') {\n if (currentData.rows.length >= DATASET_SIZE) {\n nextRows = response.data.concat(currentData.rows.slice(0, -1 * pageSize));\n } else {\n nextRows = currentData.rows.concat(response.data);\n }\n }\n\n return {\n rows: nextRows,\n pages: nextPages,\n };\n });\n } catch {\n //\n } finally {\n _hasFetchedAll.current = false;\n // reset pending requests\n delete _pendingPageRequests.current[pageIndex];\n // update the last loaded page\n _lastFetchedPage.current = {\n index: pageIndex,\n direction,\n };\n }\n }\n\n const loadAll = async (\n sorting: TableColumnSort[],\n filters: TableColumnFilter[],\n search: string | undefined,\n hiddenColumns: string[]\n ) => {\n _hasFetchedAll.current = true;\n // set the sorting so we can track if it changed between loads\n _lastUsedSorting.current = sorting;\n // set the filters so we can track if it changed between loads\n _lastUsedFilters.current = filters;\n\n try {\n const response = await fetchAll(sorting, filters, search, hiddenColumns);\n length.current = response.length;\n\n setData({\n rows: response.data,\n pages: Array.from(Array(response.length / pageSize).keys()),\n });\n } catch {\n //\n } finally {\n // reset pending requests\n _pendingPageRequests.current = {};\n }\n };\n\n const invalidate = async () => {\n // reset stuff\n _pendingPageRequests.current = {};\n _hasFetchedAll.current = false;\n\n // load the last page that we scrolled to\n return loadPage(\n getCurrentPage(data.pages, _lastFetchedPage.current),\n _lastUsedSorting.current,\n _lastUsedFilters.current,\n _lastUsedSearch.current,\n _lastUsedHiddenColumns.current,\n true\n );\n };\n\n // search works client side - it fetches all then works client side - so these handlers are a little \"weird\"\n // if a search is currently \"active\", we need to re load all because\n const handleSort = async (sorting: TableColumnSort[]) => {\n _lastUsedSorting.current = sorting;\n // reset stuff\n _pendingPageRequests.current = {};\n _hasFetchedAll.current = false;\n\n return loadPage(\n getCurrentPage(data.pages, _lastFetchedPage.current),\n sorting,\n _lastUsedFilters.current,\n _lastUsedSearch.current,\n _lastUsedHiddenColumns.current,\n true\n );\n };\n const handleFilter = async (filters: TableColumnFilter[], hiddenColumns: string[]) => {\n _lastUsedFilters.current = filters;\n _lastUsedHiddenColumns.current = hiddenColumns;\n\n // reset stuff\n _pendingPageRequests.current = {};\n _hasFetchedAll.current = false;\n\n return loadPage(\n getCurrentPage(data.pages, _lastFetchedPage.current),\n _lastUsedSorting.current,\n filters,\n _lastUsedSearch.current,\n hiddenColumns,\n true\n );\n };\n const handleSearch = async (search: string | undefined, hiddenColumns: string[]) => {\n _lastUsedSearch.current = search;\n _lastUsedHiddenColumns.current = hiddenColumns;\n\n // reset stuff\n _pendingPageRequests.current = {};\n _hasFetchedAll.current = false;\n\n return loadPage(\n getCurrentPage(data.pages, _lastFetchedPage.current),\n _lastUsedSorting.current,\n _lastUsedFilters.current,\n search,\n hiddenColumns,\n true\n );\n };\n\n return [\n {\n data: data.rows,\n pages: data.pages,\n length: length.current,\n loadAll,\n loadPage,\n onChangeFilter: handleFilter,\n onChangeSearch: handleSearch,\n onChangeSort: handleSort,\n pageSize,\n _experimentalDataLoader2: true,\n },\n invalidate,\n ];\n}\n\nfunction getCurrentPage(currentPages: number[], lastFetchedPage: LastFetchedPage): number {\n if (currentPages.length <= 2) {\n return currentPages[0] ?? 0;\n }\n\n const middle = Math.floor(DATASET_SIZE_MULTIPLIER / 2);\n\n if (lastFetchedPage.index) {\n if (!lastFetchedPage.direction) {\n return lastFetchedPage.index;\n }\n\n return lastFetchedPage.direction === 'forward' ? lastFetchedPage.index + middle : lastFetchedPage.index - middle;\n }\n\n return 0;\n}\n\nfunction getDirection2(pageIndex: number, lastUsedPage: LastFetchedPage): Direction {\n if (lastUsedPage.index === undefined) {\n return undefined;\n }\n\n if (pageIndex > lastUsedPage.index) {\n if (lastUsedPage.index + 1 === pageIndex || lastUsedPage.index + DATASET_SIZE_MULTIPLIER === pageIndex) {\n return 'forward';\n }\n } else if (pageIndex < lastUsedPage.index) {\n if (lastUsedPage.index - 1 === pageIndex || lastUsedPage.index - DATASET_SIZE_MULTIPLIER === pageIndex) {\n return 'backward';\n }\n }\n\n return undefined;\n}\n\nfunction getPages(pageIndex: number, lastUsedPage: LastFetchedPage, currentPages: number[], direction: Direction) {\n if (currentPages.length && (pageIndex === lastUsedPage.index || currentPages.includes(pageIndex))) {\n return currentPages;\n }\n\n if (direction === 'forward') {\n const nextPages = currentPages.length === DATASET_SIZE_MULTIPLIER ? currentPages.slice(1) : currentPages;\n return nextPages.concat(pageIndex);\n }\n\n if (direction === 'backward') {\n const nextPages = currentPages.length === DATASET_SIZE_MULTIPLIER ? currentPages.slice(0, -1) : currentPages;\n return [pageIndex].concat(nextPages);\n }\n\n if (pageIndex === 0) {\n return [0];\n }\n\n // don't go forward, the current page will trigger load of the next page\n return [pageIndex - 1, pageIndex];\n}\n"],"names":["DATASET_SIZE_MULTIPLIER","useTableDataLoader2","fetchPage","fetchAll","options","pageSize","DEFAULT_PAGE_SIZE","loadPage","pageIndex","sorting","filters","search","hiddenColumns","reset","_hasFetchedAll","current","Promise","resolve","_pendingPageRequests","data","pages","includes","position","indexOf","rows","undefined","_lastUsedSorting","_lastUsedFilters","direction","getDirection2","_lastFetchedPage","_temp2","_finallyRethrows","_catch","then","response","length","setData","currentData","nextPages","getPages","nextRows","index","startIndex","concat","Array","fill","slice","DATASET_SIZE","_wasThrown2","_result2","e","reject","React","useRef","useState","_lastUsedSearch","_lastUsedHiddenColumns","loadAll","_temp","from","keys","_wasThrown","_result","invalidate","getCurrentPage","handleSort","handleFilter","handleSearch","onChangeFilter","onChangeSearch","onChangeSort","_experimentalDataLoader2","currentPages","lastFetchedPage","_currentPages$","middle","Math","floor","lastUsedPage"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"useTableRowSelectionListener.js","sources":["../../../../../../../../../src/primitives/Table/useTableManager/listeners/useTableRowSelectionListener.ts"],"sourcesContent":["import { Table as ReactTable } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../../hooks/useLazyEffect';\nimport { TableRowSelectHandler } from '../../types';\n\nexport function useTableRowSelectionListener<TType = unknown>(\n table: ReactTable<TType>,\n onRowSelect?: TableRowSelectHandler<TType>\n) {\n // note that the selected row model may not contain all rows in state when using server loading\n const rows = table.getSelectedRowModel().flatRows;\n const state = table.getState().rowSelection;\n\n useLazyEffect(() => {\n if (table.options.enableRowSelection && typeof onRowSelect === 'function') {\n onRowSelect(\n rows.map(row => row.original),\n Object.keys(state) as (keyof TType)[]\n );\n }\n /**\n * Casting to a boolean, since enableRowSelection can be a function,\n * and setting a function as depoendency will lead to infinity loop. And in case of row selection useEffect,\n * we only need to know if selection was enabled or disabled, because enableRowSelection function\n * will be applied directly to particular rows.\n */\n }, [!!table.options.enableRowSelection, state]);\n}\n"],"names":["useTableRowSelectionListener","table","onRowSelect","rows","getSelectedRowModel","flatRows","state","getState","rowSelection","useLazyEffect","options","enableRowSelection","map","row","original","Object","keys"],"mappings":";;SAIgBA,4BAA4BA,CACxCC,KAAwB,EACxBC,WAA0C;;EAG1C,MAAMC,IAAI,GAAGF,KAAK,CAACG,mBAAmB,EAAE,CAACC,QAAQ;EACjD,MAAMC,KAAK,GAAGL,KAAK,CAACM,QAAQ,EAAE,CAACC,YAAY;EAE3CC,aAAa,CAAC;IACV,IAAIR,KAAK,CAACS,OAAO,CAACC,kBAAkB,IAAI,OAAOT,WAAW,KAAK,UAAU,EAAE;MACvEA,WAAW,CACPC,IAAI,CAACS,GAAG,CAACC,GAAG,IAAIA,GAAG,CAACC,QAAQ,CAAC,EAC7BC,MAAM,CAACC,IAAI,CAACV,KAAK,CAAoB,CACxC;;;;;;;;GAQR,EAAE,CAAC,CAAC,CAACL,KAAK,CAACS,OAAO,CAACC,kBAAkB,EAAEL,KAAK,CAAC,CAAC;AACnD;;;;"}
1
+ {"version":3,"file":"useTableRowSelectionListener.js","sources":["../../../../../../../../../src/primitives/Table/useTableManager/listeners/useTableRowSelectionListener.ts"],"sourcesContent":["import { Table as ReactTable } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../../hooks/useLazyEffect';\nimport { TableRowSelectHandler } from '../../types';\n\nexport function useTableRowSelectionListener<TType = unknown>(\n table: ReactTable<TType>,\n onRowSelect?: TableRowSelectHandler<TType>\n) {\n // note that the selected row model may not contain all rows in state when using server loading\n const rows = table.getSelectedRowModel().flatRows;\n const state = table.getState().rowSelection;\n\n useLazyEffect(() => {\n if (table.options.enableRowSelection && typeof onRowSelect === 'function') {\n onRowSelect(\n rows.map(row => row.original),\n Object.keys(state)\n );\n }\n /**\n * Casting to a boolean, since enableRowSelection can be a function,\n * and setting a function as depoendency will lead to infinity loop. And in case of row selection useEffect,\n * we only need to know if selection was enabled or disabled, because enableRowSelection function\n * will be applied directly to particular rows.\n */\n }, [!!table.options.enableRowSelection, state]);\n}\n"],"names":["useTableRowSelectionListener","table","onRowSelect","rows","getSelectedRowModel","flatRows","state","getState","rowSelection","useLazyEffect","options","enableRowSelection","map","row","original","Object","keys"],"mappings":";;SAIgBA,4BAA4BA,CACxCC,KAAwB,EACxBC,WAA0C;;EAG1C,MAAMC,IAAI,GAAGF,KAAK,CAACG,mBAAmB,EAAE,CAACC,QAAQ;EACjD,MAAMC,KAAK,GAAGL,KAAK,CAACM,QAAQ,EAAE,CAACC,YAAY;EAE3CC,aAAa,CAAC;IACV,IAAIR,KAAK,CAACS,OAAO,CAACC,kBAAkB,IAAI,OAAOT,WAAW,KAAK,UAAU,EAAE;MACvEA,WAAW,CACPC,IAAI,CAACS,GAAG,CAACC,GAAG,IAAIA,GAAG,CAACC,QAAQ,CAAC,EAC7BC,MAAM,CAACC,IAAI,CAACV,KAAK,CAAC,CACrB;;;;;;;;GAQR,EAAE,CAAC,CAAC,CAACL,KAAK,CAACS,OAAO,CAACC,kBAAkB,EAAEL,KAAK,CAAC,CAAC;AACnD;;;;"}
package/dist/index.d.ts CHANGED
@@ -63,6 +63,7 @@ export * from './components/Navigation2/Navigation2';
63
63
  export * as CollectionPrimitive from './primitives/Collection/Collection';
64
64
  export * from './primitives/Table/types';
65
65
  export * from './primitives/Table/useTableDataLoader';
66
+ export * from './primitives/Table/useTableDataLoader2';
66
67
  export * from './utils/date';
67
68
  export * from './utils/keyboard';
68
69
  export * from './utils/mergeRefs';
@@ -67,7 +67,7 @@ export declare type TableRowDragHandler<TType = unknown> = (rows: TType[], showP
67
67
  export declare type TableRowDropHandler<TType = unknown> = (event: React.DragEvent, row: TType) => void;
68
68
  export declare type TableRowGotoHandler = (column: string, query: string, sorting: TableColumnSort[], filters: TableColumnFilter[], search: string | undefined) => Promise<number>;
69
69
  export declare type TableRowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';
70
- export declare type TableRowSelectHandler<TType = unknown> = (rows: TType[], ids: (keyof TType)[]) => void;
70
+ export declare type TableRowSelectHandler<TType = unknown> = (rows: TType[], ids: string[]) => void;
71
71
  export declare type TableRowWithMetaData<TType = unknown> = TType & {
72
72
  _meta?: {
73
73
  layout?: 'heading' | 'summary' | 'item';
@@ -1,6 +1,5 @@
1
1
  import { TableColumnFilter, TableColumnSort, TableFilterHandler, TableServerLoadPageHandler, TableServerLoadAllHandler, TableSortHandler, TableSearchHandler } from './types';
2
2
  import { useTableDataLoaderOptions } from './useTableDataLoader';
3
- export declare const DEFAULT_PAGE_SIZE = 100;
4
3
  export declare type useTableDataPageFetcher2<TType = unknown> = (pageIndex: number, pageSize: number, sorting: TableColumnSort[], filters: TableColumnFilter[], search: string | undefined, hiddenColumns: string[]) => Promise<{
5
4
  data: TType[];
6
5
  length: number;