@mrshmllw/smores-react 12.7.0-crumbs-feature-table-footer.1 → 12.7.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.
|
@@ -4,11 +4,7 @@ export function TableFooter({ footer, columnCount, }) {
|
|
|
4
4
|
if ('element' in footer) {
|
|
5
5
|
return React.createElement("td", { colSpan: columnCount }, footer.element);
|
|
6
6
|
}
|
|
7
|
-
const columns = footer
|
|
8
|
-
|
|
9
|
-
const rowColor = footer.rowColor ?? 'custard';
|
|
10
|
-
const rowPadding = footer.rowPadding;
|
|
11
|
-
const columnPadding = footer.columnPadding;
|
|
12
|
-
return (React.createElement(TableRow, { key: "footer", rowData: data, rowIndex: columns.length - 1, columns: columns, rowColor: rowColor, rowPadding: rowPadding, columnPadding: columnPadding }));
|
|
7
|
+
const { rowColor = 'custard', data, columns, ...restFooter } = footer;
|
|
8
|
+
return (React.createElement(TableRow, { key: "footer", rowIndex: columns.length - 1, rowColor: rowColor, rowData: data, columns: columns, ...restFooter }));
|
|
13
9
|
}
|
|
14
10
|
//# sourceMappingURL=TableFooter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableFooter.js","sourceRoot":"","sources":["../../../src/Table/components/TableFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAOrC,MAAM,UAAU,WAAW,CAAmB,EAC5C,MAAM,EACN,WAAW,GACF;IACT,IAAI,SAAS,IAAI,MAAM,EAAE,CAAC;QACxB,OAAO,4BAAI,OAAO,EAAE,WAAW,IAAG,MAAM,CAAC,OAAO,CAAM,CAAA;IACxD,CAAC;IAED,MAAM,
|
|
1
|
+
{"version":3,"file":"TableFooter.js","sourceRoot":"","sources":["../../../src/Table/components/TableFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAOrC,MAAM,UAAU,WAAW,CAAmB,EAC5C,MAAM,EACN,WAAW,GACF;IACT,IAAI,SAAS,IAAI,MAAM,EAAE,CAAC;QACxB,OAAO,4BAAI,OAAO,EAAE,WAAW,IAAG,MAAM,CAAC,OAAO,CAAM,CAAA;IACxD,CAAC;IAED,MAAM,EAAE,QAAQ,GAAG,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,GAAG,MAAM,CAAA;IAErE,OAAO,CACL,oBAAC,QAAQ,IACP,GAAG,EAAC,QAAQ,EACZ,QAAQ,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,EAC5B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,OAAO,KACZ,UAAU,GACd,CACH,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport type { TableFooter } from '../types'\nimport { TableRow } from './TableRow'\n\ntype Props<K> = {\n footer: TableFooter<K>\n columnCount: number\n}\n\nexport function TableFooter<K extends object>({\n footer,\n columnCount,\n}: Props<K>) {\n if ('element' in footer) {\n return <td colSpan={columnCount}>{footer.element}</td>\n }\n\n const { rowColor = 'custard', data, columns, ...restFooter } = footer\n\n return (\n <TableRow\n key=\"footer\"\n rowIndex={columns.length - 1}\n rowColor={rowColor}\n rowData={data}\n columns={columns}\n {...restFooter}\n />\n )\n}\n"]}
|
package/dist/Table/types.d.ts
CHANGED
|
@@ -104,8 +104,6 @@ export interface TableProps<T, K = undefined> extends CommonTableProps<T> {
|
|
|
104
104
|
/** Array of data to be displayed in the table. */
|
|
105
105
|
data: T[];
|
|
106
106
|
footer?: TableFooter<K>;
|
|
107
|
-
/** The cell color of the footer. */
|
|
108
|
-
footerColor?: Color;
|
|
109
107
|
/** The text to show when there is no available data to map through. */
|
|
110
108
|
noDataContent?: ReactNode;
|
|
111
109
|
}
|
package/dist/Table/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport { Color } from '../theme'\nimport type { BoxSpacing, SingleSpacing } from './helper.types'\n\nexport type TableStylesProps = {\n hasKeyline?: boolean\n fixedHeader?: boolean\n headerHeight?: string\n stripedColor?: Color\n stickyCell?: boolean\n headerColor?: Color\n rowColor?: Color\n rowBorderColor?: Color\n rowActionsBgColor?: Color\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n rowPadding?: string\n columnPadding?: string\n hideOverflow?: boolean\n clickableRow?: boolean\n noRowBorderColor?: boolean\n}\n\nexport type Primitive = string | number | boolean | bigint\n\nexport type BaseRowAction<T> = {\n onClick: (rowData: T) => void\n showCondition?: (rowData: T) => boolean\n}\n\nexport type RowAction<T> =\n | RowActionButtonDefault<T>\n | RowActionElementOverride<T>\n\nexport type RowActionButtonDefault<T> = {\n iconButton?: Pick<\n IconStrictProps,\n 'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'\n > & { tooltipText?: string }\n genericButton?: Pick<\n ButtonProps,\n | 'children'\n | 'loading'\n | 'disabled'\n | 'primary'\n | 'secondary'\n | 'fallbackStyle'\n | 'textBtn'\n | 'smallButton'\n | 'id'\n >\n} & BaseRowAction<T>\n\nexport type RowActionElementOverride<T> = {\n element: ReactElement<any>\n} & BaseRowAction<T>\n\nexport type RowActions<T> = {\n actions: RowAction<T>[]\n minWidth?: string\n bgColor?: Color\n}\n\ntype RowCellRenderer<T> = (\n row: T,\n rowIndex: number,\n column: TableColumn<T>,\n id: string | number,\n) => React.ReactNode\n\nexport interface TableColumn<T> {\n name?: string | number | React.ReactNode\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n hideOverflow?: boolean\n cell?: RowCellRenderer<T>\n}\n\ntype SubElementProps = {\n bgColor?: Color\n padding?: BoxSpacing\n margin?: BoxSpacing\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T> {\n /** Array of columns to display in the table. */\n columns: TableColumn<T>[]\n /** Sets the height of the header. */\n headerHeight?: string\n /** If true, the table header will be fixed/sticky. */\n fixedHeader?: boolean\n /** If true, the table header will have a key line. */\n hasKeyline?: boolean\n /** If present, the table rows will have alternating colors. */\n stripedColor?: Color\n /** A function to determine if a row is expandable. */\n expandable?: (rowData: T) => boolean\n /** The color for the table header. */\n headerColor?: Color\n /** The default color for each table row. */\n rowColor?: Color\n /** The default color for each table row border. */\n rowBorderColor?: Color\n /** If true, the table will have rounded corners */\n roundedTable?: true\n /** A React element to show when a row is expanded. */\n subTable?: SubElementProps & {\n table: (rowData: T) => ReactElement<any>\n }\n /** Settings for sub rows. */\n subRows?: SubElementProps & {\n /** Function that returns a React element for the sub row. */\n rows: (rowData: T) => ReactElement<any> | ReactElement<any>[]\n }\n /** Function to apply to a row, to make the entire row clickable, useful for navigation. */\n clickableRow?: (rowData: T) => void\n /** Array of actions that can be performed on each row. */\n rowActions?: RowActions<T>\n /** The Y padding for each row. */\n rowPadding?: SingleSpacing\n /** The X padding for each row. */\n columnPadding?: SingleSpacing\n /** Hides the table header. Table defaults to always showing the header. */\n hideTableHeader?: boolean\n}\n\nexport interface TableProps<T, K = undefined> extends CommonTableProps<T> {\n /** Array of data to be displayed in the table. */\n data: T[]\n\n footer?: TableFooter<K>\n\n /** The
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport { Color } from '../theme'\nimport type { BoxSpacing, SingleSpacing } from './helper.types'\n\nexport type TableStylesProps = {\n hasKeyline?: boolean\n fixedHeader?: boolean\n headerHeight?: string\n stripedColor?: Color\n stickyCell?: boolean\n headerColor?: Color\n rowColor?: Color\n rowBorderColor?: Color\n rowActionsBgColor?: Color\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n rowPadding?: string\n columnPadding?: string\n hideOverflow?: boolean\n clickableRow?: boolean\n noRowBorderColor?: boolean\n}\n\nexport type Primitive = string | number | boolean | bigint\n\nexport type BaseRowAction<T> = {\n onClick: (rowData: T) => void\n showCondition?: (rowData: T) => boolean\n}\n\nexport type RowAction<T> =\n | RowActionButtonDefault<T>\n | RowActionElementOverride<T>\n\nexport type RowActionButtonDefault<T> = {\n iconButton?: Pick<\n IconStrictProps,\n 'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'\n > & { tooltipText?: string }\n genericButton?: Pick<\n ButtonProps,\n | 'children'\n | 'loading'\n | 'disabled'\n | 'primary'\n | 'secondary'\n | 'fallbackStyle'\n | 'textBtn'\n | 'smallButton'\n | 'id'\n >\n} & BaseRowAction<T>\n\nexport type RowActionElementOverride<T> = {\n element: ReactElement<any>\n} & BaseRowAction<T>\n\nexport type RowActions<T> = {\n actions: RowAction<T>[]\n minWidth?: string\n bgColor?: Color\n}\n\ntype RowCellRenderer<T> = (\n row: T,\n rowIndex: number,\n column: TableColumn<T>,\n id: string | number,\n) => React.ReactNode\n\nexport interface TableColumn<T> {\n name?: string | number | React.ReactNode\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n hideOverflow?: boolean\n cell?: RowCellRenderer<T>\n}\n\ntype SubElementProps = {\n bgColor?: Color\n padding?: BoxSpacing\n margin?: BoxSpacing\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T> {\n /** Array of columns to display in the table. */\n columns: TableColumn<T>[]\n /** Sets the height of the header. */\n headerHeight?: string\n /** If true, the table header will be fixed/sticky. */\n fixedHeader?: boolean\n /** If true, the table header will have a key line. */\n hasKeyline?: boolean\n /** If present, the table rows will have alternating colors. */\n stripedColor?: Color\n /** A function to determine if a row is expandable. */\n expandable?: (rowData: T) => boolean\n /** The color for the table header. */\n headerColor?: Color\n /** The default color for each table row. */\n rowColor?: Color\n /** The default color for each table row border. */\n rowBorderColor?: Color\n /** If true, the table will have rounded corners */\n roundedTable?: true\n /** A React element to show when a row is expanded. */\n subTable?: SubElementProps & {\n table: (rowData: T) => ReactElement<any>\n }\n /** Settings for sub rows. */\n subRows?: SubElementProps & {\n /** Function that returns a React element for the sub row. */\n rows: (rowData: T) => ReactElement<any> | ReactElement<any>[]\n }\n /** Function to apply to a row, to make the entire row clickable, useful for navigation. */\n clickableRow?: (rowData: T) => void\n /** Array of actions that can be performed on each row. */\n rowActions?: RowActions<T>\n /** The Y padding for each row. */\n rowPadding?: SingleSpacing\n /** The X padding for each row. */\n columnPadding?: SingleSpacing\n /** Hides the table header. Table defaults to always showing the header. */\n hideTableHeader?: boolean\n}\n\nexport interface TableProps<T, K = undefined> extends CommonTableProps<T> {\n /** Array of data to be displayed in the table. */\n data: T[]\n\n footer?: TableFooter<K>\n\n /** The text to show when there is no available data to map through. */\n noDataContent?: ReactNode\n}\n\n/**\n * The type of the footer prop in the Table component.\n * It can either be an array of columns and data, or a React element.\n *\n * For columns, the columns and data will be passed to each column.cell component to generate the footer.\n * For a React element, it will render that as the table footer.\n */\nexport type TableFooter<K> =\n | TableFooterColumnsProps<K>\n | TableFooterElementProps<K>\n\nexport interface TableRowProps<T> extends CommonTableProps<T> {\n rowData: T\n rowIndex: number\n showActions?: boolean\n hideBorder?: boolean\n}\n\nexport interface RowActionsProps<T>\n extends Pick<CommonTableProps<T>, 'expandable' | 'rowActions'> {\n rowData: T\n canExpandRow: boolean\n toggleExpansion: () => void\n isExpanded?: boolean\n}\n\ntype TableFooterElementProps<K> = {\n element: ReactElement<K>\n}\n\ntype TableFooterColumnsProps<K> = {\n /**\n * Row color of the footer.\n *\n * @default 'custard'\n */\n rowColor?: Color\n rowPadding?: SingleSpacing\n columnPadding?: SingleSpacing\n columns: TableColumn<K>[]\n data: K\n}\n\nexport type TableHeaderProps<T> = CommonTableProps<T>\n"]}
|
package/package.json
CHANGED