diff --git a/striker-ui/components/OutlinedInputWithLabel.tsx b/striker-ui/components/OutlinedInputWithLabel.tsx index 15ee0be2..1c260087 100644 --- a/striker-ui/components/OutlinedInputWithLabel.tsx +++ b/striker-ui/components/OutlinedInputWithLabel.tsx @@ -1,7 +1,13 @@ +import { FC, useState } from 'react'; import { FormControl as MUIFormControl, FormControlProps as MUIFormControlProps, + IconButton as MUIIconButton, + InputAdornment as MUIInputAdornment, } from '@mui/material'; +import { QuestionMark as MUIQuestionMarkIcon } from '@mui/icons-material'; + +import { GREY } from '../lib/consts/DEFAULT_THEME'; import InputMessageBox from './InputMessageBox'; import { MessageBoxProps } from './MessageBox'; @@ -12,6 +18,7 @@ import OutlinedInputLabel, { type OutlinedInputWithLabelOptionalProps = { formControlProps?: Partial; + helpMessageBoxProps?: Partial; id?: string; inputProps?: Partial; inputLabelProps?: Partial; @@ -29,6 +36,7 @@ const OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS: Required< > & Pick = { formControlProps: {}, + helpMessageBoxProps: {}, id: '', inputProps: {}, inputLabelProps: {}, @@ -37,33 +45,82 @@ const OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS: Required< value: '', }; -const OutlinedInputWithLabel = ({ +const OutlinedInputWithLabel: FC = ({ formControlProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.formControlProps, + helpMessageBoxProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.helpMessageBoxProps, id = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.id, - inputProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.inputProps, + inputProps: { + endAdornment, + ...restInputProps + } = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.inputProps, inputLabelProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.inputLabelProps, label, messageBoxProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.messageBoxProps, onChange, value = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.value, -}: OutlinedInputWithLabelProps): JSX.Element => ( - - - {label} - - - - -); +}) => { + const { text: helpText } = helpMessageBoxProps; + + const [isShowHelp, setIsShowHelp] = useState(false); + + return ( + + + {label} + + :not(:first-child)': { + marginLeft: '.3em', + }, + }} + > + {endAdornment} + {helpText && ( + { + setIsShowHelp(true); + }} + sx={{ + color: GREY, + padding: '.1em', + }} + > + + + )} + + ), + fullWidth: formControlProps.fullWidth, + id, + label, + onChange, + value, + ...restInputProps, + }} + /> + {isShowHelp && ( + { + setIsShowHelp(false); + }, + + ...helpMessageBoxProps, + }} + /> + )} + + + ); +}; OutlinedInputWithLabel.defaultProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS; diff --git a/striker-ui/components/ProvisionServerDialog.tsx b/striker-ui/components/ProvisionServerDialog.tsx index 273634c8..0eeaff6b 100644 --- a/striker-ui/components/ProvisionServerDialog.tsx +++ b/striker-ui/components/ProvisionServerDialog.tsx @@ -6,7 +6,7 @@ import { useEffect, useState, } from 'react'; -import { Box, Dialog, DialogProps, Grid, InputAdornment } from '@mui/material'; +import { Box, Dialog, DialogProps, Grid } from '@mui/material'; import { Close as CloseIcon } from '@mui/icons-material'; import { DataSizeUnit } from 'format-data-size'; import { v4 as uuidv4 } from 'uuid'; @@ -251,17 +251,14 @@ const createMaxValueButton = ( onButtonClick?: ContainedButtonProps['onClick']; }, ) => ( - - {`Max: ${maxValue}`} - + {`Max: ${maxValue}`} ); const createSelectItemDisplay = ({