1
- import { GroupElement , Grouping , Groupings , Literal , Literals } from "expression/literal" ;
2
1
import { GroupingConfig , TableColumn , TableViewProps } from "./table" ;
3
2
import { useAsElement } from "ui/hooks" ;
4
3
import { useInterning , useStableCallback } from "ui/hooks" ;
@@ -11,133 +10,10 @@ import { useEditableDispatch } from "ui/fields/editable";
11
10
import { combineClasses } from "../basics" ;
12
11
import { Indexable } from "index/types/indexable" ;
13
12
import { App } from "obsidian" ;
13
+ import { TreeTableRowData , TreeUtils } from "utils/tree" ;
14
+ import { GroupElement , Grouping , Groupings , Literal , Literals } from "expression/literal" ;
14
15
15
- export interface TreeTableRowData < T > {
16
- value : T ;
17
- children : TreeTableRowData < T > [ ] ;
18
- }
19
-
20
- export namespace TreeUtils {
21
- export function isTreeTableRowData < T > ( data : any ) : data is TreeTableRowData < T > {
22
- return (
23
- "children" in data &&
24
- "value" in data &&
25
- ! Array . isArray ( data ) &&
26
- Object . keys ( data ) . length == 2 &&
27
- Array . isArray ( data . children )
28
- ) ;
29
- }
30
- export function countInTreeRow < T > ( node : TreeTableRowData < T > , top : boolean = true ) : number {
31
- let result = 0 ;
32
- if ( ! top ) result ++ ;
33
- for ( let n of node . children ) result += countInTreeRow ( n , false ) ;
34
- return result ;
35
- }
36
- export function ofArray < T > ( source : T [ ] , childFn : ( el : T ) => T [ ] ) : TreeTableRowData < T > [ ] {
37
- const mapper = ( el : T ) : TreeTableRowData < T > => {
38
- return {
39
- value : el ,
40
- children : childFn ( el ) . map ( mapper ) ,
41
- } as TreeTableRowData < T > ;
42
- } ;
43
- return source . map ( mapper ) ;
44
- }
45
- export function ofNode < T > ( source : T , childFn : ( el : T ) => T [ ] ) : TreeTableRowData < T > {
46
- return {
47
- value : source ,
48
- children : ofArray ( childFn ( source ) , childFn ) ,
49
- } ;
50
- }
51
-
52
- export function ofGrouping < T > ( elements : Grouping < T > , childFn : ( el : T ) => T [ ] ) : Grouping < TreeTableRowData < T > > {
53
- const mapper = ( l : T | GroupElement < T > ) : GroupElement < TreeTableRowData < T > > | TreeTableRowData < T > => {
54
- if ( Groupings . isElementGroup ( l ) )
55
- return { key : l . key , rows : l . rows . map ( mapper ) } as GroupElement < TreeTableRowData < T > > ;
56
- return {
57
- value : l ,
58
- children : childFn ( l ) . map ( mapper ) ,
59
- } as TreeTableRowData < T > ;
60
- } ;
61
- return elements . map ( mapper ) as Grouping < TreeTableRowData < T > > ;
62
- }
63
-
64
- export function count < T > ( elements : Grouping < TreeTableRowData < T > > | GroupElement < TreeTableRowData < T > > ) : number {
65
- if ( Groupings . isElementGroup ( elements ) ) {
66
- return count ( elements . rows ) ;
67
- } else if ( Groupings . isGrouping ( elements ) ) {
68
- let result = 0 ;
69
- for ( let group of elements ) result += count ( group . rows ) ;
70
- return result ;
71
- } else {
72
- return elements . reduce ( ( pv , cv ) => pv + countInTreeRow ( cv ) , 0 ) ;
73
- }
74
- }
75
16
76
- export function slice < T > (
77
- elements : Grouping < TreeTableRowData < T > > ,
78
- start : number ,
79
- end : number
80
- ) : Grouping < TreeTableRowData < T > > {
81
- let initial = [ ...Groupings . slice ( elements , start , end ) ] as Grouping < TreeTableRowData < T > > ;
82
- let index = 0 ,
83
- seen = 0 ;
84
-
85
- for ( let element of initial ) {
86
- if ( Groupings . isElementGroup ( element ) ) {
87
- let groupSize = Groupings . count ( elements ) ;
88
- let groupStart = Math . min ( seen , start ) ;
89
- let groupEnd = Math . min ( groupSize , end ) ;
90
- ( initial [ index ] as GroupElement < TreeTableRowData < T > > ) . rows = Groupings . slice (
91
- element . rows ,
92
- groupStart ,
93
- groupEnd
94
- ) ;
95
- seen += groupSize ;
96
- } else {
97
- seen += countInTreeRow ( element ) ;
98
- }
99
- index ++ ;
100
- }
101
- return initial ;
102
- }
103
- /** recursively sort a tree */
104
- export function sort < T , V = Literal > (
105
- rows : ( TreeTableRowData < T > | GroupElement < TreeTableRowData < T > > ) [ ] ,
106
- comparators : {
107
- fn : ( a : V , b : V , ao : T , ab : T ) => number ;
108
- direction : SortDirection ;
109
- actualValue : ( obj : T ) => V ;
110
- } [ ]
111
- ) : ( TreeTableRowData < T > | GroupElement < TreeTableRowData < T > > ) [ ] {
112
- const realComparator = (
113
- a : TreeTableRowData < T > | GroupElement < TreeTableRowData < T > > ,
114
- b : TreeTableRowData < T > | GroupElement < TreeTableRowData < T > >
115
- ) : number => {
116
- for ( let comp of comparators ) {
117
- const direction = comp . direction . toLocaleLowerCase ( ) === "ascending" ? 1 : - 1 ;
118
- let result = 0 ;
119
- if ( Groupings . isElementGroup ( a ) && Groupings . isElementGroup ( b ) ) {
120
- result = 0 ;
121
- } else if ( ! Groupings . isElementGroup ( a ) && ! Groupings . isElementGroup ( b ) ) {
122
- result =
123
- direction * comp . fn ( comp . actualValue ( a . value ) , comp . actualValue ( b . value ) , a . value , b . value ) ;
124
- }
125
- if ( result != 0 ) return result ;
126
- }
127
- return 0 ;
128
- } ;
129
- const map = (
130
- t : TreeTableRowData < T > | GroupElement < TreeTableRowData < T > >
131
- ) : TreeTableRowData < T > | GroupElement < TreeTableRowData < T > > => {
132
- let r ;
133
- if ( Groupings . isElementGroup ( t ) )
134
- r = { ...t , rows : sort ( t . rows , comparators ) . map ( map ) } as GroupElement < TreeTableRowData < T > > ;
135
- else r = { ...t , children : sort ( t . children , comparators ) . map ( map ) } as TreeTableRowData < T > ;
136
- return r ;
137
- } ;
138
- return rows . map ( map ) . sort ( realComparator ) ;
139
- }
140
- }
141
17
142
18
function useKeyFn < T > ( id : TreeTableState < T > [ "id" ] , ...deps : any [ ] ) {
143
19
const ret = useCallback (
@@ -385,15 +261,14 @@ function CreateButton({
385
261
level ?: number ;
386
262
isGroup ?: boolean ;
387
263
} ) {
388
- const pad = ( level - 1 == 0 ) ? undefined : `${ 1.2 * ( level - 1 ) } em` ;
264
+ const mul = 1.12 ;
265
+ if ( level < 1 ) level == 1 ;
266
+ const paddingLeft = `${ mul * ( level ) } em`
389
267
return (
390
- < tr >
391
- { ! isGroup ? < td colSpan = { 1 } > </ td > : null }
392
- < td
393
- colSpan = { isGroup ? cols + 1 : cols }
394
- className = "datacore-table-row"
395
- style = { { paddingLeft : pad } }
396
- >
268
+ < tr data-level = { level } data-is-group = { isGroup . toString ( ) } >
269
+ { /* {isGroup ? null : <td colSpan={1}></td> } */ }
270
+ < td colspan = { 1 } > </ td >
271
+ < td colSpan = { cols } className = "datacore-table-row" style = { { paddingLeft } } >
397
272
< button className = "dashed-default" style = "padding: 0.75em; width: 100%" onClick = { clickCallback } >
398
273
Add item
399
274
</ button >
@@ -520,7 +395,7 @@ export function TreeTableRowCell<T>({
520
395
521
396
return (
522
397
< td
523
- style = { { paddingLeft : isFirst ? `${ ( level - 1 ) * 1.2 } em` : undefined } }
398
+ style = { { paddingLeft : isFirst ? `${ ( level - 1 ) * 1.12 } em` : undefined } }
524
399
onDblClick = { ( ) => dispatch ( { type : "editing-toggled" , newValue : ! editableState . isEditing } ) }
525
400
className = "datacore-table-cell"
526
401
>
@@ -665,6 +540,7 @@ export function ControlledTreeTableView<T>(
665
540
null ,
666
541
rows . length ? rows [ rows . length - 1 ] : null
667
542
) }
543
+ isGroup = { true }
668
544
/>
669
545
) }
670
546
</ tbody >
0 commit comments