@mrshmllw/smores-react 7.0.0-crumbs-sc-v6.2 → 7.0.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/dist/Table/Table.d.ts +2 -1
- package/dist/Table/Table.js +3 -2
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/components/TableHeader.d.ts +1 -1
- package/dist/Table/components/TableHeader.js +3 -3
- package/dist/Table/components/TableHeader.js.map +1 -1
- package/dist/Table/components/commonComponents.js +1 -0
- package/dist/Table/components/commonComponents.js.map +1 -1
- package/dist/Table/types.d.ts +2 -0
- package/package.json +1 -1
package/dist/Table/Table.d.ts
CHANGED
|
@@ -17,6 +17,7 @@ import { TableProps } from './types';
|
|
|
17
17
|
* @template T - The type of data the table displays.
|
|
18
18
|
* @property {T[]} data - Array of data to be displayed in the table.
|
|
19
19
|
* @property {TableColumn<T>[]} columns - Array of columns to display in the table.
|
|
20
|
+
* @property {boolean} [hasKeyline=false] - If true, the table header will have a key line.
|
|
20
21
|
* @property {boolean} [fixedHeader=false] - If true, the table header will be fixed/sticky.
|
|
21
22
|
* @property {string} [headerHeight] - Sets the height of the header.
|
|
22
23
|
* @property {function(T): boolean} [expandable] - A function to determine if a row is expandable.
|
|
@@ -34,4 +35,4 @@ import { TableProps } from './types';
|
|
|
34
35
|
* @property {string} [columnPadding] - The X padding for each row.
|
|
35
36
|
* @property {string} [noDataContent] - The text to show when there is no available data to map through.
|
|
36
37
|
*/
|
|
37
|
-
export declare const Table: <T extends object>({ columns, data, fixedHeader, expandable, subTable, subRows, headerHeight, headerColor, rowColor, stripedColor, rowBorderColor, rowActions, clickableRow, rowPadding, columnPadding, noDataContent, }: TableProps<T>) => JSX.Element;
|
|
38
|
+
export declare const Table: <T extends object>({ columns, data, fixedHeader, hasKeyline, expandable, subTable, subRows, headerHeight, headerColor, rowColor, stripedColor, rowBorderColor, rowActions, clickableRow, rowPadding, columnPadding, noDataContent, }: TableProps<T>) => JSX.Element;
|
package/dist/Table/Table.js
CHANGED
|
@@ -20,6 +20,7 @@ import { StyledCell, StyledTable } from './components/commonComponents';
|
|
|
20
20
|
* @template T - The type of data the table displays.
|
|
21
21
|
* @property {T[]} data - Array of data to be displayed in the table.
|
|
22
22
|
* @property {TableColumn<T>[]} columns - Array of columns to display in the table.
|
|
23
|
+
* @property {boolean} [hasKeyline=false] - If true, the table header will have a key line.
|
|
23
24
|
* @property {boolean} [fixedHeader=false] - If true, the table header will be fixed/sticky.
|
|
24
25
|
* @property {string} [headerHeight] - Sets the height of the header.
|
|
25
26
|
* @property {function(T): boolean} [expandable] - A function to determine if a row is expandable.
|
|
@@ -37,12 +38,12 @@ import { StyledCell, StyledTable } from './components/commonComponents';
|
|
|
37
38
|
* @property {string} [columnPadding] - The X padding for each row.
|
|
38
39
|
* @property {string} [noDataContent] - The text to show when there is no available data to map through.
|
|
39
40
|
*/
|
|
40
|
-
export const Table = ({ columns, data, fixedHeader = true, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, }) => {
|
|
41
|
+
export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, }) => {
|
|
41
42
|
const showActionsCell = expandable || rowActions;
|
|
42
43
|
const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
|
|
43
44
|
return (React.createElement(StyledTable, null,
|
|
44
45
|
React.createElement("thead", null,
|
|
45
|
-
React.createElement(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, subTable: subTable, headerColor: headerColor, rowActions: rowActions, columnPadding: columnPadding, expandable: expandable })),
|
|
46
|
+
React.createElement(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, subTable: subTable, headerColor: headerColor, rowActions: rowActions, columnPadding: columnPadding, expandable: expandable, hasKeyline: hasKeyline })),
|
|
46
47
|
React.createElement("tbody", null,
|
|
47
48
|
data.length === 0 && (React.createElement(StyledCell, { colSpan: expandSubProp, "$rowPadding": rowPadding, "$columnPadding": columnPadding }, noDataContent ? (noDataContent) : (React.createElement(Text, { align: "center" }, "No available data")))),
|
|
48
49
|
data.length !== 0 &&
|
package/dist/Table/Table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAGvE
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAGvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAmB,EACtC,OAAO,EACP,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,KAAK,EAClB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,GAAG,YAAY,EAC1B,QAAQ,GAAG,SAAS,EACpB,YAAY,EACZ,cAAc,GAAG,SAAS,EAC1B,UAAU,EACV,YAAY,EACZ,UAAU,EACV,aAAa,EACb,aAAa,GACC,EAAE,EAAE;IAClB,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAChD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAC3E,OAAO,CACL,oBAAC,WAAW;QACV;YACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACI;QACR;YACG,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB,oBAAC,UAAU,IACT,OAAO,EAAE,aAAa,iBACT,UAAU,oBACP,aAAa,IAE5B,aAAa,CAAC,CAAC,CAAC,CACf,aAAa,CACd,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,wBAAyB,CAC9C,CACU,CACd;YACA,IAAI,CAAC,MAAM,KAAK,CAAC;gBAChB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC1B,oBAAC,QAAQ,IACP,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC,CACE,CACI,CACf,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TableHeaderProps } from '../types';
|
|
3
|
-
export declare const TableHeader: <T extends object>({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, }: TableHeaderProps<T>) => JSX.Element;
|
|
3
|
+
export declare const TableHeader: <T extends object>({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, hasKeyline, }: TableHeaderProps<T>) => JSX.Element;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { StyledHeaderCell, StyledRow } from './commonComponents';
|
|
3
|
-
export const TableHeader = ({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, }) => {
|
|
3
|
+
export const TableHeader = ({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, hasKeyline, }) => {
|
|
4
4
|
return (React.createElement(StyledRow, null,
|
|
5
|
-
columns.map((column, columnIndex) => (React.createElement(StyledHeaderCell, { key: columnIndex, "$fixedHeader": fixedHeader, "$headerHeight": headerHeight, "$minWidth": column.minWidth, "$maxWidth": column.maxWidth, "$headerColor": headerColor, "$columnPadding": columnPadding }, column.name))),
|
|
6
|
-
(expandable || rowActions) && (React.createElement(StyledHeaderCell, { "$fixedHeader": fixedHeader, "$stickyCell": true, "$minWidth": rowActions?.minWidth, "$headerColor": headerColor, "$columnPadding": columnPadding }, "Actions"))));
|
|
5
|
+
columns.map((column, columnIndex) => (React.createElement(StyledHeaderCell, { key: columnIndex, "$fixedHeader": fixedHeader, "$headerHeight": headerHeight, "$minWidth": column.minWidth, "$maxWidth": column.maxWidth, "$headerColor": headerColor, "$columnPadding": columnPadding, "$hasKeyline": hasKeyline }, column.name))),
|
|
6
|
+
(expandable || rowActions) && (React.createElement(StyledHeaderCell, { "$fixedHeader": fixedHeader, "$stickyCell": true, "$minWidth": rowActions?.minWidth, "$headerColor": headerColor, "$columnPadding": columnPadding, "$hasKeyline": hasKeyline }, "Actions"))));
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=TableHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/Table/components/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAEhE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAmB,EAC5C,OAAO,EACP,WAAW,EACX,WAAW,EACX,UAAU,EACV,YAAY,EACZ,aAAa,EACb,UAAU,GACU,EAAE,EAAE;IACxB,OAAO,CACL,oBAAC,SAAS;QACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACpC,oBAAC,gBAAgB,IACf,GAAG,EAAE,WAAW,kBACF,WAAW,mBACV,YAAY,eAChB,MAAM,CAAC,QAAQ,eACf,MAAM,CAAC,QAAQ,kBACZ,WAAW,oBACT,aAAa,
|
|
1
|
+
{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/Table/components/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAEhE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAmB,EAC5C,OAAO,EACP,WAAW,EACX,WAAW,EACX,UAAU,EACV,YAAY,EACZ,aAAa,EACb,UAAU,EACV,UAAU,GACU,EAAE,EAAE;IACxB,OAAO,CACL,oBAAC,SAAS;QACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACpC,oBAAC,gBAAgB,IACf,GAAG,EAAE,WAAW,kBACF,WAAW,mBACV,YAAY,eAChB,MAAM,CAAC,QAAQ,eACf,MAAM,CAAC,QAAQ,kBACZ,WAAW,oBACT,aAAa,iBAChB,UAAU,IAEtB,MAAM,CAAC,IAAI,CACK,CACpB,CAAC;QACD,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI,CAC7B,oBAAC,gBAAgB,oBACD,WAAW,iBACZ,IAAI,eACN,UAAU,EAAE,QAAQ,kBACjB,WAAW,oBACT,aAAa,iBAChB,UAAU,cAGN,CACpB,CACS,CACb,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -13,6 +13,7 @@ export const StyledTable = styled.table `
|
|
|
13
13
|
`;
|
|
14
14
|
export const StyledHeaderCell = styled.th `
|
|
15
15
|
background: ${theme.colors.coconut};
|
|
16
|
+
border-bottom: ${({ $hasKeyline }) => $hasKeyline ? `1px solid ${theme.colors.liquorice}` : 'none'};
|
|
16
17
|
position: ${({ $fixedHeader }) => ($fixedHeader ? 'sticky' : 'auto')};
|
|
17
18
|
top: 0;
|
|
18
19
|
z-index: 2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAG5D,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;gBAKvB,KAAK,CAAC,MAAM,CAAC,OAAO;;CAEnC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,EAAE,CAAkC;gBAC3D,KAAK,CAAC,MAAM,CAAC,OAAO;
|
|
1
|
+
{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"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"}
|
package/dist/Table/types.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { ButtonProps } from '../Button/Button';
|
|
|
3
3
|
import { IconStrictProps } from '../IconStrict';
|
|
4
4
|
import { Color } from '../theme';
|
|
5
5
|
export type TableStylesProps = {
|
|
6
|
+
hasKeyline?: boolean;
|
|
6
7
|
fixedHeader?: boolean;
|
|
7
8
|
headerHeight?: string;
|
|
8
9
|
stripedColor?: Color;
|
|
@@ -47,6 +48,7 @@ interface CommonTableProps<T> {
|
|
|
47
48
|
columns: TableColumn<T>[];
|
|
48
49
|
headerHeight?: string;
|
|
49
50
|
fixedHeader?: boolean;
|
|
51
|
+
hasKeyline?: boolean;
|
|
50
52
|
stripedColor?: Color;
|
|
51
53
|
expandable?: (rowData: T) => boolean;
|
|
52
54
|
headerColor?: Color;
|