Skip to content

Commit

Permalink
fix(UI): pass rest props to underline material ui components closes364
Browse files Browse the repository at this point in the history
  • Loading branch information
kaminderpal committed Jul 17, 2024
1 parent af7f1e8 commit 4586726
Show file tree
Hide file tree
Showing 15 changed files with 40 additions and 19 deletions.
4 changes: 2 additions & 2 deletions packages/geoview-core/src/ui/card-media/card-media.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ interface TypeCardMediaProps extends CardMediaProps {
* @returns {JSX.Element} the created Card Media element
*/
export function CardMedia(props: TypeCardMediaProps): JSX.Element {
const { sx, src, alt, click, keyDown } = props;
const { sx, src, alt, click, keyDown, ...rest } = props;

return <MaterialCardMedia component="img" sx={sx} alt={alt} src={src} tabIndex={0} onClick={click} onKeyDown={keyDown} />;
return <MaterialCardMedia component="img" sx={sx} alt={alt} src={src} tabIndex={0} onClick={click} onKeyDown={keyDown} {...rest} />;
}
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@ interface TypeCircularProgressProps extends CircularProgressProps {
* @returns {JSX.Element} the created Circular Progress element
*/
export function CircularProgress(props: TypeCircularProgressProps): JSX.Element {
const { style = {}, isLoaded, sx = {} } = props;
const { style = {}, isLoaded, sx = {}, ...rest } = props;

const theme = useTheme();
const sxClasses = getSxClasses(theme);

return !isLoaded ? (
<Box sx={{ ...sxClasses.loading, ...sx }} style={{ ...style }}>
<MaterialCircularProgress sx={sxClasses.progress} />
<MaterialCircularProgress sx={sxClasses.progress} {...rest} />
</Box>
) : (
// eslint-disable-next-line react/jsx-no-useless-fragment
Expand Down
3 changes: 2 additions & 1 deletion packages/geoview-core/src/ui/divider/divider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ interface TypeDividerProps extends DividerProps {
* @returns {JSX.Element} the created Divider element
*/
export function Divider(props: TypeDividerProps): JSX.Element {
const { className, style, grow, orientation, sx } = props;
const { className, style, grow, orientation, sx, ...rest } = props;

const theme = useTheme();
const sxClasses = getSxClasses(theme);
Expand All @@ -35,6 +35,7 @@ export function Divider(props: TypeDividerProps): JSX.Element {
sx={{ ...(grow ? sxClasses.grow : {}), ...dividerOrientation, ...sx }}
className={`${className ?? ''}`}
style={style}
{...rest}
/>
);
}
3 changes: 2 additions & 1 deletion packages/geoview-core/src/ui/drawer/drawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export interface TypeDrawerProps extends DrawerProps {
* @returns {JSX.Element} the created Drawer element
*/
export function Drawer(props: TypeDrawerProps): JSX.Element {
const { variant, status, className, style, children } = props;
const { variant, status, className, style, children, ...rest } = props;

const { t } = useTranslation<string>();

Expand Down Expand Up @@ -55,6 +55,7 @@ export function Drawer(props: TypeDrawerProps): JSX.Element {
paper: className,
}}
style={style || undefined}
{...rest}
>
<Box sx={sxClasses.toolbar}>
<IconButton
Expand Down
8 changes: 6 additions & 2 deletions packages/geoview-core/src/ui/fade/fade.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@ import { Fade as MaterialFade, FadeProps } from '@mui/material';
* @returns {JSX.Element} the created Fade element
*/
export function Fade(props: FadeProps): JSX.Element {
const { in: fadeIn, children } = props;
const { in: fadeIn, children, ...rest } = props;

return <MaterialFade in={fadeIn}>{children && children}</MaterialFade>;
return (
<MaterialFade in={fadeIn} {...rest}>
{children && children}
</MaterialFade>
);
}
2 changes: 2 additions & 0 deletions packages/geoview-core/src/ui/icon-button/icon-button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export function IconButton(props: TypeIconButtonProps): JSX.Element {
size,
disabled,
color,
...rest
} = props;

const { t } = useTranslation<string>();
Expand All @@ -44,6 +45,7 @@ export function IconButton(props: TypeIconButtonProps): JSX.Element {
ref={iconRef}
disabled={disabled}
color={color}
{...rest}
>
{children && children}
</MaterialIconButton>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ interface ProgressbarProps {
* @param {ProgressbarProps} props the properties passed to the element
* @returns {JSX.Element} the created element
*/
export function ProgressBar({ className = '', variant = 'indeterminate', value = 0 }: ProgressbarProps): JSX.Element {
return <LinearProgressBar variant={variant} value={value} className={className} />;
export function ProgressBar({ className = '', variant = 'indeterminate', value = 0, ...rest }: ProgressbarProps): JSX.Element {
return <LinearProgressBar variant={variant} value={value} className={className} {...rest} />;
}

/**
Expand Down
11 changes: 9 additions & 2 deletions packages/geoview-core/src/ui/list/collapse.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,19 @@ import { Collapse as MaterialCollapse, CollapseProps } from '@mui/material';
* @returns {JSX.Element} the created Collapse element
*/
export function Collapse(props: CollapseProps): JSX.Element {
const { children, className, style, timeout, unmountOnExit } = props;
const { children, className, style, timeout, unmountOnExit, ...rest } = props;
// eslint-disable-next-line react/destructuring-assignment
const inProp = props.in;

return (
<MaterialCollapse className={className || ''} style={style || undefined} in={inProp} timeout={timeout} unmountOnExit={unmountOnExit}>
<MaterialCollapse
className={className || ''}
style={style || undefined}
in={inProp}
timeout={timeout}
unmountOnExit={unmountOnExit}
{...rest}
>
{children !== undefined && children}
</MaterialCollapse>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/geoview-core/src/ui/list/list-item-icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ import { ListItemIcon as MaterialListItemIcon, ListItemIconProps } from '@mui/ma
* @returns {JSX.Element} the created List Item element
*/
export function ListItemIcon(props: ListItemIconProps): JSX.Element {
const { children, className, style } = props;
const { children, className, style, ...rest } = props;

return (
<MaterialListItemIcon className={className || ''} style={style || undefined}>
<MaterialListItemIcon className={className || ''} style={style || undefined} {...rest}>
{children !== undefined && children}
</MaterialListItemIcon>
);
Expand Down
3 changes: 2 additions & 1 deletion packages/geoview-core/src/ui/list/list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const sxClasses = {
* @returns {JSX.Element} the created List element
*/
export const List = React.forwardRef<HTMLUListElement, TypeListProps>((props: TypeListProps, ref): JSX.Element => {
const { children, className, style, type, sx } = props;
const { children, className, style, type, sx, ...rest } = props;

return (
<MaterialList
Expand All @@ -35,6 +35,7 @@ export const List = React.forwardRef<HTMLUListElement, TypeListProps>((props: Ty
className={className || ''}
style={style || undefined}
component={type || 'ul'}
{...rest}
>
{children !== undefined && children}
</MaterialList>
Expand Down
3 changes: 2 additions & 1 deletion packages/geoview-core/src/ui/panel/panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export type TypePanelAppProps = {
* @returns {JSX.Element} the created Panel element
*/
export function Panel(props: TypePanelAppProps): JSX.Element {
const { panel, button, onPanelOpened, onPanelClosed, onGeneralCloseClicked } = props;
const { panel, button, onPanelOpened, onPanelClosed, onGeneralCloseClicked, ...rest } = props;
const { status: open = false, panelStyles, panelGroupName } = panel;

const { t } = useTranslation<string>();
Expand Down Expand Up @@ -132,6 +132,7 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
}
}}
{...{ 'data-id': button.id }}
{...rest}
>
<CardHeader
sx={panelStyles?.panelCardHeader ? { ...panelStyles.panelCardHeader } : {}}
Expand Down
1 change: 1 addition & 0 deletions packages/geoview-core/src/ui/slider/slider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,7 @@ export function Slider(props: SliderProps): JSX.Element {
// TODO: better implement WCAG on slider
return (
<MaterialSlider
{...properties}
id={containerId}
sx={{ ...(!properties.className ? sxClasses.slider : {}) }}
className={properties.className !== undefined ? properties.className : ''}
Expand Down
3 changes: 2 additions & 1 deletion packages/geoview-core/src/ui/snackbar/snackbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export function Snackbar(props: SnackBarProps): JSX.Element {
logger.logTraceRender('ui/snackbar/snackbar', props);

// Read props
const { snackBarId, open, message, type, button, onClose } = props;
const { snackBarId, open, message, type, button, onClose, ...rest } = props;

const fadeInAnimation = useFadeIn();
const AnimatedSnackbar = animated(MaterialSnackbar);
Expand All @@ -50,6 +50,7 @@ export function Snackbar(props: SnackBarProps): JSX.Element {
open={open}
autoHideDuration={6000}
onClose={() => onClose?.()}
{...rest}
>
<Alert onClose={() => onClose?.()} severity={type} sx={{ width: '100%' }}>
{message}
Expand Down
2 changes: 2 additions & 0 deletions packages/geoview-core/src/ui/stepper/custom-stepper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ export function CustomStepper(props: TypeCustomStepperProps): JSX.Element {
backButtonText,
nextButtonText,
resetButtonText,
...rest
} = props;

const theme = useTheme();
Expand Down Expand Up @@ -198,6 +199,7 @@ export function CustomStepper(props: TypeCustomStepperProps): JSX.Element {
// eslint-disable-next-line no-nested-ternary
alternativeLabel={stepsOrientation === 'horizontal' ? (alternativeLabel !== undefined ? alternativeLabel : true) : false}
nonLinear={nonLinear || buttonedLabels || false}
{...rest}
>
{steps?.map((step: any, index: number) => {
return (
Expand Down
4 changes: 2 additions & 2 deletions packages/geoview-core/src/ui/text-field/text-field.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { TypeTextFieldProps } from '@/ui/panel/panel-types';
* @returns {JSX.Element} the text field ui component
*/
export function TextField(props: TypeTextFieldProps): JSX.Element {
const { tooltip, tooltipPlacement } = props;
const { tooltip, tooltipPlacement, ...rest } = props;

const { t } = useTranslation<string>();

Expand All @@ -22,7 +22,7 @@ export function TextField(props: TypeTextFieldProps): JSX.Element {

return (
<Tooltip title={t((tooltip as string) || '') as string} placement={tooltipPlacement} TransitionComponent={Fade} ref={textRef}>
<MaterialTextField {...props} />
<MaterialTextField {...props} {...rest} />
</Tooltip>
);
}

0 comments on commit 4586726

Please sign in to comment.