Skip to content

Commit

Permalink
Merge pull request #413 from sudhanshutech/configure
Browse files Browse the repository at this point in the history 
fix(component): Pass id="ref" through toolbar components
  • Loading branch information
@nebula-aac
nebula-aac committed Dec 11, 2023
2 parents a0a2d98 + 45c3664 commit 82eba34
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 140 deletions.
118 changes: 61 additions & 57 deletions packages/components/src/custom/CustomColumnVisibilityControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface CustomColumnVisibilityControlProps {
setColumnVisibility: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
};
style?: React.CSSProperties;
id: string;
}

export interface CustomColumn {
Expand All @@ -24,6 +25,7 @@ export interface CustomColumn {

export function CustomColumnVisibilityControl({
columns,
id,
customToolsProps
}: CustomColumnVisibilityControlProps): JSX.Element {
const [open, setOpen] = React.useState(false);
Expand All @@ -48,64 +50,66 @@ export function CustomColumnVisibilityControl({

return (
<React.Fragment>
<TooltipIcon
title="View Columns"
onClick={handleOpen}
icon={<ColumnIcon fill="#3c494f" />}
arrow
/>
<PopperListener
open={Boolean(anchorEl)}
anchorEl={anchorEl}
placement="bottom-end"
modifiers={[
{
name: 'flip',
options: {
enabled: false
<div id={id}>
<TooltipIcon
title="View Columns"
onClick={handleOpen}
icon={<ColumnIcon fill="#3c494f" />}
arrow
/>
<PopperListener
open={Boolean(anchorEl)}
anchorEl={anchorEl}
placement="bottom-end"
modifiers={[
{
name: 'flip',
options: {
enabled: false
}
},
{
name: 'preventOverflow',
options: {
enabled: true,
boundariesElement: 'scrollParent'
}
}
},
{
name: 'preventOverflow',
options: {
enabled: true,
boundariesElement: 'scrollParent'
}
}
]}
// transition
>
<Box>
<ClickAwayListener onClickAway={handleClose}>
<div>
<Card
sx={{
display: 'flex',
flexDirection: 'column',
padding: '1rem',
boxShadow: open ? '0px 4px 8px rgba(0, 0, 0, 0.2)' : 'none',
background: '#f4f5f7'
}}
>
{columns.map((col) => (
<FormControlLabel
key={col.name}
control={
<Checkbox
checked={customToolsProps.columnVisibility[col.name]}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
handleColumnVisibilityChange(col.name, e.target.checked)
}
/>
}
label={col.label}
/>
))}
</Card>
</div>
</ClickAwayListener>
</Box>
</PopperListener>
]}
// transition
>
<Box>
<ClickAwayListener onClickAway={handleClose}>
<div>
<Card
sx={{
display: 'flex',
flexDirection: 'column',
padding: '1rem',
boxShadow: open ? '0px 4px 8px rgba(0, 0, 0, 0.2)' : 'none',
background: '#f4f5f7'
}}
>
{columns.map((col) => (
<FormControlLabel
key={col.name}
control={
<Checkbox
checked={customToolsProps.columnVisibility[col.name]}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
handleColumnVisibilityChange(col.name, e.target.checked)
}
/>
}
label={col.label}
/>
))}
</Card>
</div>
</ClickAwayListener>
</Box>
</PopperListener>
</div>
</React.Fragment>
);
}
Expand Down
23 changes: 17 additions & 6 deletions packages/components/src/custom/SearchBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,25 @@ function SearchBar({
}
};

const handleClickAway = (): void => {
if (expanded) {
setExpanded(false);
}
};
// const handleClickAway = (): void => {
// if (expanded) {
// setExpanded(false);
// }
// };

return (
<ClickAwayListener onClickAway={handleClickAway}>
<ClickAwayListener
onClickAway={(event) => {
const isTable = (event.target as HTMLElement)?.closest('#ref');

if (searchText !== '') {
return;
}
if (isTable) {
handleClearIconClick(); // Close the search bar as needed
}
}}
>
<div>
<TextField
variant="standard"
Expand Down
166 changes: 89 additions & 77 deletions packages/components/src/custom/UniversalFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,16 @@ export interface UniversalFilterProps {
setSelectedFilters: React.Dispatch<React.SetStateAction<Record<string, string>>>;
handleApplyFilter: () => void;
showAllOption?: boolean;
id: string;
}

function UniversalFilter({
filters,
selectedFilters,
setSelectedFilters,
handleApplyFilter,
showAllOption = true
showAllOption = true,
id
}: UniversalFilterProps): JSX.Element {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [open, setOpen] = React.useState(false);
Expand All @@ -53,7 +55,7 @@ function UniversalFilter({
};

const canBeOpen = open && Boolean(anchorEl);
const id = canBeOpen ? 'transition-popper' : undefined;
const idx = canBeOpen ? 'transition-popper' : undefined;

const handleClose = () => {
setAnchorEl(null);
Expand All @@ -62,84 +64,94 @@ function UniversalFilter({

return (
<React.Fragment>
<TooltipIcon title="Close" onClick={handleClick} icon={<FilterIcon fill="#3c494f" />} arrow />
<PopperListener
id={id}
open={open}
anchorEl={anchorEl}
placement="bottom-end"
modifiers={[
{
name: 'flip',
options: {
enabled: false
<div id={id}>
<TooltipIcon
title="Close"
onClick={handleClick}
icon={<FilterIcon fill="#3c494f" />}
arrow
/>
<PopperListener
id={idx}
open={open}
anchorEl={anchorEl}
placement="bottom-end"
modifiers={[
{
name: 'flip',
options: {
enabled: false
}
},
{
name: 'preventOverflow',
options: {
enabled: true,
boundariesElement: 'scrollParent'
}
}
},
{
name: 'preventOverflow',
options: {
enabled: true,
boundariesElement: 'scrollParent'
}
}
]}
// transition
>
<div>
<ClickAwayListener
onClickAway={handleClose}
mouseEvent="onMouseDown"
touchEvent="onTouchStart"
>
<Paper
sx={{
padding: '1rem',
paddingTop: '1.8rem',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
backgroundColor: '#f4f5f7'
}}
]}
// transition
>
<div>
<ClickAwayListener
onClickAway={handleClose}
mouseEvent="onMouseDown"
touchEvent="onTouchStart"
>
{Object.keys(filters).map((filterColumn) => {
const options = filters[filterColumn].options;
return (
<div key={filterColumn} role="presentation">
<InputLabel id={filters[filterColumn].name}>
{filters[filterColumn].name}
</InputLabel>
<Select
defaultValue="All"
key={filterColumn}
value={selectedFilters[filterColumn]}
onChange={(e: SelectChangeEvent<unknown>) =>
handleFilterChange(e as React.ChangeEvent<{ value: string }>, filterColumn)
}
style={{
width: '15rem',
marginBottom: '1rem'
}}
inputProps={{ 'aria-label': 'Without label' }}
displayEmpty
>
{showAllOption && <MenuItem value="All">All</MenuItem>}
{options.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</div>
);
})}
<Paper
sx={{
padding: '1rem',
paddingTop: '1.8rem',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
backgroundColor: '#f4f5f7'
}}
>
{Object.keys(filters).map((filterColumn) => {
const options = filters[filterColumn].options;
return (
<div key={filterColumn} role="presentation">
<InputLabel id={filters[filterColumn].name}>
{filters[filterColumn].name}
</InputLabel>
<Select
defaultValue="All"
key={filterColumn}
value={selectedFilters[filterColumn]}
onChange={(e: SelectChangeEvent<unknown>) =>
handleFilterChange(
e as React.ChangeEvent<{ value: string }>,
filterColumn
)
}
style={{
width: '15rem',
marginBottom: '1rem'
}}
inputProps={{ 'aria-label': 'Without label' }}
displayEmpty
>
{showAllOption && <MenuItem value="All">All</MenuItem>}
{options.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</div>
);
})}

<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Button variant="contained" onClick={handleApplyOnClick}>
Apply
</Button>
</div>
</Paper>
</ClickAwayListener>
</div>
</PopperListener>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Button variant="contained" onClick={handleApplyOnClick}>
Apply
</Button>
</div>
</Paper>
</ClickAwayListener>
</div>
</PopperListener>
</div>
</React.Fragment>
);
}
Expand Down

0 comments on commit 82eba34

Please sign in to comment.