wix-style-react
Version:
wix-style-react
99 lines • 4.52 kB
JavaScript
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import Ellipsis, { extractEllipsisProps } from '../common/Ellipsis';
import { st, classes } from './Heading.st.css';
import { EllipsisCommonProps } from '../common/PropTypes/EllipsisCommon';
import deprecationLog from '../utils/deprecationLog';
import { WixStyleReactMaskingContext } from '../WixStyleReactMaskingProvider/context';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
import { ZIndex } from '../ZIndex';
export const APPEARANCES = {
H1: 'H1',
H2: 'H2',
H3: 'H3',
H4: 'H4',
H5: 'H5',
H6: 'H6',
};
export const SIZE = {
EXTRA_LARGE: 'extraLarge',
LARGE: 'large',
MEDIUM: 'medium',
SMALL: 'small',
TINY: 'tiny',
EXTRA_TINY: 'extraTiny',
};
const sizeToAppearance = {
[SIZE.EXTRA_LARGE]: APPEARANCES.H1,
[SIZE.LARGE]: APPEARANCES.H2,
[SIZE.MEDIUM]: APPEARANCES.H3,
[SIZE.SMALL]: APPEARANCES.H4,
[SIZE.TINY]: APPEARANCES.H5,
[SIZE.EXTRA_TINY]: APPEARANCES.H6,
};
const Heading = ({ light = false, ellipsis = false, appendTo = Ellipsis.defaultProps.appendTo, flip = Ellipsis.defaultProps.flip, fixed = Ellipsis.defaultProps.fixed, placement = Ellipsis.defaultProps.placement, zIndex = Ellipsis.defaultProps.zIndex, enterDelay = Ellipsis.defaultProps.enterDelay, exitDelay = Ellipsis.defaultProps.exitDelay, showTooltip = Ellipsis.defaultProps.showTooltip, ...propsWithNoDefaults }) => {
const props = {
...Ellipsis.defaultProps,
light,
ellipsis,
appendTo,
flip,
fixed,
placement,
zIndex,
enterDelay,
exitDelay,
showTooltip,
...propsWithNoDefaults,
};
const { ellipsisProps, componentProps } = extractEllipsisProps(props);
const { appearance, as, children, dataHook, size, id, light: _light, ...headingProps } = componentProps;
useEffect(() => {
if (appearance) {
deprecationLog('<Heading/> - prop "appearance" is deprecated and will be removed in next major release, please use "size" property instead.');
}
}, [appearance]);
const headingType = sizeToAppearance[size] || appearance || sizeToAppearance[SIZE.EXTRA_LARGE];
return (React.createElement(WixStyleReactMaskingContext.Consumer, null, ({ maskingClassNames }) => (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement(Ellipsis, { ...ellipsisProps, wrapperClassName: st(classes.root, {
appearance: headingType,
size: newColorsBranding ? size : undefined,
}), render: ({ ref, ellipsisClasses, ellipsisInlineStyle }) => React.createElement(as || headingType.toLowerCase(), {
...headingProps,
id,
ref,
style: ellipsisInlineStyle,
'data-hook': dataHook,
className: st(classes.root, { light, appearance: headingType, newColorsBranding }, ellipsisClasses(props.className), maskingClassNames),
'data-appearance': appearance,
'data-size': size,
'data-light': light,
'data-mask': !!maskingClassNames,
'data-id': id,
}, children) }))))));
};
Heading.displayName = 'Heading';
Heading.propTypes = {
...EllipsisCommonProps,
/** When true, text that is longer than it's container will be truncated to a single line followed by ellipsis. Otherwise the text will break into several lines. */
ellipsis: PropTypes.bool,
/** maxLines truncates text at a specific number of lines. */
maxLines: PropTypes.number,
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: PropTypes.string,
/** Renders any kind of content within a heading. Usually it’s a text string. */
children: PropTypes.any,
/** Invert heading style so it can be used on a dark or image background. */
light: PropTypes.bool,
/** this prop is deprecated and should not be used
* @deprecated
*/
appearance: PropTypes.oneOf(Object.keys(APPEARANCES)),
/** Renders the heading as any other given HTML tag */
as: PropTypes.string,
/** Controls the heading's visual size and HTML tag appearance. HTML tag can be overridden with ‘as’ prop. */
size: PropTypes.oneOf(Object.values(SIZE)),
/** Identifies the element that labels or describes the text element */
id: PropTypes.string,
};
export default Heading;
//# sourceMappingURL=Heading.js.map