@symply.io/basic-components 1.7.0-alpha.2 → 1.7.0-alpha.3

package/VirtualDataTable/index.d.ts

@@ -0,0 +1,3 @@
+import type { VirtualTableProps, TVirtualTableRow } from "./types";
+declare function VirtualDataTable<RowProps extends TVirtualTableRow>(props: VirtualTableProps<RowProps>): import("react/jsx-runtime").JSX.Element;
+export default VirtualDataTable;

package/VirtualDataTable/index.js

@@ -0,0 +1,167 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, cloneElement, useMemo, useCallback } from "react";
+import { TableVirtuoso } from "react-virtuoso";
+import Paper from "@mui/material/Paper";
+import Table from "@mui/material/Table";
+import TableRow from "@mui/material/TableRow";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableFooter from "@mui/material/TableFooter";
+import TableContainer from "@mui/material/TableContainer";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import useTheme from "@mui/material/styles/useTheme";
+function VirtualDataTable(props) {
+    var rows = props.rows, columns = props.columns, dense = props.dense;
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var _a = useMemo(function () {
+        if (isUpMd) {
+            var left = columns.filter(function (c) { return c.fixable === "left"; });
+            var right = columns.filter(function (c) { return c.fixable === "right"; });
+            var dynamic = columns.filter(function (c) { return !c.fixable; });
+            return [left, dynamic, right];
+        }
+        else {
+            return [[], columns, []];
+        }
+    }, [isUpMd, columns]), pinnedLeftCols = _a[0], normalCols = _a[1], pinnedRightCols = _a[2];
+    var VirtuosoTableComponents = useMemo(function () { return ({
+        Scroller: forwardRef(function (props, ref) { return (_jsx(TableContainer, __assign({ component: Paper }, props, { ref: ref, sx: {
+                maxHeight: "inherit",
+                borderWidth: "thin",
+                borderColor: "#e5e5e5",
+                borderStyle: "solid",
+                borderRadius: "4px",
+                borderCollapse: "unset !important",
+                transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+            } }))); }),
+        Table: function (props) { return (_jsx(Table, __assign({}, props, { size: dense ? "small" : "medium", sx: {
+                borderCollapse: "separate",
+                minWidth: 600,
+                tableLayout: "fixed",
+            } }))); },
+        TableHead: forwardRef(function (props, ref) { return (_jsx(TableHead, __assign({}, props, { ref: ref }))); }),
+        TableRow: TableRow,
+        TableBody: forwardRef(function (props, ref) { return (_jsx(TableBody, __assign({}, props, { ref: ref }))); }),
+        TableFoot: forwardRef(function (props, ref) { return (_jsx(TableFooter, __assign({}, props, { ref: ref }))); }),
+    }); }, []);
+    var fixedHeaderContent = useCallback(function () {
+        return (_jsxs(TableRow, { children: [pinnedLeftCols.map(function (column, index) {
+                    var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
+                    var left = pinnedLeftCols
+                        .slice(0, index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ variant: "head", title: headerTip, align: align, sx: {
+                            position: "sticky",
+                            left: left,
+                            zIndex: 20,
+                            width: width,
+                            cursor: sortable ? "pointer" : "default",
+                            backgroundColor: "background.paper",
+                        } }, { children: cloneElement(Header) }), accessor));
+                }), normalCols.map(function (column) {
+                    var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
+                    return (_jsx(TableCell, __assign({ variant: "head", title: headerTip, align: align, sx: {
+                            zIndex: 9,
+                            width: width,
+                            cursor: sortable ? "pointer" : "default",
+                            backgroundColor: "background.paper",
+                        } }, { children: cloneElement(Header) }), accessor));
+                }), pinnedRightCols.map(function (column, index) {
+                    var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
+                    var right = pinnedRightCols
+                        .slice(0, pinnedRightCols.length - 1 - index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ variant: "head", title: headerTip, align: align, sx: {
+                            position: "sticky",
+                            right: right,
+                            zIndex: 20,
+                            width: width,
+                            cursor: sortable ? "pointer" : "default",
+                            backgroundColor: "background.paper",
+                        } }, { children: cloneElement(Header) }), accessor));
+                })] }));
+    }, []);
+    var fixedFooterContent = useCallback(function () {
+        return (_jsxs(TableRow, { children: [pinnedLeftCols.map(function (column, index) {
+                    var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
+                    var left = pinnedLeftCols
+                        .slice(0, index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                            position: "sticky",
+                            left: left,
+                            zIndex: 20,
+                            width: width,
+                            backgroundColor: "background.paper",
+                        } }, { children: Footer ? cloneElement(Footer) : _jsx(_Fragment, {}) }), accessor));
+                }), normalCols.map(function (column) {
+                    var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
+                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                            zIndex: 9,
+                            width: width,
+                            backgroundColor: "background.paper",
+                        } }, { children: Footer ? cloneElement(Footer) : _jsx(_Fragment, {}) }), accessor));
+                }), pinnedRightCols.map(function (column, index) {
+                    var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
+                    var right = pinnedRightCols
+                        .slice(0, pinnedRightCols.length - 1 - index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                            position: "sticky",
+                            right: right,
+                            zIndex: 20,
+                            width: width,
+                            backgroundColor: "background.paper",
+                        } }, { children: Footer ? cloneElement(Footer) : _jsx(_Fragment, {}) }), accessor));
+                })] }));
+    }, []);
+    var itemContent = useCallback(function (rowIndex, row) {
+        return (_jsxs(_Fragment, { children: [pinnedLeftCols.map(function (column, index) {
+                    var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
+                    var left = pinnedLeftCols
+                        .slice(0, index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                            position: "sticky",
+                            left: left,
+                            zIndex: 20,
+                            width: width,
+                            backgroundColor: "background.paper",
+                        } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex }) }), accessor));
+                }), normalCols.map(function (column) {
+                    var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
+                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                            zIndex: 9,
+                            width: width,
+                            backgroundColor: "background.paper",
+                        } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex }) }), accessor));
+                }), pinnedRightCols.map(function (column, index) {
+                    var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
+                    var right = pinnedRightCols
+                        .slice(0, pinnedRightCols.length - 1 - index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                            position: "sticky",
+                            right: right,
+                            zIndex: 20,
+                            width: width,
+                            backgroundColor: "background.paper",
+                        } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex }) }), accessor));
+                })] }));
+    }, []);
+    return (_jsx(TableVirtuoso, { data: rows, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, fixedFooterContent: fixedFooterContent, itemContent: itemContent }));
+}
+export default VirtualDataTable;

