@evoke-platform/ui-components 1.0.0-dev.147 → 1.0.0-dev.148

package/dist/published/components/custom/DataGrid/DataGrid.d.ts

@@ -1,8 +1,15 @@
 /// <reference types="react" />
 import { DataGridProps as MuiDataGridProps, GridValidRowModel } from '@mui/x-data-grid';
 import { Theme } from '@mui/material';
+export declare type BulkAction = {
+    label: string;
+    onClick: () => void;
+    selectionCount?: number;
+};
 export declare type DataGridProps<T extends GridValidRowModel> = MuiDataGridProps<T> & {
     onRefresh?: () => void;
     theme?: Theme;
+    title?: string;
+    bulkAction?: BulkAction;
 };
 export default function <T extends GridValidRowModel>(props: DataGridProps<T>): JSX.Element;

package/dist/published/components/custom/DataGrid/DataGrid.js

@@ -14,49 +14,40 @@ import React, { useMemo, useState } from 'react';
 import Toolbar from './Toolbar';
 import UIThemeProvider from '../../../theme';
 export default function (props) {
-    const { onRefresh, loading, theme } = props, rest = __rest(props, ["onRefresh", "loading", "theme"]);
+    const { onRefresh, loading, theme, title, bulkAction } = props, rest = __rest(props, ["onRefresh", "loading", "theme", "title", "bulkAction"]);
     const [anchorEl, setAnchorEl] = useState();
-    const toolbar = useMemo(() => () => React.createElement(Toolbar, { onRefresh: onRefresh, setAnchorEl: setAnchorEl, loading: loading, theme: theme }), [onRefresh, loading]);
+    const toolbar = useMemo(() => () => (React.createElement(Toolbar, { onRefresh: onRefresh, setAnchorEl: setAnchorEl, loading: loading, theme: theme, title: title, bulkAction: bulkAction })), [onRefresh, loading]);
     return (React.createElement(UIThemeProvider, { args: { theme: theme } },
-        React.createElement(MuiDataGrid, Object.assign({ onMenuOpen: (env) => setAnchorEl(env.target), loading: loading }, rest, { sx: {
-                borderRadius: '8px',
-                border: 'none',
-                '& .MuiDataGrid-columnHeaders': {
+        React.createElement(MuiDataGrid, Object.assign({ onMenuOpen: (env) => setAnchorEl(env.target), loading: loading }, rest, { sx: Object.assign({ borderRadius: '8px', border: 'none', '& .MuiDataGrid-columnHeaders': {
                     backgroundColor: '#F4F6F8',
                     color: '#637381',
-                    borderRadius: '8px 8px 0 0'
-                },
-                '& .MuiDataGrid-virtualScrollerContent': {
+                    borderRadius: '8px 8px 0 0',
+                }, '& .MuiDataGrid-virtualScrollerContent': {
                     borderRight: '1px solid #eee',
                     borderLeft: '1px solid #eee',
-                },
-                '& .MuiDataGrid-toolbarContainer': {
-                    padding: '7px 0',
-                    fontColor: '#212B36'
-                },
-                '& .MuiDataGrid-row': {
+                }, '& .MuiDataGrid-toolbarContainer': {
+                    padding: '0',
+                    fontColor: '#212B36',
+                }, '& .MuiDataGrid-row': {
                     borderBottom: '1px solid #eee',
-                },
-                '& .MuiDataGrid-cell': {
-                    border: 'none'
-                },
-                '& .MuiDataGrid-footerContainer': {
+                }, '& .MuiDataGrid-cell': {
+                    border: 'none',
+                }, '& .MuiDataGrid-footerContainer': {
                     border: '1px solid #eee',
-                    borderRadius: '0 0 8px 8px'
-                },
-                '.css-17hki28-MuiButtonBase-root-MuiButton-root': {
+                    borderRadius: '0 0 8px 8px',
+                }, '& .MuiTablePagination-displayedRows': {
+                    marginBottom: 0,
+                }, '.css-17hki28-MuiButtonBase-root-MuiButton-root': {
                     padding: '7px',
                     color: '#757575',
                     '&:hover': {
                         backgroundColor: '#f2f3f5',
-                    }
-                },
-                height: 'calc(100vh - 240px)'
-            }, localeText: {
+                    },
+                }, height: 'calc(100vh - 240px)' }, rest.sx), localeText: {
                 toolbarColumns: '',
                 toolbarDensity: '',
                 toolbarFilters: '',
-                toolbarExport: 'Download'
+                toolbarExport: 'Download',
             }, componentsProps: {
                 panel: {
                     anchorEl: anchorEl,
@@ -66,10 +57,10 @@ export default function (props) {
                             borderRadius: '8px',
                             boxShadow: '0px 24px 48px rgba(145, 158, 171, 0.4)',
                             padding: '8px',
-                            stop: -120
-                        }
-                    }
-                }
+                            stop: -120,
+                        },
+                    },
+                },
             }, components: {
                 Toolbar: toolbar,
             } }))));

