Remove too much space of "TypographyMaxLines"
This commit is contained in:
@@ -6,23 +6,36 @@
|
|||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import styled from '@emotion/styled';
|
import { styled, Theme, TypographyVariant } from '@mui/material/styles';
|
||||||
import Typography, { TypographyProps } from '@mui/material/Typography';
|
import Typography, { TypographyProps } from '@mui/material/Typography';
|
||||||
import { shouldForwardProp } from '@/modules/core/utils/ShouldForwardProp.ts';
|
import { shouldForwardProp } from '@/modules/core/utils/ShouldForwardProp.ts';
|
||||||
|
|
||||||
|
const DEFAULT_LINE_HEIGHT = '1.5';
|
||||||
|
|
||||||
|
const getLineHeight = (theme: Theme, variant: TypographyProps['variant']): string => {
|
||||||
|
if (variant === undefined) {
|
||||||
|
return DEFAULT_LINE_HEIGHT;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!(variant in theme.typography)) {
|
||||||
|
return DEFAULT_LINE_HEIGHT;
|
||||||
|
}
|
||||||
|
|
||||||
|
return theme.typography[variant as TypographyVariant].lineHeight?.toString() ?? DEFAULT_LINE_HEIGHT;
|
||||||
|
};
|
||||||
|
|
||||||
type TypographyMaxLinesProps = {
|
type TypographyMaxLinesProps = {
|
||||||
lines?: number;
|
lines?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const TypographyMaxLines = styled(Typography, {
|
export const TypographyMaxLines = styled(Typography, {
|
||||||
shouldForwardProp: shouldForwardProp<TypographyMaxLinesProps>(['lines']),
|
shouldForwardProp: shouldForwardProp<TypographyMaxLinesProps>(['lines']),
|
||||||
})<TypographyMaxLinesProps>(({ lines = 2 }) => ({
|
})<TypographyProps & TypographyMaxLinesProps>(({ variant, theme, lines = 2 }) => ({
|
||||||
lineHeight: '1.5rem',
|
lineHeight: getLineHeight(theme, variant),
|
||||||
maxHeight: `${3 * lines}rem`,
|
|
||||||
display: '-webkit-box',
|
display: '-webkit-box',
|
||||||
WebkitLineClamp: `${lines}`,
|
WebkitLineClamp: `${lines}`,
|
||||||
WebkitBoxOrient: 'vertical',
|
WebkitBoxOrient: 'vertical',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
textOverflow: 'ellipsis',
|
textOverflow: 'ellipsis',
|
||||||
overflowWrap: 'break-word',
|
overflowWrap: 'break-word',
|
||||||
})) as React.FC<TypographyProps & { lines?: number }>;
|
}));
|
||||||
|
|||||||
Reference in New Issue
Block a user