@symply.io/basic-components 1.1.2-beta.8 → 1.1.2
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/DataTable/TableBodyRow.js +17 -7
- package/DataTable/TableFooter.js +13 -9
- package/DataTable/TableHeader.js +13 -9
- package/DataTable/index.js +6 -5
- package/DataTable/types.d.ts +4 -2
- package/README.md +29 -22
- package/TablePagination/index.js +2 -9
- package/package.json +1 -1
|
@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import { cloneElement, useState } from "react";
|
|
13
|
+
import { cloneElement, useState, useMemo } from "react";
|
|
14
14
|
import TableRow from "@mui/material/TableRow";
|
|
15
15
|
import TableCell from "@mui/material/TableCell";
|
|
16
16
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
@@ -20,11 +20,17 @@ function TableBodyRow(props) {
|
|
|
20
20
|
var _a = useState(), rowEl = _a[0], setRowEl = _a[1];
|
|
21
21
|
var theme = useTheme();
|
|
22
22
|
var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
var _b = useMemo(function () {
|
|
24
|
+
if (isUpMd) {
|
|
25
|
+
var left = columns.filter(function (c) { return c.fixable === "left"; });
|
|
26
|
+
var right = columns.filter(function (c) { return c.fixable === "right"; });
|
|
27
|
+
var dynamic = columns.filter(function (c) { return !c.fixable; });
|
|
28
|
+
return [left, dynamic, right];
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
return [[], columns, []];
|
|
32
|
+
}
|
|
33
|
+
}, [isUpMd, columns]), fixedLeftCols = _b[0], dynamicCols = _b[1], fixedRightCols = _b[2];
|
|
28
34
|
return (_jsxs(TableRow, __assign({ sx: {
|
|
29
35
|
"&:hover": {
|
|
30
36
|
cursor: onRowClick ? "pointer" : "default",
|
|
@@ -65,7 +71,11 @@ function TableBodyRow(props) {
|
|
|
65
71
|
} }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
|
|
66
72
|
}), dynamicCols.map(function (col) {
|
|
67
73
|
var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
|
|
68
|
-
return (_jsx(TableCell, __assign({ align: align, sx: {
|
|
74
|
+
return (_jsx(TableCell, __assign({ align: align, sx: {
|
|
75
|
+
width: width,
|
|
76
|
+
zIndex: 9,
|
|
77
|
+
backgroundColor: onRowClick && rowEl ? "#F2F1F3" : "#FEFEFE"
|
|
78
|
+
} }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
|
|
69
79
|
}), fixedRightCols.map(function (col, index) {
|
|
70
80
|
var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
|
|
71
81
|
var right = fixedRightCols
|
package/DataTable/TableFooter.js
CHANGED
|
@@ -10,23 +10,27 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import { cloneElement } from "react";
|
|
13
|
+
import { cloneElement, useMemo } from "react";
|
|
14
14
|
import TableRow from "@mui/material/TableRow";
|
|
15
15
|
import Footer from "@mui/material/TableFooter";
|
|
16
16
|
import TableCell from "@mui/material/TableCell";
|
|
17
17
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
18
18
|
import useTheme from "@mui/material/styles/useTheme";
|
|
19
19
|
function TableFooter(props) {
|
|
20
|
-
var footers = props.footers, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
|
|
20
|
+
var footers = props.footers, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
|
|
21
21
|
var theme = useTheme();
|
|
22
22
|
var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
23
|
+
var _a = useMemo(function () {
|
|
24
|
+
if (isUpMd && !noData) {
|
|
25
|
+
var left = footers.filter(function (f) { return f.fixable === "left"; });
|
|
26
|
+
var right = footers.filter(function (f) { return f.fixable === "right"; });
|
|
27
|
+
var dynamic = footers.filter(function (f) { return !f.fixable; });
|
|
28
|
+
return [left, dynamic, right];
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
return [[], footers, []];
|
|
32
|
+
}
|
|
33
|
+
}, [isUpMd, noData, footers]), fixedLeftFooters = _a[0], dynamicFooters = _a[1], fixedRightFooters = _a[2];
|
|
30
34
|
return (_jsx(Footer, { children: _jsxs(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: [fixedLeftFooters.map(function (footer, index) {
|
|
31
35
|
var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
|
|
32
36
|
var left = fixedLeftFooters
|
package/DataTable/TableHeader.js
CHANGED
|
@@ -10,23 +10,27 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import { cloneElement } from "react";
|
|
13
|
+
import { cloneElement, useMemo } from "react";
|
|
14
14
|
import TableRow from "@mui/material/TableRow";
|
|
15
15
|
import TableHead from "@mui/material/TableHead";
|
|
16
16
|
import TableCell from "@mui/material/TableCell";
|
|
17
17
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
18
18
|
import useTheme from "@mui/material/styles/useTheme";
|
|
19
19
|
function TableHeader(props) {
|
|
20
|
-
var headers = props.headers, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
|
|
20
|
+
var headers = props.headers, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
|
|
21
21
|
var theme = useTheme();
|
|
22
22
|
var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
23
|
+
var _a = useMemo(function () {
|
|
24
|
+
if (isUpMd && !noData) {
|
|
25
|
+
var left = headers.filter(function (h) { return h.fixable === "left"; });
|
|
26
|
+
var right = headers.filter(function (h) { return h.fixable === "right"; });
|
|
27
|
+
var dynamic = headers.filter(function (h) { return !h.fixable; });
|
|
28
|
+
return [left, dynamic, right];
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
return [[], headers, []];
|
|
32
|
+
}
|
|
33
|
+
}, [isUpMd, noData, headers]), fixedLeftHeaders = _a[0], dynamicHeaders = _a[1], fixedRightHeaders = _a[2];
|
|
30
34
|
return (_jsx(TableHead, { children: _jsxs(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: [fixedLeftHeaders.map(function (header, index) {
|
|
31
35
|
var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
|
|
32
36
|
var left = fixedLeftHeaders
|
package/DataTable/index.js
CHANGED
|
@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx,
|
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { useState, useCallback, useRef, useEffect } from "react";
|
|
14
14
|
import Table from "@mui/material/Table";
|
|
15
15
|
import TableContainer from "@mui/material/TableContainer";
|
|
@@ -32,7 +32,7 @@ function DataTable(props) {
|
|
|
32
32
|
var clientWidth = target.clientWidth;
|
|
33
33
|
var hasScrollBar = scrollWidth > clientWidth;
|
|
34
34
|
setLeftShadowVisible(hasScrollBar && scrollLeft > 0);
|
|
35
|
-
setRightShadowVisible(hasScrollBar && scrollWidth - scrollLeft
|
|
35
|
+
setRightShadowVisible(hasScrollBar && scrollWidth - scrollLeft > clientWidth + 1);
|
|
36
36
|
}
|
|
37
37
|
}, []);
|
|
38
38
|
useEffect(function () {
|
|
@@ -46,13 +46,14 @@ function DataTable(props) {
|
|
|
46
46
|
useEffect(function () { return function () {
|
|
47
47
|
window.removeEventListener("scroll", onProcessShadowVisible);
|
|
48
48
|
}; }, [onProcessShadowVisible]);
|
|
49
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children:
|
|
49
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TableContainer, __assign({ ref: tableRef, onScroll: onProcessShadowVisible, sx: {
|
|
50
50
|
borderWidth: "thin",
|
|
51
51
|
borderColor: "#e5e5e5",
|
|
52
52
|
borderStyle: "solid",
|
|
53
53
|
borderRadius: "4px",
|
|
54
|
-
borderCollapse: "unset !important"
|
|
55
|
-
|
|
54
|
+
borderCollapse: "unset !important",
|
|
55
|
+
transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
|
|
56
|
+
} }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), footers.length > 0 ? (_jsx(TableFooter, { footers: footers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
|
|
56
57
|
}
|
|
57
58
|
export default DataTable;
|
|
58
59
|
export { default as useDataTable } from "./useTable";
|
package/DataTable/types.d.ts
CHANGED
|
@@ -17,7 +17,7 @@ export declare type ColumnProps = {
|
|
|
17
17
|
accessor: string;
|
|
18
18
|
sortable?: boolean;
|
|
19
19
|
fixable?: "left" | "right";
|
|
20
|
-
width
|
|
20
|
+
width: number;
|
|
21
21
|
};
|
|
22
22
|
export declare type UseTableBaseProps<RowProps extends KvProps> = {
|
|
23
23
|
data: Array<RowProps>;
|
|
@@ -46,6 +46,7 @@ export declare type UserTableReturns<RowProps extends KvProps, ExtendedProps ext
|
|
|
46
46
|
};
|
|
47
47
|
export declare type TableHeaderProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
|
|
48
48
|
headers: Array<TableHeaderCellProps<RowProps, ExtendedProps>>;
|
|
49
|
+
noData?: boolean;
|
|
49
50
|
leftShadowVisible?: boolean;
|
|
50
51
|
rightShadowVisible?: boolean;
|
|
51
52
|
};
|
|
@@ -62,10 +63,11 @@ export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps ex
|
|
|
62
63
|
};
|
|
63
64
|
export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
|
|
64
65
|
footers: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
|
|
66
|
+
noData?: boolean;
|
|
65
67
|
leftShadowVisible?: boolean;
|
|
66
68
|
rightShadowVisible?: boolean;
|
|
67
69
|
};
|
|
68
|
-
export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableHeaderProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & Omit<TableBodyProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & Omit<TableFooterProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & {
|
|
70
|
+
export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableHeaderProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "noData"> & Omit<TableBodyProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & Omit<TableFooterProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "noData"> & {
|
|
69
71
|
dense?: boolean;
|
|
70
72
|
stickyHeader?: boolean;
|
|
71
73
|
primaryColor?: CSSProperties["color"];
|
package/README.md
CHANGED
|
@@ -372,36 +372,43 @@ import DataTable, { useDataTable } from '@symply.io/basic-components/DataTable';
|
|
|
372
372
|
| sortable | bool | | false | If true, the column can be sortable. |
|
|
373
373
|
| width | number | | false | The fixed width of cells. |
|
|
374
374
|
|
|
375
|
+
<h5>Sorting Props</h5>
|
|
376
|
+
|
|
377
|
+
| Name | Type | Default | Required | Description |
|
|
378
|
+
| -------- | ------------------------- | ------- | -------- | ---------------------- |
|
|
379
|
+
| accessor | string | | true | The key of the column. |
|
|
380
|
+
| order | "ASC" \| "DESC" \| "NONE" | | true | The sorting order. |
|
|
381
|
+
|
|
375
382
|
<h5>Hook Props</h5>
|
|
376
383
|
|
|
377
|
-
| Name | Type | Default | Required | Description
|
|
378
|
-
| ------------- | -------------------------- | ------- | -------- |
|
|
379
|
-
| columns | Array\<
|
|
380
|
-
| data | Array<{ [name]: unknown }> | | true | table data/rows
|
|
381
|
-
| disableSortBy | bool | | false | If true, the whole table can't be sortable.
|
|
382
|
-
| initialState | { sortBy?:
|
|
383
|
-
| onSort | func | | false | The function for sorting rows
|
|
384
|
+
| Name | Type | Default | Required | Description |
|
|
385
|
+
| ------------- | -------------------------- | ------- | -------- | ------------------------------------------------------------ |
|
|
386
|
+
| columns | Array\<ColumnProps\> | | true | table columns |
|
|
387
|
+
| data | Array<{ [name]: unknown }> | | true | table data/rows |
|
|
388
|
+
| disableSortBy | bool | | false | If true, the whole table can't be sortable. |
|
|
389
|
+
| initialState | { sortBy?: SortingProps} | | false | Set the initial states |
|
|
390
|
+
| onSort | func | | false | The function for sorting rows.<br />**Signature:**<br/>`function(props: SortingProps) => unknown` |
|
|
384
391
|
|
|
385
392
|
<h5>Hook Returns</h5>
|
|
386
393
|
|
|
387
|
-
| Name | Type
|
|
388
|
-
| ------- |
|
|
389
|
-
| headers | Array\<
|
|
390
|
-
| columns | Array\<
|
|
391
|
-
| footers | Array\<
|
|
392
|
-
| rows | Array<
|
|
394
|
+
| Name | Type | Description |
|
|
395
|
+
| ------- | ----------------------------- | ------------------------- |
|
|
396
|
+
| headers | Array\<TableHeaderCellProps\> | The cells for the header. |
|
|
397
|
+
| columns | Array\<TableBodyCellProps\> | The cells for the body. |
|
|
398
|
+
| footers | Array\<TableFooterCellProps> | The cells for the footer. |
|
|
399
|
+
| rows | Array<RowProps\> | The rows for the table. |
|
|
393
400
|
|
|
394
401
|
<h5>Component Props</h5>
|
|
395
402
|
|
|
396
|
-
| Name | Type
|
|
397
|
-
| ------------ |
|
|
398
|
-
| headers | Array\<
|
|
399
|
-
| columns | Array\<
|
|
400
|
-
| dense | bool
|
|
401
|
-
| noDataText | string
|
|
402
|
-
| rows | Array<
|
|
403
|
-
| stickyHeader | bool
|
|
404
|
-
| footers | Array\<
|
|
403
|
+
| Name | Type | Default | Required | Description |
|
|
404
|
+
| ------------ | ----------------------------- | ---------- | -------- | ------------------------------------------------------- |
|
|
405
|
+
| headers | Array\<TableHeaderCellProps\> | | true | The cells for the header. (from the hook) |
|
|
406
|
+
| columns | Array\<TableBodyCellProps\> | | true | The cells for the body. (from the hook) |
|
|
407
|
+
| dense | bool | | false | If `true` the table size/density would be tight. |
|
|
408
|
+
| noDataText | string | 'No Data!' | false | The text when no data rendered. |
|
|
409
|
+
| rows | Array<RowProps\> | | true | The rows for the table. (from the hook) |
|
|
410
|
+
| stickyHeader | bool | | false | Set the header sticky.<br/>⚠️ It doesn't work with IE11. |
|
|
411
|
+
| footers | Array\<TableFooterCellProps> | [] | false | The cells for the footer. (from the hook) |
|
|
405
412
|
|
|
406
413
|
|
|
407
414
|
|
package/TablePagination/index.js
CHANGED
|
@@ -9,9 +9,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import TableRow from "@mui/material/TableRow";
|
|
14
|
-
import TableFooter from "@mui/material/TableFooter";
|
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
15
13
|
import TablePagination from "@mui/material/TablePagination";
|
|
16
14
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
|
17
15
|
import TablePaginationActions from "./Actions";
|
|
@@ -19,12 +17,7 @@ import useCustomTheme from "../useCustomTheme";
|
|
|
19
17
|
function Pagination(props) {
|
|
20
18
|
var colSpan = props.colSpan, count = props.count, page = props.page, rowsPerPage = props.rowsPerPage, _a = props.rowsPerPageOptions, rowsPerPageOptions = _a === void 0 ? [5, 10, 20, 30] : _a, onPageChange = props.onPageChange, onRowsPerPageChange = props.onRowsPerPageChange, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
|
|
21
19
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
22
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: count
|
|
23
|
-
inputProps: {
|
|
24
|
-
"aria-label": "rows per page",
|
|
25
|
-
},
|
|
26
|
-
native: true,
|
|
27
|
-
}, rowsPerPageOptions: rowsPerPageOptions, onPageChange: onPageChange, onRowsPerPageChange: onRowsPerPageChange, ActionsComponent: TablePaginationActions }) }) })) })));
|
|
20
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: count ? (_jsx(TablePagination, { component: "div", colSpan: colSpan, count: count, rowsPerPage: rowsPerPage, page: page, SelectProps: { native: true }, rowsPerPageOptions: rowsPerPageOptions, onPageChange: onPageChange, onRowsPerPageChange: onRowsPerPageChange, ActionsComponent: TablePaginationActions })) : (_jsx(_Fragment, {})) })));
|
|
28
21
|
}
|
|
29
22
|
export default Pagination;
|
|
30
23
|
export * from "./types";
|