@synerise/ds-table 1.7.8 → 1.8.0
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 +6 -0
- package/dist/Cell/AvatarLabel/AvatarLabel.d.ts +1 -1
- package/dist/Cell/AvatarLabel/AvatarLabel.js +3 -1
- package/dist/Cell/AvatarLabel/AvatarLabel.styles.d.ts +1 -0
- package/dist/Cell/AvatarLabel/AvatarLabel.styles.js +3 -1
- package/dist/Cell/AvatarLabel/AvatarLabel.types.d.ts +1 -0
- package/dist/Cell/StatusLabel/StatusLabel.d.ts +1 -1
- package/dist/Cell/StatusLabel/StatusLabel.js +6 -2
- package/dist/Cell/StatusLabel/StatusLabel.styles.d.ts +3 -1
- package/dist/Cell/StatusLabel/StatusLabel.styles.js +3 -1
- package/dist/Cell/StatusLabel/StatusLabel.types.d.ts +1 -0
- package/dist/DefaultTable/DefaultTable.js +12 -6
- package/dist/RowSelection/RowSelectionColumn.d.ts +1 -1
- package/dist/RowSelection/RowSelectionColumn.js +9 -7
- package/dist/RowSelection/RowSelectionColumn.types.d.ts +1 -0
- package/dist/Table.types.d.ts +4 -0
- package/dist/VirtualTable/VirtualTable.js +4 -1
- package/dist/VirtualTable/VirtualTableRow.d.ts +3 -1
- package/dist/VirtualTable/VirtualTableRow.js +14 -6
- package/dist/utils/columnWithCellTooltip.d.ts +2 -0
- package/dist/utils/columnWithCellTooltip.js +19 -0
- package/package.json +24 -24
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [1.8.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@1.7.8...@synerise/ds-table@1.8.0) (2026-01-15)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **table:** allow tooltip on rows / cells / selection checkbox ([a86a1b8](https://github.com/synerise/synerise-design/commit/a86a1b8fb520fbfe89049c29e375fe8818cb029e))
|
|
11
|
+
|
|
6
12
|
## [1.7.8](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@1.7.7...@synerise/ds-table@1.7.8) (2026-01-12)
|
|
7
13
|
|
|
8
14
|
**Note:** Version bump only for package @synerise/ds-table
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type AvatarLabelProps } from './AvatarLabel.types';
|
|
3
|
-
declare const AvatarLabel: ({ avatar, avatarAction, avatarLink, title, labels, icon, ellipsis, maxWidth, avatarSize, loader, ...htmlAttributes }: AvatarLabelProps) => React.JSX.Element;
|
|
3
|
+
declare const AvatarLabel: ({ avatar, avatarAction, avatarLink, title, labels, icon, ellipsis, maxWidth, avatarSize, loader, disabled, ...htmlAttributes }: AvatarLabelProps) => React.JSX.Element;
|
|
4
4
|
export default AvatarLabel;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["avatar", "avatarAction", "avatarLink", "title", "labels", "icon", "ellipsis", "maxWidth", "avatarSize", "loader"];
|
|
1
|
+
var _excluded = ["avatar", "avatarAction", "avatarLink", "title", "labels", "icon", "ellipsis", "maxWidth", "avatarSize", "loader", "disabled"];
|
|
2
2
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
3
3
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
4
4
|
import React from 'react';
|
|
@@ -15,6 +15,7 @@ var AvatarLabel = function AvatarLabel(_ref) {
|
|
|
15
15
|
maxWidth = _ref.maxWidth,
|
|
16
16
|
avatarSize = _ref.avatarSize,
|
|
17
17
|
loader = _ref.loader,
|
|
18
|
+
disabled = _ref.disabled,
|
|
18
19
|
htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
19
20
|
var titleEllipsisProps = ellipsis ? {
|
|
20
21
|
ellipsis: {
|
|
@@ -43,6 +44,7 @@ var AvatarLabel = function AvatarLabel(_ref) {
|
|
|
43
44
|
}, label);
|
|
44
45
|
})), loader && /*#__PURE__*/React.createElement(S.Loader, null, loader)));
|
|
45
46
|
return /*#__PURE__*/React.createElement(S.AvatarLabel, _extends({}, htmlAttributes, {
|
|
47
|
+
isDisabled: disabled,
|
|
46
48
|
onClick: avatarAction
|
|
47
49
|
}), avatarLink ? /*#__PURE__*/React.createElement(S.AvatarLink, {
|
|
48
50
|
href: avatarLink,
|
|
@@ -3,7 +3,9 @@ import { Text } from '@synerise/ds-typography';
|
|
|
3
3
|
export var AvatarLabel = styled.div.withConfig({
|
|
4
4
|
displayName: "AvatarLabelstyles__AvatarLabel",
|
|
5
5
|
componentId: "sc-1485c9p-0"
|
|
6
|
-
})(["display:inline-flex;min-width:0;align-items:center;justify-content:flex-start;max-width:100%;", ";"], function (props) {
|
|
6
|
+
})(["display:inline-flex;min-width:0;align-items:center;justify-content:flex-start;max-width:100%;", ";", ";"], function (props) {
|
|
7
|
+
return props.isDisabled && 'opacity: 0.4';
|
|
8
|
+
}, function (props) {
|
|
7
9
|
return props.onClick !== undefined ? 'cursor: pointer' : '';
|
|
8
10
|
});
|
|
9
11
|
export var Avatar = styled.div.withConfig({
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { StatusLabelProps } from './StatusLabel.types';
|
|
3
|
-
declare const StatusLabelCell: ({ status, label, customColor, ...htmlAttributes }: StatusLabelProps) => React.JSX.Element;
|
|
3
|
+
declare const StatusLabelCell: ({ status, label, customColor, disabled, ...htmlAttributes }: StatusLabelProps) => React.JSX.Element;
|
|
4
4
|
export default StatusLabelCell;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
var _excluded = ["status", "label", "customColor"];
|
|
1
|
+
var _excluded = ["status", "label", "customColor", "disabled"];
|
|
2
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
3
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
3
4
|
import React from 'react';
|
|
4
5
|
import Badge from '@synerise/ds-badge';
|
|
@@ -7,8 +8,11 @@ var StatusLabelCell = function StatusLabelCell(_ref) {
|
|
|
7
8
|
var status = _ref.status,
|
|
8
9
|
label = _ref.label,
|
|
9
10
|
customColor = _ref.customColor,
|
|
11
|
+
disabled = _ref.disabled,
|
|
10
12
|
htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
11
|
-
return /*#__PURE__*/React.createElement(S.StatusLabel,
|
|
13
|
+
return /*#__PURE__*/React.createElement(S.StatusLabel, _extends({
|
|
14
|
+
isDisabled: disabled
|
|
15
|
+
}, htmlAttributes), /*#__PURE__*/React.createElement(Badge, {
|
|
12
16
|
customColor: customColor,
|
|
13
17
|
status: status
|
|
14
18
|
}), /*#__PURE__*/React.createElement(S.Label, null, label));
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
export declare const StatusLabel: import("styled-components").StyledComponent<"div", any, {
|
|
1
|
+
export declare const StatusLabel: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
isDisabled?: boolean;
|
|
3
|
+
}, never>;
|
|
2
4
|
export declare const Label: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
@@ -2,7 +2,9 @@ import styled from 'styled-components';
|
|
|
2
2
|
export var StatusLabel = styled.div.withConfig({
|
|
3
3
|
displayName: "StatusLabelstyles__StatusLabel",
|
|
4
4
|
componentId: "sc-1l5c32z-0"
|
|
5
|
-
})(["display:flex;align-items:center;justify-content:flex-start;"])
|
|
5
|
+
})(["display:flex;align-items:center;justify-content:flex-start;", ""], function (props) {
|
|
6
|
+
return props.isDisabled && 'opacity: 0.4;';
|
|
7
|
+
});
|
|
6
8
|
export var Label = styled.span.withConfig({
|
|
7
9
|
displayName: "StatusLabelstyles__Label",
|
|
8
10
|
componentId: "sc-1l5c32z-1"
|
|
@@ -6,6 +6,7 @@ import { compact, isEqual } from 'lodash';
|
|
|
6
6
|
import React, { useCallback, useEffect, useMemo } from 'react';
|
|
7
7
|
import { FormattedMessage } from 'react-intl';
|
|
8
8
|
import Result from '@synerise/ds-result';
|
|
9
|
+
import Tooltip from '@synerise/ds-tooltip';
|
|
9
10
|
import { usePrevious } from '@synerise/ds-utils';
|
|
10
11
|
import { columnWithSortButtons } from '../ColumnSortMenu/columnWithSortButtons';
|
|
11
12
|
import { columnsToSortState, useSortState } from '../ColumnSortMenu/useSortState';
|
|
@@ -13,6 +14,7 @@ import { RowSelectionColumn } from '../RowSelection';
|
|
|
13
14
|
import { useRowKey } from '../hooks/useRowKey';
|
|
14
15
|
import { useRowStar } from '../hooks/useRowStar/useRowStar';
|
|
15
16
|
import { getChildrenColumnName, isRecordSelectable } from '../utils';
|
|
17
|
+
import { columnWithCellTooltip } from '../utils/columnWithCellTooltip';
|
|
16
18
|
function DefaultTable(props) {
|
|
17
19
|
var _selection$selections;
|
|
18
20
|
var title = props.title,
|
|
@@ -25,7 +27,8 @@ function DefaultTable(props) {
|
|
|
25
27
|
components = props.components,
|
|
26
28
|
columns = props.columns,
|
|
27
29
|
onSort = props.onSort,
|
|
28
|
-
emptyDataComponent = props.emptyDataComponent
|
|
30
|
+
emptyDataComponent = props.emptyDataComponent,
|
|
31
|
+
getRowTooltipProps = props.getRowTooltipProps;
|
|
29
32
|
var previousColumns = usePrevious(columns);
|
|
30
33
|
var sortStateApi = useSortState(columnsToSortState(columns), onSort);
|
|
31
34
|
var _useRowStar = useRowStar((rowStar == null ? void 0 : rowStar.starredRowKeys) || []),
|
|
@@ -52,9 +55,9 @@ function DefaultTable(props) {
|
|
|
52
55
|
sortStateApi.updateColumnsData(columnsToSortState(columns));
|
|
53
56
|
}
|
|
54
57
|
}, [columns, previousColumns, sortStateApi]);
|
|
55
|
-
|
|
58
|
+
var RenderRow = useCallback(
|
|
56
59
|
// @ts-expect-error Parameter 'row' implicitly has an 'any' type.ts(7006)
|
|
57
|
-
|
|
60
|
+
function (row) {
|
|
58
61
|
var children = row.children,
|
|
59
62
|
rowProps = _objectWithoutPropertiesLoose(row, _excluded);
|
|
60
63
|
var classNameWithLevel = row.className.split(' ').find(function (name) {
|
|
@@ -64,13 +67,16 @@ function DefaultTable(props) {
|
|
|
64
67
|
if (classNameWithLevel) {
|
|
65
68
|
level = classNameWithLevel.split('-').pop();
|
|
66
69
|
}
|
|
67
|
-
|
|
70
|
+
var tooltipProps = getRowTooltipProps == null ? void 0 : getRowTooltipProps(row);
|
|
71
|
+
var rowContent = /*#__PURE__*/React.createElement("tr", _extends({}, rowProps, {
|
|
68
72
|
className: row.className + " ds-table-row " + (level ? "ds-table-row-level-" + level : '')
|
|
69
73
|
}), children);
|
|
70
|
-
|
|
74
|
+
return tooltipProps ? /*#__PURE__*/React.createElement(Tooltip, tooltipProps, rowContent) : rowContent;
|
|
75
|
+
}, [getRowTooltipProps]);
|
|
71
76
|
var prependedColumns = compact([!!rowStar && starColumn]);
|
|
72
77
|
var decoratedColumns = columns == null ? void 0 : columns.map(function (column) {
|
|
73
|
-
|
|
78
|
+
var columnsWithCellTooltips = columnWithCellTooltip(column);
|
|
79
|
+
return columnWithSortButtons(sortStateApi, onSort)(columnsWithCellTooltips);
|
|
74
80
|
});
|
|
75
81
|
var decoratedComponents = components && Object.entries(components).map(function (_ref) {
|
|
76
82
|
var key = _ref[0],
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type RowType } from '../Table.types';
|
|
3
3
|
import { type RowSelectionProps } from './RowSelectionColumn.types';
|
|
4
|
-
export declare function RowSelectionColumn<T extends object & RowType<T>>({ rowKey, record, limit, independentSelectionExpandedRows, isGlobalAllSelected, selectedRowKeys, selectedRecords, tableLocale, onChange, checkRowSelectionStatus, childrenColumnName, }: RowSelectionProps<T>): React.JSX.Element | null;
|
|
4
|
+
export declare function RowSelectionColumn<T extends object & RowType<T>>({ rowKey, record, limit, independentSelectionExpandedRows, isGlobalAllSelected, selectedRowKeys, selectedRecords, tableLocale, onChange, checkRowSelectionStatus, childrenColumnName, getSelectionTooltipProps, }: RowSelectionProps<T>): React.JSX.Element | null;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
1
2
|
import React, { useCallback, useMemo } from 'react';
|
|
2
3
|
import Button from '@synerise/ds-button';
|
|
3
|
-
import Tooltip from '@synerise/ds-tooltip';
|
|
4
4
|
import { useRowKey } from '../hooks/useRowKey';
|
|
5
5
|
import { getRecordSelectionStatus, isRecordSelectable } from '../utils';
|
|
6
6
|
export function RowSelectionColumn(_ref) {
|
|
@@ -14,7 +14,8 @@ export function RowSelectionColumn(_ref) {
|
|
|
14
14
|
tableLocale = _ref.tableLocale,
|
|
15
15
|
onChange = _ref.onChange,
|
|
16
16
|
checkRowSelectionStatus = _ref.checkRowSelectionStatus,
|
|
17
|
-
childrenColumnName = _ref.childrenColumnName
|
|
17
|
+
childrenColumnName = _ref.childrenColumnName,
|
|
18
|
+
getSelectionTooltipProps = _ref.getSelectionTooltipProps;
|
|
18
19
|
var _useRowKey = useRowKey(rowKey),
|
|
19
20
|
getRowKey = _useRowKey.getRowKey;
|
|
20
21
|
var recordKey = getRowKey(record);
|
|
@@ -82,20 +83,21 @@ export function RowSelectionColumn(_ref) {
|
|
|
82
83
|
unavailable = _getRecordSelectionSt.unavailable,
|
|
83
84
|
disabled = _getRecordSelectionSt.disabled;
|
|
84
85
|
var disabledProp = isGlobalAllSelected || !isChecked && Boolean(limit !== undefined && limit <= selectedRowKeys.length) || disabled;
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
mouseLeaveDelay: 0
|
|
88
|
-
}, /*#__PURE__*/React.createElement(Button.Checkbox, {
|
|
86
|
+
var recordTooltip = getSelectionTooltipProps == null ? void 0 : getSelectionTooltipProps(record);
|
|
87
|
+
return recordKey !== undefined && !unavailable ? /*#__PURE__*/React.createElement(Button.Checkbox, {
|
|
89
88
|
key: "checkbox-" + recordKey,
|
|
90
89
|
"data-testid": "ds-table-selection-button",
|
|
91
90
|
checked: isGlobalAllSelected || isChecked,
|
|
92
91
|
disabled: disabledProp,
|
|
93
92
|
indeterminate: isIndeterminate,
|
|
93
|
+
tooltipProps: _extends({
|
|
94
|
+
title: tableLocale == null ? void 0 : tableLocale.selectRowTooltip
|
|
95
|
+
}, recordTooltip),
|
|
94
96
|
onClick: function onClick(event) {
|
|
95
97
|
event.stopPropagation();
|
|
96
98
|
},
|
|
97
99
|
onChange: function onChange(isCheckedNext) {
|
|
98
100
|
return !isGlobalAllSelected && handleSelectionChange(isCheckedNext, record);
|
|
99
101
|
}
|
|
100
|
-
})
|
|
102
|
+
}) : null;
|
|
101
103
|
}
|
|
@@ -11,6 +11,7 @@ export type RowSelectionProps<T> = {
|
|
|
11
11
|
record: T;
|
|
12
12
|
tableLocale: DSTableProps<T>['locale'];
|
|
13
13
|
onChange: RowSelection<T>['onChange'];
|
|
14
|
+
getSelectionTooltipProps?: RowSelection<T>['getSelectionTooltipProps'];
|
|
14
15
|
checkRowSelectionStatus?: RowSelection<T>['checkRowSelectionStatus'];
|
|
15
16
|
childrenColumnName: keyof T;
|
|
16
17
|
};
|
package/dist/Table.types.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import type { ColumnType, TableProps } from 'antd/lib/table';
|
|
|
2
2
|
import type { ColumnTitleProps, TableLocale, TableRowSelection } from 'antd/lib/table/interface';
|
|
3
3
|
import type { SELECTION_ALL, SELECTION_INVERT } from 'constants/Table.constants';
|
|
4
4
|
import type { Key, ReactNode, Ref } from 'react';
|
|
5
|
+
import { type TooltipProps } from '@synerise/ds-tooltip';
|
|
5
6
|
import type { LiteralStringUnion } from '@synerise/ds-utils';
|
|
6
7
|
import type { GroupType } from './GroupTable/GroupTable.types';
|
|
7
8
|
export type RowStar<T> = {
|
|
@@ -41,6 +42,7 @@ export type RowSelection<T> = Omit<TableRowSelection<T>, 'selections'> & {
|
|
|
41
42
|
disabled?: boolean;
|
|
42
43
|
unavailable?: boolean;
|
|
43
44
|
};
|
|
45
|
+
getSelectionTooltipProps?: (record: T) => TooltipProps | false;
|
|
44
46
|
};
|
|
45
47
|
export type Filter = {
|
|
46
48
|
tooltips: {
|
|
@@ -95,6 +97,7 @@ export type DSColumnType<T> = Omit<ColumnType<T>, 'fixed'> & {
|
|
|
95
97
|
fixed?: 'left' | 'right';
|
|
96
98
|
sortRender?: SortRender<T>;
|
|
97
99
|
childRender?: (value: unknown, row: T, index: number) => ReactNode;
|
|
100
|
+
getCellTooltipProps?: (row: T) => TooltipProps | false;
|
|
98
101
|
};
|
|
99
102
|
export type ScrollProxyType = {
|
|
100
103
|
scrollLeft: number;
|
|
@@ -152,6 +155,7 @@ export type DSTableProps<T extends any & GroupType<T>> = AntTableProps<T> & {
|
|
|
152
155
|
dataSourceTotalCount?: number;
|
|
153
156
|
isCounterLoading?: boolean;
|
|
154
157
|
renderCustomCounter?: CustomCounterFn;
|
|
158
|
+
getRowTooltipProps?: (row: T) => TooltipProps | false;
|
|
155
159
|
skeletonProps?: {
|
|
156
160
|
maxHeight?: number;
|
|
157
161
|
headerHeight?: number;
|
|
@@ -45,6 +45,7 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
|
|
|
45
45
|
locale = props.locale,
|
|
46
46
|
loading = props.loading,
|
|
47
47
|
sticky = props.sticky,
|
|
48
|
+
getRowTooltipProps = props.getRowTooltipProps,
|
|
48
49
|
onListRefChange = props.onListRefChange,
|
|
49
50
|
onItemsRendered = props.onItemsRendered,
|
|
50
51
|
onScrollToRecordIndex = props.onScrollToRecordIndex;
|
|
@@ -218,6 +219,7 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
|
|
|
218
219
|
selectedRecords: selectedRecords,
|
|
219
220
|
isGlobalAllSelected: selection == null || (_selection$globalSele = selection.globalSelection) == null ? void 0 : _selection$globalSele.isSelected,
|
|
220
221
|
tableLocale: locale,
|
|
222
|
+
getSelectionTooltipProps: selection == null ? void 0 : selection.getSelectionTooltipProps,
|
|
221
223
|
checkRowSelectionStatus: checkRowSelectionStatus,
|
|
222
224
|
childrenColumnName: childrenColumnName
|
|
223
225
|
});
|
|
@@ -325,12 +327,13 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
|
|
|
325
327
|
selection: selection,
|
|
326
328
|
rowStar: rowStar,
|
|
327
329
|
onRowClick: onRowClick,
|
|
330
|
+
getRowTooltipProps: getRowTooltipProps,
|
|
328
331
|
dataSource: data,
|
|
329
332
|
infiniteScroll: infiniteScroll,
|
|
330
333
|
cellHeight: cellHeight,
|
|
331
334
|
defaultTableProps: defaultTableProps
|
|
332
335
|
};
|
|
333
|
-
}, [mergedColumns, selection, rowStar, onRowClick, infiniteScroll, cellHeight]);
|
|
336
|
+
}, [mergedColumns, getRowTooltipProps, selection, rowStar, onRowClick, infiniteScroll, cellHeight]);
|
|
334
337
|
var offsetScroll = sticky && sticky !== true ? sticky.offsetScroll : 0;
|
|
335
338
|
var offsetStickyHeader = sticky && sticky !== true ? sticky.offsetHeader : 0;
|
|
336
339
|
var connectObject = useMemo(function () {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { type CSSProperties, type ReactElement } from 'react';
|
|
2
|
+
import { type TooltipProps } from '@synerise/ds-tooltip';
|
|
2
3
|
import type { InfiniteScrollProps } from '../InfiniteScroll/InfiniteLoaderItem.types';
|
|
3
4
|
import { type DSTableProps, type RowSelection, type RowStar } from '../Table.types';
|
|
4
5
|
export declare const INFINITE_LOADED_ITEM_HEIGHT = 64;
|
|
@@ -11,11 +12,12 @@ export interface VirtualTableRowProps<T> {
|
|
|
11
12
|
selection?: RowSelection<T>;
|
|
12
13
|
rowStar?: RowStar<T>;
|
|
13
14
|
onRowClick?: (row: T) => void;
|
|
15
|
+
getRowTooltipProps?: (row: T) => TooltipProps | false;
|
|
14
16
|
defaultTableProps?: DSTableProps<T>;
|
|
15
17
|
};
|
|
16
18
|
index: number;
|
|
17
19
|
style: CSSProperties;
|
|
18
20
|
}
|
|
19
|
-
declare function VirtualTableRow<T extends object>({ index, style, data: { mergedColumns, onRowClick, selection, rowStar, dataSource, cellHeight, infiniteScroll, defaultTableProps, }, }: VirtualTableRowProps<T>): ReactElement;
|
|
21
|
+
declare function VirtualTableRow<T extends object>({ index, style, data: { mergedColumns, onRowClick, selection, rowStar, getRowTooltipProps, dataSource, cellHeight, infiniteScroll, defaultTableProps, }, }: VirtualTableRowProps<T>): ReactElement;
|
|
20
22
|
declare const _default: React.MemoExoticComponent<typeof VirtualTableRow>;
|
|
21
23
|
export default _default;
|
|
@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import React, { memo, useCallback, useMemo } from 'react';
|
|
4
4
|
import { areEqual } from 'react-window';
|
|
5
|
+
import Tooltip from '@synerise/ds-tooltip';
|
|
5
6
|
import InfiniteLoaderItem from '../InfiniteScroll/InfiniteLoaderItem';
|
|
6
7
|
import { calculatePixels, getValueFromPath } from '../utils';
|
|
7
8
|
import * as S from './VirtualTable.styles';
|
|
@@ -24,6 +25,7 @@ function VirtualTableRow(_ref) {
|
|
|
24
25
|
onRowClick = _ref$data.onRowClick,
|
|
25
26
|
selection = _ref$data.selection,
|
|
26
27
|
rowStar = _ref$data.rowStar,
|
|
28
|
+
getRowTooltipProps = _ref$data.getRowTooltipProps,
|
|
27
29
|
dataSource = _ref$data.dataSource,
|
|
28
30
|
cellHeight = _ref$data.cellHeight,
|
|
29
31
|
infiniteScroll = _ref$data.infiniteScroll,
|
|
@@ -67,12 +69,14 @@ function VirtualTableRow(_ref) {
|
|
|
67
69
|
}));
|
|
68
70
|
}, [cellHeight, dataSource.length, index, infiniteScroll, style]);
|
|
69
71
|
var top = infiniteScroll != null && (_infiniteScroll$prevP3 = infiniteScroll.prevPage) != null && _infiniteScroll$prevP3.hasMore ? Number(style.top) + INFINITE_LOADED_ITEM_HEIGHT + "px" : style.top;
|
|
70
|
-
|
|
72
|
+
var rowProps = (defaultTableProps == null || defaultTableProps.onRow == null ? void 0 : defaultTableProps.onRow(rowData)) || {};
|
|
73
|
+
var rowContent = /*#__PURE__*/React.createElement(S.RowWrapper, _extends({
|
|
71
74
|
"data-row-index": index,
|
|
72
75
|
className: classNames('virtual-table-row', {
|
|
73
76
|
'ds-expanded-row': rowData[EXPANDED_ROW_PROPERTY]
|
|
74
|
-
})
|
|
75
|
-
|
|
77
|
+
})
|
|
78
|
+
}, rowProps, {
|
|
79
|
+
style: _extends({}, style, rowProps == null ? void 0 : rowProps.style, {
|
|
76
80
|
top: top
|
|
77
81
|
}),
|
|
78
82
|
onClick: function onClick(event) {
|
|
@@ -80,12 +84,13 @@ function VirtualTableRow(_ref) {
|
|
|
80
84
|
onRowClick && onRowClick(rowData);
|
|
81
85
|
},
|
|
82
86
|
onRowClickAvailable: onRowClick !== undefined
|
|
83
|
-
}, mergedColumns.map(function (column, columnIndex) {
|
|
87
|
+
}), mergedColumns.map(function (column, columnIndex) {
|
|
84
88
|
var firstWithSelectionAndStar = selection && rowStar && columnIndex === 2;
|
|
85
89
|
var firstWithSelectionOrStar = (selection || rowStar) && columnIndex === 1;
|
|
86
90
|
var firstWithoutSelectionAndStar = columnIndex === 0 && !selection && !rowStar;
|
|
87
91
|
var columnTitle = typeof column.title === 'string' ? column.title : column.dataIndex || column.key;
|
|
88
|
-
|
|
92
|
+
var cellTooltip = column.getCellTooltipProps == null ? void 0 : column.getCellTooltipProps(rowData);
|
|
93
|
+
var cellContent = /*#__PURE__*/React.createElement(S.ColWrapper, {
|
|
89
94
|
left: column.fixed === 'left' ? column.left : undefined,
|
|
90
95
|
right: column.fixed === 'right' ? column.right : undefined,
|
|
91
96
|
className: classNames('virtual-table-cell', {
|
|
@@ -105,6 +110,9 @@ function VirtualTableRow(_ref) {
|
|
|
105
110
|
width: column.width,
|
|
106
111
|
maxWidth: calculateToPixelsIfDefined(column == null ? void 0 : column.maxWidth)
|
|
107
112
|
}, /*#__PURE__*/React.createElement(React.Fragment, null, renderColumn(column, rowData, columnIndex)));
|
|
108
|
-
|
|
113
|
+
return cellTooltip ? /*#__PURE__*/React.createElement(Tooltip, cellTooltip, cellContent) : cellContent;
|
|
114
|
+
}));
|
|
115
|
+
var rowTooltipProps = getRowTooltipProps == null ? void 0 : getRowTooltipProps(rowData);
|
|
116
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, infiniteLoader('TOP'), rowTooltipProps ? /*#__PURE__*/React.createElement(Tooltip, rowTooltipProps, rowContent) : rowContent, infiniteLoader('BOTTOM'));
|
|
109
117
|
}
|
|
110
118
|
export default /*#__PURE__*/memo(VirtualTableRow, areEqual);
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import Tooltip from '@synerise/ds-tooltip';
|
|
4
|
+
import { EXPANDED_ROW_PROPERTY } from '../VirtualTable/constants';
|
|
5
|
+
import { getValueFromPath } from './getValueFromPath';
|
|
6
|
+
export var columnWithCellTooltip = function columnWithCellTooltip(column) {
|
|
7
|
+
var renderColumn = function renderColumn(value, rowData, columnIndex) {
|
|
8
|
+
var cellTooltip = column.getCellTooltipProps == null ? void 0 : column.getCellTooltipProps(rowData);
|
|
9
|
+
if (rowData[EXPANDED_ROW_PROPERTY] && column.childRender) {
|
|
10
|
+
var _content = column.childRender(getValueFromPath(rowData, column.dataIndex), rowData, columnIndex);
|
|
11
|
+
return cellTooltip ? /*#__PURE__*/React.createElement(Tooltip, cellTooltip, _content) : _content;
|
|
12
|
+
}
|
|
13
|
+
var content = column.render ? column.render(getValueFromPath(rowData, column.dataIndex), rowData, columnIndex) : getValueFromPath(rowData, column.dataIndex);
|
|
14
|
+
return cellTooltip ? /*#__PURE__*/React.createElement(Tooltip, cellTooltip, /*#__PURE__*/React.createElement(React.Fragment, null, content)) : /*#__PURE__*/React.createElement(React.Fragment, null, content);
|
|
15
|
+
};
|
|
16
|
+
return _extends({}, column, {
|
|
17
|
+
render: renderColumn
|
|
18
|
+
});
|
|
19
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-table",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"description": "Table UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "synerise/synerise-design",
|
|
@@ -35,30 +35,30 @@
|
|
|
35
35
|
],
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@synerise/ds-alert": "^1.1.
|
|
39
|
-
"@synerise/ds-badge": "^1.0.
|
|
40
|
-
"@synerise/ds-button": "^1.5.
|
|
41
|
-
"@synerise/ds-button-group": "^1.1.
|
|
42
|
-
"@synerise/ds-checkbox": "^1.2.
|
|
43
|
-
"@synerise/ds-copy-icon": "^1.0.
|
|
44
|
-
"@synerise/ds-dropdown": "^1.1.
|
|
38
|
+
"@synerise/ds-alert": "^1.1.31",
|
|
39
|
+
"@synerise/ds-badge": "^1.0.30",
|
|
40
|
+
"@synerise/ds-button": "^1.5.5",
|
|
41
|
+
"@synerise/ds-button-group": "^1.1.29",
|
|
42
|
+
"@synerise/ds-checkbox": "^1.2.6",
|
|
43
|
+
"@synerise/ds-copy-icon": "^1.0.6",
|
|
44
|
+
"@synerise/ds-dropdown": "^1.1.8",
|
|
45
45
|
"@synerise/ds-flag": "^1.0.6",
|
|
46
|
-
"@synerise/ds-icon": "^1.
|
|
47
|
-
"@synerise/ds-input": "^1.5.
|
|
48
|
-
"@synerise/ds-input-number": "^1.2.
|
|
49
|
-
"@synerise/ds-list-item": "^1.2.
|
|
46
|
+
"@synerise/ds-icon": "^1.10.0",
|
|
47
|
+
"@synerise/ds-input": "^1.5.6",
|
|
48
|
+
"@synerise/ds-input-number": "^1.2.21",
|
|
49
|
+
"@synerise/ds-list-item": "^1.2.6",
|
|
50
50
|
"@synerise/ds-loader": "^1.0.11",
|
|
51
|
-
"@synerise/ds-menu": "^1.2.
|
|
52
|
-
"@synerise/ds-modal": "^1.2.
|
|
53
|
-
"@synerise/ds-result": "^1.0.
|
|
54
|
-
"@synerise/ds-scrollbar": "^1.2.
|
|
55
|
-
"@synerise/ds-search": "^1.3.
|
|
56
|
-
"@synerise/ds-skeleton": "^1.0.
|
|
57
|
-
"@synerise/ds-status": "^1.3.
|
|
58
|
-
"@synerise/ds-tag": "^1.4.
|
|
59
|
-
"@synerise/ds-tags": "^1.5.
|
|
60
|
-
"@synerise/ds-tooltip": "^1.3.
|
|
61
|
-
"@synerise/ds-typography": "^1.0.
|
|
51
|
+
"@synerise/ds-menu": "^1.2.5",
|
|
52
|
+
"@synerise/ds-modal": "^1.2.22",
|
|
53
|
+
"@synerise/ds-result": "^1.0.35",
|
|
54
|
+
"@synerise/ds-scrollbar": "^1.2.5",
|
|
55
|
+
"@synerise/ds-search": "^1.3.15",
|
|
56
|
+
"@synerise/ds-skeleton": "^1.0.30",
|
|
57
|
+
"@synerise/ds-status": "^1.3.5",
|
|
58
|
+
"@synerise/ds-tag": "^1.4.5",
|
|
59
|
+
"@synerise/ds-tags": "^1.5.9",
|
|
60
|
+
"@synerise/ds-tooltip": "^1.3.5",
|
|
61
|
+
"@synerise/ds-typography": "^1.0.28",
|
|
62
62
|
"@synerise/ds-utils": "^1.5.3",
|
|
63
63
|
"@types/react-window": "^1.8.8",
|
|
64
64
|
"classnames": "^2.5.1",
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"react-intl": ">=3.12.0 <= 6.8",
|
|
83
83
|
"styled-components": "^5.3.3"
|
|
84
84
|
},
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "4cde643d1f63a4b47e84707a13b1b1d138730d53"
|
|
86
86
|
}
|