wix-style-react/dist/es/src/Text/RawText.js

wix-style-react

import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Text.st.css';
import { WixStyleReactMaskingContext } from '../WixStyleReactMaskingProvider/context';
const getStyleDataAttributes = styleAttributes => Object.keys(styleAttributes).reduce((acc, styleKey) => {
    acc[`data-${styleKey}`] = styleAttributes[styleKey];
    return acc;
}, {});
export const RawTextDefaultProps = {
    size: 'medium',
    secondary: false,
    skin: 'standard',
    light: false,
    weight: 'thin',
    tagName: 'span',
    listStyle: 'checkmark',
    widows: false,
};
const RawText = React.forwardRef(({ size = RawTextDefaultProps.size, secondary = RawTextDefaultProps.secondary, skin = RawTextDefaultProps.skin, light = RawTextDefaultProps.light, weight = RawTextDefaultProps.weight, tagName = RawTextDefaultProps.tagName, children, ellipsis, showDelay, hideDelay, appendTo, flip, fixed, placement, timeout, maxWidth, zIndex, showTooltip, listStyle = RawTextDefaultProps.listStyle, id, widows = RawTextDefaultProps.widows, ...rest }, ref) => {
    /* eslint-disable no-unused-vars */
    const { dataHook, className, ...textProps } = rest;
    const styleAttributes = {
        size,
        secondary,
        skin,
        light,
        weight,
        widows,
        'list-style': listStyle,
    };
    const styleDataAttributes = getStyleDataAttributes(styleAttributes);
    const childrenWidows = useMemo(() => {
        if (!widows || typeof children !== 'string' || !children) {
            return children;
        }
        const textArray = children.split(' ');
        if (textArray.length <= 2)
            return children;
        const arrLength = textArray.length;
        const newChildrenArr = textArray.slice(0, arrLength - 2);
        newChildrenArr.push(textArray[arrLength - 2] + '\u00A0' + textArray[arrLength - 1]);
        return newChildrenArr.join(' ');
    }, [children, widows]);
    return (React.createElement(WixStyleReactMaskingContext.Consumer, null, ({ maskingClassNames }) => React.createElement(tagName, {
        ref,
        id,
        ...textProps,
        'data-hook': dataHook,
        'data-mask': !!maskingClassNames,
        className: st(classes.root, styleAttributes, className, maskingClassNames),
        ...styleDataAttributes,
    }, childrenWidows)));
});
RawText.displayName = 'Text';
RawText.propTypes = {
    /** Applied as data-hook HTML attribute that can be used in the tests */
    dataHook: PropTypes.string,
    /** class to be applied to the root element */
    className: PropTypes.string,
    /** tag name that will be rendered */
    tagName: PropTypes.string,
    /** Styling to be applied to the root element */
    style: PropTypes.object,
    /** font size of the text */
    size: PropTypes.oneOf(['tiny', 'small', 'medium']),
    /** any nodes to be rendered (usually text nodes) */
    children: PropTypes.any,
    /** is the text type is secondary. Affects the font color */
    secondary: PropTypes.bool,
    /** skin color of the text */
    skin: PropTypes.oneOf([
        'standard',
        'success',
        'error',
        'premium',
        'disabled',
        'primary',
    ]),
    /** make the text color lighter */
    light: PropTypes.bool,
    /** font weight of the text */
    weight: PropTypes.oneOf(['thin', 'normal', 'bold']),
    /** Applied as id HTML attribute */
    id: PropTypes.string,
    /** if true it will support widows in the text */
    widows: PropTypes.bool,
};
export default RawText;
//# sourceMappingURL=RawText.js.map