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 _ from 'lodash';11import { Grid, Typography, Box } from '@mui/material';12import { makeStyles } from '@mui/styles';13import React from 'react';14import { InputCheckbox, InputText } from './FormComponents';15import PropTypes from 'prop-types';16 17const useStyles = makeStyles((theme) => ({18  inputLabel: {19    textAlign: 'center',20    padding: 2,21    paddingLeft: 1022  },23  inputCheckboxClass: {24    border: '1px solid',25    borderRadius: theme.shape.borderRadius,26    borderColor: theme.otherVars.inputBorderColor,27    padding: 328  }29}));30 31export default function KeyboardShortcuts({ value, onChange, fields }) {32  const classes = useStyles();33  const keyCid = _.uniqueId('c');34  const keyhelpid = `h${keyCid}`;35  const shiftCid = _.uniqueId('c');36  const shifthelpid = `h${shiftCid}`;37  const ctrlCid = _.uniqueId('c');38  const ctrlhelpid = `h${ctrlCid}`;39  const altCid = _.uniqueId('c');40  const althelpid = `h${altCid}`;41  const keyLabel = _.uniqueId('c');42 43  const onKeyDown = (e) => {44    let newVal = { ...value };45    let _val = e.key;46    if (e.keyCode == 32) {47      _val = 'Space';48    }49    newVal.key = {50      char: _val,51      key_code: e.keyCode52    };53    onChange(newVal);54  };55 56  const onShiftChange = (e) => {57    let newVal = { ...value };58    newVal.shift = e.target.checked;59    onChange(newVal);60  };61 62  const onCtrlChange = (e) => {63    let newVal = { ...value };64    newVal.control = e.target.checked;65    onChange(newVal);66  };67 68  const onAltChange = (e) => {69    let newVal = { ...value };70    newVal.alt = e.target.checked;71    onChange(newVal);72  };73 74  return (75    <Grid76      container77      direction="row"78      alignItems="center"79      key={_.uniqueId('c')}80    >81      {fields.map(element => {82        let ctrlProps = {83          label: element.label84        };85        if (element.type == 'keyCode') {86          return <Grid item container lg={4} md={4} sm={4} xs={12} key={_.uniqueId('c')}>87            <Grid item lg={4} md={4} sm={4} xs={12} className={classes.inputLabel}>88              <Typography id={keyLabel}>{element.label}</Typography>89            </Grid>90            <Grid item lg={8} md={8} sm={8} xs={12}>91              <InputText id={keyCid} helpid={keyhelpid} value={value?.key?.char} controlProps={92                {93                  onKeyDown: onKeyDown,94                }95              }/>96            </Grid>97          </Grid>;98        } else if (element.name == 'shift') {99          return <Grid item lg={2} md={2} sm={2} xs={12} className={classes.inputLabel} key={_.uniqueId('c')}>100            <Box className={classes.inputCheckboxClass}>101              <InputCheckbox id={shiftCid} helpid={shifthelpid} value={value?.shift}102                controlProps={ctrlProps}103                onChange={onShiftChange}></InputCheckbox>104            </Box>105          </Grid>;106        } else if (element.name == 'control') {107          return <Grid item lg={2} md={2} sm={2} xs={12} className={classes.inputLabel} key={_.uniqueId('c')}>108            <Box className={classes.inputCheckboxClass}>109              <InputCheckbox id={ctrlCid} helpid={ctrlhelpid} value={value?.control}110                controlProps={ctrlProps}111                onChange={onCtrlChange}></InputCheckbox>112            </Box>113          </Grid>;114        } else if (element.name == 'alt') {115          return <Grid item lg={3} md={3} sm={3} xs={12} className={classes.inputLabel} key={_.uniqueId('c')}>116            <Box className={classes.inputCheckboxClass}>117              <InputCheckbox id={altCid} helpid={althelpid} value={value?.alt}118                controlProps={ctrlProps}119                onChange={onAltChange}></InputCheckbox>120            </Box>121          </Grid>;122        }123 124      })}125    </Grid>126  );127}128 129KeyboardShortcuts.propTypes = {130  value: PropTypes.object,131  onChange: PropTypes.func,132  fields: PropTypes.array133};134