@mezzanine-ui/react 0.13.11 → 0.14.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/Table/TableBodyRow.js +4 -3
- package/Table/TableContext.d.ts +1 -1
- package/Table/TableExpandedTable.js +4 -3
- package/Table/TableHeader.js +1 -1
- package/Table/editable/TableEditRenderWrapper.d.ts +2 -2
- package/Table/editable/TableEditRenderWrapper.js +2 -2
- package/Table/sorting/TableSortingIcon.js +8 -4
- package/Table/sorting/useTableSorting.d.ts +1 -1
- package/Table/sorting/useTableSorting.js +7 -6
- package/package.json +4 -4
package/Table/TableBodyRow.js
CHANGED
|
@@ -53,9 +53,10 @@ const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
|
|
|
53
53
|
minWidth: 'unset',
|
|
54
54
|
}, children: jsx(TableExpandable, { expandable: isExpandable, expanded: expanded, setExpanded: setExpanded, onExpand: (status) => { var _a; return (_a = expanding.onExpand) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData, status); } }) })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column, idx) => {
|
|
55
55
|
var _a, _b, _c, _d;
|
|
56
|
-
const
|
|
57
|
-
const
|
|
58
|
-
|
|
56
|
+
const autoGrabData = column.dataIndex ? get(rowData, column.dataIndex) : '';
|
|
57
|
+
const ellipsis = !!(autoGrabData) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
|
|
58
|
+
const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : autoGrabData);
|
|
59
|
+
return (jsx("td", { className: cx(tableClasses.bodyRowCellWrapper, isFirstColumnShouldSticky && idx === 0 && tableClasses.bodyRowCellWrapperFixed, isFirstColumnShouldSticky && idx === 0 && isHorizontalScrolling && tableClasses.bodyRowCellWrapperFixedStuck, column.bodyClassName), style: getColumnStyle(column), children: jsx(TableEditRenderWrapper, { ...column, rowData: rowData, children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle, children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, rowData, rowIndex, column)) || autoGrabData }) }) }, `${idx + 1}-${(rowData.key || rowData.id)}`));
|
|
59
60
|
})] })) }, rowData.key || rowData.id), renderedExpandedContent ? (jsx("tr", { children: jsx("td", { style: { padding: 0 }, children: jsx(AccordionDetails, { className: cx(expanding.className, tableClasses.bodyRowExpandedTableWrapper), expanded: expanded, children: (renderedExpandedContent === null || renderedExpandedContent === void 0 ? void 0 : renderedExpandedContent.dataSource) ? (jsx(TableExpandedTable, { renderedExpandedContent: renderedExpandedContent })) : renderedExpandedContent }) }) })) : null] }));
|
|
60
61
|
});
|
|
61
62
|
var TableBodyRow$1 = TableBodyRow;
|
package/Table/TableContext.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ export interface RowSelectionContext extends Pick<TableRowSelection, 'actions'>
|
|
|
8
8
|
}
|
|
9
9
|
/** typeof sorting */
|
|
10
10
|
export interface SortingContext {
|
|
11
|
-
onSort(v: Pick<TableColumn<TableRecord<unknown>>, 'dataIndex' | 'sorter' | 'onSorted'>): void;
|
|
11
|
+
onSort(v: Pick<TableColumn<TableRecord<unknown>>, 'key' | 'dataIndex' | 'sorter' | 'onSorted'>): void;
|
|
12
12
|
onResetAll(): void;
|
|
13
13
|
sortedOn: string;
|
|
14
14
|
sortedType: string;
|
|
@@ -15,9 +15,10 @@ const TableExpandedTable = forwardRef(function TableExpandedTable(props, ref) {
|
|
|
15
15
|
return (jsxs("div", { ref: ref, className: cx(tableClasses.bodyRow, tableClasses.bodyRowExpandedTableRow, renderedExpandedContent.className), role: "row", children: [jsx(TableExpandable, { showIcon: false }), ((_a = (renderedExpandedContent.columns || columns)) !== null && _a !== void 0 ? _a : [])
|
|
16
16
|
.map((column, index) => {
|
|
17
17
|
var _a, _b, _c, _d;
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
|
|
18
|
+
const autoGrabData = column.dataIndex ? get(source, column.dataIndex) : '';
|
|
19
|
+
const ellipsis = !!(autoGrabData) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
|
|
20
|
+
const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, source)) !== null && _c !== void 0 ? _c : autoGrabData);
|
|
21
|
+
return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle((columns !== null && columns !== void 0 ? columns : [])[index]), children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle((columns !== null && columns !== void 0 ? columns : [])[index]), tooltipTitle: tooltipTitle || '', children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, source, sourceIndex, column)) || autoGrabData }) }, `${index + 1}`));
|
|
21
22
|
})] }, (source.key || source.id)));
|
|
22
23
|
}) }));
|
|
23
24
|
});
|
package/Table/TableHeader.js
CHANGED
|
@@ -26,7 +26,7 @@ const TableHeader = forwardRef(function TableHeader(props, ref) {
|
|
|
26
26
|
]);
|
|
27
27
|
return (jsx("thead", { className: tableClasses.headerFixed, children: jsxs("tr", { ref: ref, ...rest, className: cx(tableClasses.header, className), children: [rowSelection ? (jsx("th", { "aria-label": "Row Selection", style: { display: 'flex' }, children: jsx(TableRowSelection, { rowKey: SELECTED_ALL_KEY, showDropdownIcon: true }) })) : null, expanding && !rowSelection ? (jsx("th", { "aria-label": "Row Expansion", style: { display: 'flex' }, children: jsx(TableExpandable, { showIcon: false }) })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column, idx) => {
|
|
28
28
|
var _a;
|
|
29
|
-
return (jsx("th", { className: cx(tableClasses.headerCellWrapper, isFirstColumnShouldSticky && idx === 0 && tableClasses.headerCellWrapperFixed, isFirstColumnShouldSticky && idx === 0 && isHorizontalScrolling && tableClasses.headerCellWrapperFixedStuck, column.headerClassName), style: getColumnStyle(column), children: jsxs(TableCell, { ellipsis: false, style: getCellStyle(column), children: [((_a = column.renderTitle) === null || _a === void 0 ? void 0 : _a.call(column, tableClasses)) || column.title, typeof column.sorter === 'function' || typeof column.onSorted === 'function' ? (jsx(TableSortingIcon, { column: column })) : null] }) }, `${
|
|
29
|
+
return (jsx("th", { className: cx(tableClasses.headerCellWrapper, isFirstColumnShouldSticky && idx === 0 && tableClasses.headerCellWrapperFixed, isFirstColumnShouldSticky && idx === 0 && isHorizontalScrolling && tableClasses.headerCellWrapperFixedStuck, column.headerClassName), style: getColumnStyle(column), children: jsxs(TableCell, { ellipsis: false, style: getCellStyle(column), children: [((_a = column.renderTitle) === null || _a === void 0 ? void 0 : _a.call(column, tableClasses)) || column.title, typeof column.sorter === 'function' || typeof column.onSorted === 'function' ? (jsx(TableSortingIcon, { column: column })) : null] }) }, `${idx + 1}`));
|
|
30
30
|
})] }) }));
|
|
31
31
|
});
|
|
32
32
|
var TableHeader$1 = TableHeader;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { TableColumnBase, TableDataSource, TableRecord } from '@mezzanine-ui/core/table';
|
|
3
3
|
import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
|
|
4
|
-
export interface EditableBodyCellProps extends NativeElementPropsWithoutKeyAndRef<'div'>,
|
|
4
|
+
export interface EditableBodyCellProps extends NativeElementPropsWithoutKeyAndRef<'div'>, TableColumnBase<TableRecord<unknown>> {
|
|
5
5
|
rowData: TableDataSource;
|
|
6
6
|
}
|
|
7
7
|
declare function TableEditRenderWrapper({ children, dataIndex, editable, rowData, setCellProps, ...rest }: EditableBodyCellProps): JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useContext
|
|
1
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { useContext } from 'react';
|
|
3
3
|
import { TableComponentContext } from '../TableContext.js';
|
|
4
4
|
|
|
5
5
|
function TableEditRenderWrapper({ children, dataIndex, editable, rowData, setCellProps, ...rest }) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef,
|
|
2
|
+
import { forwardRef, useMemo, useContext } from 'react';
|
|
3
3
|
import { tableClasses } from '@mezzanine-ui/core/table';
|
|
4
4
|
import { ArrowRightIcon } from '@mezzanine-ui/icons';
|
|
5
5
|
import { TableContext } from '../TableContext.js';
|
|
@@ -8,10 +8,11 @@ import cx from 'clsx';
|
|
|
8
8
|
|
|
9
9
|
const TableSortingIcon = forwardRef(function TableSortingIcon(props, ref) {
|
|
10
10
|
const { className, column, ...rest } = props;
|
|
11
|
+
const uniqueId = useMemo(() => `${crypto.getRandomValues(new Uint32Array(5))[0]}`, []);
|
|
11
12
|
const { sorting, } = useContext(TableContext) || {};
|
|
12
|
-
const {
|
|
13
|
+
const { key = uniqueId, } = column;
|
|
13
14
|
/** styling */
|
|
14
|
-
const currentType = (
|
|
15
|
+
const currentType = (key === (sorting === null || sorting === void 0 ? void 0 : sorting.sortedOn) ? sorting.sortedType : 'none');
|
|
15
16
|
const currentIconStyle = useMemo(() => ({
|
|
16
17
|
color: currentType === 'none' ? 'secondary' : 'primary',
|
|
17
18
|
style: {
|
|
@@ -21,7 +22,10 @@ const TableSortingIcon = forwardRef(function TableSortingIcon(props, ref) {
|
|
|
21
22
|
return (jsx(Icon, { ...rest, ref: ref, className: cx(tableClasses.icon, tableClasses.iconClickable, className), color: currentIconStyle.color, icon: ArrowRightIcon, onClick: (evt) => {
|
|
22
23
|
var _a;
|
|
23
24
|
evt.stopPropagation();
|
|
24
|
-
(_a = sorting === null || sorting === void 0 ? void 0 : sorting.onSort) === null || _a === void 0 ? void 0 : _a.call(sorting,
|
|
25
|
+
(_a = sorting === null || sorting === void 0 ? void 0 : sorting.onSort) === null || _a === void 0 ? void 0 : _a.call(sorting, {
|
|
26
|
+
...column,
|
|
27
|
+
key,
|
|
28
|
+
});
|
|
25
29
|
}, style: currentIconStyle.style }));
|
|
26
30
|
});
|
|
27
31
|
var TableSortingIcon$1 = TableSortingIcon;
|
|
@@ -4,7 +4,7 @@ export interface UseTableSorting {
|
|
|
4
4
|
dataSource: TableDataSource[];
|
|
5
5
|
}
|
|
6
6
|
export type SortedType = 'desc' | 'asc' | 'none';
|
|
7
|
-
export declare function useTableSorting(props: UseTableSorting): readonly [TableDataSource[], (v: Pick<TableColumn<TableRecord<unknown>>, "dataIndex" | "sorter" | "onSorted">) => void, {
|
|
7
|
+
export declare function useTableSorting(props: UseTableSorting): readonly [TableDataSource[], (v: Pick<TableColumn<TableRecord<unknown>>, "key" | "dataIndex" | "sorter" | "onSorted">) => void, {
|
|
8
8
|
readonly sortedOn: string;
|
|
9
9
|
readonly sortedType: SortedType;
|
|
10
10
|
readonly onResetAll: () => void;
|
|
@@ -70,12 +70,12 @@ function useTableSorting(props) {
|
|
|
70
70
|
setSortedType('none');
|
|
71
71
|
}, []);
|
|
72
72
|
const onChange = useLastCallback((opts) => {
|
|
73
|
-
const { dataIndex, sorter, onSorted } = opts;
|
|
74
|
-
const isChosenFromOneToAnother = sortedOn &&
|
|
73
|
+
const { key = '', dataIndex, sorter, onSorted } = opts;
|
|
74
|
+
const isChosenFromOneToAnother = sortedOn && key !== sortedOn;
|
|
75
75
|
const nextSortedType = getNextSortedType(isChosenFromOneToAnother ? 'none' : sortedType);
|
|
76
76
|
const onMappingSources = (sources) => {
|
|
77
77
|
setDataSource(sources);
|
|
78
|
-
onSorted === null || onSorted === void 0 ? void 0 : onSorted(
|
|
78
|
+
onSorted === null || onSorted === void 0 ? void 0 : onSorted(key, nextSortedType);
|
|
79
79
|
};
|
|
80
80
|
// only apply changes when column sorter is given
|
|
81
81
|
if (typeof sorter === 'function' || typeof onSorted === 'function') {
|
|
@@ -84,15 +84,16 @@ function useTableSorting(props) {
|
|
|
84
84
|
switch (nextSortedType) {
|
|
85
85
|
case 'desc':
|
|
86
86
|
case 'asc': {
|
|
87
|
-
// update current working
|
|
88
|
-
setSortedOn(
|
|
87
|
+
// update current working key
|
|
88
|
+
setSortedOn(key);
|
|
89
89
|
// getting new source instance (when switch between sorter, should use origin dataSource)
|
|
90
90
|
let newSource = (isChosenFromOneToAnother ? dataSourceProp : dataSource).slice(0);
|
|
91
91
|
if (typeof sorter === 'function') {
|
|
92
|
+
console.warn('When using a `sorter` function, please provide the `dataIndex` to make sure it worked as expected.');
|
|
92
93
|
// sort by given sorter
|
|
93
94
|
newSource = newSource.sort((a, b) => (
|
|
94
95
|
// reverse result when sorted type is ascending
|
|
95
|
-
(sorter(get(a, dataIndex), get(b, dataIndex))) * (nextSortedType === 'asc' ? -1 : 1)));
|
|
96
|
+
(sorter(get(a, dataIndex || ''), get(b, dataIndex || ''))) * (nextSortedType === 'asc' ? -1 : 1)));
|
|
96
97
|
}
|
|
97
98
|
// map back the data source
|
|
98
99
|
onMappingSources(newSource);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mezzanine-ui/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.0",
|
|
4
4
|
"description": "React components for mezzanine-ui",
|
|
5
5
|
"author": "Mezzanine",
|
|
6
6
|
"repository": {
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
"react-dom": "^18.2.0"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@mezzanine-ui/core": "^0.
|
|
32
|
-
"@mezzanine-ui/icons": "^0.
|
|
33
|
-
"@mezzanine-ui/system": "^0.
|
|
31
|
+
"@mezzanine-ui/core": "^0.14.0",
|
|
32
|
+
"@mezzanine-ui/icons": "^0.14.0",
|
|
33
|
+
"@mezzanine-ui/system": "^0.14.0",
|
|
34
34
|
"@popperjs/core": "^2.11.6",
|
|
35
35
|
"@types/react-transition-group": "^4.4.8",
|
|
36
36
|
"clsx": "^2.0.0",
|