package/VirtualDataTable/types.d.ts

@@ -0,0 +1,20 @@
+import type { ReactElement, CSSProperties } from "react";
+export declare type TVirtualTableRow = Record<string, any>;
+export declare type TVirtualTableColumn = {
+    headerTip?: string;
+    Header: ReactElement;
+    Body: ReactElement;
+    Footer?: ReactElement;
+    align?: "left" | "center" | "right";
+    accessor: string;
+    sortable?: boolean;
+    fixable?: "left" | "right";
+    width: number;
+};
+export interface VirtualTableProps<RowProps extends TVirtualTableRow> {
+    dense?: boolean;
+    rows: Array<RowProps>;
+    columns: Array<TVirtualTableColumn>;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/VirtualDataTable/types.js

@@ -0,0 +1 @@
+export {};

package/VirtualGrid/GridCore/GridBodyRow.js

@@ -18,7 +18,6 @@ import useTheme from "@mui/material/styles/useTheme";
 import { useGridVirtualizer } from "../GridVirtualizerContext";
 function VirtualGridBodyRow(props) {
     var rows = props.rows, columns = props.columns, rowIndex = props.rowIndex, virtualRow = props.virtualRow, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
-    console.log({ virtualRow: virtualRow });
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
     var _a = useGridVirtualizer(), leftShadowVisible = _a.leftShadowVisible, rightShadowVisible = _a.rightShadowVisible, onMeasureElement = _a.onMeasureElement;

package/VirtualGrid/types.d.ts

@@ -79,8 +79,6 @@ export declare type VirtualGridFooterProps<RowProps extends Record<string, any>,
 };
 export declare type VirtualGridCoreProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = Omit<VirtualGridHeaderProps<RowProps, ExtendedProps>, "noData"> & VirtualGridBodyProps<RowProps, ExtendedProps> & Omit<VirtualGridFooterProps<RowProps, ExtendedProps>, "noData"> & {
     dense?: boolean;
-    primaryColor?: CSSProperties["color"];
-    secondaryColor?: CSSProperties["color"];
 };
 export declare type VirtualGridProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = VirtualGridCoreProps<RowProps, ExtendedProps> & {
     estimateRowHeight?: number;

package/index.d.ts

@@ -29,6 +29,7 @@ export * from "./TablePagination";
 export * from "./TextInput";
 export * from "./ToastPrompt";
 export * from "./VideoPlayerModal";
+export * from "./VirtualDataTable";
 export * from "./VirtualGrid";
 export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
@@ -58,4 +59,5 @@ export { default as TabGroup } from "./TabGroup";
 export { default as TablePagination } from "./TablePagination";
 export { default as TextInput } from "./TextInput";
 export { default as VideoPlayerModal } from "./VideoPlayerModal";
+export { default as VirtualDataTable } from "./VirtualDataTable";
 export { default as VirtualGrid } from "./VirtualGrid";

package/index.js

@@ -29,6 +29,7 @@ export * from "./TablePagination";
 export * from "./TextInput";
 export * from "./ToastPrompt";
 export * from "./VideoPlayerModal";
+export * from "./VirtualDataTable";
 export * from "./VirtualGrid";
 export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
@@ -58,4 +59,5 @@ export { default as TabGroup } from "./TabGroup";
 export { default as TablePagination } from "./TablePagination";
 export { default as TextInput } from "./TextInput";
 export { default as VideoPlayerModal } from "./VideoPlayerModal";
+export { default as VirtualDataTable } from "./VirtualDataTable";
 export { default as VirtualGrid } from "./VirtualGrid";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.7.0-alpha.2",
+  "version": "1.7.0-alpha.3",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",
@@ -60,6 +60,7 @@
     "color-alpha": "^1.1.3",
     "react-dropzone": "14.2.3",
     "react-player": "2.11.0",
+    "react-virtuoso": "^4.12.0",
     "rifm": "^0.12.1"
   },
   "resolutions": {