fix(striker-ui): add help button and message to OutlinedInputWithLabel

main
Tsu-ba-me 2 years ago
parent 53e76cc418
commit 6d7a0e4ef6
  1. 65
      striker-ui/components/OutlinedInputWithLabel.tsx
  2. 5
      striker-ui/components/ProvisionServerDialog.tsx

@ -1,7 +1,13 @@
import { FC, useState } from 'react';
import { import {
FormControl as MUIFormControl, FormControl as MUIFormControl,
FormControlProps as MUIFormControlProps, FormControlProps as MUIFormControlProps,
IconButton as MUIIconButton,
InputAdornment as MUIInputAdornment,
} from '@mui/material'; } from '@mui/material';
import { QuestionMark as MUIQuestionMarkIcon } from '@mui/icons-material';
import { GREY } from '../lib/consts/DEFAULT_THEME';
import InputMessageBox from './InputMessageBox'; import InputMessageBox from './InputMessageBox';
import { MessageBoxProps } from './MessageBox'; import { MessageBoxProps } from './MessageBox';
@ -12,6 +18,7 @@ import OutlinedInputLabel, {
type OutlinedInputWithLabelOptionalProps = { type OutlinedInputWithLabelOptionalProps = {
formControlProps?: Partial<MUIFormControlProps>; formControlProps?: Partial<MUIFormControlProps>;
helpMessageBoxProps?: Partial<MessageBoxProps>;
id?: string; id?: string;
inputProps?: Partial<OutlinedInputProps>; inputProps?: Partial<OutlinedInputProps>;
inputLabelProps?: Partial<OutlinedInputLabelProps>; inputLabelProps?: Partial<OutlinedInputLabelProps>;
@ -29,6 +36,7 @@ const OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS: Required<
> & > &
Pick<OutlinedInputWithLabelOptionalProps, 'onChange'> = { Pick<OutlinedInputWithLabelOptionalProps, 'onChange'> = {
formControlProps: {}, formControlProps: {},
helpMessageBoxProps: {},
id: '', id: '',
inputProps: {}, inputProps: {},
inputLabelProps: {}, inputLabelProps: {},
@ -37,33 +45,82 @@ const OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS: Required<
value: '', value: '',
}; };
const OutlinedInputWithLabel = ({ const OutlinedInputWithLabel: FC<OutlinedInputWithLabelProps> = ({
formControlProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.formControlProps, formControlProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.formControlProps,
helpMessageBoxProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.helpMessageBoxProps,
id = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.id, 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, inputLabelProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.inputLabelProps,
label, label,
messageBoxProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.messageBoxProps, messageBoxProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.messageBoxProps,
onChange, onChange,
value = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.value, value = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.value,
}: OutlinedInputWithLabelProps): JSX.Element => ( }) => {
const { text: helpText } = helpMessageBoxProps;
const [isShowHelp, setIsShowHelp] = useState<boolean>(false);
return (
<MUIFormControl {...formControlProps}> <MUIFormControl {...formControlProps}>
<OutlinedInputLabel {...{ htmlFor: id, ...inputLabelProps }}> <OutlinedInputLabel {...{ htmlFor: id, ...inputLabelProps }}>
{label} {label}
</OutlinedInputLabel> </OutlinedInputLabel>
<OutlinedInput <OutlinedInput
{...{ {...{
endAdornment: (
<MUIInputAdornment
position="end"
sx={{
display: 'flex',
flexDirection: 'row',
'& > :not(:first-child)': {
marginLeft: '.3em',
},
}}
>
{endAdornment}
{helpText && (
<MUIIconButton
onClick={() => {
setIsShowHelp(true);
}}
sx={{
color: GREY,
padding: '.1em',
}}
>
<MUIQuestionMarkIcon />
</MUIIconButton>
)}
</MUIInputAdornment>
),
fullWidth: formControlProps.fullWidth, fullWidth: formControlProps.fullWidth,
id, id,
label, label,
onChange, onChange,
value, value,
...inputProps, ...restInputProps,
}}
/>
{isShowHelp && (
<InputMessageBox
{...{
onClose: () => {
setIsShowHelp(false);
},
...helpMessageBoxProps,
}} }}
/> />
)}
<InputMessageBox {...messageBoxProps} /> <InputMessageBox {...messageBoxProps} />
</MUIFormControl> </MUIFormControl>
); );
};
OutlinedInputWithLabel.defaultProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS; OutlinedInputWithLabel.defaultProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS;

@ -6,7 +6,7 @@ import {
useEffect, useEffect,
useState, useState,
} from 'react'; } 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 { Close as CloseIcon } from '@mui/icons-material';
import { DataSizeUnit } from 'format-data-size'; import { DataSizeUnit } from 'format-data-size';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
@ -251,17 +251,14 @@ const createMaxValueButton = (
onButtonClick?: ContainedButtonProps['onClick']; onButtonClick?: ContainedButtonProps['onClick'];
}, },
) => ( ) => (
<InputAdornment position="end">
<ContainedButton <ContainedButton
disabled={onButtonClick === undefined} disabled={onButtonClick === undefined}
onClick={onButtonClick} onClick={onButtonClick}
sx={{ sx={{
marginLeft: '14px',
minWidth: 'unset', minWidth: 'unset',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
}} }}
>{`Max: ${maxValue}`}</ContainedButton> >{`Max: ${maxValue}`}</ContainedButton>
</InputAdornment>
); );
const createSelectItemDisplay = ({ const createSelectItemDisplay = ({

Loading…
Cancel
Save