fix(striker-ui): add message to OutlinedInputWithLabel

main
Tsu-ba-me 3 years ago
parent 776988da47
commit d5967c1361
  1. 24
      striker-ui/components/OutlinedInputWithLabel.tsx

@ -3,6 +3,7 @@ import {
FormControlProps as MUIFormControlProps,
} from '@mui/material';
import MessageBox, { MessageBoxProps } from './MessageBox';
import OutlinedInput, { OutlinedInputProps } from './OutlinedInput';
import OutlinedInputLabel, {
OutlinedInputLabelProps,
@ -13,6 +14,7 @@ type OutlinedInputWithLabelOptionalProps = {
id?: string;
inputProps?: Partial<OutlinedInputProps>;
inputLabelProps?: Partial<OutlinedInputLabelProps>;
messageBoxProps?: Partial<MessageBoxProps>;
};
type OutlinedInputWithLabelProps = {
@ -25,6 +27,7 @@ const OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS: Required<OutlinedInputWithLabelOp
id: '',
inputProps: {},
inputLabelProps: {},
messageBoxProps: {},
};
const OutlinedInputWithLabel = ({
@ -33,7 +36,15 @@ const OutlinedInputWithLabel = ({
inputProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.inputProps,
inputLabelProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.inputLabelProps,
label,
}: OutlinedInputWithLabelProps): JSX.Element => (
messageBoxProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.messageBoxProps,
}: OutlinedInputWithLabelProps): JSX.Element => {
const {
sx: messageBoxSx,
text: messageBoxText,
...messageBoxRestProps
} = messageBoxProps;
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<MUIFormControl {...formControlProps}>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
@ -49,8 +60,19 @@ const OutlinedInputWithLabel = ({
...inputProps,
}}
/>
{messageBoxText && (
<MessageBox
// eslint-disable-next-line react/jsx-props-no-spreading
{...{
...messageBoxRestProps,
sx: { marginTop: '.4em', ...messageBoxSx },
text: messageBoxText,
}}
/>
)}
</MUIFormControl>
);
};
OutlinedInputWithLabel.defaultProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS;

Loading…
Cancel
Save