package/dist/published/components/custom/DataGrid/Toolbar.d.ts

@@ -1,10 +1,13 @@
 /// <reference types="react" />
 import { GridToolbarProps as MuiGridToolbarProps } from '@mui/x-data-grid';
+import { BulkAction } from './DataGrid';
 export declare type GridToolbarProps = MuiGridToolbarProps & {
     onRefresh?: () => void;
     setAnchorEl?: (anchorEl: HTMLAnchorElement | null) => void;
     loading?: boolean;
     theme?: any;
+    title?: string;
+    bulkAction?: BulkAction;
 };
 declare function Toolbar(props: GridToolbarProps): JSX.Element;
 export default Toolbar;

package/dist/published/components/custom/DataGrid/Toolbar.js

@@ -1,12 +1,13 @@
-import { FileDownloadRounded, FilterAlt, Refresh, TableChartRounded, TableRowsRounded, } from '@mui/icons-material';
+import { FileDownloadRounded, FilterAlt, Refresh, TableChartRounded, TableRowsRounded } from '@mui/icons-material';
 import { GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExport, GridToolbarFilterButton, GridToolbarQuickFilter, } from '@mui/x-data-grid';
 import React from 'react';
 import { Grid } from '../../layout';
-import { IconButton } from '../../core';
+import { IconButton, Button } from '../../core';
 import UIThemeProvider from '../../../theme';
+import { Typography } from '@mui/material';
 function Toolbar(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const { onRefresh, setAnchorEl, loading, theme } = props;
+    const { onRefresh, setAnchorEl, loading, theme, title, bulkAction } = props;
     const styles = {
         container: { display: 'flex', justifyContent: 'space-between', margin: '0 0 15px 0' },
         iconButton: {
@@ -33,7 +34,7 @@ function Toolbar(props) {
                 borderRadius: '8px',
                 color: '#919EAB',
                 borderColor: 'rgba(145, 158, 171, 0.32)',
-            }
+            },
         },
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -45,9 +46,11 @@ function Toolbar(props) {
     return (React.createElement(UIThemeProvider, { args: { theme: theme } },
         React.createElement(GridToolbarContainer, { sx: { padding: '0' } },
             React.createElement(Grid, { container: true, sx: styles.container },
+                title && (React.createElement(Grid, { xs: 12, sx: { marginBottom: '15px' } },
+                    React.createElement(Typography, { sx: { fontSize: '20px', fontWeight: 700 } }, title))),
                 React.createElement(Grid, { item: true, xs: 6 },
                     React.createElement(GridToolbarQuickFilter, { variant: "outlined", size: "small", sx: styles.quickFilter })),
-                React.createElement(Grid, { item: true },
+                !bulkAction ? (React.createElement(Grid, { item: true },
                     React.createElement(Grid, { container: true, spacing: 1, sx: styles.icon },
                         React.createElement(Grid, { item: true, sx: { paddingRight: '15px' } },
                             React.createElement(GridToolbarExport, { sx: { color: '#212B36' }, printOptions: { disableToolbarButton: true }, startIcon: React.createElement(FileDownloadRounded, null) })),
@@ -64,6 +67,23 @@ function Toolbar(props) {
                             React.createElement(GridToolbarDensitySelector, { startIcon: React.createElement(TableRowsRounded, { sx: { marginLeft: '8px' } }), sx: styles.iconButton, onClickCapture: setAnchor })),
                         onRefresh && (React.createElement(Grid, { item: true },
                             React.createElement(IconButton, { onClick: onRefresh, disabled: loading, sx: { borderRadius: '4px' } },
-                                React.createElement(Refresh, null))))))))));
+                                React.createElement(Refresh, null))))))) : (React.createElement(Grid, { item: true, xs: 6, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' },
+                    !!bulkAction.selectionCount && bulkAction.selectionCount !== 0 && (React.createElement(Typography, { sx: { marginRight: '12px' } }, `${bulkAction.selectionCount} selected`)),
+                    React.createElement(Button, { sx: {
+                            fontWeight: 700,
+                            height: '40px',
+                            padding: '0px 14px',
+                            backgroundColor: '#DFE3E8',
+                            '&:hover': { backgroundColor: '#c8ccd0' },
+                        }, color: 'inherit', onClick: bulkAction.onClick }, bulkAction.label),
+                    onRefresh && (React.createElement(Grid, { item: true, marginLeft: '6px' },
+                        React.createElement(Button, { onClick: onRefresh, disabled: loading, sx: {
+                                height: '40px',
+                                minWidth: '45px',
+                                borderRadius: '8px',
+                                backgroundColor: '#dfe3e8',
+                                '&:hover': { backgroundColor: '#c8ccd0' },
+                            } },
+                            React.createElement(Refresh, { sx: { color: 'black' } }))))))))));
 }
 export default Toolbar;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.147",
+    "version": "1.0.0-dev.148",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",