Skip to content

Commit e60f0a4

Browse files
rishabhsharma1997rishabhsharma1997
authored
Merge branch 'master' into redux/middleware
2 parents 8e2b34e + 52bfc6f commit e60f0a4

23 files changed

Lines changed: 310 additions & 40 deletions

File tree

‎src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useTheme } from '@mui/material';
12
import React from 'react';
23
import { Box } from '../../base/Box';
34
import { Card } from '../../base/Card';
@@ -30,6 +31,7 @@ export function CustomColumnVisibilityControl({
3031
}: CustomColumnVisibilityControlProps): JSX.Element {
3132
const [open, setOpen] = React.useState(false);
3233
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
34+
const theme = useTheme();
3335

3436
const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
3537
setAnchorEl(event.currentTarget);
@@ -54,7 +56,7 @@ export function CustomColumnVisibilityControl({
5456
<TooltipIcon
5557
title="View Columns"
5658
onClick={handleOpen}
57-
icon={<ColumnIcon fill="#3c494f" />}
59+
icon={<ColumnIcon fill={theme.palette.icon.default} />}
5860
arrow
5961
/>
6062
<PopperListener
@@ -87,7 +89,7 @@ export function CustomColumnVisibilityControl({
8789
flexDirection: 'column',
8890
padding: '1rem',
8991
boxShadow: open ? '0px 4px 8px rgba(0, 0, 0, 0.2)' : 'none',
90-
background: '#f4f5f7'
92+
background: theme.palette.background.surfaces
9193
}}
9294
>
9395
{columns.map((col) => (

‎src/custom/CustomImage/CustomImage.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,14 @@ const CustomImage: React.FC<ImageComponentProps> = ({ src, alt, ...props }) => {
5353
background: 'transparent',
5454
boxShadow: 'none',
5555
overflow: 'auto',
56-
maxWidth: '60rem'
56+
maxWidth: '100%'
5757
}
5858
}}
5959
>
6060
<img
6161
src={src}
6262
alt={alt}
63+
onClick={handleZoomClose}
6364
style={{
6465
objectFit: 'contain',
6566
maxWidth: '100%',

‎src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { ColView, updateVisibleColumns } from './responsive-column';
2+
3+
export { updateVisibleColumns };
4+
export type { ColView };

‎src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
// colViews screen size reference
2+
/*
3+
na: Not visible at any screen width
4+
xs: width < 585,
5+
s: width > 585 && width < 690,
6+
m: width > 690 && width < 775,
7+
l: width > 775 && width < 915,
8+
xl: width > 915 && width < 1140
9+
All columns except "na" are visible for width > 1140
10+
*/
11+
12+
export interface ColView {
13+
0: string; // column name
14+
1: 'na' | 'xs' | 's' | 'm' | 'l' | 'xl'; // screen size
15+
}
16+
17+
export const updateVisibleColumns = (
18+
colViews: ColView[],
19+
width: number
20+
): Record<string, boolean> => {
21+
// showCols object contains key value pairs that represent whether a column is visible or hidden.
22+
// i.e, Here, key = column name, and value = true/false where true means visible and false means hidden
23+
const showCols: Record<string, boolean> = {};
24+
25+
// colViews is a 2D array where each element is an array of 2 elements namely,
26+
// column name and the screen size till which they are visible
27+
colViews.forEach((col) => {
28+
// Hide the columns for any screen size
29+
if (col[1] === 'na') {
30+
showCols[col[0]] = false;
31+
} else if (width > 1140) {
32+
// Display all columns above width 1140
33+
showCols[col[0]] = true;
34+
} else if (width >= 915 && width < 1140) {
35+
if (['xs', 's', 'm', 'l', 'xl'].includes(col[1])) {
36+
showCols[col[0]] = true;
37+
} else {
38+
showCols[col[0]] = false;
39+
}
40+
} else if (width >= 775 && width < 915) {
41+
if (['xs', 's', 'm', 'l'].includes(col[1])) {
42+
showCols[col[0]] = true;
43+
} else {
44+
showCols[col[0]] = false;
45+
}
46+
} else if (width >= 690 && width < 775) {
47+
if (['xs', 's', 'm'].includes(col[1])) {
48+
showCols[col[0]] = true;
49+
} else {
50+
showCols[col[0]] = false;
51+
}
52+
} else if (width >= 585 && width < 690) {
53+
if (['xs', 's'].includes(col[1])) {
54+
showCols[col[0]] = true;
55+
} else {
56+
showCols[col[0]] = false;
57+
}
58+
} else if (width < 585) {
59+
if (col[1] === 'xs') {
60+
showCols[col[0]] = true;
61+
} else {
62+
showCols[col[0]] = false;
63+
}
64+
}
65+
});
66+
67+
return showCols;
68+
};

‎src/custom/Markdown/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
StyledMarkdownH6,
1313
StyledMarkdownLi,
1414
StyledMarkdownP,
15+
StyledMarkdownPre,
1516
StyledMarkdownTd,
1617
StyledMarkdownTh,
1718
StyledMarkdownTooltipP,
@@ -51,7 +52,8 @@ export const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
5152
ul: ({ ...props }) => <StyledMarkdownUl>{props.children}</StyledMarkdownUl>,
5253
li: ({ ...props }) => <StyledMarkdownLi>{props.children}</StyledMarkdownLi>,
5354
th: ({ ...props }) => <StyledMarkdownTh>{props.children}</StyledMarkdownTh>,
54-
td: ({ ...props }) => <StyledMarkdownTd>{props.children}</StyledMarkdownTd>
55+
td: ({ ...props }) => <StyledMarkdownTd>{props.children}</StyledMarkdownTd>,
56+
pre: ({ ...props }) => <StyledMarkdownPre>{props.children}</StyledMarkdownPre>
5557
}}
5658
>
5759
{content}

‎src/custom/Markdown/style.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { styled } from '@mui/material';
22
import { text } from '../../theme/colors/colors';
33

44
export const StyledMarkdown = styled('a')(({ theme }) => ({
5-
color: theme.palette.text.brand,
5+
color: theme.palette.background.brand?.default,
66
textDecoration: 'none',
77
'&:hover': {
88
textDecoration: 'underline'
@@ -71,3 +71,8 @@ export const StyledMarkdownTd = styled('td')(({ theme }) => ({
7171
marginBlock: '0px',
7272
...theme.typography.textB1Regular
7373
}));
74+
75+
export const StyledMarkdownPre = styled('pre')(({ theme }) => ({
76+
background: theme.palette.background.code,
77+
whiteSpace: 'pre-line'
78+
}));

‎src/custom/ResponsiveDataTable.tsx‎

Lines changed: 115 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,96 @@
1-
import { Theme, ThemeProvider, createTheme } from '@mui/material';
1+
import { Theme, ThemeProvider, createTheme, styled } from '@mui/material';
22
import MUIDataTable from 'mui-datatables';
33
import React, { useCallback } from 'react';
4+
import { Checkbox, Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
5+
import { ShareIcon } from '../icons';
6+
import { EllipsisIcon } from '../icons/Ellipsis';
7+
import TooltipIcon from './TooltipIcon';
8+
9+
export const IconWrapper = styled('div')<{ disabled?: boolean }>(({ disabled = false }) => ({
10+
cursor: disabled ? 'not-allowed' : 'pointer',
11+
opacity: disabled ? '0.5' : '1',
12+
display: 'flex',
13+
'& svg': {
14+
cursor: disabled ? 'not-allowed' : 'pointer'
15+
}
16+
}));
17+
18+
export const DataTableEllipsisMenu: React.FC<{
19+
actionsList: NonNullable<Column['options']>['actionsList'];
20+
}> = ({ actionsList }) => {
21+
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
22+
const [isSocialShareOpen, setIsSocialShareOpen] = React.useState(false);
23+
24+
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
25+
setAnchorEl(event.currentTarget);
26+
};
27+
const handleClose = () => {
28+
setAnchorEl(null);
29+
setIsSocialShareOpen(false);
30+
};
31+
32+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
33+
const handleActionClick = (action: any) => {
34+
if (action.type === 'share-social') {
35+
setIsSocialShareOpen(!isSocialShareOpen);
36+
} else {
37+
if (action.onClick) {
38+
action.onClick();
39+
}
40+
handleClose();
41+
}
42+
};
43+
44+
return (
45+
<>
46+
<TooltipIcon title="View Actions" onClick={handleClick} icon={<EllipsisIcon />} arrow />
47+
<Menu id="basic-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
48+
{actionsList &&
49+
actionsList.map((action, index) => (
50+
<React.Fragment key={index}>
51+
{action.type === 'share-social' ? (
52+
<>
53+
<MenuItem
54+
sx={{
55+
width: '-webkit-fill-available'
56+
// background: theme.palette.background.surfaces
57+
}}
58+
onClick={() => handleActionClick(action)}
59+
disabled={action.disabled}
60+
>
61+
<ListItemIcon>
62+
<ShareIcon width={24} height={24} />
63+
</ListItemIcon>
64+
<ListItemText>{action.title}</ListItemText>
65+
</MenuItem>
66+
<Collapse variant="submenu" in={isSocialShareOpen} unmountOnExit>
67+
{action.customComponent}
68+
</Collapse>
69+
</>
70+
) : (
71+
<>
72+
<IconWrapper key={index} disabled={action.disabled}>
73+
<MenuItem
74+
sx={{
75+
width: '-webkit-fill-available'
76+
// background: theme.palette.background.surfaces
77+
}}
78+
key={index}
79+
onClick={() => handleActionClick(action)}
80+
disabled={action.disabled}
81+
>
82+
<ListItemIcon>{action.icon}</ListItemIcon>
83+
<ListItemText>{action.title}</ListItemText>
84+
</MenuItem>
85+
</IconWrapper>
86+
</>
87+
)}
88+
</React.Fragment>
89+
))}
90+
</Menu>
91+
</>
92+
);
93+
};
494

595
const dataTableTheme = (theme: Theme) =>
696
createTheme({
@@ -115,6 +205,15 @@ const dataTableTheme = (theme: Theme) =>
115205
}
116206
}
117207
}
208+
},
209+
MuiTableRow: {
210+
styleOverrides: {
211+
root: {
212+
'&.Mui-disabled': {
213+
cursor: 'not-allowed'
214+
}
215+
}
216+
}
118217
}
119218
}
120219
});
@@ -129,6 +228,14 @@ export interface Column {
129228
display?: boolean;
130229
sortDescFirst?: boolean;
131230
customBodyRender?: (value: string | number | boolean | object) => JSX.Element;
231+
actionsList?: {
232+
title: string;
233+
icon: JSX.Element;
234+
onClick: () => void;
235+
disabled?: boolean;
236+
customComponent?: JSX.Element;
237+
type?: string;
238+
}[];
132239
};
133240
}
134241

@@ -167,6 +274,11 @@ const ResponsiveDataTable = ({
167274

168275
const updatedOptions = {
169276
...options,
277+
print: false,
278+
download: false,
279+
search: false,
280+
filter: false,
281+
viewColumns: false,
170282
rowsPerPageOptions: rowsPerPageOptions,
171283
onViewColumnsChange: (column: string, action: string) => {
172284
switch (action) {
@@ -244,7 +356,8 @@ const ResponsiveDataTable = ({
244356
}, [updateColumnsEffect]);
245357

246358
const components = {
247-
ExpandButton: () => ''
359+
ExpandButton: () => '',
360+
Checkbox: Checkbox
248361
};
249362

250363
return (

‎src/custom/SearchBar.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const customTheme = (theme: Theme) =>
1212
MuiTextField: {
1313
styleOverrides: {
1414
root: {
15-
'--TextField-brandBorderColor': 'rgba(0, 0, 0, 0.5)',
15+
'--TextField-brandBorderColor': theme.palette.border.strong,
1616
'--TextField-brandBorderHoverColor': theme.palette.background.graphics?.default,
1717
'--TextField-brandBorderFocusedColor': theme.palette.background.graphics?.default,
1818
'& label.Mui-focused': {
@@ -39,6 +39,7 @@ const customTheme = (theme: Theme) =>
3939
MuiInput: {
4040
styleOverrides: {
4141
root: {
42+
color: theme.palette.text.default,
4243
'&::before': {
4344
borderBottom: '2px solid var(--TextField-brandBorderColor)'
4445
},
@@ -61,21 +62,18 @@ export interface SearchBarProps {
6162
onClear?: () => void;
6263
expanded: boolean;
6364
setExpanded: (expanded: boolean) => void;
64-
iconFill?: string;
6565
}
6666

6767
function SearchBar({
6868
onSearch,
6969
placeholder,
7070
onClear,
7171
expanded,
72-
setExpanded,
73-
iconFill
72+
setExpanded
7473
}: SearchBarProps): JSX.Element {
7574
const [searchText, setSearchText] = React.useState('');
7675
const searchRef = React.useRef<HTMLInputElement | null>(null);
77-
78-
const outerTheme = useTheme();
76+
const theme = useTheme();
7977

8078
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
8179
setSearchText(event.target.value);
@@ -123,7 +121,7 @@ function SearchBar({
123121
}}
124122
>
125123
<div>
126-
<ThemeProvider theme={customTheme(outerTheme)}>
124+
<ThemeProvider theme={customTheme(theme)}>
127125
<TextField
128126
variant="standard"
129127
value={searchText}
@@ -144,14 +142,14 @@ function SearchBar({
144142
<TooltipIcon
145143
title="Close"
146144
onClick={handleClearIconClick}
147-
icon={<CloseIcon fill={iconFill} />}
145+
icon={<CloseIcon fill={theme.palette.icon.default} />}
148146
arrow
149147
/>
150148
) : (
151149
<TooltipIcon
152150
title="Search"
153151
onClick={handleSearchIconClick}
154-
icon={<SearchIcon fill={iconFill} />}
152+
icon={<SearchIcon fill={theme.palette.icon.default} />}
155153
arrow
156154
/>
157155
)}

‎src/custom/SetupPrerequisite/style.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,12 @@ const Card = styled('a')(({ theme }) => ({
3131
borderRadius: '10px',
3232
'&:hover': {
3333
boxShadow: 'rgb(0, 211, 169) 0px 0px 7px'
34+
},
35+
'& a': {
36+
margin: '0 !important',
37+
'&:hover': {
38+
color: theme.palette.background.brand?.default
39+
}
3440
}
3541
}));
3642

0 commit comments

Comments
 (0)