@ionic-internal/ionic-ds
Version:
Ionic Design System
60 lines (57 loc) • 3.28 kB
JavaScript
import { __rest, __assign, __makeTemplateObject } from '../../../_virtual/_tslib.js';
import React, { forwardRef, useContext } from 'react';
import clsx from '../../../node_modules/clsx/dist/clsx.m.js';
import styled, { ThemeContext, ThemeProvider } from 'styled-components';
import headingStyleMap from './headingStyleMap.js';
import headingStyleMap$1 from './headingStyleMap--editorial.js';
var Heading = forwardRef(function (_a, ref) {
var _b;
var _c = _a.level, level = _c === void 0 ? 3 : _c, _d = _a.poster, poster = _d === void 0 ? false : _d, color = _a.color, props = __rest(_a, ["level", "poster", "color"]);
var themeContext = useContext(ThemeContext) || {};
var tag = props.as ? props.as : poster ? 'h1' : "h" + level;
var theme = {
heading: __assign({ base: headingStyleMap,
editorial: headingStyleMap$1 }, (themeContext.heading ? themeContext.heading : {})),
};
return (React.createElement(ThemeProvider, { theme: theme },
React.createElement(HeadingStyles, __assign({ "$as": tag }, props, { ref: ref, "$level": level, "$poster": poster, "$color": color, className: clsx((_b = {},
_b[props.className] = Boolean(props.className),
_b['ds-heading'] = true,
_b["ds-heading-" + level] = !poster,
_b["ds-poster-" + level] = poster,
_b)) }))));
});
var HeadingStyles = styled.h1(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ",
"\n"])), function (_a) {
var $level = _a.$level, $poster = _a.$poster, $color = _a.$color, theme = _a.theme, themeName = _a.theme.name;
function getStyle(key) {
var _a, _b, _c, _d, _e, _f, _g;
var baseStyle = theme.heading.base[$level][key];
var posterStyle = (_a = theme.heading.base[$level].poster) === null || _a === void 0 ? void 0 : _a[key];
if (themeName) {
return $poster
? ((_d = (_c = (_b = theme.heading[themeName]) === null || _b === void 0 ? void 0 : _b[$level]) === null || _c === void 0 ? void 0 : _c.poster) === null || _d === void 0 ? void 0 : _d[key]) ||
posterStyle ||
baseStyle
: ((_f = (_e = theme.heading[themeName]) === null || _e === void 0 ? void 0 : _e[$level]) === null || _f === void 0 ? void 0 : _f[key]) || baseStyle;
}
else {
return $poster
? ((_g = theme.heading.base[$level].poster) === null || _g === void 0 ? void 0 : _g[key]) || baseStyle
: baseStyle;
}
}
return [
"margin-block-end: " + getStyle('marginBlockEnd') + ";",
"font-family: " + getStyle('font') + ";",
"font-size: " + getStyle('size') + ";",
"line-height: " + getStyle('lineHeight') + ";",
"letter-spacing: " + getStyle('letterSpacing') + ";",
"font-weight: " + getStyle('fontWeight') + ";",
"color: " + ($color ? $color : getStyle('color')) + ";",
"text-transform: " + (getStyle('transform') || 'none') + ";",
"font-feature-settings: " + (getStyle('fontFeatureSettings') || 'normal') + ";",
];
});
var templateObject_1;
export default Heading;