@lunit/oui
Version:
Lunit Oncology UI components
97 lines (96 loc) • 2.96 kB
JavaScript
// This file facilitates style sharing between text input and text area
import { Box, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import { formatCSSSize } from './BaseTextField.utils';
const baseTextFieldStyle = (theme) => {
return {
backgroundColor: theme.palette.neutralGrey[75],
borderRadius: '8px',
border: '1px solid',
borderColor: 'transparent',
color: theme.palette.neutralGrey[5],
fontWeight: '400',
fontSize: '14px',
fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
lineHeight: '20px',
padding: '7px 16px',
'&::placeholder': {
color: theme.palette.neutralGrey[45],
},
'&:focus': {
outline: 'none',
border: '1px solid',
borderColor: theme.palette.lunitTeal[10],
},
'&:hover': {
borderColor: theme.palette.neutralGrey[45],
},
'&:disabled': {
opacity: '0.8',
pointerEvents: 'none',
},
'&:read-only': {
border: `1px solid ${theme.palette.neutralGrey[70]}`,
backgroundColor: 'transparent',
color: theme.palette.neutralGrey[45],
pointerEvents: 'none',
},
};
};
const baseTextFieldErrorStyle = (theme) => {
return {
borderColor: theme.palette.red[5],
};
};
const baseTextFieldMsgStyle = (theme) => {
return {
width: '312px',
maxWidth: '312px',
minHeight: '20px',
color: theme.palette.neutralGrey[45],
padding: '4px',
};
};
const baseTextFieldMsgErrorStyle = (theme) => {
return {
color: theme.palette.red[5],
};
};
const BaseTextFieldBox = styled(Box, {
shouldForwardProp: (prop) => prop !== 'width',
})(({ width }) => {
return {
width: formatCSSSize(width),
minWidth: formatCSSSize(width) ? 'unset' : '208px',
};
});
const BaseTextFieldContainer = styled(Box, {
shouldForwardProp: (prop) => !['width'].includes(prop.toString()),
})(({ width }) => {
return {
position: 'relative',
display: 'flex',
flexDirection: 'column',
width: formatCSSSize(width),
minWidth: formatCSSSize(width) ? 'unset' : '208px',
};
});
const InputMsg = styled(Typography, {
shouldForwardProp: (prop) => prop !== 'error',
})(({ theme, error }) => {
let resultStyle = baseTextFieldMsgStyle(theme);
if (error) {
resultStyle = {
...resultStyle,
...baseTextFieldMsgErrorStyle(theme),
};
}
return resultStyle;
});
const styles = {
baseTextFieldStyle,
baseTextFieldErrorStyle,
baseTextFieldMsgStyle,
baseTextFieldMsgErrorStyle,
};
export { styles, BaseTextFieldContainer, BaseTextFieldBox, InputMsg };