@pdg/react-table 1.0.31 → 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.
Files changed (11) hide show
  1. package/dist/@util/table.d.ts +6 -0
  2. package/dist/InfoTable/InfoTable.d.ts +7 -0
  3. package/dist/InfoTable/InfoTable.style.d.ts +18 -0
  4. package/dist/InfoTable/InfoTable.types.d.ts +35 -0
  5. package/dist/InfoTable/index.d.ts +4 -0
  6. package/dist/index.d.ts +1 -0
  7. package/dist/index.esm.js +63 -17
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +63 -17
  10. package/dist/index.js.map +1 -1
  11. 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;
package/dist/InfoTable/InfoTable.d.ts ADDED
@@ -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;
package/dist/InfoTable/InfoTable.style.d.ts ADDED
@@ -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>, {}>;
package/dist/InfoTable/InfoTable.types.d.ts ADDED
@@ -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/InfoTable/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import InfoTable from './InfoTable';
2
+ export default InfoTable;
3
+ export { InfoTable };
4
+ export * from './InfoTable.types';
package/dist/index.d.ts CHANGED
@@ -4,3 +4,4 @@ export * from './SearchTable';
4
4
  export * from './TableButton';
5
5
  export * from './TableMenuButton';
6
6
  export * from './TableIcon';
7
+ export * from './InfoTable';
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$2 || (templateObject_1$2 = __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$2;var TableBodyRowDefaultProps = {};const CSS = /*#__PURE__*/Object.freeze({
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$1 || (templateObject_1$1 = __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"])));
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$1;var StyledButtonsBox = styled(Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n"], ["\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n"])));
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;
@@ -8615,17 +8642,15 @@ var TableBodyCell = function (_a) {
8615
8642
  data = dayjs(data, column.dateFormat).format('YYYY-MM-DD HH:mm:ss');
8616
8643
  }
8617
8644
  break;
8618
- default:
8619
- {
8620
- var tooltip = void 0;
8621
- if (column.onGetTooltip) {
8622
- tooltip = column.onGetTooltip(item, index);
8623
- }
8624
- if (tooltip) {
8625
- data = (React__default.createElement(Tooltip, __assign$1({ className: 'TableBodyCell-tooltip', title: tooltip }, column.tooltipProps), React__default.isValidElement(data) ? data : React__default.createElement("span", null, data)));
8626
- }
8627
- }
8628
- break;
8645
+ }
8646
+ if (column.type !== 'img') {
8647
+ var tooltip = void 0;
8648
+ if (column.onGetTooltip) {
8649
+ tooltip = column.onGetTooltip(item, index);
8650
+ }
8651
+ if (tooltip) {
8652
+ data = (React__default.createElement(Tooltip, __assign$1({ className: 'TableBodyCell-tooltip', title: tooltip }, column.tooltipProps), React__default.isValidElement(data) ? (data.type === React__default.Fragment ? (React__default.createElement("span", null, data)) : (data)) : (React__default.createElement("span", null, data))));
8653
+ }
8629
8654
  }
8630
8655
  return data;
8631
8656
  }, [column, item, index, menuOpen, checked, checkDisabled, buttonsBoxJustifyContent, onCheckChange]);
@@ -8642,7 +8667,7 @@ var TableBodyCell = function (_a) {
8642
8667
  // Render ----------------------------------------------------------------------------------------------------------
8643
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));
8644
8669
  };
8645
- var templateObject_1;var StyledBodyRow = styled(TableRow)(function (_a) {
8670
+ var templateObject_1$1;var StyledBodyRow = styled(TableRow)(function (_a) {
8646
8671
  var theme = _a.theme;
8647
8672
  return ({
8648
8673
  '&.odd-color:nth-of-type(odd):not(:hover)': {
@@ -9803,4 +9828,25 @@ TableButton.defaultProps = TableButtonDefaultProps;var TableMenuButtonDefaultPro
9803
9828
  })));
9804
9829
  });
9805
9830
  TableMenuButton.displayName = 'TableMenuButton';
9806
- TableMenuButton.defaultProps = TableMenuButtonDefaultProps;export{SearchTable,SearchTableDefaultProps,Table,TableButton,TableButtonDefaultProps,TableDefaultProps,TableIcon,TableIconDefaultProps,TableMenuButton,TableMenuButtonDefaultProps};//# sourceMappingURL=index.esm.js.map
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