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 gettext from 'sources/gettext';11import { Grid } from '@mui/material';12import { makeStyles } from '@mui/styles';13import React, { useMemo } from 'react';14import {InputSelect } from './FormComponents';15import PropTypes from 'prop-types';16import CustomPropTypes from '../custom_prop_types';17 18const useStyles = makeStyles(() => ({19  preview: {20    paddingTop: 1021  }22}));23 24export default function SelectThemes({onChange, ...props}) {25  const classes = useStyles();26  const previewSrc = useMemo(()=>(props.options?.find((o)=>o.value==props.value)?.preview_src), [props.value]);27 28  return (29    <Grid container direction="column">30      <Grid item lg={12} md={12} sm={12} xs={12}>31        <InputSelect ref={props.inputRef} onChange={onChange} {...props} />32      </Grid>33      <Grid item lg={12} md={12} sm={12} xs={12} className={classes.preview}>34        <img className='img-fluid mx-auto d-block border' src={previewSrc} alt={gettext('Preview not available...')} />35      </Grid>36    </Grid>37  );38}39 40SelectThemes.propTypes = {41  value: PropTypes.string,42  onChange: PropTypes.func,43  controlProps: PropTypes.object,44  fields: PropTypes.array,45  options: PropTypes.array,46  inputRef: CustomPropTypes.ref47};48