@pdg/react-table 1.0.48 → 1.0.49
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/dist/InfoTable/InfoTable.style.d.ts +3 -3
- package/dist/Table/Table.styles.d.ts +1 -1
- package/dist/TableBodyRow/TableBodyRow.d.ts +1 -1
- package/dist/TableButton/TableButton.d.ts +1 -1
- package/dist/TableIcon/TableIcon.d.ts +1 -1
- package/dist/TableMenuButton/TableMenuButton.d.ts +1 -1
- package/dist/TableTopHead/TableTopHead.style.d.ts +1 -1
- package/dist/TableTopHead/TableTopHead.types.d.ts +5 -3
- package/dist/index.esm.js +75 -82
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +75 -82
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
|
|
|
4
4
|
component?: import("react").ElementType<any> | undefined;
|
|
5
5
|
ref?: import("react").Ref<unknown> | undefined;
|
|
6
6
|
sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
|
|
7
|
-
} & Omit<
|
|
7
|
+
} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
8
8
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
9
9
|
}, ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "ref" | "children" | "component" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
10
10
|
export declare const ValueWrap: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
|
|
@@ -12,7 +12,7 @@ export declare const ValueWrap: import("@emotion/styled").StyledComponent<import
|
|
|
12
12
|
component?: import("react").ElementType<any> | undefined;
|
|
13
13
|
ref?: import("react").Ref<unknown> | undefined;
|
|
14
14
|
sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
|
|
15
|
-
} & Omit<
|
|
15
|
+
} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
16
16
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
17
17
|
}, ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "ref" | "children" | "component" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
18
18
|
export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -43,6 +43,6 @@ export declare const ClipboardIconButton: import("@emotion/styled").StyledCompon
|
|
|
43
43
|
tabIndex?: number | undefined;
|
|
44
44
|
TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
|
|
45
45
|
touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
|
|
46
|
-
}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<
|
|
46
|
+
}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
47
47
|
ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
|
|
48
48
|
}, "color" | "tabIndex" | "children" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "size"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
@@ -5,7 +5,7 @@ export declare const StyledBodyRow: import("@emotion/styled").StyledComponent<{
|
|
|
5
5
|
hover?: boolean | undefined;
|
|
6
6
|
selected?: boolean | undefined;
|
|
7
7
|
sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
|
|
8
|
-
} & import("@mui/material/OverridableComponent").CommonProps & Omit<
|
|
8
|
+
} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
|
|
9
9
|
ref?: ((instance: HTMLTableRowElement | null) => void) | import("react").RefObject<HTMLTableRowElement> | null | undefined;
|
|
10
10
|
}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "hover" | "selected" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
11
11
|
export declare const StyledNoDataDiv: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -6,7 +6,7 @@ export declare const StyledBodyRow: import("@emotion/styled").StyledComponent<{
|
|
|
6
6
|
hover?: boolean | undefined;
|
|
7
7
|
selected?: boolean | undefined;
|
|
8
8
|
sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
|
|
9
|
-
} & import("@mui/material/OverridableComponent").CommonProps & Omit<
|
|
9
|
+
} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
|
|
10
10
|
ref?: ((instance: HTMLTableRowElement | null) => void) | React.RefObject<HTMLTableRowElement> | null | undefined;
|
|
11
11
|
}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "hover" | "selected" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
12
12
|
declare const TableBodyRow: React.FC<Props>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TableButtonProps as Props } from './TableButton.types';
|
|
3
|
-
declare const TableButton: React.ForwardRefExoticComponent<
|
|
3
|
+
declare const TableButton: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
4
4
|
export default TableButton;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TableIconProps as Props } from './TableIcon.types';
|
|
3
|
-
declare const TableIcon: React.ForwardRefExoticComponent<
|
|
3
|
+
declare const TableIcon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
4
4
|
export default TableIcon;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TableMenuButtonProps as Props } from './TableMenuButton.types';
|
|
3
|
-
declare const TableMenuButton: React.ForwardRefExoticComponent<
|
|
3
|
+
declare const TableMenuButton: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
4
4
|
export default TableMenuButton;
|
|
@@ -5,6 +5,6 @@ export declare const TableTopHeadCaptionRow: import("@emotion/styled").StyledCom
|
|
|
5
5
|
hover?: boolean | undefined;
|
|
6
6
|
selected?: boolean | undefined;
|
|
7
7
|
sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
|
|
8
|
-
} & import("@mui/material/OverridableComponent").CommonProps & Omit<
|
|
8
|
+
} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
|
|
9
9
|
ref?: ((instance: HTMLTableRowElement | null) => void) | import("react").RefObject<HTMLTableRowElement> | null | undefined;
|
|
10
10
|
}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "hover" | "selected" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { TableCellProps } from '@mui/material';
|
|
3
|
+
import { TableColumn, TableProps } from '../Table/Table.types';
|
|
3
4
|
export interface TableTopHeadRowColumn {
|
|
4
5
|
colSpan?: number;
|
|
5
6
|
rowSpan?: number;
|
|
@@ -8,9 +9,10 @@ export interface TableTopHeadRowColumn {
|
|
|
8
9
|
}
|
|
9
10
|
export type TableTopHeadRowColumnValue = TableTopHeadRowColumn | false | undefined | null;
|
|
10
11
|
export interface TableTopHeadProps {
|
|
11
|
-
columnLength: number;
|
|
12
|
-
rows?: TableTopHeadRowColumnValue[] | TableTopHeadRowColumnValue[][];
|
|
13
12
|
caption?: ReactNode;
|
|
14
|
-
|
|
13
|
+
rows?: TableTopHeadRowColumnValue[] | TableTopHeadRowColumnValue[][];
|
|
14
|
+
columns: TableColumn[];
|
|
15
|
+
defaultAlign: TableProps['defaultAlign'];
|
|
16
|
+
onCheckChange(column: TableColumn, checked: boolean): void;
|
|
15
17
|
}
|
|
16
18
|
export declare const TableTopHeadDefaultProps: {};
|
package/dist/index.esm.js
CHANGED
|
@@ -3037,55 +3037,7 @@ var TableBodyRow = function (_a) {
|
|
|
3037
3037
|
return (React__default.createElement(StyledBodyRow, __assign$3({ className: classNames('TableBodyRow', className), style: finalStyle }, props, sortableProps), columns.map(function (column, columnIdx) { return (React__default.createElement(TableBodyCell, { key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); })));
|
|
3038
3038
|
};
|
|
3039
3039
|
TableBodyRow.displayName = 'TableBodyRow';
|
|
3040
|
-
TableBodyRow.defaultProps = TableBodyRowDefaultProps;var
|
|
3041
|
-
// Use ---------------------------------------------------------------------------------------------------------------
|
|
3042
|
-
var column = _a.column, defaultAlign = _a.defaultAlign, top = _a.top, onCheckChange = _a.onCheckChange;
|
|
3043
|
-
var _b = useTableState(), setHeadColumnChecked = _b.setHeadColumnChecked, setHeadColumnCommands = _b.setHeadColumnCommands;
|
|
3044
|
-
// State -------------------------------------------------------------------------------------------------------------
|
|
3045
|
-
var _c = useState(false), checked = _c[0], setChecked = _c[1];
|
|
3046
|
-
var _d = useState(false), checkDisabled = _d[0], setCheckDisabled = _d[1];
|
|
3047
|
-
// Effect ------------------------------------------------------------------------------------------------------------
|
|
3048
|
-
useEffect(function () {
|
|
3049
|
-
if (column.type === 'check') {
|
|
3050
|
-
setHeadColumnChecked(column, checked);
|
|
3051
|
-
}
|
|
3052
|
-
}, [column, checked, setHeadColumnChecked]);
|
|
3053
|
-
useEffect(function () {
|
|
3054
|
-
setHeadColumnCommands(column, {
|
|
3055
|
-
setChecked: function (checked) {
|
|
3056
|
-
if (column.type === 'check') {
|
|
3057
|
-
setChecked(checked);
|
|
3058
|
-
}
|
|
3059
|
-
},
|
|
3060
|
-
setCheckDisabled: function (checkDisabled) {
|
|
3061
|
-
if (column.type === 'check') {
|
|
3062
|
-
setCheckDisabled(checkDisabled);
|
|
3063
|
-
}
|
|
3064
|
-
},
|
|
3065
|
-
});
|
|
3066
|
-
}, [setHeadColumnCommands, column]);
|
|
3067
|
-
// Memo --------------------------------------------------------------------------------------------------------------
|
|
3068
|
-
var style = useMemo(function () { return (top !== undefined ? { top: top } : undefined); }, [top]);
|
|
3069
|
-
var data = useMemo(function () {
|
|
3070
|
-
var _a, _b;
|
|
3071
|
-
if (column.type === 'check') {
|
|
3072
|
-
return (React__default.createElement(Checkbox, { checked: checked, disabled: checkDisabled, onChange: function (e, newChecked) {
|
|
3073
|
-
setChecked(newChecked);
|
|
3074
|
-
onCheckChange && onCheckChange(column, newChecked);
|
|
3075
|
-
} }));
|
|
3076
|
-
}
|
|
3077
|
-
else {
|
|
3078
|
-
if ((_a = column.head) === null || _a === void 0 ? void 0 : _a.onRender) {
|
|
3079
|
-
return (_b = column.head) === null || _b === void 0 ? void 0 : _b.onRender();
|
|
3080
|
-
}
|
|
3081
|
-
else {
|
|
3082
|
-
return column.label;
|
|
3083
|
-
}
|
|
3084
|
-
}
|
|
3085
|
-
}, [checkDisabled, checked, column, onCheckChange]);
|
|
3086
|
-
// Render ------------------------------------------------------------------------------------------------------------
|
|
3087
|
-
return (React__default.createElement(TableCommonCell, { type: 'head', className: 'TableHeadCell', style: style, column: column, defaultAlign: defaultAlign }, data));
|
|
3088
|
-
};var TableFooterCell = function (_a) {
|
|
3040
|
+
TableBodyRow.defaultProps = TableBodyRowDefaultProps;var TableFooterCell = function (_a) {
|
|
3089
3041
|
var column = _a.column, defaultAlign = _a.defaultAlign;
|
|
3090
3042
|
var data = useMemo(function () {
|
|
3091
3043
|
var _a, _b, _c;
|
|
@@ -3261,19 +3213,65 @@ var native = {
|
|
|
3261
3213
|
fontWeight: 700,
|
|
3262
3214
|
},
|
|
3263
3215
|
});
|
|
3264
|
-
});var
|
|
3216
|
+
});var TableHeadCell = function (_a) {
|
|
3217
|
+
// Use ---------------------------------------------------------------------------------------------------------------
|
|
3218
|
+
var column = _a.column, defaultAlign = _a.defaultAlign, top = _a.top, onCheckChange = _a.onCheckChange;
|
|
3219
|
+
var _b = useTableState(), setHeadColumnChecked = _b.setHeadColumnChecked, setHeadColumnCommands = _b.setHeadColumnCommands;
|
|
3220
|
+
// State -------------------------------------------------------------------------------------------------------------
|
|
3221
|
+
var _c = useState(false), checked = _c[0], setChecked = _c[1];
|
|
3222
|
+
var _d = useState(false), checkDisabled = _d[0], setCheckDisabled = _d[1];
|
|
3223
|
+
// Effect ------------------------------------------------------------------------------------------------------------
|
|
3224
|
+
useEffect(function () {
|
|
3225
|
+
if (column.type === 'check') {
|
|
3226
|
+
setHeadColumnChecked(column, checked);
|
|
3227
|
+
}
|
|
3228
|
+
}, [column, checked, setHeadColumnChecked]);
|
|
3229
|
+
useEffect(function () {
|
|
3230
|
+
setHeadColumnCommands(column, {
|
|
3231
|
+
setChecked: function (checked) {
|
|
3232
|
+
if (column.type === 'check') {
|
|
3233
|
+
setChecked(checked);
|
|
3234
|
+
}
|
|
3235
|
+
},
|
|
3236
|
+
setCheckDisabled: function (checkDisabled) {
|
|
3237
|
+
if (column.type === 'check') {
|
|
3238
|
+
setCheckDisabled(checkDisabled);
|
|
3239
|
+
}
|
|
3240
|
+
},
|
|
3241
|
+
});
|
|
3242
|
+
}, [setHeadColumnCommands, column]);
|
|
3243
|
+
// Memo --------------------------------------------------------------------------------------------------------------
|
|
3244
|
+
var style = useMemo(function () { return (top !== undefined ? { top: top } : undefined); }, [top]);
|
|
3245
|
+
var data = useMemo(function () {
|
|
3246
|
+
var _a, _b;
|
|
3247
|
+
if (column.type === 'check') {
|
|
3248
|
+
return (React__default.createElement(Checkbox, { checked: checked, disabled: checkDisabled, onChange: function (e, newChecked) {
|
|
3249
|
+
setChecked(newChecked);
|
|
3250
|
+
onCheckChange && onCheckChange(column, newChecked);
|
|
3251
|
+
} }));
|
|
3252
|
+
}
|
|
3253
|
+
else {
|
|
3254
|
+
if ((_a = column.head) === null || _a === void 0 ? void 0 : _a.onRender) {
|
|
3255
|
+
return (_b = column.head) === null || _b === void 0 ? void 0 : _b.onRender();
|
|
3256
|
+
}
|
|
3257
|
+
else {
|
|
3258
|
+
return column.label;
|
|
3259
|
+
}
|
|
3260
|
+
}
|
|
3261
|
+
}, [checkDisabled, checked, column, onCheckChange]);
|
|
3262
|
+
// Render ------------------------------------------------------------------------------------------------------------
|
|
3263
|
+
return (React__default.createElement(TableCommonCell, { type: 'head', className: 'TableHeadCell', style: style, column: column, defaultAlign: defaultAlign }, data));
|
|
3264
|
+
};var BottomLine = styled('div')(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n height: 1px;\n position: absolute;\n left: 3px;\n right: 3px;\n bottom: 0;\n"], ["\n height: 1px;\n position: absolute;\n left: 3px;\n right: 3px;\n bottom: 0;\n"])));
|
|
3265
3265
|
var TableTopHead = function (_a) {
|
|
3266
3266
|
// Use ---------------------------------------------------------------------------------------------------------------
|
|
3267
|
-
var
|
|
3267
|
+
var columns = _a.columns, rows = _a.rows, caption = _a.caption, defaultAlign = _a.defaultAlign, onCheckChange = _a.onCheckChange;
|
|
3268
3268
|
var theme = useTheme();
|
|
3269
3269
|
// Ref ---------------------------------------------------------------------------------------------------------------
|
|
3270
|
-
var headRef = useRef(null);
|
|
3271
3270
|
var captionRef = useRef(null);
|
|
3272
3271
|
var row1Ref = useRef(null);
|
|
3273
3272
|
var row2Ref = useRef(null);
|
|
3274
3273
|
var row3Ref = useRef(null);
|
|
3275
3274
|
// ResizeDetector ----------------------------------------------------------------------------------------------------
|
|
3276
|
-
var headHeight = useResizeDetector({ targetRef: headRef, handleWidth: false, handleHeight: true }).height;
|
|
3277
3275
|
var captionHeight = useResizeDetector({
|
|
3278
3276
|
targetRef: captionRef,
|
|
3279
3277
|
handleWidth: false,
|
|
@@ -3282,15 +3280,11 @@ var TableTopHead = function (_a) {
|
|
|
3282
3280
|
var row1Height = useResizeDetector({ targetRef: row1Ref, handleWidth: false, handleHeight: true }).height;
|
|
3283
3281
|
var row2Height = useResizeDetector({ targetRef: row2Ref, handleWidth: false, handleHeight: true }).height;
|
|
3284
3282
|
var row3Height = useResizeDetector({ targetRef: row3Ref, handleWidth: false, handleHeight: true }).height;
|
|
3285
|
-
useEffect(function () {
|
|
3286
|
-
onHeightChange && onHeightChange(headHeight || 0);
|
|
3287
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3288
|
-
}, [headHeight]);
|
|
3289
3283
|
// Function ----------------------------------------------------------------------------------------------------------
|
|
3290
3284
|
var captionRow = useMemo(function () {
|
|
3291
3285
|
return !!caption && (React__default.createElement(TableTopHeadCaptionRow, { ref: captionRef, className: 'TableTopHeadCaptionRow' },
|
|
3292
|
-
React__default.createElement(TableCell, { colSpan:
|
|
3293
|
-
}, [caption,
|
|
3286
|
+
React__default.createElement(TableCell, { colSpan: columns.length }, caption)));
|
|
3287
|
+
}, [caption, columns]);
|
|
3294
3288
|
var makeRowCells = useCallback(function (row, top) {
|
|
3295
3289
|
var cells = row
|
|
3296
3290
|
.map(function (info, idx) {
|
|
@@ -3302,17 +3296,21 @@ var TableTopHead = function (_a) {
|
|
|
3302
3296
|
info.label != null && React__default.createElement(BottomLine, { style: { backgroundColor: theme.palette.divider } })));
|
|
3303
3297
|
})
|
|
3304
3298
|
.filter(function (cell) { return !!cell; });
|
|
3305
|
-
if (cells.length <
|
|
3306
|
-
cells.push(React__default.createElement(TableCell, { key:
|
|
3299
|
+
if (cells.length < columns.length) {
|
|
3300
|
+
cells.push(React__default.createElement(TableCell, { key: columns.length, colSpan: columns.length - cells.length, style: { top: top, borderBottom: 0 } }));
|
|
3307
3301
|
}
|
|
3308
3302
|
return cells;
|
|
3309
|
-
}, [
|
|
3303
|
+
}, [columns, theme.palette.divider]);
|
|
3304
|
+
var columnRow = useMemo(function () {
|
|
3305
|
+
var top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
|
|
3306
|
+
return (React__default.createElement(TableRow, null, columns.map(function (column, idx) { return (React__default.createElement(TableHeadCell, { key: idx, column: column, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })); })));
|
|
3307
|
+
}, [captionHeight, columns, defaultAlign, onCheckChange, row1Height, row2Height, row3Height]);
|
|
3310
3308
|
// Render ------------------------------------------------------------------------------------------------------------
|
|
3311
3309
|
if ((!rows || rows.length === 0) && caption === null)
|
|
3312
3310
|
return null;
|
|
3313
3311
|
if (rows) {
|
|
3314
3312
|
if (Array.isArray(rows[0])) {
|
|
3315
|
-
return (React__default.createElement(TableHead, { className: '
|
|
3313
|
+
return (React__default.createElement(TableHead, { className: 'TableHead' },
|
|
3316
3314
|
captionRow,
|
|
3317
3315
|
rows.map(function (row, idx) {
|
|
3318
3316
|
var ref = undefined;
|
|
@@ -3333,17 +3331,18 @@ var TableTopHead = function (_a) {
|
|
|
3333
3331
|
case 3:
|
|
3334
3332
|
top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
|
|
3335
3333
|
}
|
|
3336
|
-
return (React__default.createElement(TableRow, { key: idx, ref: ref, className: '
|
|
3334
|
+
return (React__default.createElement(TableRow, { key: idx, ref: ref, className: 'TableHeadRow' }, makeRowCells(row, top)));
|
|
3337
3335
|
})));
|
|
3338
3336
|
}
|
|
3339
3337
|
else {
|
|
3340
|
-
return (React__default.createElement(TableHead, { className: '
|
|
3338
|
+
return (React__default.createElement(TableHead, { className: 'TableHead' },
|
|
3341
3339
|
captionRow,
|
|
3342
|
-
React__default.createElement(TableRow, { className: '
|
|
3340
|
+
React__default.createElement(TableRow, { ref: row1Ref, className: 'TableHeadRow' }, makeRowCells(rows, captionHeight)),
|
|
3341
|
+
columnRow));
|
|
3343
3342
|
}
|
|
3344
3343
|
}
|
|
3345
3344
|
else {
|
|
3346
|
-
return
|
|
3345
|
+
return React__default.createElement(TableHead, { className: 'TableHead' }, captionRow);
|
|
3347
3346
|
}
|
|
3348
3347
|
};
|
|
3349
3348
|
TableTopHead.displayName = 'TableTopHead';
|
|
@@ -3379,9 +3378,8 @@ var Table = React__default.forwardRef(function (_a, ref) {
|
|
|
3379
3378
|
// State -------------------------------------------------------------------------------------------------------------
|
|
3380
3379
|
var _b = useState(false), menuOpen = _b[0], setMenuOpen = _b[1];
|
|
3381
3380
|
var _c = useState(undefined), openMenuId = _c[0], setOpenMenuId = _c[1];
|
|
3382
|
-
var _d = useState(0), topHeadHeight = _d[0], setTopHeadHeight = _d[1];
|
|
3383
3381
|
// State - containerHeight -------------------------------------------------------------------------------------------
|
|
3384
|
-
var
|
|
3382
|
+
var _d = useState(), containerHeight = _d[0], setContainerHeight = _d[1];
|
|
3385
3383
|
var containerHeightDetector = useResizeDetector({
|
|
3386
3384
|
handleHeight: true,
|
|
3387
3385
|
handleWidth: false,
|
|
@@ -3395,7 +3393,7 @@ var Table = React__default.forwardRef(function (_a, ref) {
|
|
|
3395
3393
|
},
|
|
3396
3394
|
}).ref;
|
|
3397
3395
|
// State - footerHeight --------------------------------------------------------------------------------------------
|
|
3398
|
-
var
|
|
3396
|
+
var _e = useState(), pagingHeight = _e[0], setPagingHeight = _e[1];
|
|
3399
3397
|
var pagingHeightResizeDetector = useResizeDetector({
|
|
3400
3398
|
handleHeight: true,
|
|
3401
3399
|
handleWidth: false,
|
|
@@ -3409,11 +3407,11 @@ var Table = React__default.forwardRef(function (_a, ref) {
|
|
|
3409
3407
|
},
|
|
3410
3408
|
}).ref;
|
|
3411
3409
|
// State -----------------------------------------------------------------------------------------------------------
|
|
3412
|
-
var
|
|
3413
|
-
var
|
|
3414
|
-
var
|
|
3415
|
-
var
|
|
3416
|
-
var
|
|
3410
|
+
var _f = useAutoUpdateLayoutState(initColumns), columns = _f[0], setColumns = _f[1];
|
|
3411
|
+
var _g = useState(), finalColumns = _g[0], setFinalColumns = _g[1];
|
|
3412
|
+
var _h = useAutoUpdateLayoutState(initItems), items = _h[0], setItems = _h[1];
|
|
3413
|
+
var _j = useState(), sortableItems = _j[0], setSortableItems = _j[1];
|
|
3414
|
+
var _k = useAutoUpdateLayoutState(initPaging), paging = _k[0], setPaging = _k[1];
|
|
3417
3415
|
// Memo --------------------------------------------------------------------------------------------------------------
|
|
3418
3416
|
var tableSx = useMemo(function () {
|
|
3419
3417
|
var sx = {
|
|
@@ -3785,12 +3783,8 @@ var Table = React__default.forwardRef(function (_a, ref) {
|
|
|
3785
3783
|
return style;
|
|
3786
3784
|
}, [fullHeight]);
|
|
3787
3785
|
var tableTopHead = useMemo(function () {
|
|
3788
|
-
return finalColumns && (React__default.createElement(TableTopHead, {
|
|
3789
|
-
}, [caption, finalColumns, topHeadRows]);
|
|
3790
|
-
var tableHead = useMemo(function () {
|
|
3791
|
-
return finalColumns && (React__default.createElement(TableHead, null,
|
|
3792
|
-
React__default.createElement(TableRow, null, finalColumns.map(function (column, idx) { return (React__default.createElement(TableHeadCell, { key: idx, column: column, defaultAlign: defaultAlign, top: stickyHeader ? topHeadHeight : undefined, onCheckChange: handleHeadCheckChange })); }))));
|
|
3793
|
-
}, [defaultAlign, finalColumns, handleHeadCheckChange, stickyHeader, topHeadHeight]);
|
|
3786
|
+
return finalColumns && (React__default.createElement(TableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
|
|
3787
|
+
}, [caption, defaultAlign, finalColumns, handleHeadCheckChange, topHeadRows]);
|
|
3794
3788
|
var tableBody = useMemo(function () {
|
|
3795
3789
|
return finalColumns && (React__default.createElement(TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React__default.createElement(SortableContext, { items: sortableItems, strategy: verticalListSortingStrategy }, sortableItems.map(function (item, idx) { return (React__default.createElement(TableBodyRow, { key: item.id, className: classNames(!!showOddColor && 'odd-color', !!showEvenColor && 'even-color'), hover: true, sx: onGetBodyRowSx ? onGetBodyRowSx(item, idx) : undefined, id: item.id, index: idx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, columns: finalColumns, item: item, onClick: onClick, onCheckChange: handleBodyCheckChange })); }))) : (React__default.createElement(StyledBodyRow$1, null,
|
|
3796
3790
|
React__default.createElement(TableCell, { colSpan: finalColumns.length, style: { flex: 1 } }, noData ? (noData) : (React__default.createElement(StyledNoDataDiv, null,
|
|
@@ -3840,7 +3834,6 @@ var Table = React__default.forwardRef(function (_a, ref) {
|
|
|
3840
3834
|
React__default.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd },
|
|
3841
3835
|
React__default.createElement(Table$1, { stickyHeader: stickyHeader, sx: tableSx, style: tableStyle },
|
|
3842
3836
|
tableTopHead,
|
|
3843
|
-
tableHead,
|
|
3844
3837
|
tableBody,
|
|
3845
3838
|
tableFooter))),
|
|
3846
3839
|
tablePaging))) : null;
|