@pdg/react-table 1.0.32 → 1.0.33
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/@util/table.d.ts +6 -0
- package/dist/InfoTable/InfoTable.d.ts +7 -0
- package/dist/InfoTable/InfoTable.style.d.ts +18 -0
- package/dist/InfoTable/InfoTable.types.d.ts +35 -0
- package/dist/InfoTable/index.d.ts +4 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +54 -6
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +54 -6
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/@util/table.d.ts
CHANGED
|
@@ -1,2 +1,8 @@
|
|
|
1
1
|
import { TableColumn } from '../Table/Table.types';
|
|
2
|
+
import { CommonSxProps } from '../@types';
|
|
3
|
+
import { TypographyProps } from '@mui/material';
|
|
2
4
|
export declare function getTableColumnAlign(column: TableColumn, defaultAlign: TableColumn['align']): TableColumn['align'];
|
|
5
|
+
export declare function combineSx(...sx: (boolean | CommonSxProps['sx'])[]): CommonSxProps['sx'];
|
|
6
|
+
export declare function typographyColorToSxColor(color: TypographyProps['color']): string | (string[] | import("csstype").Property.Color | null | undefined)[] | {
|
|
7
|
+
[key: string]: string[] | import("csstype").Property.Color | null | undefined;
|
|
8
|
+
} | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | import("csstype").Property.Color | undefined>) | undefined;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { InfoTableProps as Props, InfoTableInfo } from './InfoTable.types';
|
|
3
|
+
interface WithType<T = InfoTableInfo> extends React.FC<Props<T>> {
|
|
4
|
+
<T = InfoTableInfo>(props: Props<T>): ReturnType<React.FC<Props<T>>>;
|
|
5
|
+
}
|
|
6
|
+
declare const InfoTable: WithType;
|
|
7
|
+
export default InfoTable;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
|
|
3
|
+
children?: import("react").ReactNode;
|
|
4
|
+
component?: import("react").ElementType<any> | undefined;
|
|
5
|
+
ref?: import("react").Ref<unknown> | undefined;
|
|
6
|
+
sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
|
|
7
|
+
} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
8
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
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
|
+
export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
|
|
11
|
+
children?: import("react").ReactNode;
|
|
12
|
+
component?: import("react").ElementType<any> | undefined;
|
|
13
|
+
ref?: import("react").Ref<unknown> | undefined;
|
|
14
|
+
sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
|
|
15
|
+
} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
16
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
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
|
+
export declare const ValueEllipsis: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { BoxProps, GridProps, TypographyProps } from '@mui/material';
|
|
3
|
+
import { CommonSxProps } from '../@types';
|
|
4
|
+
export interface InfoTableInfo {
|
|
5
|
+
[key: string]: any;
|
|
6
|
+
}
|
|
7
|
+
export interface InfoTableItem<T = InfoTableInfo> {
|
|
8
|
+
label: ReactNode;
|
|
9
|
+
name: keyof T;
|
|
10
|
+
ellipsis?: boolean;
|
|
11
|
+
labelClassName?: string;
|
|
12
|
+
labelColor?: TypographyProps['color'];
|
|
13
|
+
labelStyle?: CommonSxProps['style'];
|
|
14
|
+
labelSx?: BoxProps['sx'];
|
|
15
|
+
valueClassName?: string;
|
|
16
|
+
valueStyle?: CommonSxProps['style'];
|
|
17
|
+
valueSx?: CommonSxProps['sx'];
|
|
18
|
+
xs?: number;
|
|
19
|
+
onRender?(info: T): ReactNode;
|
|
20
|
+
}
|
|
21
|
+
export declare type InfoTableItems<T = InfoTableInfo> = InfoTableItem<T>[];
|
|
22
|
+
export interface InfoTableProps<T = InfoTableInfo> {
|
|
23
|
+
cols: 1 | 2 | 3 | 4 | 6 | 12;
|
|
24
|
+
spacing?: GridProps['spacing'];
|
|
25
|
+
className?: string;
|
|
26
|
+
style?: CommonSxProps['style'];
|
|
27
|
+
sx?: CommonSxProps['sx'];
|
|
28
|
+
labelClassName?: string;
|
|
29
|
+
labelColor?: TypographyProps['color'];
|
|
30
|
+
labelStyle?: CommonSxProps['style'];
|
|
31
|
+
labelSx?: BoxProps['sx'];
|
|
32
|
+
info: T;
|
|
33
|
+
items: InfoTableItems<T>;
|
|
34
|
+
}
|
|
35
|
+
export declare const InfoTableDefaultProps: Pick<InfoTableProps, 'spacing' | 'labelColor'>;
|
package/dist/index.d.ts
CHANGED
package/dist/index.esm.js
CHANGED
|
@@ -8236,8 +8236,8 @@ function useResizeDetector(props) {
|
|
|
8236
8236
|
},
|
|
8237
8237
|
});
|
|
8238
8238
|
});
|
|
8239
|
-
var StyledNoDataDiv = styled('div')(templateObject_1$
|
|
8240
|
-
var templateObject_1$
|
|
8239
|
+
var StyledNoDataDiv = styled('div')(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n text-align: center;\n padding: 30px 0;\n font-weight: 500;\n font-size: 13px;\n color: #94a0b2;\n opacity: 0.8;\n\n .material-icons {\n font-size: 40px;\n margin-bottom: 5px;\n }\n"], ["\n text-align: center;\n padding: 30px 0;\n font-weight: 500;\n font-size: 13px;\n color: #94a0b2;\n opacity: 0.8;\n\n .material-icons {\n font-size: 40px;\n margin-bottom: 5px;\n }\n"])));
|
|
8240
|
+
var templateObject_1$3;var TableBodyRowDefaultProps = {};const CSS = /*#__PURE__*/Object.freeze({
|
|
8241
8241
|
Translate: {
|
|
8242
8242
|
toString(transform) {
|
|
8243
8243
|
if (!transform) {
|
|
@@ -8336,6 +8336,33 @@ var equal = function (v1, v2) {
|
|
|
8336
8336
|
default:
|
|
8337
8337
|
return column.align || defaultAlign;
|
|
8338
8338
|
}
|
|
8339
|
+
}
|
|
8340
|
+
function combineSx() {
|
|
8341
|
+
var sx = [];
|
|
8342
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
8343
|
+
sx[_i] = arguments[_i];
|
|
8344
|
+
}
|
|
8345
|
+
var finalSx = [];
|
|
8346
|
+
if (Array.isArray(finalSx)) {
|
|
8347
|
+
sx.forEach(function (v) { return v && finalSx.push.apply(finalSx, (Array.isArray(v) ? v : [v])); });
|
|
8348
|
+
}
|
|
8349
|
+
return finalSx;
|
|
8350
|
+
}
|
|
8351
|
+
function typographyColorToSxColor(color) {
|
|
8352
|
+
if (typeof color === 'string') {
|
|
8353
|
+
if (['primary', 'secondary', 'info', 'warning', 'error'].includes(color)) {
|
|
8354
|
+
return "".concat(color, ".main");
|
|
8355
|
+
}
|
|
8356
|
+
else if (color === 'text') {
|
|
8357
|
+
return 'text.primary';
|
|
8358
|
+
}
|
|
8359
|
+
else {
|
|
8360
|
+
return color;
|
|
8361
|
+
}
|
|
8362
|
+
}
|
|
8363
|
+
else {
|
|
8364
|
+
return color;
|
|
8365
|
+
}
|
|
8339
8366
|
}var TableContextDefaultValue = {
|
|
8340
8367
|
menuOpen: false,
|
|
8341
8368
|
openMenuId: undefined,
|
|
@@ -8353,7 +8380,7 @@ var equal = function (v1, v2) {
|
|
|
8353
8380
|
throw new Error('useFormState should be used within TableContext.Provider');
|
|
8354
8381
|
}
|
|
8355
8382
|
return value;
|
|
8356
|
-
}var StyledTableCell = styled(TableCell)(templateObject_1$
|
|
8383
|
+
}var StyledTableCell = styled(TableCell)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n &.ellipsis {\n position: relative;\n max-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"], ["\n &.ellipsis {\n position: relative;\n max-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"])));
|
|
8357
8384
|
var TableCommonCell = function (_a) {
|
|
8358
8385
|
// Use ---------------------------------------------------------------------------------------------------------------
|
|
8359
8386
|
var children = _a.children, initClassName = _a.className, initStyle = _a.style, initSx = _a.sx, type = _a.type, column = _a.column, defaultAlign = _a.defaultAlign, initDefaultEllipsis = _a.defaultEllipsis, index = _a.index, item = _a.item, onClick = _a.onClick;
|
|
@@ -8498,7 +8525,7 @@ var TableCommonCell = function (_a) {
|
|
|
8498
8525
|
// Render ----------------------------------------------------------------------------------------------------------
|
|
8499
8526
|
return (React__default.createElement(StyledTableCell, { align: align, className: classNames(className, 'TableCommonCell', ellipsis && 'ellipsis', column.type ? "column-type-".concat(column.type) : false), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
|
|
8500
8527
|
};
|
|
8501
|
-
var templateObject_1$
|
|
8528
|
+
var templateObject_1$2;var StyledButtonsBox = styled(Box)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n"], ["\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n"])));
|
|
8502
8529
|
var TableBodyCell = function (_a) {
|
|
8503
8530
|
// Use ---------------------------------------------------------------------------------------------------------------
|
|
8504
8531
|
var item = _a.item, index = _a.index, column = _a.column, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, onClick = _a.onClick, onCheckChange = _a.onCheckChange;
|
|
@@ -8640,7 +8667,7 @@ var TableBodyCell = function (_a) {
|
|
|
8640
8667
|
// Render ----------------------------------------------------------------------------------------------------------
|
|
8641
8668
|
return (React__default.createElement(TableCommonCell, { type: 'body', className: 'TableBodyCell', column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, !isHidden && data));
|
|
8642
8669
|
};
|
|
8643
|
-
var templateObject_1;var StyledBodyRow = styled(TableRow)(function (_a) {
|
|
8670
|
+
var templateObject_1$1;var StyledBodyRow = styled(TableRow)(function (_a) {
|
|
8644
8671
|
var theme = _a.theme;
|
|
8645
8672
|
return ({
|
|
8646
8673
|
'&.odd-color:nth-of-type(odd):not(:hover)': {
|
|
@@ -9801,4 +9828,25 @@ TableButton.defaultProps = TableButtonDefaultProps;var TableMenuButtonDefaultPro
|
|
|
9801
9828
|
})));
|
|
9802
9829
|
});
|
|
9803
9830
|
TableMenuButton.displayName = 'TableMenuButton';
|
|
9804
|
-
TableMenuButton.defaultProps = TableMenuButtonDefaultProps;
|
|
9831
|
+
TableMenuButton.defaultProps = TableMenuButtonDefaultProps;var InfoTableDefaultProps = {
|
|
9832
|
+
spacing: 1,
|
|
9833
|
+
labelColor: 'primary',
|
|
9834
|
+
};var Label = styled(Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: 12px;\n font-weight: bold;\n"], ["\n font-size: 12px;\n font-weight: bold;\n"])));
|
|
9835
|
+
var Value = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
|
|
9836
|
+
var ValueEllipsis = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"], ["\n position: relative;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
|
|
9837
|
+
var templateObject_1, templateObject_2, templateObject_3;var InfoTable = function (_a) {
|
|
9838
|
+
var cols = _a.cols, spacing = _a.spacing, className = _a.className, style = _a.style, sx = _a.sx, labelClassName = _a.labelClassName, labelColor = _a.labelColor, labelStyle = _a.labelStyle, labelSx = _a.labelSx, info = _a.info, items = _a.items;
|
|
9839
|
+
var xs = useMemo(function () { return 12 / cols; }, [cols]);
|
|
9840
|
+
return (React__default.createElement(Grid, { container: true, spacing: spacing, className: classNames('InfoTable', className), style: style, sx: sx }, items.map(function (item, idx) {
|
|
9841
|
+
var finalLabelColor = typographyColorToSxColor(item.labelColor || labelColor);
|
|
9842
|
+
var finalLabelSx = combineSx(labelSx, item.labelSx, !!finalLabelColor && { color: finalLabelColor });
|
|
9843
|
+
var data = info[item.name];
|
|
9844
|
+
if (item.onRender)
|
|
9845
|
+
data = item.onRender(info);
|
|
9846
|
+
return (React__default.createElement(Grid, { key: idx, item: true, xs: item.xs || xs },
|
|
9847
|
+
React__default.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign$1(__assign$1({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label),
|
|
9848
|
+
React__default.createElement(Value, { className: item.valueClassName, style: item.valueStyle, sx: item.valueSx }, item.ellipsis ? React__default.createElement(ValueEllipsis, null, data) : data)));
|
|
9849
|
+
})));
|
|
9850
|
+
};
|
|
9851
|
+
InfoTable.displayName = 'InfoTable';
|
|
9852
|
+
InfoTable.defaultProps = InfoTableDefaultProps;export{InfoTable,InfoTableDefaultProps,SearchTable,SearchTableDefaultProps,Table,TableButton,TableButtonDefaultProps,TableDefaultProps,TableIcon,TableIconDefaultProps,TableMenuButton,TableMenuButtonDefaultProps};//# sourceMappingURL=index.esm.js.map
|