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 React, { useState, useRef, useEffect } from 'react';11import gettext from 'sources/gettext';12import { Box } from '@mui/material';13import { DefaultButton, PrimaryButton } from '../components/Buttons';14import CloseIcon from '@mui/icons-material/CloseRounded';15import CheckRoundedIcon from '@mui/icons-material/CheckRounded';16import PropTypes from 'prop-types';17import { useModalStyles } from '../helpers/ModalProvider';18import { InputText } from '../components/FormComponents';19import { isEmptyString } from '../../../static/js/validators';20 21export default function NamedRestoreContent({closeModal, onOK, setHeight}) {22  const classes = useModalStyles();23  const containerRef = useRef();24  const firstEleRef = useRef();25  const okBtnRef = useRef();26  const [formData, setFormData] = useState({27    namedRestorePoint: ''28  });29 30  const onTextChange = (e, id) => {31    let val = e;32    if(e?.target) {33      val = e.target.value;34    }35    setFormData((prev)=>({...prev, [id]: val}));36  };37 38  const onKeyDown = (e) => {39    // If enter key is pressed then click on OK button40    if (e.key === 'Enter') {41      okBtnRef.current?.click();42    }43  };44 45  useEffect(()=>{46    setTimeout(()=>{47      firstEleRef.current?.focus();48    }, 275);49  }, []);50 51  useEffect(()=>{52    setHeight?.(containerRef.current?.offsetHeight);53  }, [containerRef.current]);54 55  const isOKDisabled = isEmptyString(formData.namedRestorePoint);56 57  return (58    <Box display="flex" flexDirection="column" className={classes.container} ref={containerRef}>59      <Box flexGrow="1" p={2}>60        <Box>61          <span style={{fontWeight: 'bold'}}>62            {gettext('Enter the name of the restore point to add')}63          </span>64        </Box>65        <Box marginTop='12px'>66          <InputText inputRef={firstEleRef} type="text" value={formData['namedRestorePoint']}67            onChange={(e)=>onTextChange(e, 'namedRestorePoint')} onKeyDown={(e)=>onKeyDown(e)}/>68        </Box>69      </Box>70      <Box className={classes.footer}>71        <DefaultButton data-test="close" startIcon={<CloseIcon />} onClick={()=>{72          closeModal();73        }} >{gettext('Cancel')}</DefaultButton>74        <PrimaryButton ref={okBtnRef} data-test="save" disabled={isOKDisabled} className={classes.margin} startIcon={<CheckRoundedIcon />} onClick={()=>{75          let postFormData = new FormData();76          postFormData.append('value', formData.namedRestorePoint);77          onOK?.(postFormData);78          closeModal();79        }} >{gettext('OK')}</PrimaryButton>80      </Box>81    </Box>82  );83}84 85NamedRestoreContent.propTypes = {86  closeModal: PropTypes.func,87  onOK: PropTypes.func,88  setHeight: PropTypes.func89};90