@cronocode/react-box 3.1.1 → 3.1.2
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/components/dataGrid/components/dataGridCellRowSelection.d.ts +6 -0
- package/components/dataGrid/components/dataGridCellText.d.ts +6 -0
- package/components/dataGrid/contracts/dataGridContract.d.ts +6 -1
- package/components/dataGrid/models/cellModel.d.ts +1 -1
- package/components/dataGrid/models/columnModel.d.ts +6 -3
- package/components/dataGrid/models/gridModel.d.ts +3 -3
- package/components/dataGrid/models/groupRowModel.d.ts +1 -1
- package/components/dataGrid/models/rowModel.d.ts +1 -1
- package/components/dataGrid.cjs +1 -1
- package/components/dataGrid.mjs +330 -309
- package/components/dropdown.cjs +1 -1
- package/components/dropdown.mjs +10 -10
- package/core/extends/boxComponents.d.ts +2 -1
- package/core/extends/useComponents.d.ts +1 -1
- package/core.cjs +2 -2
- package/core.mjs +11 -11
- package/package.json +3 -1
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { default as CellModel } from '../models/cellModel';
|
|
1
2
|
export type Key = string | number;
|
|
2
3
|
export type PinPosition = 'LEFT' | 'RIGHT';
|
|
3
4
|
export declare const NO_PIN = "NO_PIN";
|
|
@@ -23,7 +24,10 @@ export interface ColumnType<TRow> {
|
|
|
23
24
|
pin?: PinPosition;
|
|
24
25
|
width?: number;
|
|
25
26
|
columns?: ColumnType<TRow>[];
|
|
26
|
-
align?: 'right' | 'center';
|
|
27
|
+
align?: 'left' | 'right' | 'center';
|
|
28
|
+
Cell?: React.ComponentType<{
|
|
29
|
+
cell: CellModel<TRow>;
|
|
30
|
+
}>;
|
|
27
31
|
}
|
|
28
32
|
export interface GridDefinition<TRow> {
|
|
29
33
|
rowKey?: KeysMatching<TRow, Key> | ((rowData: TRow) => Key);
|
|
@@ -40,6 +44,7 @@ export interface GridDefinition<TRow> {
|
|
|
40
44
|
export interface DataGridProps<TRow> {
|
|
41
45
|
data: TRow[];
|
|
42
46
|
def: GridDefinition<TRow>;
|
|
47
|
+
loading?: boolean;
|
|
43
48
|
onSelectionChange?: (event: SelectionChangeEvent<TRow>) => void;
|
|
44
49
|
}
|
|
45
50
|
interface SelectionChangeEvent<TRow, TKey = TRow[keyof TRow] | number | string> {
|
|
@@ -6,5 +6,5 @@ export default class CellModel<TRow> {
|
|
|
6
6
|
readonly row: RowModel<TRow>;
|
|
7
7
|
readonly column: ColumnModel<TRow>;
|
|
8
8
|
constructor(grid: GridModel<TRow>, row: RowModel<TRow>, column: ColumnModel<TRow>);
|
|
9
|
-
get value():
|
|
9
|
+
get value(): number | TRow[keyof TRow];
|
|
10
10
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { default as GridModel } from './gridModel';
|
|
2
1
|
import { ColumnType, PinPosition } from '../contracts/dataGridContract';
|
|
2
|
+
import { default as GridModel } from './gridModel';
|
|
3
3
|
export default class ColumnModel<TRow> {
|
|
4
|
-
|
|
4
|
+
readonly def: ColumnType<TRow>;
|
|
5
5
|
readonly grid: GridModel<TRow>;
|
|
6
6
|
private parent?;
|
|
7
7
|
constructor(def: ColumnType<TRow>, grid: GridModel<TRow>, parent?: ColumnModel<TRow> | undefined);
|
|
@@ -9,8 +9,11 @@ export default class ColumnModel<TRow> {
|
|
|
9
9
|
get visibleColumns(): ColumnModel<TRow>[];
|
|
10
10
|
get key(): import('../contracts/dataGridContract').Key;
|
|
11
11
|
get header(): string | undefined;
|
|
12
|
-
get align(): "center" | "right" | undefined;
|
|
12
|
+
get align(): "center" | "right" | "left" | undefined;
|
|
13
13
|
get isLeaf(): boolean;
|
|
14
|
+
get Cell(): import('react').ComponentType<{
|
|
15
|
+
cell: import('./cellModel').default<TRow>;
|
|
16
|
+
}> | undefined;
|
|
14
17
|
private _pin?;
|
|
15
18
|
get pin(): PinPosition | undefined;
|
|
16
19
|
get uniqueKey(): string;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
+
import { DataGridProps, Key, PinPosition } from '../contracts/dataGridContract';
|
|
1
2
|
import { default as ColumnModel } from './columnModel';
|
|
2
3
|
import { default as GroupRowModel } from './groupRowModel';
|
|
3
4
|
import { default as RowModel } from './rowModel';
|
|
4
|
-
import { DataGridProps, Key, PinPosition } from '../contracts/dataGridContract';
|
|
5
5
|
export declare const EMPTY_CELL_KEY: Key;
|
|
6
6
|
export declare const ROW_NUMBER_CELL_KEY: Key;
|
|
7
7
|
export declare const ROW_SELECTION_CELL_KEY: Key;
|
|
8
8
|
export declare const GROUPING_CELL_KEY: Key;
|
|
9
9
|
export default class GridModel<TRow> {
|
|
10
|
-
|
|
10
|
+
props: DataGridProps<TRow>;
|
|
11
11
|
readonly update: () => void;
|
|
12
12
|
constructor(props: DataGridProps<TRow>, update: () => void);
|
|
13
|
-
|
|
13
|
+
readonly sourceColumns: import('../../../utils/memo').Memo<ColumnModel<TRow>[]>;
|
|
14
14
|
readonly columns: import('../../../utils/memo').Memo<{
|
|
15
15
|
left: ColumnModel<TRow>[];
|
|
16
16
|
middle: ColumnModel<TRow>[];
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
+
import { Key } from '../contracts/dataGridContract';
|
|
1
2
|
import { default as ColumnModel } from './columnModel';
|
|
2
3
|
import { default as GridModel } from './gridModel';
|
|
3
4
|
import { default as GroupRowCellModel } from './groupRowCellModel';
|
|
4
5
|
import { default as RowModel } from './rowModel';
|
|
5
|
-
import { Key } from '../contracts/dataGridContract';
|
|
6
6
|
export default class GroupRowModel<TRow> {
|
|
7
7
|
readonly grid: GridModel<TRow>;
|
|
8
8
|
readonly groupColumn: ColumnModel<TRow>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { Key } from '../contracts/dataGridContract';
|
|
1
2
|
import { default as CellModel } from './cellModel';
|
|
2
3
|
import { default as GridModel } from './gridModel';
|
|
3
4
|
import { default as GroupRowModel } from './groupRowModel';
|
|
4
|
-
import { Key } from '../contracts/dataGridContract';
|
|
5
5
|
export default class RowModel<TRow> {
|
|
6
6
|
readonly grid: GridModel<TRow>;
|
|
7
7
|
readonly data: TRow;
|
package/components/dataGrid.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),m=require("../box.cjs"),C=require("./flex.cjs"),w=require("react"),u=require("../core.cjs"),g=require("./button.cjs"),I=require("./checkbox.cjs"),U=require("./grid.cjs"),S=require("./semantics.cjs"),q=require("./tooltip.cjs"),he=require("./baseSvg.cjs");function me(a){const{grid:e}=a;return n.jsxs(C.default,{component:"datagrid.bottomBar",children:[n.jsxs(m.default,{children:["Rows: ",e.props.data.length]}),e.props.def.rowSelection&&n.jsxs(m.default,{children:["Selected: ",e.selectedRows.size]})]})}class L{constructor(e,t,i){this.def=e,this.grid=t,this.parent=i,this.columns=e.columns?.map(s=>new L(e.pin?{...s,pin:e.pin}:s,t,this))??[],this.isLeaf&&(this._inlineWidth=this.key==T?void 0:this.def.width??this.grid.DEFAULT_COLUMN_WIDTH_PX,this._pin=e.pin)}columns=[];get visibleColumns(){return this.columns.filter(e=>e.isVisible)}get key(){return this.def.key}get header(){return this.def.header}get align(){return this.def.align}get isLeaf(){return this.columns.length===0}_pin;get pin(){if(this.isLeaf)return this._pin;const e=[...new Set(this.columns.flatMap(t=>t.pin))];if(e.length===1)return e[0]}get uniqueKey(){return`${this.key}${this.pin??""}`}getPinnedColumn(e){if(this.hasPin(e)){if(this.isLeaf)return this;const t=new L({...this.def,pin:e},this.grid,this.parent);return t.columns=this.columns.filter(i=>i.hasPin(e)).map(i=>{const s=i.getPinnedColumn(e);return s.parent=t,s}).filter(i=>!!i),t}}hasPin(e){return this.isLeaf?this._pin===e:this.columns.some(t=>t.hasPin(e))}get death(){return this.parent?this.parent.death+1:0}get flatColumns(){const e=[this];return e.push(...this.columns.flatMap(t=>t.flatColumns)),e}_inlineWidth;get inlineWidth(){if(this.isLeaf)return this._inlineWidth;const e=this.visibleColumns.map(t=>t.inlineWidth).filter(t=>typeof t=="number");if(e.length!==0)return e.sumBy(t=>t)}get left(){let e=0;if(this.parent){const{visibleColumns:t,left:i}=this.parent,s=t.findIndex(o=>o===this);e+=t.sumBy((o,r)=>r<s?o.inlineWidth??0:0),e+=i}else{const t=this.grid.columns.value.left.filter(s=>s.isVisible),i=t.findIndex(s=>s===this);e+=t.sumBy((s,o)=>o<i?s.inlineWidth??0:0)}return e}get right(){let e=0;if(this.parent){const{visibleColumns:t}=this.parent,i=t.reverse(),s=i.findIndex(o=>o===this);e+=i.sumBy((o,r)=>r<s?o.inlineWidth??0:0),e+=this.parent.right}else{const i=this.grid.columns.value.right.filter(o=>o.isVisible).reverse(),s=i.findIndex(o=>o===this);e+=i.sumBy((o,r)=>r<s?o.inlineWidth??0:0)}return e}get isEdge(){if(!this.pin)return!1;if(this.parent){const{visibleColumns:t}=this.parent;return(this.pin==="LEFT"?t.at(-1):t.at(0))===this&&this.parent.isEdge}return(this.pin==="LEFT"?this.grid.columns.value.left.filter(t=>t.isVisible).at(-1):this.grid.columns.value.right.filter(t=>t.isVisible).at(0))===this}get isVisible(){return this.isLeaf?!this.grid.hiddenColumns.has(this.key):this.leafs.some(e=>e.isVisible)}get leafs(){return this.isLeaf?[this]:this.visibleColumns.flatMap(e=>e.leafs)}get groupColumnWidthVarName(){return`--${this.uniqueKey}-group-width`}get widthVarName(){return`--${this.uniqueKey}-width`}get leftVarName(){return`--${this.uniqueKey}-left`}get rightVarName(){return`--${this.uniqueKey}-right`}get gridRows(){return this.isLeaf?this.grid.columns.value.maxDeath-this.death:1}resizeColumn=e=>{this.grid.isResizeMode=!0;const t=e.pageX,{MIN_COLUMN_WIDTH_PX:i,update:s}=this.grid,o=this.leafs.sumBy(h=>h.inlineWidth)-this.leafs.length*i,r=this.leafs.toRecord(h=>[h.key,h.inlineWidth]),c=u.FnUtils.throttle(h=>{const p=(h.pageX-t)*(this.pin==="RIGHT"?-1:1);this.leafs.forEach(x=>{const k=r[x.key],b=o>0?(k-i)/o*p:p/this.leafs.length,y=Math.round(k+b);x.setWidth(y<i?i:y)}),this.grid.sizes.clear(),s()},40),l=new AbortController,d=h=>{l.abort(),this.grid.isResizeMode=!1,s()};window.addEventListener("mousemove",c,l),window.addEventListener("mouseup",d,l)};pinColumn=e=>{this.isLeaf?this._pin=e:this.columns.forEach(t=>t.pinColumn(e)),this.grid.pinColumn(this.uniqueKey,e)};toggleGrouping=()=>{this.grid.toggleGrouping(this.key)};sortColumn=(...e)=>{this.grid.setSortColumn(this.key,...e)};setWidth=e=>{if(!this.isLeaf)throw new Error("Cannot set width for a parent column.");this._inlineWidth!==e&&(this._inlineWidth=e,this.grid.setWidth(this.key,e))};toggleVisibility=()=>{this.grid.toggleColumnVisibility(this.key)}}class pe{constructor(e,t,i){this.grid=e,this.row=t,this.column=i}get value(){return this.column.key===v?this.row.rowIndex+1:this.column.key===f?`${this.row.groupValue} (${this.row.count})`:null}}class X{constructor(e,t,i,s,o){this.grid=e,this.groupColumn=t,this.rows=i,this.rowIndex=s,this.groupValue=o,i.forEach(r=>r.parentRow=this)}get key(){return`${this.parentRow?.key??""}${this.groupColumn.key}${this.groupValue}`}parentRow;get cells(){return this.grid.columns.value.visibleLeafs.map(e=>new pe(this.grid,this,e))}get expanded(){return this.grid.expandedGroupRow.has(this.key)}get depth(){return this.parentRow?this.parentRow.depth+1:0}get count(){return this.rows.sumBy(e=>e.count,0)}get flatRows(){return this.expanded?[this,...this.rows.flatMap(e=>e.flatRows)]:[this]}get allRows(){return this.rows.flatMap(e=>e.allRows)}get groupingColumn(){return this.grid.columns.value.leafs.findOrThrow(e=>e.key===f)}get groupingColumnGridColumn(){const{visibleLeafs:e}=this.grid.columns.value,{groupingColumn:t}=this;return e.sumBy(s=>s.pin===t.pin&&s.key!==T&&s.key!==_&&s.key!==v?1:0)}toggleRow(){this.grid.toggleGroupRow(this.key)}}class ge{constructor(e,t,i){this.grid=e,this.row=t,this.column=i}get value(){return this.column.key===T?null:this.column.key===v?this.row.rowIndex+1:this.row.data[this.column.key]}}class ${constructor(e,t,i){this.grid=e,this.data=t,this.rowIndex=i,this.grid=e,this.data=t,this.key=this.grid.getRowKey(t)}key;parentRow;count=1;get cells(){return this.grid.columns.value.visibleLeafs.map(e=>new ge(this.grid,this,e))}get selected(){return this.grid.selectedRows.has(this.key)}get flatRows(){return this}get allRows(){return this}}const fe="NO_PIN",T="empty-cell",v="row-number-cell",_="row-selection-cell",f="grouping-cell";class we{constructor(e,t){if(this.props=e,this.update=t,console.debug("\x1B[32m%s\x1B[0m","[react-box]: DataGrid GridModel ctor"),this._sourceColumns=e.def.columns.map(i=>new L(i,this)),this._sourceColumns.push(new L({key:T},this)),e.def.rowSelection){const i=typeof e.def.rowSelection=="object"&&e.def.rowSelection.pinned?"LEFT":void 0;this._sourceColumns.unshift(new L({key:_,pin:i,width:50,align:"center"},this))}if(e.def.showRowNumber){const i=typeof e.def.showRowNumber=="object"&&e.def.showRowNumber.pinned?"LEFT":void 0;this._sourceColumns.unshift(new L({key:v,pin:i,width:70,align:"right"},this))}}_sourceColumns=[];columns=u.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid columns memo");const e=this._sourceColumns.map(l=>l.getPinnedColumn("LEFT")).filter(l=>!!l),t=this._sourceColumns.map(l=>l.getPinnedColumn()).filter(l=>!!l),i=this._sourceColumns.map(l=>l.getPinnedColumn("RIGHT")).filter(l=>!!l),s=[...e,...t,...i].flatMap(l=>l.flatColumns),o=s.filter(l=>l.isLeaf),r=s.filter(l=>l.isLeaf&&l.isVisible),c=s.maxBy(l=>l.death)+1;return{left:e,middle:t,right:i,flat:s,leafs:o,visibleLeafs:r,maxDeath:c}});headerRows=u.memo(()=>(console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid headerRows memo"),this.columns.value.flat.groupBy(t=>t.death).sortBy(t=>t.key).map(t=>{const i=t.values.groupBy(s=>s.pin??fe).toRecord(s=>[s.key,s.values]);return[...i.LEFT?.filter(s=>s.isVisible)??[],...i.NO_PIN?.filter(s=>s.isVisible)??[],...i.RIGHT?.filter(s=>s.isVisible)??[]]})));gridTemplateColumns=u.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid gridTemplateColumns memo");const{visibleLeafs:e}=this.columns.value,t=e.sumBy(r=>r.pin==="RIGHT"?1:0),i=e.length-t-1,s=i>0?`repeat(${i}, max-content)`:"",o=t>0?`repeat(${t}, max-content)`:"";return`${s} auto ${o}`});rows=u.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid rows memo");let e=this.props.data;if(this._sortColumn&&(e=e.sortBy(t=>t[this._sortColumn],this._sortDirection)),this.groupColumns.size>0){const t=(i,s,o)=>{const r=s.values().next().value;s.delete(r);const c=this.columns.value.leafs.findOrThrow(l=>l.key===r);return this._sortColumn===f&&(i=i.sortBy(l=>l[r],this._sortDirection)),i.groupBy(l=>l[r]).map(l=>{let d;s.size>0?d=t(l.values,new Set(s),o+1):d=l.values.map((p,x)=>new $(this,p,o+1+x));const h=new X(this,c,d,o,l.key);return o+=1,h.expanded&&(o+=d.length),h})};return t(e,new Set(this.groupColumns),0)}return e.map((t,i)=>new $(this,t,i))});flatRows=u.memo(()=>(console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid flatRows memo"),this.rows.value.flatMap(e=>e.flatRows)));get rowHeight(){return this.props.def.rowHeight??this.DEFAULT_ROW_HEIGHT_PX}sizes=u.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid sizes memo");const e=this.columns.value.flat.reduce((s,o)=>{const{inlineWidth:r}=o;return typeof r=="number"&&(s[o.widthVarName]=`${o.inlineWidth}px`),o.pin==="LEFT"&&(s[o.leftVarName]=`${o.left}px`),o.pin==="RIGHT"&&(s[o.rightVarName]=`${o.right}px`),s},{});e[this.rowHeightVarName]=`${this.rowHeight}px`,e[this.leftEdgeVarName]=`${this.leftEdge}px`;const{visibleLeafs:t}=this.columns.value,i=t.find(s=>s.key===f);if(i){const s=t.sumBy(o=>o.pin===i.pin&&o.key!==v&&o.key!==_?o.inlineWidth??0:0);e[i.groupColumnWidthVarName]=`${s}px`}return this.groupColumns.forEach(s=>{const o=this.columns.value.leafs.findOrThrow(r=>r.key===s);e[o.groupColumnWidthVarName]=`${t.sumBy(r=>r.pin===o.pin?r.inlineWidth??0:0)}px`}),e});DEFAULT_ROW_HEIGHT_PX=48;MIN_COLUMN_WIDTH_PX=48;DEFAULT_COLUMN_WIDTH_PX=200;isResizeMode=!1;expandedGroupRow=new Set;selectedRows=new Set;get leftEdge(){return this.columns.value.left.sumBy(e=>e.inlineWidth??0)}get rightEdge(){return this.columns.value.right.sumBy(e=>e.inlineWidth??0)}leftEdgeVarName="--left-edge";rowHeightVarName="--row-height";_idMap=new WeakMap;getRowKey(e){const{rowKey:t}=this.props.def;return t?typeof t=="function"?t(e):e[t]:(this._idMap.has(e)||this._idMap.set(e,crypto.randomUUID()),this._idMap.get(e))}setSortColumn=(e,...t)=>{if(t.length>0)[this._sortDirection]=t,this._sortColumn=this._sortDirection?e:void 0;else{const{_sortColumn:i,_sortDirection:s}=this;this._sortColumn=i===e&&s==="DESC"?void 0:e,this._sortDirection=i===e&&s==="ASC"?"DESC":"ASC"}this.headerRows.clear(),this.rows.clear(),this.flatRows.clear(),this.update()};pinColumn=(e,t)=>{const i=this.columns.value.flat.findOrThrow(s=>s.uniqueKey===e);i.pin!==t&&i.pinColumn(t),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.sizes.clear(),this.update()};toggleGrouping=e=>{this.groupColumns=new Set(this.groupColumns),this.hiddenColumns=new Set(this.hiddenColumns),this.groupColumns.has(e)?(this.groupColumns.delete(e),this.hiddenColumns.delete(e)):(this.groupColumns.add(e),this.hiddenColumns.add(e));const t=this._sourceColumns.find(i=>i.key===f);if(this.groupColumns.size>0&&!t){const i=this._sourceColumns.sumBy(s=>s.key===v||s.key===_?1:0);this._sourceColumns.splice(i,0,new L({key:f},this))}else this.groupColumns.size===0&&t&&(this._sourceColumns=this._sourceColumns.removeBy(i=>i.key===f));this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.sizes.clear(),this.update()};unGroupAll=()=>{this.groupColumns=new Set,this._sourceColumns=this._sourceColumns.removeBy(e=>e.key===f),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.sizes.clear(),this.update()};toggleGroupRow=e=>{this.expandedGroupRow=new Set(this.expandedGroupRow),this.expandedGroupRow.has(e)?this.expandedGroupRow.delete(e):this.expandedGroupRow.add(e),this.rows.clear(),this.flatRows.clear(),this.update()};toggleRowSelection=e=>{this.toggleRowsSelection([e])};toggleRowsSelection=e=>{this.selectedRows=new Set(this.selectedRows);const t=e.every(i=>this.selectedRows.has(i));t?e.forEach(i=>this.selectedRows.delete(i)):e.forEach(i=>this.selectedRows.add(i)),this.flatRows.clear(),this.update(),this.props.onSelectionChange?.({action:t?"deselect":"select",affectedRowKeys:e,selectedRowKeys:Array.from(this.selectedRows),isAllSelected:this.selectedRows.size===this.props.data.length})};toggleSelectAllRows=()=>{this.toggleRowsSelection(this.props.data.map(e=>this.getRowKey(e)))};toggleColumnVisibility=e=>{this.hiddenColumns=new Set(this.hiddenColumns),this.hiddenColumns.has(e)?this.hiddenColumns.delete(e):this.hiddenColumns.add(e),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.sizes.clear(),this.update()};setWidth=(e,t)=>{const i=this.columns.value.leafs.find(o=>o.key===e);if(!i)throw new Error("Leaf column not found.");i.setWidth(t),this._sourceColumns.flatMap(o=>o.flatColumns).findOrThrow(o=>o.key===e).setWidth(t)};groupColumns=new Set;hiddenColumns=new Set;_sortColumn;get sortColumn(){return this._sortColumn}_sortDirection="ASC";get sortDirection(){return this._sortDirection}}function N(a){const{children:e,column:t,style:i,...s}=a,{key:o,pin:r,left:c,right:l,isEdge:d,align:h,widthVarName:p,leftVarName:x,rightVarName:k}=t,b=o===T,y=o===v,j=o===_,G=r==="LEFT",R=r==="RIGHT",D=G||R,M=G&&c===0,B=G&&d,P=R&&d,W=R&&l===0,V=!j&&!b;return n.jsxs(C.default,{component:"datagrid.cell",props:{role:"cell"},variant:{isPinned:D,isFirstLeftPinned:M,isLastLeftPinned:B,isFirstRightPinned:P,isLastRightPinned:W,isRowNumber:y,isRowSelection:j},jc:h,style:{width:`var(${p})`,height:`var(${t.grid.rowHeightVarName})`,left:G?`var(${x})`:void 0,right:R?`var(${k})`:void 0,...i},...s,children:[V&&n.jsx(m.default,{px:4,textOverflow:"ellipsis",overflow:"hidden",textWrap:"nowrap",children:e}),j&&e]})}N.displayName="DataGridCell";function Y(a){const{row:e}=a,t=w.useCallback(()=>{e.grid.toggleRowsSelection(e.allRows.map(i=>i.key))},[]);return n.jsx(C.default,{className:"grid-row",display:"contents",props:{role:"rowgroup"},children:e.cells.map(i=>{const{key:s,pin:o,groupColumnWidthVarName:r}=i.column,c=o==="RIGHT";if(s===f)return n.jsx(N,{column:i.column,style:{width:`var(${r})`,right:c?"0":void 0},br:e.groupingColumn.pin==="LEFT"?1:void 0,gridColumn:e.groupingColumnGridColumn,pl:4*e.depth,children:n.jsxs(g.default,{clean:!0,onClick:()=>e.toggleRow(),cursor:"pointer",display:"flex",gap:1,ai:"center",children:[n.jsx(u.ExpandIcon,{fill:"currentColor",width:"14px",height:"14px",rotate:e.expanded?0:-90}),i.value]})},s);if(s===_){const l=e.allRows,d=l.every(p=>p.selected),h=!d&&l.some(p=>p.selected);return n.jsx(N,{column:i.column,children:n.jsx(I.default,{variant:"datagrid",m:1,checked:d,indeterminate:h,onChange:t})},s)}if(o!==e.groupingColumn.pin||s===T||s===v)return n.jsx(N,{column:i.column,children:i.value},s)})})}Y.displayName="DataGridGroupRow";function K(a){const{row:e}=a,t=w.useCallback(i=>{e.grid.toggleRowSelection(e.key)},[]);return n.jsx(C.default,{className:"grid-row",display:"contents",props:{role:"row"},children:e.cells.map(i=>n.jsx(N,{column:i.column,children:i.column.key===_?n.jsx(I.default,{variant:"datagrid",checked:e.selected,onChange:t}):i.value},i.column.key))})}K.displayName="DataGridRow";const Ce=10,F=20;function J(a){const{grid:e,scrollTop:t}=a,i=e.flatRows.value.length,s=Math.max(0,Math.floor(t/e.rowHeight)-F),o=e.props.def.visibleRowsCount??Ce,r=w.useMemo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid render rows");const c=o+F*2;return e.flatRows.value.take(c,s).map(d=>d instanceof X?n.jsx(Y,{row:d},d.key):n.jsx(K,{row:d},d.key))},[e.flatRows.value,s]);return console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid render DataGridBody"),n.jsx(m.default,{style:{height:e.rowHeight*o+e.rowHeight/5},children:n.jsx(m.default,{style:{height:`${i*e.rowHeight}px`},children:n.jsx(U.default,{width:"max-content",minWidth:"fit",transition:"none",style:{transform:`translateY(${s*e.rowHeight}px)`,gridTemplateColumns:e.gridTemplateColumns.value},children:r})})})}J.displayName="DataGridBody";function Q(a){const{column:e}=a,[t,i,s]=u.useVisibility({hideOnScroll:!0,event:"mousedown"}),[o,r]=w.useState({top:0,left:0}),c=w.useMemo(()=>o.left>window.innerWidth/2,[o.left]),l=e.isLeaf&&(e.grid.sortColumn!==e.key||e.grid.sortDirection==="DESC"),d=e.isLeaf&&(e.grid.sortColumn!==e.key||e.grid.sortDirection==="ASC"),h=e.isLeaf&&e.grid.sortColumn===e.key,p=e.pin!=="LEFT",x=e.pin!=="RIGHT",k=!!e.pin,b=e.isLeaf&&e.key!==f,y=e.isLeaf&&e.key===f,j=l||d||h,G=p||x||k;return n.jsx(C.default,{position:"absolute",right:e.pin==="RIGHT"?2.5:4,top:"1/2",translateY:-3,ai:"center",children:n.jsxs(g.default,{component:"datagrid.header.cell.contextMenu",onClick:()=>i(!t),children:[n.jsx(S.Span,{component:"datagrid.header.cell.contextMenu.icon",children:n.jsx(u.DotsIcon,{fill:"currentColor"})}),t&&n.jsxs(q.default,{component:"datagrid.header.cell.contextMenu.tooltip",variant:{openLeft:c},onPositionChange:r,ref:s,children:[l&&n.jsxs(g.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.sortColumn("ASC"),children:[n.jsx(S.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:n.jsx(u.SortIcon,{width:"100%",fill:"currentColor"})}),"Sort Ascending"]}),d&&n.jsxs(g.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.sortColumn("DESC"),children:[n.jsx(S.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:n.jsx(u.SortIcon,{width:"100%",fill:"currentColor",rotate:180})}),"Sort Descending"]}),h&&n.jsxs(g.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.sortColumn(void 0),children:[n.jsx(m.default,{width:4}),"Clear Sort"]}),j&&(G||b||y)&&n.jsx(m.default,{bb:1,my:2,borderColor:"gray-300"}),p&&n.jsxs(g.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.pinColumn("LEFT"),children:[n.jsx(S.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:n.jsx(u.PinIcon,{width:"100%",fill:"currentColor"})}),"Pin Left"]}),x&&n.jsxs(g.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.pinColumn("RIGHT"),children:[n.jsx(S.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:n.jsx(u.PinIcon,{width:"100%",fill:"currentColor",rotate:-90})}),"Pin Right"]}),k&&n.jsxs(g.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.pinColumn(),children:[n.jsx(m.default,{width:4}),"Unpin"]}),j&&G&&(b||y)&&n.jsx(m.default,{bb:1,my:2,borderColor:"gray-300"}),b&&n.jsxs(g.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:e.toggleGrouping,children:[n.jsx(S.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:n.jsx(u.GroupingIcon,{width:"100%",fill:"currentColor"})}),n.jsxs(m.default,{textWrap:"nowrap",children:["Group by ",e.header??e.key]})]}),y&&n.jsxs(g.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:e.grid.unGroupAll,children:[n.jsx(S.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:n.jsx(u.GroupingIcon,{width:"100%",fill:"currentColor"})}),n.jsx(m.default,{textWrap:"nowrap",children:"Un-Group All"})]})]})]})})}Q.displayName="DataGridHeaderCellContextMenu";function Z(a){const{column:e}=a;return n.jsx(C.default,{height:"fit",ai:"center",position:"absolute",right:e.pin==="RIGHT"?void 0:0,left:e.pin!=="RIGHT"?void 0:0,py:3,children:n.jsx(m.default,{cursor:"col-resize",px:.75,className:"resizer",height:"fit",props:{onMouseDown:e.resizeColumn,onTouchStart:e.resizeColumn},children:n.jsx(m.default,{component:"datagrid.header.cell.resizer"})})})}Z.displayName="DataGridHeaderCellResizer";function ee(a){const{column:e}=a,{key:t,pin:i,left:s,right:o,isEdge:r,isLeaf:c,leafs:l,grid:d,header:h,gridRows:p,widthVarName:x,leftVarName:k,rightVarName:b,inlineWidth:y}=e,j=t===T,G=t===f,R=t===v,D=t===_,M=i==="LEFT",B=i==="RIGHT",P=M||i==="RIGHT",W=M&&s===0,V=M&&r,le=B&&r,ae=B&&o===0,z=c&&!j&&!R&&!D,de=c?1:l.length,ue=!R&&!D,A=!R&&!D,O=w.useCallback(()=>{d.toggleSelectAllRows()},[]),ce=w.useMemo(()=>{if(R)return null;if(D){const E=d.selectedRows.size===d.props.data.length,H=!E&&d.selectedRows.size>0;return n.jsx(I.default,{variant:"datagrid",m:1,indeterminate:H,checked:E,onChange:O})}if(G){if(d.groupColumns.size===1){const E=d.columns.value.leafs.findOrThrow(H=>H.key===d.groupColumns.values().next().value);return E.header??E.key}return"Group"}return h??t},[d.groupColumns,d.selectedRows,O]);return n.jsx(C.default,{component:"datagrid.header.cell",variant:{isRowNumber:R,isPinned:P,isFirstLeftPinned:W,isLastLeftPinned:V,isFirstRightPinned:le,isLastRightPinned:ae,isSortable:z},gridRow:p,gridColumn:de,style:{width:`var(${x})`,left:M?`var(${k})`:void 0,right:B?`var(${b})`:void 0},children:!j&&n.jsxs(n.Fragment,{children:[n.jsx(C.default,{width:"fit",height:"fit",jc:e.align,props:{onClick:z?()=>e.sortColumn():void 0},children:n.jsxs(C.default,{overflow:"hidden",position:c?void 0:"sticky",ai:"center",transition:"none",pl:e.align?void 0:4,style:{left:i?void 0:`var(${d.leftEdgeVarName})`},children:[n.jsx(m.default,{overflow:"hidden",textOverflow:"ellipsis",textWrap:"nowrap",children:ce}),t===d.sortColumn&&n.jsx(m.default,{pl:(y??0)<58?0:2,children:n.jsx(u.SortIcon,{width:"16px",rotate:d.sortDirection==="ASC"?0:180,fill:"currentColor"})}),A&&n.jsx(m.default,{minWidth:10})]})}),ue&&n.jsx(Z,{column:e}),A&&n.jsx(Q,{column:e})]})})}ee.displayName="DataGridHeaderCell";function te(a){const{grid:e}=a,{isResizeMode:t}=e;return n.jsx(U.default,{component:"datagrid.header",variant:{isResizeMode:t},style:{gridTemplateColumns:e.gridTemplateColumns.value},children:e.headerRows.value.map(i=>i.map(s=>n.jsx(ee,{column:s},s.uniqueKey)))})}te.displayName="DataGridHeader";function ie(a){const{grid:e}=a,[t,i]=w.useState(0),s=w.useCallback(u.FnUtils.throttle(o=>{i(o.target.scrollTop)},100),[]);return n.jsxs(m.default,{overflowX:"scroll",props:{onScroll:s},children:[n.jsx(te,{grid:e}),n.jsx(J,{grid:e,scrollTop:t})]})}ie.displayName="DataGridContent";function se(a){const{grid:e}=a;return e.groupColumns.size===0?null:n.jsxs(C.default,{component:"datagrid.topBar.columnGroups",children:[n.jsx(S.Span,{component:"datagrid.topBar.columnGroups.icon",children:n.jsx(u.GroupingIcon,{width:"100%",fill:"currentColor"})}),Array.from(e.groupColumns,t=>{const i=e.columns.value.leafs.findOrThrow(s=>s.key===t);return n.jsxs(w.Fragment,{children:[n.jsx(u.ExpandIcon,{fill:"currentColor",width:"14px",height:"14px",rotate:-90}),n.jsxs(C.default,{component:"datagrid.topBar.columnGroups.item",children:[i.header??i.key,n.jsx(g.default,{component:"datagrid.topBar.columnGroups.item.icon",onClick:()=>e.toggleGrouping(i.key),children:n.jsx(u.CloseSvg,{fill:"currentColor",width:"100%"})})]})]},t)})]})}se.displayName="DataGridColumnGroups";function ne(a){const{grid:e}=a,[t,i,s]=u.useVisibility({event:"mousedown"}),o=w.useMemo(()=>e.columns.value.leafs.filter(r=>![T,v,_,f].includes(r.key)),[e.columns.value.leafs]);return n.jsxs(g.default,{component:"datagrid.topBar.contextMenu",onClick:()=>i(!t),children:[n.jsx(he.default,{viewBox:"0 0 24 24",width:"20",fill:"currentColor",...a,children:n.jsx("path",{d:"M5 6h14M5 12h14M5 18h14",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})}),t&&n.jsx(q.default,{component:"datagrid.topBar.contextMenu.tooltip",ref:s,children:o.map(r=>n.jsxs(g.default,{component:"datagrid.topBar.contextMenu.tooltip.item",onClick:c=>{c.stopPropagation(),r.toggleVisibility()},children:[n.jsx(I.default,{variant:"datagrid",checked:r.isVisible,onChange:()=>{},focus:{outline:0}}),r.header??r.key]},r.key))})]})}ne.displayName="DataGridTopBarContextMenu";function oe(a){const{grid:e}=a;return n.jsxs(C.default,{component:"datagrid.topBar",position:"relative",children:[n.jsx(ne,{grid:e}),n.jsx(se,{grid:e})]})}oe.displayName="DataGridTopBar";function xe(a){const[e,t]=w.useState(0),i=w.useRef();return i.current||(i.current=new we(a,()=>t(s=>s+1))),i.current}function re(a){const e=xe(a);return console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid render"),n.jsxs(m.default,{component:"datagrid",style:e.sizes.value,props:{role:"presentation"},children:[n.jsx(oe,{grid:e}),n.jsx(ie,{grid:e}),n.jsx(me,{grid:e})]})}re.displayName="DataGrid";exports.default=re;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),h=require("../box.cjs"),f=require("./flex.cjs"),p=require("react"),c=require("../core.cjs"),$=require("./grid.cjs"),W=require("./checkbox.cjs"),w=require("./button.cjs"),L=require("./semantics.cjs"),F=require("./tooltip.cjs"),pe=require("./baseSvg.cjs");function ge(a){const{grid:e}=a;return n.jsxs(f.default,{component:"datagrid.bottomBar",children:[n.jsxs(h.default,{children:["Rows: ",e.props.data.length]}),e.props.def.rowSelection&&n.jsxs(h.default,{children:["Selected: ",e.selectedRows.size]})]})}function U(a){const{cell:e}=a,t=p.useCallback(()=>{e.grid.toggleRowSelection(e.row.key)},[e.grid,e.row.key]);return n.jsx(W.default,{variant:"datagrid",checked:e.row.selected,onChange:t})}U.displayName="DataGridCellRowSelection";const fe="NO_PIN";class D{constructor(e,t,i){this.def=e,this.grid=t,this.parent=i,this.columns=e.columns?.map(s=>new D(e.pin?{...s,pin:e.pin}:s,t,this))??[],this.isLeaf&&(this._inlineWidth=this.key==M?void 0:this.def.width??this.grid.DEFAULT_COLUMN_WIDTH_PX,this._pin=e.pin)}columns=[];get visibleColumns(){return this.columns.filter(e=>e.isVisible)}get key(){return this.def.key}get header(){return this.def.header}get align(){return this.def.align}get isLeaf(){return this.columns.length===0}get Cell(){return this.def.Cell}_pin;get pin(){if(this.isLeaf)return this._pin;const e=[...new Set(this.columns.flatMap(t=>t.pin))];if(e.length===1)return e[0]}get uniqueKey(){return`${this.key}${this.pin??""}`}getPinnedColumn(e){if(this.hasPin(e)){if(this.isLeaf)return this;const t=new D({...this.def,pin:e},this.grid,this.parent);return t.columns=this.columns.filter(i=>i.hasPin(e)).map(i=>{const s=i.getPinnedColumn(e);return s.parent=t,s}).filter(i=>!!i),t}}hasPin(e){return this.isLeaf?this._pin===e:this.columns.some(t=>t.hasPin(e))}get death(){return this.parent?this.parent.death+1:0}get flatColumns(){const e=[this];return e.push(...this.columns.flatMap(t=>t.flatColumns)),e}_inlineWidth;get inlineWidth(){if(this.isLeaf)return this._inlineWidth;const e=this.visibleColumns.map(t=>t.inlineWidth).filter(t=>typeof t=="number");if(e.length!==0)return e.sumBy(t=>t)}get left(){let e=0;if(this.parent){const{visibleColumns:t,left:i}=this.parent,s=t.findIndex(o=>o===this);e+=t.sumBy((o,r)=>r<s?o.inlineWidth??0:0),e+=i}else{const t=this.grid.columns.value.left.filter(s=>s.isVisible),i=t.findIndex(s=>s===this);e+=t.sumBy((s,o)=>o<i?s.inlineWidth??0:0)}return e}get right(){let e=0;if(this.parent){const{visibleColumns:t}=this.parent,i=t.reverse(),s=i.findIndex(o=>o===this);e+=i.sumBy((o,r)=>r<s?o.inlineWidth??0:0),e+=this.parent.right}else{const i=this.grid.columns.value.right.filter(o=>o.isVisible).reverse(),s=i.findIndex(o=>o===this);e+=i.sumBy((o,r)=>r<s?o.inlineWidth??0:0)}return e}get isEdge(){if(!this.pin)return!1;if(this.parent){const{visibleColumns:t}=this.parent;return(this.pin==="LEFT"?t.at(-1):t.at(0))===this&&this.parent.isEdge}return(this.pin==="LEFT"?this.grid.columns.value.left.filter(t=>t.isVisible).at(-1):this.grid.columns.value.right.filter(t=>t.isVisible).at(0))===this}get isVisible(){return this.isLeaf?!this.grid.hiddenColumns.has(this.key):this.leafs.some(e=>e.isVisible)}get leafs(){return this.isLeaf?[this]:this.visibleColumns.flatMap(e=>e.leafs)}get groupColumnWidthVarName(){return`--${this.uniqueKey}-group-width`}get widthVarName(){return`--${this.uniqueKey}-width`}get leftVarName(){return`--${this.uniqueKey}-left`}get rightVarName(){return`--${this.uniqueKey}-right`}get gridRows(){return this.isLeaf?this.grid.columns.value.maxDeath-this.death:1}resizeColumn=e=>{this.grid.isResizeMode=!0;const t=e.pageX,{MIN_COLUMN_WIDTH_PX:i,update:s}=this.grid,o=this.leafs.sumBy(u=>u.inlineWidth)-this.leafs.length*i,r=this.leafs.toRecord(u=>[u.key,u.inlineWidth]),m=c.FnUtils.throttle(u=>{const g=(u.pageX-t)*(this.pin==="RIGHT"?-1:1);this.leafs.forEach(C=>{const v=r[C.key],j=o>0?(v-i)/o*g:g/this.leafs.length,x=Math.round(v+j);C.setWidth(x<i?i:x)}),this.grid.sizes.clear(),s()},40),l=new AbortController,d=u=>{l.abort(),this.grid.isResizeMode=!1,s()};window.addEventListener("mousemove",m,l),window.addEventListener("mouseup",d,l)};pinColumn=e=>{this.isLeaf?this._pin=e:this.columns.forEach(t=>t.pinColumn(e)),this.grid.pinColumn(this.uniqueKey,e)};toggleGrouping=()=>{this.grid.toggleGrouping(this.key)};sortColumn=(...e)=>{this.grid.setSortColumn(this.key,...e)};setWidth=e=>{if(!this.isLeaf)throw new Error("Cannot set width for a parent column.");this._inlineWidth!==e&&(this._inlineWidth=e,this.grid.setWidth(this.key,e))};toggleVisibility=()=>{this.grid.toggleColumnVisibility(this.key)}}class we{constructor(e,t,i){this.grid=e,this.row=t,this.column=i}get value(){return this.column.key===k?this.row.rowIndex+1:this.row.data[this.column.key]}}class A{constructor(e,t,i){this.grid=e,this.data=t,this.rowIndex=i,this.grid=e,this.data=t,this.key=this.grid.getRowKey(t)}key;parentRow;count=1;get cells(){return this.grid.columns.value.visibleLeafs.map(e=>new we(this.grid,this,e))}get selected(){return this.grid.selectedRows.has(this.key)}get flatRows(){return this}get allRows(){return this}}const M="empty-cell",k="row-number-cell",_="row-selection-cell",R="grouping-cell";class Ce{constructor(e,t){this.props=e,this.update=t,console.debug("\x1B[32m%s\x1B[0m","[react-box]: DataGrid GridModel ctor")}sourceColumns=c.memo(()=>{const{def:e}=this.props,t=[];if(this.groupColumns.size>0&&t.push(new D({key:R},this)),t.push(...e.columns.map(i=>new D(i,this))),t.push(new D({key:M,Cell:()=>null},this)),e.rowSelection){const i=typeof e.rowSelection=="object"&&e.rowSelection.pinned?"LEFT":void 0;t.unshift(new D({key:_,pin:i,width:50,align:"center",Cell:U},this))}if(e.showRowNumber){const i=typeof e.showRowNumber=="object"&&e.showRowNumber.pinned?"LEFT":void 0;t.unshift(new D({key:k,pin:i,width:70,align:"right"},this))}return t});columns=c.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid columns memo");const e=this.sourceColumns.value.map(l=>l.getPinnedColumn("LEFT")).filter(l=>!!l),t=this.sourceColumns.value.map(l=>l.getPinnedColumn()).filter(l=>!!l),i=this.sourceColumns.value.map(l=>l.getPinnedColumn("RIGHT")).filter(l=>!!l),s=[...e,...t,...i].flatMap(l=>l.flatColumns),o=s.filter(l=>l.isLeaf),r=s.filter(l=>l.isLeaf&&l.isVisible),m=s.maxBy(l=>l.death)+1;return{left:e,middle:t,right:i,flat:s,leafs:o,visibleLeafs:r,maxDeath:m}});headerRows=c.memo(()=>(console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid headerRows memo"),this.columns.value.flat.groupBy(t=>t.death).sortBy(t=>t.key).map(t=>{const i=t.values.groupBy(s=>s.pin??fe).toRecord(s=>[s.key,s.values]);return[...i.LEFT?.filter(s=>s.isVisible)??[],...i.NO_PIN?.filter(s=>s.isVisible)??[],...i.RIGHT?.filter(s=>s.isVisible)??[]]})));gridTemplateColumns=c.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid gridTemplateColumns memo");const{visibleLeafs:e}=this.columns.value,t=e.sumBy(r=>r.pin==="RIGHT"?1:0),i=e.length-t-1,s=i>0?`repeat(${i}, max-content)`:"",o=t>0?`repeat(${t}, max-content)`:"";return`${s} auto ${o}`});rows=c.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid rows memo");let e=this.props.data;if(this._sortColumn&&(e=e.sortBy(t=>t[this._sortColumn],this._sortDirection)),this.groupColumns.size>0){const t=(i,s,o)=>{const r=s.values().next().value;s.delete(r);const m=this.columns.value.leafs.findOrThrow(l=>l.key===r);return this._sortColumn===R&&(i=i.sortBy(l=>l[r],this._sortDirection)),i.groupBy(l=>l[r]).map(l=>{let d;s.size>0?d=t(l.values,new Set(s),o+1):d=l.values.map((g,C)=>new A(this,g,o+1+C));const u=new q(this,m,d,o,l.key);return o+=1,u.expanded&&(o+=d.length),u})};return t(e,new Set(this.groupColumns),0)}return e.map((t,i)=>new A(this,t,i))});flatRows=c.memo(()=>(console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid flatRows memo"),this.rows.value.flatMap(e=>e.flatRows)));get rowHeight(){return this.props.def.rowHeight??this.DEFAULT_ROW_HEIGHT_PX}sizes=c.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid sizes memo");const e=this.columns.value.flat.reduce((s,o)=>{const{inlineWidth:r}=o;return typeof r=="number"&&(s[o.widthVarName]=`${o.inlineWidth}px`),o.pin==="LEFT"&&(s[o.leftVarName]=`${o.left}px`),o.pin==="RIGHT"&&(s[o.rightVarName]=`${o.right}px`),s},{});e[this.rowHeightVarName]=`${this.rowHeight}px`,e[this.leftEdgeVarName]=`${this.leftEdge}px`;const{visibleLeafs:t}=this.columns.value,i=t.find(s=>s.key===R);if(i){const s=t.sumBy(o=>o.pin===i.pin&&o.key!==k&&o.key!==_?o.inlineWidth??0:0);e[i.groupColumnWidthVarName]=`${s}px`}return this.groupColumns.forEach(s=>{const o=this.columns.value.leafs.findOrThrow(r=>r.key===s);e[o.groupColumnWidthVarName]=`${t.sumBy(r=>r.pin===o.pin?r.inlineWidth??0:0)}px`}),e});DEFAULT_ROW_HEIGHT_PX=48;MIN_COLUMN_WIDTH_PX=48;DEFAULT_COLUMN_WIDTH_PX=200;isResizeMode=!1;expandedGroupRow=new Set;selectedRows=new Set;get leftEdge(){return this.columns.value.left.sumBy(e=>e.inlineWidth??0)}get rightEdge(){return this.columns.value.right.sumBy(e=>e.inlineWidth??0)}leftEdgeVarName="--left-edge";rowHeightVarName="--row-height";_idMap=new WeakMap;getRowKey(e){const{rowKey:t}=this.props.def;return t?typeof t=="function"?t(e):e[t]:(this._idMap.has(e)||this._idMap.set(e,crypto.randomUUID()),this._idMap.get(e))}setSortColumn=(e,...t)=>{if(t.length>0)[this._sortDirection]=t,this._sortColumn=this._sortDirection?e:void 0;else{const{_sortColumn:i,_sortDirection:s}=this;this._sortColumn=i===e&&s==="DESC"?void 0:e,this._sortDirection=i===e&&s==="ASC"?"DESC":"ASC"}this.headerRows.clear(),this.rows.clear(),this.flatRows.clear(),this.update()};pinColumn=(e,t)=>{const i=this.columns.value.flat.findOrThrow(s=>s.uniqueKey===e);i.pin!==t&&i.pinColumn(t),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.sizes.clear(),this.update()};toggleGrouping=e=>{this.groupColumns=new Set(this.groupColumns),this.hiddenColumns=new Set(this.hiddenColumns),this.groupColumns.has(e)?(this.groupColumns.delete(e),this.hiddenColumns.delete(e)):(this.groupColumns.add(e),this.hiddenColumns.add(e)),this.sourceColumns.clear(),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.sizes.clear(),this.update()};unGroupAll=()=>{this.groupColumns=new Set,this.sourceColumns.clear(),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.sizes.clear(),this.update()};toggleGroupRow=e=>{this.expandedGroupRow=new Set(this.expandedGroupRow),this.expandedGroupRow.has(e)?this.expandedGroupRow.delete(e):this.expandedGroupRow.add(e),this.rows.clear(),this.flatRows.clear(),this.update()};toggleRowSelection=e=>{this.toggleRowsSelection([e])};toggleRowsSelection=e=>{this.selectedRows=new Set(this.selectedRows);const t=e.every(i=>this.selectedRows.has(i));t?e.forEach(i=>this.selectedRows.delete(i)):e.forEach(i=>this.selectedRows.add(i)),this.flatRows.clear(),this.update(),this.props.onSelectionChange?.({action:t?"deselect":"select",affectedRowKeys:e,selectedRowKeys:Array.from(this.selectedRows),isAllSelected:this.selectedRows.size===this.props.data.length})};toggleSelectAllRows=()=>{this.toggleRowsSelection(this.props.data.map(e=>this.getRowKey(e)))};toggleColumnVisibility=e=>{this.hiddenColumns=new Set(this.hiddenColumns),this.hiddenColumns.has(e)?this.hiddenColumns.delete(e):this.hiddenColumns.add(e),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.sizes.clear(),this.update()};setWidth=(e,t)=>{const i=this.columns.value.leafs.find(o=>o.key===e);if(!i)throw new Error("Leaf column not found.");i.setWidth(t),this.sourceColumns.value.flatMap(o=>o.flatColumns).findOrThrow(o=>o.key===e).setWidth(t)};groupColumns=new Set;hiddenColumns=new Set;_sortColumn;get sortColumn(){return this._sortColumn}_sortDirection="ASC";get sortDirection(){return this._sortDirection}}class xe{constructor(e,t,i){this.grid=e,this.row=t,this.column=i}get value(){return this.column.key===k?this.row.rowIndex+1:this.column.key===R?`${this.row.groupValue} (${this.row.count})`:null}}class q{constructor(e,t,i,s,o){this.grid=e,this.groupColumn=t,this.rows=i,this.rowIndex=s,this.groupValue=o,i.forEach(r=>r.parentRow=this)}get key(){return`${this.parentRow?.key??""}${this.groupColumn.key}${this.groupValue}`}parentRow;get cells(){return this.grid.columns.value.visibleLeafs.map(e=>new xe(this.grid,this,e))}get expanded(){return this.grid.expandedGroupRow.has(this.key)}get depth(){return this.parentRow?this.parentRow.depth+1:0}get count(){return this.rows.sumBy(e=>e.count,0)}get flatRows(){return this.expanded?[this,...this.rows.flatMap(e=>e.flatRows)]:[this]}get allRows(){return this.rows.flatMap(e=>e.allRows)}get groupingColumn(){return this.grid.columns.value.leafs.findOrThrow(e=>e.key===R)}get groupingColumnGridColumn(){const{visibleLeafs:e}=this.grid.columns.value,{groupingColumn:t}=this;return e.sumBy(s=>s.pin===t.pin&&s.key!==M&&s.key!==_&&s.key!==k?1:0)}toggleRow(){this.grid.toggleGroupRow(this.key)}}function N(a){const{children:e,column:t,style:i,...s}=a,{key:o,pin:r,left:m,right:l,isEdge:d,align:u,widthVarName:g,leftVarName:C,rightVarName:v}=t;"align"in t.def&&(s.jc=u);const j=o===k,x=o===_,y=r==="LEFT",b=r==="RIGHT",G=y||b,S=y&&m===0,T=y&&d,B=b&&d,I=b&&l===0;return n.jsx(f.default,{component:"datagrid.cell",props:{role:"cell"},variant:{isPinned:G,isFirstLeftPinned:S,isLastLeftPinned:T,isFirstRightPinned:B,isLastRightPinned:I,isRowNumber:j,isRowSelection:x},style:{width:`var(${g})`,height:`var(${t.grid.rowHeightVarName})`,left:y?`var(${C})`:void 0,right:b?`var(${v})`:void 0,...i},...s,children:e})}N.displayName="DataGridCell";function X(a){const{row:e}=a,t=p.useCallback(()=>{e.grid.toggleRowsSelection(e.allRows.map(i=>i.key))},[]);return n.jsx(f.default,{className:"grid-row",display:"contents",props:{role:"rowgroup"},children:e.cells.map(i=>{const{key:s,pin:o,groupColumnWidthVarName:r}=i.column,m=o==="RIGHT";if(s===R)return n.jsx(N,{column:i.column,style:{width:`var(${r})`,right:m?"0":void 0},br:e.groupingColumn.pin==="LEFT"?1:void 0,gridColumn:e.groupingColumnGridColumn,pl:4*e.depth,overflow:"auto",children:n.jsx(h.default,{textWrap:"nowrap",px:4,children:n.jsxs(w.default,{clean:!0,onClick:()=>e.toggleRow(),cursor:"pointer",display:"flex",gap:1,ai:"center",children:[n.jsx(c.ExpandIcon,{fill:"currentColor",width:"14px",height:"14px",rotate:e.expanded?0:-90}),i.value]})})},s);if(s===_){const l=e.allRows,d=l.every(g=>g.selected),u=!d&&l.some(g=>g.selected);return n.jsx(N,{column:i.column,children:n.jsx(W.default,{variant:"datagrid",m:1,checked:d,indeterminate:u,onChange:t})},s)}if(s===M)return n.jsx(h.default,{},s);if(o!==e.groupingColumn.pin||s===k)return n.jsx(N,{column:i.column,px:4,children:i.value},s)})})}X.displayName="DataGridGroupRow";function Y(a){const{cell:e}=a;return n.jsx(f.default,{height:"fit",width:"fit",overflow:"auto",ai:"center",jc:e.column.align,children:n.jsx(h.default,{px:4,textOverflow:"ellipsis",overflow:"hidden",textWrap:"nowrap",children:e.value})})}Y.displayName="DataGridCellText";function K(a){const{row:e}=a;return n.jsx(f.default,{className:"grid-row",display:"contents",props:{role:"row"},children:e.cells.map(t=>n.jsx(N,{column:t.column,children:t.column.Cell?n.jsx(t.column.Cell,{cell:t}):n.jsx(Y,{cell:t})},t.column.key))})}K.displayName="DataGridRow";const ye=10,O=20;function J(a){const{grid:e,scrollTop:t}=a,i=e.flatRows.value.length,s=Math.max(0,Math.floor(t/e.rowHeight)-O),o=e.props.def.visibleRowsCount??ye,r=e.rowHeight*o+e.rowHeight/5,m=p.useMemo(()=>{if(console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid render rows"),e.props.data.length===0)return n.jsx(f.default,{jc:"center",ai:"center",gridColumn:"full-row",style:{height:r},children:e.props.loading?"loading...":"empty"});const l=o+O*2;return e.flatRows.value.take(l,s).map(u=>u instanceof q?n.jsx(X,{row:u},u.key):n.jsx(K,{row:u},u.key))},[e.flatRows.value,e.props.data.length,e.props.loading,s,r,o]);return console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid render DataGridBody"),n.jsx(h.default,{style:{height:r},children:n.jsx(h.default,{style:{height:`${i*e.rowHeight}px`},children:n.jsx($.default,{width:"max-content",minWidth:"fit",transition:"none",style:{transform:`translateY(${s*e.rowHeight}px)`,gridTemplateColumns:e.gridTemplateColumns.value},children:m})})})}J.displayName="DataGridBody";function Q(a){const{column:e}=a,[t,i,s]=c.useVisibility({hideOnScroll:!0,event:"mousedown"}),[o,r]=p.useState({top:0,left:0}),m=p.useMemo(()=>o.left>window.innerWidth/2,[o.left]),l=e.isLeaf&&(e.grid.sortColumn!==e.key||e.grid.sortDirection==="DESC"),d=e.isLeaf&&(e.grid.sortColumn!==e.key||e.grid.sortDirection==="ASC"),u=e.isLeaf&&e.grid.sortColumn===e.key,g=e.pin!=="LEFT",C=e.pin!=="RIGHT",v=!!e.pin,j=e.isLeaf&&e.key!==R,x=e.isLeaf&&e.key===R,y=l||d||u,b=g||C||v,G=e.align==="right"?2:void 0,S=e.align==="right"?void 0:e.pin==="RIGHT"?2.5:4;return n.jsx(f.default,{position:"absolute",left:G,right:S,top:"1/2",translateY:-3,ai:"center",children:n.jsxs(w.default,{component:"datagrid.header.cell.contextMenu",onClick:()=>i(!t),children:[n.jsx(L.Span,{component:"datagrid.header.cell.contextMenu.icon",children:n.jsx(c.DotsIcon,{fill:"currentColor"})}),t&&n.jsxs(F.default,{component:"datagrid.header.cell.contextMenu.tooltip",variant:{openLeft:m},onPositionChange:r,ref:s,children:[l&&n.jsxs(w.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.sortColumn("ASC"),children:[n.jsx(L.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:n.jsx(c.SortIcon,{width:"100%",fill:"currentColor"})}),"Sort Ascending"]}),d&&n.jsxs(w.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.sortColumn("DESC"),children:[n.jsx(L.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:n.jsx(c.SortIcon,{width:"100%",fill:"currentColor",rotate:180})}),"Sort Descending"]}),u&&n.jsxs(w.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.sortColumn(void 0),children:[n.jsx(h.default,{width:4}),"Clear Sort"]}),y&&(b||j||x)&&n.jsx(h.default,{bb:1,my:2,borderColor:"gray-300"}),g&&n.jsxs(w.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.pinColumn("LEFT"),children:[n.jsx(L.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:n.jsx(c.PinIcon,{width:"100%",fill:"currentColor"})}),"Pin Left"]}),C&&n.jsxs(w.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.pinColumn("RIGHT"),children:[n.jsx(L.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:n.jsx(c.PinIcon,{width:"100%",fill:"currentColor",rotate:-90})}),"Pin Right"]}),v&&n.jsxs(w.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.pinColumn(),children:[n.jsx(h.default,{width:4}),"Unpin"]}),y&&b&&(j||x)&&n.jsx(h.default,{bb:1,my:2,borderColor:"gray-300"}),j&&n.jsxs(w.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:e.toggleGrouping,children:[n.jsx(L.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:n.jsx(c.GroupingIcon,{width:"100%",fill:"currentColor"})}),n.jsxs(h.default,{textWrap:"nowrap",children:["Group by ",e.header??e.key]})]}),x&&n.jsxs(w.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:e.grid.unGroupAll,children:[n.jsx(L.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:n.jsx(c.GroupingIcon,{width:"100%",fill:"currentColor"})}),n.jsx(h.default,{textWrap:"nowrap",children:"Un-Group All"})]})]})]})})}Q.displayName="DataGridHeaderCellContextMenu";function Z(a){const{column:e}=a;return n.jsx(f.default,{height:"fit",ai:"center",position:"absolute",right:e.pin==="RIGHT"?void 0:0,left:e.pin!=="RIGHT"?void 0:0,py:3,children:n.jsx(h.default,{cursor:"col-resize",px:.75,className:"resizer",height:"fit",props:{onMouseDown:e.resizeColumn,onTouchStart:e.resizeColumn},children:n.jsx(h.default,{component:"datagrid.header.cell.resizer"})})})}Z.displayName="DataGridHeaderCellResizer";function ee(a){const{column:e}=a,{key:t,pin:i,left:s,right:o,isEdge:r,isLeaf:m,leafs:l,grid:d,header:u,gridRows:g,widthVarName:C,leftVarName:v,rightVarName:j,inlineWidth:x}=e,y=t===M,b=t===R,G=t===k,S=t===_,T=i==="LEFT",B=i==="RIGHT",I=T||i==="RIGHT",le=T&&s===0,ae=T&&r,de=B&&r,ue=B&&o===0,V=m&&!y&&!G&&!S,ce=m?1:l.length,he=!G&&!S,H=!G&&!S,z=p.useCallback(()=>{d.toggleSelectAllRows()},[]),me=p.useMemo(()=>{if(G)return null;if(S){const E=d.selectedRows.size===d.props.data.length,P=!E&&d.selectedRows.size>0;return n.jsx(W.default,{variant:"datagrid",m:1,indeterminate:P,checked:E,onChange:z})}if(b){if(d.groupColumns.size===1){const E=d.columns.value.leafs.findOrThrow(P=>P.key===d.groupColumns.values().next().value);return E.header??E.key}return"Group"}return u??t},[d.groupColumns,d.selectedRows,z]);return n.jsx(f.default,{component:"datagrid.header.cell",variant:{isRowNumber:G,isPinned:I,isFirstLeftPinned:le,isLastLeftPinned:ae,isFirstRightPinned:de,isLastRightPinned:ue,isSortable:V},gridRow:g,gridColumn:ce,style:{width:`var(${C})`,left:T?`var(${v})`:void 0,right:B?`var(${j})`:void 0},children:!y&&n.jsxs(n.Fragment,{children:[n.jsx(f.default,{width:"fit",height:"fit",jc:e.align,props:{onClick:V?()=>e.sortColumn():void 0},children:n.jsxs(f.default,{overflow:"hidden",position:m?void 0:"sticky",ai:"center",transition:"none",pl:e.align==="right"?10:4,style:{left:i?void 0:`var(${d.leftEdgeVarName})`},children:[n.jsx(h.default,{overflow:"hidden",textOverflow:"ellipsis",textWrap:"nowrap",children:me}),t===d.sortColumn&&n.jsx(h.default,{pl:(x??0)<58?0:2,children:n.jsx(c.SortIcon,{width:"16px",rotate:d.sortDirection==="ASC"?0:180,fill:"currentColor"})}),H&&n.jsx(h.default,{minWidth:e.align==="right"?4:10})]})}),he&&n.jsx(Z,{column:e}),H&&n.jsx(Q,{column:e})]})})}ee.displayName="DataGridHeaderCell";function te(a){const{grid:e}=a,{isResizeMode:t}=e;return n.jsx($.default,{component:"datagrid.header",variant:{isResizeMode:t},style:{gridTemplateColumns:e.gridTemplateColumns.value},children:e.headerRows.value.map(i=>i.map(s=>n.jsx(ee,{column:s},s.uniqueKey)))})}te.displayName="DataGridHeader";function ie(a){const{grid:e}=a,[t,i]=p.useState(0),s=p.useCallback(c.FnUtils.throttle(o=>{i(o.target.scrollTop)},100),[]);return n.jsxs(h.default,{overflowX:"scroll",props:{onScroll:s},children:[n.jsx(te,{grid:e}),n.jsx(J,{grid:e,scrollTop:t})]})}ie.displayName="DataGridContent";function se(a){const{grid:e}=a;return e.groupColumns.size===0?null:n.jsxs(f.default,{component:"datagrid.topBar.columnGroups",children:[n.jsx(L.Span,{component:"datagrid.topBar.columnGroups.icon",children:n.jsx(c.GroupingIcon,{width:"100%",fill:"currentColor"})}),Array.from(e.groupColumns,t=>{const i=e.columns.value.leafs.findOrThrow(s=>s.key===t);return n.jsxs(p.Fragment,{children:[n.jsx(c.ExpandIcon,{fill:"currentColor",width:"14px",height:"14px",rotate:-90}),n.jsxs(f.default,{component:"datagrid.topBar.columnGroups.item",children:[i.header??i.key,n.jsx(w.default,{component:"datagrid.topBar.columnGroups.item.icon",onClick:()=>e.toggleGrouping(i.key),children:n.jsx(c.CloseSvg,{fill:"currentColor",width:"100%"})})]})]},t)})]})}se.displayName="DataGridColumnGroups";function ne(a){const{grid:e}=a,[t,i,s]=c.useVisibility({event:"mousedown"}),o=p.useMemo(()=>e.columns.value.leafs.filter(r=>![M,k,_,R].includes(r.key)),[e.columns.value.leafs]);return n.jsxs(w.default,{component:"datagrid.topBar.contextMenu",onClick:()=>i(!t),children:[n.jsx(pe.default,{viewBox:"0 0 24 24",width:"20",fill:"currentColor",...a,children:n.jsx("path",{d:"M5 6h14M5 12h14M5 18h14",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})}),t&&n.jsx(F.default,{component:"datagrid.topBar.contextMenu.tooltip",ref:s,children:o.map(r=>n.jsxs(w.default,{component:"datagrid.topBar.contextMenu.tooltip.item",onClick:m=>{m.stopPropagation(),r.toggleVisibility()},children:[n.jsx(W.default,{variant:"datagrid",checked:r.isVisible,onChange:()=>{},focus:{outline:0}}),r.header??r.key]},r.key))})]})}ne.displayName="DataGridTopBarContextMenu";function oe(a){const{grid:e}=a;return n.jsxs(f.default,{component:"datagrid.topBar",position:"relative",children:[n.jsx(ne,{grid:e}),n.jsx(se,{grid:e})]})}oe.displayName="DataGridTopBar";function Re(a){const[e,t]=p.useState(0),i=p.useRef();return i.current||(i.current=new Ce(a,()=>t(s=>s+1))),p.useEffect(()=>{i.current.props=a,i.current.rows.clear(),i.current.flatRows.clear(),i.current.update()},[a.data]),p.useEffect(()=>{i.current.props=a,i.current.sourceColumns.clear(),i.current.columns.clear(),i.current.headerRows.clear(),i.current.gridTemplateColumns.clear(),i.current.rows.clear(),i.current.flatRows.clear(),i.current.sizes.clear(),i.current.update()},[a.def]),p.useEffect(()=>{i.current.props=a,i.current.update()},[a.loading]),i.current}function re(a){const e=Re(a);return console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid render"),n.jsxs(h.default,{component:"datagrid",style:e.sizes.value,props:{role:"presentation"},children:[n.jsx(oe,{grid:e}),n.jsx(ie,{grid:e}),n.jsx(ge,{grid:e})]})}re.displayName="DataGrid";exports.default=re;
|