fix(striker-ui): isolate styled OutlinedInput

main
Tsu-ba-me 3 years ago
parent bcda785f3c
commit 323d162172
  1. 35
      striker-ui/components/Files/FileInfo.tsx
  2. 35
      striker-ui/components/OutlinedInput/OutlinedInput.tsx
  3. 3
      striker-ui/components/OutlinedInput/index.tsx

@ -8,8 +8,6 @@ import {
inputLabelClasses, inputLabelClasses,
MenuItem, MenuItem,
menuItemClasses, menuItemClasses,
OutlinedInput,
outlinedInputClasses,
Select, Select,
selectClasses, selectClasses,
styled, styled,
@ -27,10 +25,11 @@ import {
GREY, GREY,
RED, RED,
TEXT, TEXT,
UNSELECTED,
} from '../../lib/consts/DEFAULT_THEME'; } from '../../lib/consts/DEFAULT_THEME';
import { UPLOAD_FILE_TYPES_ARRAY } from '../../lib/consts/UPLOAD_FILE_TYPES'; import { UPLOAD_FILE_TYPES_ARRAY } from '../../lib/consts/UPLOAD_FILE_TYPES';
import OutlinedInput from '../OutlinedInput';
type FileInfoProps = Pick<FileDetailMetadata, 'fileName' | 'fileLocations'> & type FileInfoProps = Pick<FileDetailMetadata, 'fileName' | 'fileLocations'> &
Partial<Pick<FileDetailMetadata, 'fileType'>> & { Partial<Pick<FileDetailMetadata, 'fileType'>> & {
isReadonly?: boolean; isReadonly?: boolean;
@ -53,32 +52,6 @@ const StyledInputLabel = styled(InputLabel)({
}, },
}); });
const StyledOutlinedInput = styled(OutlinedInput)({
color: GREY,
[`& .${outlinedInputClasses.notchedOutline}`]: {
borderColor: UNSELECTED,
},
'&:hover': {
[`& .${outlinedInputClasses.notchedOutline}`]: {
borderColor: GREY,
},
},
[`&.${outlinedInputClasses.focused}`]: {
color: TEXT,
[`& .${outlinedInputClasses.notchedOutline}`]: {
borderColor: GREY,
'& legend': {
paddingRight: '1.2em',
},
},
},
});
const StyledSelect = styled(Select)({ const StyledSelect = styled(Select)({
[`& .${selectClasses.icon}`]: { [`& .${selectClasses.icon}`]: {
color: GREY, color: GREY,
@ -134,7 +107,7 @@ const FileInfo = (
<StyledInputLabel htmlFor={fileNameElementId} variant="outlined"> <StyledInputLabel htmlFor={fileNameElementId} variant="outlined">
{fileNameElementLabel} {fileNameElementLabel}
</StyledInputLabel> </StyledInputLabel>
<StyledOutlinedInput <OutlinedInput
defaultValue={fileName} defaultValue={fileName}
disabled={isReadonly} disabled={isReadonly}
id={fileNameElementId} id={fileNameElementId}
@ -153,7 +126,7 @@ const FileInfo = (
defaultValue={fileType} defaultValue={fileType}
disabled={isReadonly} disabled={isReadonly}
id={fileTypeElementId} id={fileTypeElementId}
input={<StyledOutlinedInput label={fileTypeElementLabel} />} input={<OutlinedInput label={fileTypeElementLabel} />}
onChange={({ target: { value } }) => onChange={({ target: { value } }) =>
onChange?.call(null, { fileType: value as FileType }) onChange?.call(null, { fileType: value as FileType })
} }

@ -0,0 +1,35 @@
import {
OutlinedInput as MUIOutlinedInput,
outlinedInputClasses as muiOutlinedInputClasses,
styled,
} from '@mui/material';
import { GREY, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME';
const OutlinedInput = styled(MUIOutlinedInput)({
color: GREY,
[`& .${muiOutlinedInputClasses.notchedOutline}`]: {
borderColor: UNSELECTED,
},
'&:hover': {
[`& .${muiOutlinedInputClasses.notchedOutline}`]: {
borderColor: GREY,
},
},
[`&.${muiOutlinedInputClasses.focused}`]: {
color: TEXT,
[`& .${muiOutlinedInputClasses.notchedOutline}`]: {
borderColor: GREY,
'& legend': {
paddingRight: '1.2em',
},
},
},
});
export default OutlinedInput;

@ -0,0 +1,3 @@
import OutlinedInput from './OutlinedInput';
export default OutlinedInput;
Loading…
Cancel
Save