@semcore/data-table 2.2.3 → 2.2.6
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/CHANGELOG.md +18 -0
- package/lib/cjs/Body.js +27 -22
- package/lib/cjs/Body.js.map +1 -1
- package/lib/cjs/DataTable.js +37 -36
- package/lib/cjs/DataTable.js.map +1 -1
- package/lib/cjs/Head.js +2 -0
- package/lib/cjs/Head.js.map +1 -1
- package/lib/cjs/style/data-table.shadow.css +24 -17
- package/lib/es6/Body.js +27 -22
- package/lib/es6/Body.js.map +1 -1
- package/lib/es6/DataTable.js +37 -36
- package/lib/es6/DataTable.js.map +1 -1
- package/lib/es6/Head.js +1 -0
- package/lib/es6/Head.js.map +1 -1
- package/lib/es6/style/data-table.shadow.css +24 -17
- package/lib/types/Body.d.ts +50 -0
- package/lib/types/DataTable.d.ts +100 -0
- package/lib/types/Head.d.ts +23 -0
- package/lib/types/index.d.ts +2 -0
- package/lib/types/types.d.ts +57 -0
- package/lib/types/utils.d.ts +6 -0
- package/package.json +2 -2
- package/src/Body.tsx +6 -1
- package/src/Head.tsx +1 -1
- package/src/style/data-table.shadow.css +24 -17
package/lib/es6/Head.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Head.tsx"],"names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDesc","SortAsc","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","SORTING_ICON","desc","asc","Head","name","event","asProps","$onSortClick","code","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","SHead","SSortIcon","sortDirection","isGroup","length","cSize","value","style","flexBasis","props","flex","undefined","fixed","resizable","sortable","active","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","Children","columnsChildren","onResize","$scrollRef","sticky","SHeadWrapper","offsetLeftSum","offsetRightSum","warn","displayName","scrollStyles","origin"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,EAAoBC,OAApB,EAA6BC,IAA7B,QAAyC,eAAzC;AACA,SAASC,GAAT,EAAcC,IAAd,QAA0B,mBAA1B;AACA,OAAOC,UAAP,MAAuB,sBAAvB;AACA,OAAOC,QAAP,MAAqB,0BAArB;AACA,OAAOC,OAAP,MAAoB,yBAApB;AACA,SAASC,oBAAT,QAAqC,gCAArC;AACA,SAASC,cAAT,EAAyBC,aAAzB,EAAwCC,oBAAxC,QAAoE,SAApE;AAEA,OAAOC,MAAP,MAAmB,2BAAnB;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../src/Head.tsx"],"names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDesc","SortAsc","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","SORTING_ICON","desc","asc","Head","name","event","asProps","$onSortClick","code","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","SHead","SSortIcon","sortDirection","isGroup","length","cSize","value","style","flexBasis","props","flex","undefined","fixed","resizable","sortable","active","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","Children","columnsChildren","onResize","$scrollRef","sticky","SHeadWrapper","offsetLeftSum","offsetRightSum","warn","displayName","scrollStyles","origin"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport type { Column } from './types';\nimport logger from '@semcore/utils/lib/logger';\nimport 'resize-observer-polyfill';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n desc: SortDesc,\n asc: SortAsc,\n} as const;\n\ntype AsProps = {\n $onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;\n $scrollRef: (instance: unknown) => void;\n use: 'primary' | 'secondary';\n columnsChildren: Column[];\n onResize: ResizeObserverCallback;\n sticky: boolean;\n ['data-ui-name']: string;\n};\n\nclass Head extends Component<AsProps> {\n columns: Column[] = [];\n\n static displayName: string;\n\n bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {\n this.asProps.$onSortClick(name, event);\n };\n\n bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {\n if (event.code === 'Enter') {\n this.asProps.$onSortClick(name, event);\n }\n };\n\n renderColumns(columns: Column[], width: number) {\n return columns.map((column) => this.renderColumn(column, width));\n }\n\n renderColumn(column: Column, width: number) {\n const { styles, use, hidden } = this.asProps;\n const SColumn = Flex;\n const SHead = Box;\n const SSortIcon = SORTING_ICON[column.sortDirection];\n const isGroup = column.columns?.length > 0;\n const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n const [name, value] = getFixedStyle(column, this.columns);\n\n const style = {\n flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n ...column.props.style,\n };\n\n if (name !== undefined && value !== undefined) {\n style[name] = value;\n }\n\n return sstyled(styles)(\n <SColumn\n key={column.name}\n use={use}\n fixed={column.fixed}\n resizable={column.resizable}\n sortable={column.sortable}\n active={column.active}\n group={isGroup}\n tabIndex={column.sortable && 0}\n {...column.props}\n onClick={callAllEventHandlers(\n column.props.onClick,\n column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n )}\n onKeyDown={callAllEventHandlers(\n column.props.onKeyDown,\n column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n )}\n style={style}\n hidden={hidden}\n >\n {isGroup ? (\n <>\n <SColumn groupHead use={use}>\n <div>{column.props.children}</div>\n </SColumn>\n <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n </>\n ) : (\n <>\n <div>{column.props.children}</div>\n {column.sortable ? <SSortIcon active={column.active} /> : null}\n </>\n )}\n </SColumn>,\n );\n }\n\n render() {\n const SHead = Root;\n const { Children, styles, columnsChildren, onResize, $scrollRef, sticky } = this.asProps;\n const SHeadWrapper = Box;\n\n this.columns = flattenColumns(columnsChildren);\n\n const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n logger.warn(\n sticky,\n \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n this.asProps['data-ui-name'] || Head.displayName,\n );\n\n return sstyled(styles)(\n <SHeadWrapper sticky={sticky}>\n <ScrollArea\n styles={scrollStyles}\n use:left={`${offsetLeftSum}px`}\n use:right={`${offsetRightSum}px`}\n shadow\n onResize={onResize}\n >\n <ScrollArea.Container ref={$scrollRef}>\n <SHead render={Box}>\n {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n </SHead>\n </ScrollArea.Container>\n </ScrollArea>\n {Children.origin}\n </SHeadWrapper>,\n );\n }\n}\n\nexport default Head;\n"],"file":"Head.js"}
|
|
@@ -149,8 +149,9 @@ SRow {
|
|
|
149
149
|
}
|
|
150
150
|
|
|
151
151
|
/* DEFAULT THEME */
|
|
152
|
-
SRow[active] SCell:not([theme]),
|
|
153
|
-
SRow:hover SCell:not([theme])
|
|
152
|
+
SRow[active] > SCell:not([theme]),
|
|
153
|
+
SRow:hover > SCell:not([theme]),
|
|
154
|
+
SRow SCell:hover + SGroupCell SCell:not([theme]) {
|
|
154
155
|
background-color: #f6f7f7;
|
|
155
156
|
}
|
|
156
157
|
|
|
@@ -159,9 +160,10 @@ SRow[theme='muted'] SCell:not([theme]) {
|
|
|
159
160
|
background-color: #f2f3f4;
|
|
160
161
|
}
|
|
161
162
|
|
|
162
|
-
SRow:hover SCell[theme='muted'],
|
|
163
|
-
SRow[theme='muted'][active] SCell:not([theme]),
|
|
164
|
-
SRow[theme='muted']:hover SCell:not([theme])
|
|
163
|
+
SRow:hover > SCell[theme='muted'],
|
|
164
|
+
SRow[theme='muted'][active] > SCell:not([theme]),
|
|
165
|
+
SRow[theme='muted']:hover > SCell:not([theme]),
|
|
166
|
+
SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
|
|
165
167
|
background-color: #f6f7f7;
|
|
166
168
|
}
|
|
167
169
|
|
|
@@ -170,9 +172,10 @@ SRow[theme='info'] SCell:not([theme]) {
|
|
|
170
172
|
background-color: color-mod(var(--light-blue) blend(#fff 80%));
|
|
171
173
|
}
|
|
172
174
|
|
|
173
|
-
SRow:hover SCell[theme='info'],
|
|
174
|
-
SRow[theme='info'][active] SCell:not([theme]),
|
|
175
|
-
SRow[theme='info']:hover SCell:not([theme])
|
|
175
|
+
SRow:hover > SCell[theme='info'],
|
|
176
|
+
SRow[theme='info'][active] > SCell:not([theme]),
|
|
177
|
+
SRow[theme='info']:hover > SCell:not([theme]),
|
|
178
|
+
SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
|
|
176
179
|
background-color: color-mod(var(--light-blue) blend(#fff 75%));
|
|
177
180
|
}
|
|
178
181
|
|
|
@@ -181,9 +184,10 @@ SRow[theme='success'] SCell:not([theme]) {
|
|
|
181
184
|
background-color: color-mod(var(--green) blend(#fff 85%));
|
|
182
185
|
}
|
|
183
186
|
|
|
184
|
-
SRow:hover SCell[theme='success'],
|
|
185
|
-
SRow[theme='success'][active] SCell:not([theme]),
|
|
186
|
-
SRow[theme='success']:hover SCell:not([theme])
|
|
187
|
+
SRow:hover > SCell[theme='success'],
|
|
188
|
+
SRow[theme='success'][active] > SCell:not([theme]),
|
|
189
|
+
SRow[theme='success']:hover > SCell:not([theme]),
|
|
190
|
+
SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
|
|
187
191
|
background-color: color-mod(var(--green) blend(#fff 80%));
|
|
188
192
|
}
|
|
189
193
|
|
|
@@ -192,9 +196,10 @@ SRow[theme='warning'] SCell:not([theme]) {
|
|
|
192
196
|
background-color: color-mod(var(--light-orange) blend(#fff 85%));
|
|
193
197
|
}
|
|
194
198
|
|
|
195
|
-
SRow:hover SCell[theme='warning'],
|
|
196
|
-
SRow[theme='warning'][active] SCell:not([theme]),
|
|
197
|
-
SRow[theme='warning']:hover SCell:not([theme])
|
|
199
|
+
SRow:hover > SCell[theme='warning'],
|
|
200
|
+
SRow[theme='warning'][active] > SCell:not([theme]),
|
|
201
|
+
SRow[theme='warning']:hover > SCell:not([theme]),
|
|
202
|
+
SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
|
|
198
203
|
background-color: color-mod(var(--light-orange) blend(#fff 80%));
|
|
199
204
|
}
|
|
200
205
|
|
|
@@ -203,9 +208,10 @@ SRow[theme='danger'] SCell:not([theme]) {
|
|
|
203
208
|
background-color: color-mod(var(--red) blend(#fff 90%));
|
|
204
209
|
}
|
|
205
210
|
|
|
206
|
-
SRow:hover SCell[theme='danger'],
|
|
207
|
-
SRow[theme='danger'][active] SCell:not([theme]),
|
|
208
|
-
SRow[theme='danger']:hover SCell:not([theme])
|
|
211
|
+
SRow:hover > SCell[theme='danger'],
|
|
212
|
+
SRow[theme='danger'][active] > SCell:not([theme]),
|
|
213
|
+
SRow[theme='danger']:hover > SCell:not([theme]),
|
|
214
|
+
SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
|
|
209
215
|
background-color: color-mod(var(--red) blend(#fff 85%));
|
|
210
216
|
}
|
|
211
217
|
|
|
@@ -216,6 +222,7 @@ SRow[positioned] {
|
|
|
216
222
|
SCell {
|
|
217
223
|
display: flex;
|
|
218
224
|
flex: 1;
|
|
225
|
+
flex-basis: auto;
|
|
219
226
|
font-size: 14px;
|
|
220
227
|
color: var(--gray20);
|
|
221
228
|
line-height: 20px;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Component } from '@semcore/core';
|
|
3
|
+
import { RowData, Column, NestedCells, PropsLayer } from './types';
|
|
4
|
+
import ResizeObserver from 'resize-observer-polyfill';
|
|
5
|
+
import syncScroll from '@semcore/utils/lib/syncScroll';
|
|
6
|
+
declare type AsProps = {
|
|
7
|
+
rows: NestedCells[];
|
|
8
|
+
columns: Column[];
|
|
9
|
+
$scrollRef: ReturnType<ReturnType<typeof syncScroll>>;
|
|
10
|
+
onResize: ResizeObserverCallback;
|
|
11
|
+
rowPropsLayers: PropsLayer[];
|
|
12
|
+
use: 'primary' | 'secondary';
|
|
13
|
+
uniqueKey: string;
|
|
14
|
+
virtualScroll?: boolean | {
|
|
15
|
+
tollerance?: number;
|
|
16
|
+
rowHeight?: number;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
declare type State = {
|
|
20
|
+
rowHeight: number | undefined;
|
|
21
|
+
scrollAreaHeight: undefined | number;
|
|
22
|
+
scrollOffset: number;
|
|
23
|
+
};
|
|
24
|
+
declare class Body extends Component<AsProps, State> {
|
|
25
|
+
state: State;
|
|
26
|
+
firstRowRef: React.RefObject<HTMLElement>;
|
|
27
|
+
firstRowResizeObserver: ResizeObserver | null;
|
|
28
|
+
getRowHeight: () => number | undefined;
|
|
29
|
+
renderCells(cells: NestedCells, rowData: RowData, index: number): React.ReactNode[];
|
|
30
|
+
renderRow(cells: NestedCells, { dataIndex, topOffset, nested }: {
|
|
31
|
+
dataIndex: number;
|
|
32
|
+
topOffset?: number;
|
|
33
|
+
nested: boolean;
|
|
34
|
+
}): React.ReactNode;
|
|
35
|
+
renderRows(rows: NestedCells[]): React.ReactNode[];
|
|
36
|
+
renderVirtualizedRows(rows: NestedCells[]): React.ReactNode[];
|
|
37
|
+
handleFirstRowResize: {
|
|
38
|
+
(...args: any[]): void;
|
|
39
|
+
cancel(): void;
|
|
40
|
+
};
|
|
41
|
+
handleScrollAreaResize: {
|
|
42
|
+
(...args: any[]): void;
|
|
43
|
+
cancel(): void;
|
|
44
|
+
};
|
|
45
|
+
handleScrollAreaScroll: (event: React.SyntheticEvent<HTMLElement>) => void;
|
|
46
|
+
setupRowSizeObserver: () => void;
|
|
47
|
+
componentWillUnmount(): void;
|
|
48
|
+
render(): React.ReactNode;
|
|
49
|
+
}
|
|
50
|
+
export default Body;
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PropGetterFn } from '@semcore/core';
|
|
3
|
+
import { IBoxProps, IFlexProps } from '@semcore/flex-box';
|
|
4
|
+
declare const ROW_GROUP: unique symbol;
|
|
5
|
+
declare type CProps<Props, Ctx = {}, UCProps = {}> = Props & {
|
|
6
|
+
children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;
|
|
7
|
+
};
|
|
8
|
+
declare type ReturnEl = React.ReactElement | null;
|
|
9
|
+
declare type ChildRenderFn<Props> = Props & {
|
|
10
|
+
children?: (props: Props, column: DataTableData, index: number) => {
|
|
11
|
+
[key: string]: unknown;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export declare type DataTableData = {
|
|
15
|
+
[key: string]: unknown;
|
|
16
|
+
};
|
|
17
|
+
export declare type DataTableSort = [string, 'desc' | 'asc'];
|
|
18
|
+
export declare type DataTableTheme = 'muted' | 'info' | 'success' | 'warning' | 'danger';
|
|
19
|
+
export declare type DataTableUse = 'primary' | 'secondary';
|
|
20
|
+
export declare type DataTableRow = DataTableCell[];
|
|
21
|
+
export declare type DataTableCell = {
|
|
22
|
+
/** Name of column */
|
|
23
|
+
name: string;
|
|
24
|
+
/** Data of column */
|
|
25
|
+
data: React.ReactNode;
|
|
26
|
+
[key: string]: unknown;
|
|
27
|
+
};
|
|
28
|
+
export interface IDataTableProps extends IBoxProps {
|
|
29
|
+
/** Theme for table
|
|
30
|
+
* @default primary
|
|
31
|
+
* */
|
|
32
|
+
use?: DataTableUse;
|
|
33
|
+
/** Data for table */
|
|
34
|
+
data?: DataTableData[];
|
|
35
|
+
/** Active sort object */
|
|
36
|
+
sort?: DataTableSort;
|
|
37
|
+
/** Handler call when will request change sort */
|
|
38
|
+
onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;
|
|
39
|
+
/** Field name in one data entity that is unique accross all set of data
|
|
40
|
+
* @default id
|
|
41
|
+
*/
|
|
42
|
+
uniqueKey?: string;
|
|
43
|
+
}
|
|
44
|
+
export interface IDataTableHeadProps extends IBoxProps {
|
|
45
|
+
/** Sticky header table
|
|
46
|
+
* @deprecated
|
|
47
|
+
* */
|
|
48
|
+
sticky?: boolean;
|
|
49
|
+
/** Hidden header */
|
|
50
|
+
hidden?: boolean;
|
|
51
|
+
}
|
|
52
|
+
export interface IDataTableColumnProps extends IFlexProps {
|
|
53
|
+
/** Unique name column */
|
|
54
|
+
name?: string;
|
|
55
|
+
/** Enable sort for column also if you pass string you can set default sort */
|
|
56
|
+
sortable?: boolean | 'desc' | 'asc';
|
|
57
|
+
/** Enable resize for column
|
|
58
|
+
* @ignore */
|
|
59
|
+
resizable?: boolean;
|
|
60
|
+
/** Fixed column on the left/right */
|
|
61
|
+
fixed?: 'left' | 'right';
|
|
62
|
+
}
|
|
63
|
+
export interface IDataTableBodyProps extends IBoxProps {
|
|
64
|
+
/** Rows table */
|
|
65
|
+
rows?: DataTableRow[];
|
|
66
|
+
/** When enabled, only visually acessable rows are rendered.
|
|
67
|
+
* `tollerance` property controls how many rows outside of viewport are render.
|
|
68
|
+
* `rowHeight` fixes the rows height if it known. If not provided, first row node height is measured.
|
|
69
|
+
* @default { tollerance: 2 }
|
|
70
|
+
*/
|
|
71
|
+
virtualScroll?: boolean | {
|
|
72
|
+
tollerance?: number;
|
|
73
|
+
rowHeight?: number;
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
export interface IDataTableRowProps extends IBoxProps {
|
|
77
|
+
/** Theme for row */
|
|
78
|
+
theme?: DataTableTheme;
|
|
79
|
+
/** Displays row as active/hover */
|
|
80
|
+
active?: boolean;
|
|
81
|
+
}
|
|
82
|
+
export interface IDataTableCellProps extends IFlexProps {
|
|
83
|
+
/** Unique name column or columns separated by / */
|
|
84
|
+
name: string;
|
|
85
|
+
/** Theme for cell */
|
|
86
|
+
theme?: DataTableTheme;
|
|
87
|
+
}
|
|
88
|
+
interface IDataTableCtx {
|
|
89
|
+
getHeadProps: PropGetterFn;
|
|
90
|
+
getBodyProps: PropGetterFn;
|
|
91
|
+
}
|
|
92
|
+
declare const DefinitionTable: (<T>(props: CProps<IDataTableProps & T, IDataTableCtx, {}>) => ReturnEl) & {
|
|
93
|
+
Head: <T_1>(props: IDataTableHeadProps & T_1) => ReturnEl;
|
|
94
|
+
Body: <T_2>(props: IDataTableBodyProps & T_2) => ReturnEl;
|
|
95
|
+
Column: <T_3>(props: IDataTableColumnProps & T_3) => ReturnEl;
|
|
96
|
+
Cell: <T_4>(props: ChildRenderFn<IDataTableCellProps & T_4>) => ReturnEl;
|
|
97
|
+
Row: <T_5>(props: ChildRenderFn<IDataTableRowProps & T_5>) => ReturnEl;
|
|
98
|
+
};
|
|
99
|
+
export { ROW_GROUP };
|
|
100
|
+
export default DefinitionTable;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Component } from '@semcore/core';
|
|
3
|
+
import type { Column } from './types';
|
|
4
|
+
import 'resize-observer-polyfill';
|
|
5
|
+
declare type AsProps = {
|
|
6
|
+
$onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;
|
|
7
|
+
$scrollRef: (instance: unknown) => void;
|
|
8
|
+
use: 'primary' | 'secondary';
|
|
9
|
+
columnsChildren: Column[];
|
|
10
|
+
onResize: ResizeObserverCallback;
|
|
11
|
+
sticky: boolean;
|
|
12
|
+
['data-ui-name']: string;
|
|
13
|
+
};
|
|
14
|
+
declare class Head extends Component<AsProps> {
|
|
15
|
+
columns: Column[];
|
|
16
|
+
static displayName: string;
|
|
17
|
+
bindHandlerSortClick: (name: string) => (event: React.MouseEvent) => void;
|
|
18
|
+
bindHandlerKeyDown: (name: string) => (event: React.KeyboardEvent) => void;
|
|
19
|
+
renderColumns(columns: Column[], width: number): React.ReactNode[];
|
|
20
|
+
renderColumn(column: Column, width: number): React.ReactNode;
|
|
21
|
+
render(): React.ReactNode;
|
|
22
|
+
}
|
|
23
|
+
export default Head;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ROW_GROUP } from './DataTable';
|
|
3
|
+
export declare type PseudoChildPropsGetter = (props: {
|
|
4
|
+
[propName: string]: unknown;
|
|
5
|
+
}, rowData: {
|
|
6
|
+
[columnName: string]: unknown;
|
|
7
|
+
}, index: number) => {
|
|
8
|
+
[propName: string]: unknown;
|
|
9
|
+
};
|
|
10
|
+
export declare type PropsLayer = {
|
|
11
|
+
childrenPropsGetter?: PseudoChildPropsGetter;
|
|
12
|
+
[propName: string]: unknown;
|
|
13
|
+
};
|
|
14
|
+
export declare type SortDirection = 'asc' | 'desc';
|
|
15
|
+
export declare type Column<Props extends {
|
|
16
|
+
[propName: string]: unknown;
|
|
17
|
+
} = {
|
|
18
|
+
[propName: string]: unknown;
|
|
19
|
+
}> = {
|
|
20
|
+
name: string;
|
|
21
|
+
active: boolean;
|
|
22
|
+
width: number;
|
|
23
|
+
fixed?: 'left' | 'right';
|
|
24
|
+
resizable?: boolean;
|
|
25
|
+
sortable?: boolean | SortDirection;
|
|
26
|
+
sortDirection: SortDirection;
|
|
27
|
+
cssVar: string | string[];
|
|
28
|
+
data?: unknown;
|
|
29
|
+
props: {
|
|
30
|
+
name: string;
|
|
31
|
+
} & Partial<{
|
|
32
|
+
onClick: (event: React.MouseEvent) => void;
|
|
33
|
+
onKeyDown: (event: React.KeyboardEvent) => void;
|
|
34
|
+
ref: React.RefObject<HTMLElement>;
|
|
35
|
+
style: React.CSSProperties;
|
|
36
|
+
fixed: 'left' | 'right';
|
|
37
|
+
children: React.ReactNode[];
|
|
38
|
+
resizable: boolean;
|
|
39
|
+
sortable: boolean | SortDirection;
|
|
40
|
+
sortDirection: SortDirection;
|
|
41
|
+
}> & Props;
|
|
42
|
+
columns: Column[];
|
|
43
|
+
};
|
|
44
|
+
export declare type Cell = Pick<Column, 'name' | 'cssVar' | 'fixed' | 'data'> & {
|
|
45
|
+
cellPropsLayers: PropsLayer[];
|
|
46
|
+
};
|
|
47
|
+
export declare type RowData<Data extends {
|
|
48
|
+
[columnName: string]: unknown;
|
|
49
|
+
} = {
|
|
50
|
+
[columnName: string]: unknown;
|
|
51
|
+
}> = Data & Partial<{
|
|
52
|
+
name: string;
|
|
53
|
+
[ROW_GROUP]: RowData[];
|
|
54
|
+
}>;
|
|
55
|
+
export declare type NestedCells = (Cell | NestedCells)[] & {
|
|
56
|
+
flatRowData?: RowData;
|
|
57
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Column } from './types';
|
|
2
|
+
export declare const getScrollOffsetValue: (columns: Column[]) => [leftOffset: number, rightOffset: number];
|
|
3
|
+
export declare const flattenColumns: (columns: Column[]) => Column<{
|
|
4
|
+
[propName: string]: unknown;
|
|
5
|
+
}>[];
|
|
6
|
+
export declare const getFixedStyle: (cell: Pick<Column, 'name' | 'fixed'>, columns: Column[]) => [side: "left" | "right", style: string | number] | [side: undefined, style: undefined];
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/data-table",
|
|
3
3
|
"description": "SEMRush DataTable Component",
|
|
4
|
-
"version": "2.2.
|
|
4
|
+
"version": "2.2.6",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"author": "Roman Lysov <r.lysov@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"scripts": {
|
|
12
|
-
"build": "build --source=
|
|
12
|
+
"build": "build --source=ts",
|
|
13
13
|
"test": "jest"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
package/src/Body.tsx
CHANGED
|
@@ -55,7 +55,12 @@ class Body extends Component<AsProps, State> {
|
|
|
55
55
|
const { styles, columns, use } = this.asProps;
|
|
56
56
|
return cells.map((cell) => {
|
|
57
57
|
if (Array.isArray(cell)) {
|
|
58
|
-
|
|
58
|
+
const SGroupCell = 'div';
|
|
59
|
+
return sstyled(styles)(
|
|
60
|
+
<SGroupCell data-ui-name="group-cell">
|
|
61
|
+
{this.renderRows(cell as NestedCells[])}
|
|
62
|
+
</SGroupCell>,
|
|
63
|
+
);
|
|
59
64
|
} else {
|
|
60
65
|
const column = columns.find((c) => c.name === cell.name);
|
|
61
66
|
const [name, value] = getFixedStyle(cell, columns);
|
package/src/Head.tsx
CHANGED
|
@@ -8,7 +8,7 @@ import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
|
|
|
8
8
|
import { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';
|
|
9
9
|
import type { Column } from './types';
|
|
10
10
|
import logger from '@semcore/utils/lib/logger';
|
|
11
|
-
import
|
|
11
|
+
import 'resize-observer-polyfill';
|
|
12
12
|
|
|
13
13
|
import scrollStyles from './style/scroll-area.shadow.css';
|
|
14
14
|
|
|
@@ -149,8 +149,9 @@ SRow {
|
|
|
149
149
|
}
|
|
150
150
|
|
|
151
151
|
/* DEFAULT THEME */
|
|
152
|
-
SRow[active] SCell:not([theme]),
|
|
153
|
-
SRow:hover SCell:not([theme])
|
|
152
|
+
SRow[active] > SCell:not([theme]),
|
|
153
|
+
SRow:hover > SCell:not([theme]),
|
|
154
|
+
SRow SCell:hover + SGroupCell SCell:not([theme]) {
|
|
154
155
|
background-color: #f6f7f7;
|
|
155
156
|
}
|
|
156
157
|
|
|
@@ -159,9 +160,10 @@ SRow[theme='muted'] SCell:not([theme]) {
|
|
|
159
160
|
background-color: #f2f3f4;
|
|
160
161
|
}
|
|
161
162
|
|
|
162
|
-
SRow:hover SCell[theme='muted'],
|
|
163
|
-
SRow[theme='muted'][active] SCell:not([theme]),
|
|
164
|
-
SRow[theme='muted']:hover SCell:not([theme])
|
|
163
|
+
SRow:hover > SCell[theme='muted'],
|
|
164
|
+
SRow[theme='muted'][active] > SCell:not([theme]),
|
|
165
|
+
SRow[theme='muted']:hover > SCell:not([theme]),
|
|
166
|
+
SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
|
|
165
167
|
background-color: #f6f7f7;
|
|
166
168
|
}
|
|
167
169
|
|
|
@@ -170,9 +172,10 @@ SRow[theme='info'] SCell:not([theme]) {
|
|
|
170
172
|
background-color: color-mod(var(--light-blue) blend(#fff 80%));
|
|
171
173
|
}
|
|
172
174
|
|
|
173
|
-
SRow:hover SCell[theme='info'],
|
|
174
|
-
SRow[theme='info'][active] SCell:not([theme]),
|
|
175
|
-
SRow[theme='info']:hover SCell:not([theme])
|
|
175
|
+
SRow:hover > SCell[theme='info'],
|
|
176
|
+
SRow[theme='info'][active] > SCell:not([theme]),
|
|
177
|
+
SRow[theme='info']:hover > SCell:not([theme]),
|
|
178
|
+
SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
|
|
176
179
|
background-color: color-mod(var(--light-blue) blend(#fff 75%));
|
|
177
180
|
}
|
|
178
181
|
|
|
@@ -181,9 +184,10 @@ SRow[theme='success'] SCell:not([theme]) {
|
|
|
181
184
|
background-color: color-mod(var(--green) blend(#fff 85%));
|
|
182
185
|
}
|
|
183
186
|
|
|
184
|
-
SRow:hover SCell[theme='success'],
|
|
185
|
-
SRow[theme='success'][active] SCell:not([theme]),
|
|
186
|
-
SRow[theme='success']:hover SCell:not([theme])
|
|
187
|
+
SRow:hover > SCell[theme='success'],
|
|
188
|
+
SRow[theme='success'][active] > SCell:not([theme]),
|
|
189
|
+
SRow[theme='success']:hover > SCell:not([theme]),
|
|
190
|
+
SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
|
|
187
191
|
background-color: color-mod(var(--green) blend(#fff 80%));
|
|
188
192
|
}
|
|
189
193
|
|
|
@@ -192,9 +196,10 @@ SRow[theme='warning'] SCell:not([theme]) {
|
|
|
192
196
|
background-color: color-mod(var(--light-orange) blend(#fff 85%));
|
|
193
197
|
}
|
|
194
198
|
|
|
195
|
-
SRow:hover SCell[theme='warning'],
|
|
196
|
-
SRow[theme='warning'][active] SCell:not([theme]),
|
|
197
|
-
SRow[theme='warning']:hover SCell:not([theme])
|
|
199
|
+
SRow:hover > SCell[theme='warning'],
|
|
200
|
+
SRow[theme='warning'][active] > SCell:not([theme]),
|
|
201
|
+
SRow[theme='warning']:hover > SCell:not([theme]),
|
|
202
|
+
SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
|
|
198
203
|
background-color: color-mod(var(--light-orange) blend(#fff 80%));
|
|
199
204
|
}
|
|
200
205
|
|
|
@@ -203,9 +208,10 @@ SRow[theme='danger'] SCell:not([theme]) {
|
|
|
203
208
|
background-color: color-mod(var(--red) blend(#fff 90%));
|
|
204
209
|
}
|
|
205
210
|
|
|
206
|
-
SRow:hover SCell[theme='danger'],
|
|
207
|
-
SRow[theme='danger'][active] SCell:not([theme]),
|
|
208
|
-
SRow[theme='danger']:hover SCell:not([theme])
|
|
211
|
+
SRow:hover > SCell[theme='danger'],
|
|
212
|
+
SRow[theme='danger'][active] > SCell:not([theme]),
|
|
213
|
+
SRow[theme='danger']:hover > SCell:not([theme]),
|
|
214
|
+
SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
|
|
209
215
|
background-color: color-mod(var(--red) blend(#fff 85%));
|
|
210
216
|
}
|
|
211
217
|
|
|
@@ -216,6 +222,7 @@ SRow[positioned] {
|
|
|
216
222
|
SCell {
|
|
217
223
|
display: flex;
|
|
218
224
|
flex: 1;
|
|
225
|
+
flex-basis: auto;
|
|
219
226
|
font-size: 14px;
|
|
220
227
|
color: var(--gray20);
|
|
221
228
|
line-height: 20px;
|