????
Your IP : 216.73.216.208
/////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2024, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
import { Button, ButtonGroup, Tooltip } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React, { forwardRef } from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import CustomPropTypes from '../custom_prop_types';
import ShortcutTitle from './ShortcutTitle';
const useStyles = makeStyles((theme)=>({
primaryButton: {
border: '1px solid '+theme.palette.primary.main,
'&.Mui-disabled': {
color: [theme.palette.primary.contrastText,'!important'],
backgroundColor: theme.palette.primary.disabledMain,
},
'&:hover': {
backgroundColor: theme.palette.primary.hoverMain,
borderColor: theme.palette.primary.hoverBorderColor,
},
},
defaultButton: {
backgroundColor: theme.palette.default.main,
color: theme.palette.default.contrastText,
border: '1px solid '+theme.palette.default.borderColor,
whiteSpace: 'nowrap',
'&.Mui-disabled': {
color: [theme.palette.default.disabledContrastText, '!important'],
borderColor: theme.palette.default.disabledBorderColor
},
'&:hover': {
backgroundColor: theme.palette.default.hoverMain,
color: theme.palette.default.hoverContrastText,
borderColor: theme.palette.default.hoverBorderColor,
}
},
iconButton: {
minWidth: 0,
padding: '2px 4px',
'&.MuiButton-sizeSmall, &.MuiButton-outlined.MuiButton-sizeSmall, &.MuiButton-contained.MuiButton-sizeSmall': {
},
},
iconButtonDefault: {
borderColor: theme.custom.icon.borderColor,
color: theme.custom.icon.contrastText,
backgroundColor: theme.custom.icon.main,
height: '28px',
padding: '1px 4px',
'.MuiButtonGroup-root &': {
minWidth: '34px',
'&.MuiButtonGroup-firstButton:hover, &.MuiButtonGroup-middleButton:hover': {
borderRightColor: theme.custom.icon.borderColor,
},
},
'&.Mui-disabled': {
borderColor: theme.custom.icon.disabledBorderColor,
backgroundColor: theme.custom.icon.disabledMain,
color: theme.custom.icon.disabledContrastText,
},
'&:hover': {
backgroundColor: theme.custom.icon.hoverMain,
color: theme.custom.icon.hoverContrastText,
borderColor: theme.custom.icon.borderColor,
}
},
splitButton: {
'&.MuiButton-sizeSmall, &.MuiButton-outlined.MuiButton-sizeSmall, &.MuiButton-contained.MuiButton-sizeSmall': {
width: '20px',
minWidth: 0,
'& svg': {
height: '0.8em',
}
}
},
xsButton: {
padding: '2px 1px',
height: '24px !important',
minWidth: '24px',
'& .MuiSvgIcon-root': {
height: '0.8em',
},
'.MuiButtonGroup-root &': {
minWidth: '30px',
}
},
noBorder: {
border: 0,
backgroundColor: 'transparent',
color: theme.custom.icon.contrastText,
'&:hover': {
border: 0,
color: theme.custom.icon.contrastText,
backgroundColor: 'inherit',
filter: 'brightness(85%)',
},
'&.Mui-disabled': {
border: 0,
},
},
noBorderPrimary: {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.main,
'&:hover': {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.hoverMain,
borderColor: theme.palette.primary.hoverBorderColor,
},
}
}));
/* pgAdmin primary button */
export const PrimaryButton = forwardRef((props, ref)=>{
let {children, className, size, noBorder, ...otherProps} = props;
const classes = useStyles();
let allClassName = [classes.primaryButton, className];
if(size == 'xs') {
size = undefined;
allClassName.push(classes.xsButton);
}
noBorder && allClassName.push(...[classes.noBorder, classes.noBorderPrimary]);
const dataLabel = typeof(children) == 'string' ? children : undefined;
return (
<Button ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} {...otherProps} color="primary" variant="contained">{children}</Button>
);
});
PrimaryButton.displayName = 'PrimaryButton';
PrimaryButton.propTypes = {
size: PropTypes.string,
noBorder: PropTypes.bool,
children: CustomPropTypes.children,
className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
};
/* pgAdmin default button */
export const DefaultButton = forwardRef((props, ref)=>{
let {children, className, size, noBorder, ...otherProps} = props;
const classes = useStyles();
let allClassName = [classes.defaultButton, className];
if(size == 'xs') {
size = undefined;
allClassName.push(classes.xsButton);
}
noBorder && allClassName.push(classes.noBorder);
const dataLabel = typeof(children) == 'string' ? children : undefined;
return (
<Button variant="outlined" ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} color="default" {...otherProps}>{children}</Button>
);
});
DefaultButton.displayName = 'DefaultButton';
DefaultButton.propTypes = {
size: PropTypes.string,
noBorder: PropTypes.bool,
children: CustomPropTypes.children,
className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
};
/* pgAdmin Icon button, takes Icon component as input */
export const PgIconButton = forwardRef(({icon, title, shortcut, className, splitButton, style, color, accesskey, ...props}, ref)=>{
const classes = useStyles();
let shortcutTitle = null;
if(accesskey || shortcut) {
shortcutTitle = <ShortcutTitle title={title} accesskey={accesskey} shortcut={shortcut}/>;
}
/* Tooltip does not work for disabled items */
if(props.disabled) {
if(color == 'primary') {
return (
<PrimaryButton ref={ref} style={style}
className={clsx(classes.iconButton, (splitButton ? classes.splitButton : ''), className)}
accessKey={accesskey} data-label={title || ''} {...props}>
{icon}
</PrimaryButton>
);
} else {
return (
<DefaultButton ref={ref} style={style}
className={clsx(classes.iconButton, classes.iconButtonDefault, (splitButton ? classes.splitButton : ''), className)}
accessKey={accesskey} data-label={title || ''} {...props}>
{icon}
</DefaultButton>
);
}
} else if(color == 'primary') {
return (
<Tooltip title={shortcutTitle || title || ''} aria-label={title || ''}>
<PrimaryButton ref={ref} style={style}
className={clsx(classes.iconButton, (splitButton ? classes.splitButton : ''), className)}
accessKey={accesskey} data-label={title || ''} {...props}>
{icon}
</PrimaryButton>
</Tooltip>
);
} else {
return (
<Tooltip title={shortcutTitle || title || ''} aria-label={title || ''}>
<DefaultButton ref={ref} style={style}
className={clsx(classes.iconButton, classes.iconButtonDefault, (splitButton ? classes.splitButton : ''), className)}
accessKey={accesskey} data-label={title || ''} {...props}>
{icon}
</DefaultButton>
</Tooltip>
);
}
});
PgIconButton.displayName = 'PgIconButton';
PgIconButton.propTypes = {
icon: CustomPropTypes.children,
title: PropTypes.string.isRequired,
shortcut: CustomPropTypes.shortcut,
accesskey: PropTypes.string,
className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
style: PropTypes.object,
color: PropTypes.oneOf(['primary', 'default', undefined]),
disabled: PropTypes.bool,
splitButton: PropTypes.bool,
};
export const PgButtonGroup = forwardRef(({children, ...props}, ref)=>{
/* Tooltip does not work for disabled items */
return (
<ButtonGroup ref={ref} {...props}>
{children}
</ButtonGroup>
);
});
PgButtonGroup.displayName = 'PgButtonGroup';
PgButtonGroup.propTypes = {
children: CustomPropTypes.children,
};