1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | const _excluded = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import clsx from 'clsx';
|
7 | import { unstable_extendSxProp as extendSxProp } from '@mui/system';
|
8 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
9 | import styled from '../styles/styled';
|
10 | import useThemeProps from '../styles/useThemeProps';
|
11 | import capitalize from '../utils/capitalize';
|
12 | import { getTypographyUtilityClass } from './typographyClasses';
|
13 | import { jsx as _jsx } from "react/jsx-runtime";
|
14 |
|
15 | const useUtilityClasses = ownerState => {
|
16 | const {
|
17 | align,
|
18 | gutterBottom,
|
19 | noWrap,
|
20 | paragraph,
|
21 | variant,
|
22 | classes
|
23 | } = ownerState;
|
24 | const slots = {
|
25 | root: ['root', variant, ownerState.align !== 'inherit' && `align${capitalize(align)}`, gutterBottom && 'gutterBottom', noWrap && 'noWrap', paragraph && 'paragraph']
|
26 | };
|
27 | return composeClasses(slots, getTypographyUtilityClass, classes);
|
28 | };
|
29 |
|
30 | export const TypographyRoot = styled('span', {
|
31 | name: 'MuiTypography',
|
32 | slot: 'Root',
|
33 | overridesResolver: (props, styles) => {
|
34 | const {
|
35 | ownerState
|
36 | } = props;
|
37 | return [styles.root, ownerState.variant && styles[ownerState.variant], ownerState.align !== 'inherit' && styles[`align${capitalize(ownerState.align)}`], ownerState.noWrap && styles.noWrap, ownerState.gutterBottom && styles.gutterBottom, ownerState.paragraph && styles.paragraph];
|
38 | }
|
39 | })(({
|
40 | theme,
|
41 | ownerState
|
42 | }) => _extends({
|
43 | margin: 0
|
44 | }, ownerState.variant && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
|
45 | textAlign: ownerState.align
|
46 | }, ownerState.noWrap && {
|
47 | overflow: 'hidden',
|
48 | textOverflow: 'ellipsis',
|
49 | whiteSpace: 'nowrap'
|
50 | }, ownerState.gutterBottom && {
|
51 | marginBottom: '0.35em'
|
52 | }, ownerState.paragraph && {
|
53 | marginBottom: 16
|
54 | }));
|
55 | const defaultVariantMapping = {
|
56 | h1: 'h1',
|
57 | h2: 'h2',
|
58 | h3: 'h3',
|
59 | h4: 'h4',
|
60 | h5: 'h5',
|
61 | h6: 'h6',
|
62 | subtitle1: 'h6',
|
63 | subtitle2: 'h6',
|
64 | body1: 'p',
|
65 | body2: 'p',
|
66 | inherit: 'p'
|
67 | };
|
68 |
|
69 | const colorTransformations = {
|
70 | primary: 'primary.main',
|
71 | textPrimary: 'text.primary',
|
72 | secondary: 'secondary.main',
|
73 | textSecondary: 'text.secondary',
|
74 | error: 'error.main'
|
75 | };
|
76 |
|
77 | const transformDeprecatedColors = color => {
|
78 | return colorTransformations[color] || color;
|
79 | };
|
80 |
|
81 | const Typography = React.forwardRef(function Typography(inProps, ref) {
|
82 | const themeProps = useThemeProps({
|
83 | props: inProps,
|
84 | name: 'MuiTypography'
|
85 | });
|
86 | const color = transformDeprecatedColors(themeProps.color);
|
87 | const props = extendSxProp(_extends({}, themeProps, {
|
88 | color
|
89 | }));
|
90 |
|
91 | const {
|
92 | align = 'inherit',
|
93 | className,
|
94 | component,
|
95 | gutterBottom = false,
|
96 | noWrap = false,
|
97 | paragraph = false,
|
98 | variant = 'body1',
|
99 | variantMapping = defaultVariantMapping
|
100 | } = props,
|
101 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
102 |
|
103 | const ownerState = _extends({}, props, {
|
104 | align,
|
105 | color,
|
106 | className,
|
107 | component,
|
108 | gutterBottom,
|
109 | noWrap,
|
110 | paragraph,
|
111 | variant,
|
112 | variantMapping
|
113 | });
|
114 |
|
115 | const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
|
116 | const classes = useUtilityClasses(ownerState);
|
117 | return _jsx(TypographyRoot, _extends({
|
118 | as: Component,
|
119 | ref: ref,
|
120 | ownerState: ownerState,
|
121 | className: clsx(classes.root, className)
|
122 | }, other));
|
123 | });
|
124 | process.env.NODE_ENV !== "production" ? Typography.propTypes
|
125 |
|
126 | = {
|
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 | |
133 |
|
134 |
|
135 |
|
136 | align: PropTypes.oneOf(['center', 'inherit', 'justify', 'left', 'right']),
|
137 |
|
138 | |
139 |
|
140 |
|
141 | children: PropTypes.node,
|
142 |
|
143 | |
144 |
|
145 |
|
146 | classes: PropTypes.object,
|
147 |
|
148 | |
149 |
|
150 |
|
151 | className: PropTypes.string,
|
152 |
|
153 | |
154 |
|
155 |
|
156 |
|
157 | component: PropTypes.elementType,
|
158 |
|
159 | |
160 |
|
161 |
|
162 |
|
163 | gutterBottom: PropTypes.bool,
|
164 |
|
165 | |
166 |
|
167 |
|
168 |
|
169 |
|
170 |
|
171 |
|
172 | noWrap: PropTypes.bool,
|
173 |
|
174 | |
175 |
|
176 |
|
177 |
|
178 | paragraph: PropTypes.bool,
|
179 |
|
180 | |
181 |
|
182 |
|
183 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
184 |
|
185 | |
186 |
|
187 |
|
188 |
|
189 | variant: PropTypes
|
190 |
|
191 | .oneOfType([PropTypes.oneOf(['body1', 'body2', 'button', 'caption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'inherit', 'overline', 'subtitle1', 'subtitle2']), PropTypes.string]),
|
192 |
|
193 | |
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 |
|
206 |
|
207 |
|
208 |
|
209 |
|
210 |
|
211 |
|
212 | variantMapping: PropTypes
|
213 |
|
214 | .object
|
215 | } : void 0;
|
216 | export default Typography; |
\ | No newline at end of file |