codekingpro/portable-devtools

1/////////////////////////////////////////////////////////////2//3// pgAdmin 4 - PostgreSQL Tools4//5// Copyright (C) 2013 - 2024, The pgAdmin Development Team6// This software is released under the PostgreSQL Licence7//8//////////////////////////////////////////////////////////////9 10import { Button, ButtonGroup, Tooltip } from '@mui/material';11import { makeStyles } from '@mui/styles';12import React, { forwardRef } from 'react';13import clsx from 'clsx';14import PropTypes from 'prop-types';15import CustomPropTypes from '../custom_prop_types';16import ShortcutTitle from './ShortcutTitle';17 18const useStyles = makeStyles((theme)=>({19  primaryButton: {20    border: '1px solid '+theme.palette.primary.main,21    '&.Mui-disabled': {22      color: [theme.palette.primary.contrastText,'!important'],23      backgroundColor: theme.palette.primary.disabledMain,24    },25    '&:hover': {26      backgroundColor: theme.palette.primary.hoverMain,27      borderColor: theme.palette.primary.hoverBorderColor,28    },29  },30  defaultButton: {31    backgroundColor: theme.palette.default.main,32    color: theme.palette.default.contrastText,33    border: '1px solid '+theme.palette.default.borderColor,34    whiteSpace: 'nowrap',35    '&.Mui-disabled': {36      color: [theme.palette.default.disabledContrastText, '!important'],37      borderColor: theme.palette.default.disabledBorderColor38    },39    '&:hover': {40      backgroundColor: theme.palette.default.hoverMain,41      color: theme.palette.default.hoverContrastText,42      borderColor: theme.palette.default.hoverBorderColor,43    }44  },45  iconButton: {46    minWidth: 0,47    padding: '2px 4px',48    '&.MuiButton-sizeSmall, &.MuiButton-outlined.MuiButton-sizeSmall, &.MuiButton-contained.MuiButton-sizeSmall': {49    },50  },51  iconButtonDefault: {52    borderColor: theme.custom.icon.borderColor,53    color: theme.custom.icon.contrastText,54    backgroundColor: theme.custom.icon.main,55    height: '28px',56    padding: '1px 4px',57    '.MuiButtonGroup-root &': {58      minWidth: '34px',59 60      '&.MuiButtonGroup-firstButton:hover, &.MuiButtonGroup-middleButton:hover': {61        borderRightColor: theme.custom.icon.borderColor,62      },63    },64    '&.Mui-disabled': {65      borderColor: theme.custom.icon.disabledBorderColor,66      backgroundColor: theme.custom.icon.disabledMain,67      color: theme.custom.icon.disabledContrastText,68    },69    '&:hover': {70      backgroundColor: theme.custom.icon.hoverMain,71      color: theme.custom.icon.hoverContrastText,72      borderColor: theme.custom.icon.borderColor,73    }74  },75  splitButton: {76    '&.MuiButton-sizeSmall, &.MuiButton-outlined.MuiButton-sizeSmall, &.MuiButton-contained.MuiButton-sizeSmall': {77      width: '20px',78      minWidth: 0,79      '& svg': {80        height: '0.8em',81      }82    }83  },84  xsButton: {85    padding: '2px 1px',86    height: '24px !important',87    minWidth: '24px',88    '& .MuiSvgIcon-root': {89      height: '0.8em',90    },91    '.MuiButtonGroup-root &': {92      minWidth: '30px',93    }94  },95  noBorder: {96    border: 0,97    backgroundColor: 'transparent',98    color: theme.custom.icon.contrastText,99    '&:hover': {100      border: 0,101      color: theme.custom.icon.contrastText,102      backgroundColor: 'inherit',103      filter: 'brightness(85%)',104    },105    '&.Mui-disabled': {106      border: 0,107    },108  },109  noBorderPrimary: {110    color: theme.palette.primary.contrastText,111    backgroundColor: theme.palette.primary.main,112    '&:hover': {113      color: theme.palette.primary.contrastText,114      backgroundColor: theme.palette.primary.hoverMain,115      borderColor: theme.palette.primary.hoverBorderColor,116    },117  }118}));119 120/* pgAdmin primary button */121export const PrimaryButton = forwardRef((props, ref)=>{122  let {children, className, size, noBorder, ...otherProps} = props;123  const classes = useStyles();124  let allClassName = [classes.primaryButton, className];125  if(size == 'xs') {126    size = undefined;127    allClassName.push(classes.xsButton);128  }129  noBorder && allClassName.push(...[classes.noBorder, classes.noBorderPrimary]);130  const dataLabel = typeof(children) == 'string' ? children : undefined;131  return (132    <Button ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} {...otherProps} color="primary" variant="contained">{children}</Button>133  );134});135PrimaryButton.displayName = 'PrimaryButton';136PrimaryButton.propTypes = {137  size: PropTypes.string,138  noBorder: PropTypes.bool,139  children: CustomPropTypes.children,140  className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),141};142 143/* pgAdmin default button */144export const DefaultButton = forwardRef((props, ref)=>{145  let {children, className, size, noBorder, ...otherProps} = props;146  const classes = useStyles();147  let allClassName = [classes.defaultButton, className];148  if(size == 'xs') {149    size = undefined;150    allClassName.push(classes.xsButton);151  }152  noBorder && allClassName.push(classes.noBorder);153  const dataLabel = typeof(children) == 'string' ? children : undefined;154  return (155    <Button variant="outlined" ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} color="default" {...otherProps}>{children}</Button>156  );157});158DefaultButton.displayName = 'DefaultButton';159DefaultButton.propTypes = {160  size: PropTypes.string,161  noBorder: PropTypes.bool,162  children: CustomPropTypes.children,163  className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),164};165 166 167/* pgAdmin Icon button, takes Icon component as input */168export const PgIconButton = forwardRef(({icon, title, shortcut, className, splitButton, style, color, accesskey, ...props}, ref)=>{169  const classes = useStyles();170 171  let shortcutTitle = null;172  if(accesskey || shortcut) {173    shortcutTitle = <ShortcutTitle title={title} accesskey={accesskey} shortcut={shortcut}/>;174  }175 176  /* Tooltip does not work for disabled items */177  if(props.disabled) {178    if(color == 'primary') {179      return (180        <PrimaryButton ref={ref} style={style}181          className={clsx(classes.iconButton, (splitButton ? classes.splitButton : ''), className)}182          accessKey={accesskey} data-label={title || ''} {...props}>183          {icon}184        </PrimaryButton>185      );186    } else {187      return (188        <DefaultButton ref={ref} style={style}189          className={clsx(classes.iconButton, classes.iconButtonDefault, (splitButton ? classes.splitButton : ''), className)}190          accessKey={accesskey} data-label={title || ''} {...props}>191          {icon}192        </DefaultButton>193      );194    }195  } else if(color == 'primary') {196    return (197      <Tooltip title={shortcutTitle || title || ''} aria-label={title || ''}>198        <PrimaryButton ref={ref} style={style}199          className={clsx(classes.iconButton, (splitButton ? classes.splitButton : ''), className)}200          accessKey={accesskey} data-label={title || ''} {...props}>201          {icon}202        </PrimaryButton>203      </Tooltip>204    );205  } else {206    return (207      <Tooltip title={shortcutTitle || title || ''} aria-label={title || ''}>208        <DefaultButton ref={ref} style={style}209          className={clsx(classes.iconButton, classes.iconButtonDefault, (splitButton ? classes.splitButton : ''), className)}210          accessKey={accesskey} data-label={title || ''} {...props}>211          {icon}212        </DefaultButton>213      </Tooltip>214    );215  }216});217PgIconButton.displayName = 'PgIconButton';218PgIconButton.propTypes = {219  icon: CustomPropTypes.children,220  title: PropTypes.string.isRequired,221  shortcut: CustomPropTypes.shortcut,222  accesskey: PropTypes.string,223  className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),224  style: PropTypes.object,225  color: PropTypes.oneOf(['primary', 'default', undefined]),226  disabled: PropTypes.bool,227  splitButton: PropTypes.bool,228};229 230export const PgButtonGroup = forwardRef(({children, ...props}, ref)=>{231  /* Tooltip does not work for disabled items */232  return (233    <ButtonGroup ref={ref} {...props}>234      {children}235    </ButtonGroup>236  );237});238PgButtonGroup.displayName = 'PgButtonGroup';239PgButtonGroup.propTypes = {240  children: CustomPropTypes.children,241};242