wix-style-react
Version:
wix-style-react
73 lines • 3.91 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Heading from '../../Heading';
import Text from '../../Text';
import Tooltip from '../../Tooltip';
import DataHooks from './dataHooks';
import { st, classes } from './AdaptiveHeading.st.css';
import { APPEARANCES } from './constants';
const appearanceToComponent = {
[APPEARANCES.H1]: Heading,
[APPEARANCES.H2]: Heading,
[APPEARANCES.H3]: Heading,
[APPEARANCES.H4]: Heading,
[APPEARANCES.H5]: Heading,
[APPEARANCES.H6]: Heading,
[APPEARANCES.tiny]: Text,
};
const appearanceToSizingProps = {
[APPEARANCES.H1]: { size: 'extraLarge' },
[APPEARANCES.H2]: { size: 'large' },
[APPEARANCES.H3]: { size: 'medium' },
[APPEARANCES.H4]: { size: 'small' },
[APPEARANCES.H5]: { size: 'tiny' },
[APPEARANCES.H6]: { size: 'extraTiny' },
[APPEARANCES.tiny]: { size: 'medium', weight: 'bold' },
};
/** AdaptiveHeading */
class AdaptiveHeading extends React.PureComponent {
render() {
const { dataHook, text, appearance = 'H1', light, emptyLast, textInShort, } = this.props;
const Component = appearanceToComponent[appearance];
const sizingProps = appearanceToSizingProps[appearance];
if (!textInShort) {
if (emptyLast) {
return (React.createElement(Component, { ...sizingProps, className: st(classes.headerWrapper, { appearance }), dataHook: dataHook, light: light },
React.createElement("span", { className: classes.headerShort }, "\u00A0"),
React.createElement("span", { "data-hook": DataHooks.text, className: classes.headerFull }, text)));
}
return (React.createElement(Component, { ...sizingProps, dataHook: dataHook, light: light, ellipsis: true },
React.createElement("span", { "data-hook": DataHooks.text }, text)));
}
if (emptyLast) {
return (React.createElement(Component, { ...sizingProps, className: st(classes.headerWrapper, { appearance }), dataHook: dataHook, light: light },
React.createElement("div", { className: classes.headerShort },
React.createElement("div", { "aria-hidden": "true", className: st(classes.headerWrapper, { appearance }) },
React.createElement("span", { className: classes.headerShort }, "\u00A0"),
React.createElement("span", { className: classes.headerFull, "data-hook": DataHooks.textInShort, title: text }, textInShort))),
React.createElement("span", { "data-hook": DataHooks.text, className: classes.headerFull }, text)));
}
return (React.createElement(Component, { ...sizingProps, className: st(classes.headerWrapper, { appearance }), dataHook: dataHook, light: light },
React.createElement("div", { className: classes.headerShort },
React.createElement("span", { "data-hook": DataHooks.textInShort, "aria-hidden": "true", title: text },
React.createElement(Tooltip, { content: text },
React.createElement("div", { className: classes.ellipsis }, textInShort)))),
React.createElement("span", { "data-hook": DataHooks.text, className: classes.headerFull }, text)));
}
}
AdaptiveHeading.displayName = 'AdaptiveHeading';
AdaptiveHeading.propTypes = {
dataHook: PropTypes.string,
/** Usual (long) version of header*/
text: PropTypes.string.isRequired,
/** Short version text */
textInShort: PropTypes.string,
/** H1-H6 to create a Heading component, or "tiny" for a bold Text component */
appearance: PropTypes.string,
/** Use light theme */
light: PropTypes.bool,
/** Render empty content when there is not enough space for short text */
emptyLast: PropTypes.bool,
};
export default AdaptiveHeading;
//# sourceMappingURL=AdaptiveHeading.js.map