1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
4 |
|
5 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports.default = exports.styles = void 0;
|
11 |
|
12 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13 |
|
14 | var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
15 |
|
16 | var React = _interopRequireWildcard(require("react"));
|
17 |
|
18 | var _propTypes = _interopRequireDefault(require("prop-types"));
|
19 |
|
20 | var _clsx = _interopRequireDefault(require("clsx"));
|
21 |
|
22 | var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
|
23 |
|
24 | var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
|
25 |
|
26 | var styles = function styles(theme) {
|
27 | return {
|
28 |
|
29 | root: {
|
30 | margin: 0
|
31 | },
|
32 |
|
33 |
|
34 | body2: theme.typography.body2,
|
35 |
|
36 |
|
37 | body1: theme.typography.body1,
|
38 |
|
39 |
|
40 | caption: theme.typography.caption,
|
41 |
|
42 |
|
43 | button: theme.typography.button,
|
44 |
|
45 |
|
46 | h1: theme.typography.h1,
|
47 |
|
48 |
|
49 | h2: theme.typography.h2,
|
50 |
|
51 |
|
52 | h3: theme.typography.h3,
|
53 |
|
54 |
|
55 | h4: theme.typography.h4,
|
56 |
|
57 |
|
58 | h5: theme.typography.h5,
|
59 |
|
60 |
|
61 | h6: theme.typography.h6,
|
62 |
|
63 |
|
64 | subtitle1: theme.typography.subtitle1,
|
65 |
|
66 |
|
67 | subtitle2: theme.typography.subtitle2,
|
68 |
|
69 |
|
70 | overline: theme.typography.overline,
|
71 |
|
72 |
|
73 | srOnly: {
|
74 | position: 'absolute',
|
75 | height: 1,
|
76 | width: 1,
|
77 | overflow: 'hidden'
|
78 | },
|
79 |
|
80 |
|
81 | alignLeft: {
|
82 | textAlign: 'left'
|
83 | },
|
84 |
|
85 |
|
86 | alignCenter: {
|
87 | textAlign: 'center'
|
88 | },
|
89 |
|
90 |
|
91 | alignRight: {
|
92 | textAlign: 'right'
|
93 | },
|
94 |
|
95 |
|
96 | alignJustify: {
|
97 | textAlign: 'justify'
|
98 | },
|
99 |
|
100 |
|
101 | noWrap: {
|
102 | overflow: 'hidden',
|
103 | textOverflow: 'ellipsis',
|
104 | whiteSpace: 'nowrap'
|
105 | },
|
106 |
|
107 |
|
108 | gutterBottom: {
|
109 | marginBottom: '0.35em'
|
110 | },
|
111 |
|
112 |
|
113 | paragraph: {
|
114 | marginBottom: 16
|
115 | },
|
116 |
|
117 |
|
118 | colorInherit: {
|
119 | color: 'inherit'
|
120 | },
|
121 |
|
122 |
|
123 | colorPrimary: {
|
124 | color: theme.palette.primary.main
|
125 | },
|
126 |
|
127 |
|
128 | colorSecondary: {
|
129 | color: theme.palette.secondary.main
|
130 | },
|
131 |
|
132 |
|
133 | colorTextPrimary: {
|
134 | color: theme.palette.text.primary
|
135 | },
|
136 |
|
137 |
|
138 | colorTextSecondary: {
|
139 | color: theme.palette.text.secondary
|
140 | },
|
141 |
|
142 |
|
143 | colorError: {
|
144 | color: theme.palette.error.main
|
145 | },
|
146 |
|
147 |
|
148 | displayInline: {
|
149 | display: 'inline'
|
150 | },
|
151 |
|
152 |
|
153 | displayBlock: {
|
154 | display: 'block'
|
155 | }
|
156 | };
|
157 | };
|
158 |
|
159 | exports.styles = styles;
|
160 | var defaultVariantMapping = {
|
161 | h1: 'h1',
|
162 | h2: 'h2',
|
163 | h3: 'h3',
|
164 | h4: 'h4',
|
165 | h5: 'h5',
|
166 | h6: 'h6',
|
167 | subtitle1: 'h6',
|
168 | subtitle2: 'h6',
|
169 | body1: 'p',
|
170 | body2: 'p'
|
171 | };
|
172 | var Typography = React.forwardRef(function Typography(props, ref) {
|
173 | var _props$align = props.align,
|
174 | align = _props$align === void 0 ? 'inherit' : _props$align,
|
175 | classes = props.classes,
|
176 | className = props.className,
|
177 | _props$color = props.color,
|
178 | color = _props$color === void 0 ? 'initial' : _props$color,
|
179 | component = props.component,
|
180 | _props$display = props.display,
|
181 | display = _props$display === void 0 ? 'initial' : _props$display,
|
182 | _props$gutterBottom = props.gutterBottom,
|
183 | gutterBottom = _props$gutterBottom === void 0 ? false : _props$gutterBottom,
|
184 | _props$noWrap = props.noWrap,
|
185 | noWrap = _props$noWrap === void 0 ? false : _props$noWrap,
|
186 | _props$paragraph = props.paragraph,
|
187 | paragraph = _props$paragraph === void 0 ? false : _props$paragraph,
|
188 | _props$variant = props.variant,
|
189 | variant = _props$variant === void 0 ? 'body1' : _props$variant,
|
190 | _props$variantMapping = props.variantMapping,
|
191 | variantMapping = _props$variantMapping === void 0 ? defaultVariantMapping : _props$variantMapping,
|
192 | other = (0, _objectWithoutProperties2.default)(props, ["align", "classes", "className", "color", "component", "display", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"]);
|
193 | var Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
|
194 | return React.createElement(Component, (0, _extends2.default)({
|
195 | className: (0, _clsx.default)(classes.root, className, variant !== 'inherit' && classes[variant], color !== 'initial' && classes["color".concat((0, _capitalize.default)(color))], noWrap && classes.noWrap, gutterBottom && classes.gutterBottom, paragraph && classes.paragraph, align !== 'inherit' && classes["align".concat((0, _capitalize.default)(align))], display !== 'initial' && classes["display".concat((0, _capitalize.default)(display))]),
|
196 | ref: ref
|
197 | }, other));
|
198 | });
|
199 | process.env.NODE_ENV !== "production" ? Typography.propTypes = {
|
200 | |
201 |
|
202 |
|
203 | align: _propTypes.default.oneOf(['inherit', 'left', 'center', 'right', 'justify']),
|
204 |
|
205 | |
206 |
|
207 |
|
208 | children: _propTypes.default.node,
|
209 |
|
210 | |
211 |
|
212 |
|
213 |
|
214 | classes: _propTypes.default.object.isRequired,
|
215 |
|
216 | |
217 |
|
218 |
|
219 | className: _propTypes.default.string,
|
220 |
|
221 | |
222 |
|
223 |
|
224 | color: _propTypes.default.oneOf(['initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error']),
|
225 |
|
226 | |
227 |
|
228 |
|
229 |
|
230 |
|
231 | component: _propTypes.default
|
232 |
|
233 | .elementType,
|
234 |
|
235 | |
236 |
|
237 |
|
238 | display: _propTypes.default.oneOf(['initial', 'block', 'inline']),
|
239 |
|
240 | |
241 |
|
242 |
|
243 | gutterBottom: _propTypes.default.bool,
|
244 |
|
245 | |
246 |
|
247 |
|
248 |
|
249 |
|
250 |
|
251 | noWrap: _propTypes.default.bool,
|
252 |
|
253 | |
254 |
|
255 |
|
256 | paragraph: _propTypes.default.bool,
|
257 |
|
258 | |
259 |
|
260 |
|
261 | variant: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit']),
|
262 |
|
263 | |
264 |
|
265 |
|
266 |
|
267 |
|
268 |
|
269 | variantMapping: _propTypes.default.object
|
270 | } : void 0;
|
271 |
|
272 | var _default = (0, _withStyles.default)(styles, {
|
273 | name: 'MuiTypography'
|
274 | })(Typography);
|
275 |
|
276 | exports.default = _default; |
\ | No newline at end of file |