IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-01-10 08:04:36 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add the note control.

Browse Source
This commit is contained in:
Aditya Toshniwal 2021-07-29 18:06:15 +05:30 committed by Akshay Joshi
parent 377fe80046
commit 82ca5145c2
2 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/pgadmin/static/js/SchemaView/MappedControl.jsx
View File

@ -10,7 +10,7 @@
import React, { useCallback } from 'react';
import _ from 'lodash';
import { FormInputText, FormInputSelect, FormInputSwitch, FormInputCheckbox, FormInputColor, FormInputFileSelect, FormInputToggle, InputSwitch, FormInputSQL } from '../components/FormComponents';
import { FormInputText, FormInputSelect, FormInputSwitch, FormInputCheckbox, FormInputColor, FormInputFileSelect, FormInputToggle, InputSwitch, FormInputSQL, FormNote } from '../components/FormComponents';
import { InputSelect, InputText, InputCheckbox } from '../components/FormComponents';
import Privilege from '../components/Privilege';
import { evalFunc } from 'sources/utils';
@ -91,6 +91,8 @@ function MappedFormControlBase({type, value, id, onChange, className, visible, i
return <FormInputFileSelect name={name} value={value} onChange={onTextChange} className={className} {...props} />;
case 'sql':
return <FormInputSQL name={name} value={value} onChange={onSqlChange} className={className} noLabel={noLabel} {...props} />;
case 'note':
return <FormNote {...props}/>;
default:
return <span>{value}</span>;
}
@ -203,7 +205,7 @@ const ALLOWED_PROPS_FIELD_COMMON = [
];
const ALLOWED_PROPS_FIELD_FORM = [
'type', 'onChange', 'state', 'noLabel'
'type', 'onChange', 'state', 'noLabel', 'text',
];
const ALLOWED_PROPS_FIELD_CELL = [

21
web/pgadmin/static/js/components/FormComponents.jsx
View File

@ -11,7 +11,7 @@
import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Box, FormControl, OutlinedInput, FormHelperText,
Grid, IconButton, FormControlLabel, Switch, Checkbox, useTheme, InputLabel } from '@material-ui/core';
Grid, IconButton, FormControlLabel, Switch, Checkbox, useTheme, InputLabel, Paper } from '@material-ui/core';
import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
import ReportProblemIcon from '@material-ui/icons/ReportProblemRounded';
import InfoIcon from '@material-ui/icons/InfoRounded';
@ -19,11 +19,13 @@ import CloseIcon from '@material-ui/icons/CloseRounded';
import CheckIcon from '@material-ui/icons/CheckCircleOutlineRounded';
import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
import FolderOpenRoundedIcon from '@material-ui/icons/FolderOpenRounded';
import DescriptionIcon from '@material-ui/icons/Description';
import Select, {components as RSComponents} from 'react-select';
import CreatableSelect from 'react-select/creatable';
import Pickr from '@simonwep/pickr';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import HTMLReactParse from 'html-react-parser';
import CodeMirror from './CodeMirror';
import gettext from 'sources/gettext';
@ -64,6 +66,11 @@ const useStyles = makeStyles((theme) => ({
minHeight: theme.spacing(3.5),
width: theme.spacing(3.5),
minWidth: theme.spacing(3.5),
},
noteRoot: {
display: 'flex',
backgroundColor: theme.otherVars.borderColor,
padding: theme.spacing(1),
}
}));
@ -816,6 +823,18 @@ FormInputColor.propTypes = {
testcid: PropTypes.string,
};
export function FormNote({text}) {
const classes = useStyles();
return (
<Paper elevation={0} className={classes.noteRoot}>
<Box paddingRight="0.25rem"><DescriptionIcon fontSize="small" /></Box>
<Box>{HTMLReactParse(text)}</Box>
</Paper>
);
}
FormNote.propTypes = {
text: PropTypes.string,
};
const useStylesFormFooter = makeStyles((theme)=>({
root: {