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

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Text.st.css';

const getStyleDataAttributes = styleAttributes =>
  Object.keys(styleAttributes).reduce((acc, styleKey) => {
    acc[`data-${styleKey}`] = styleAttributes[styleKey];
    return acc;
  }, {});

const RawText = React.forwardRef(
  (
    {
      size,
      secondary,
      skin,
      light,
      weight,
      tagName,
      children,
      ellipsis,
      showDelay,
      hideDelay,
      appendTo,
      flip,
      fixed,
      placement,
      timeout,
      maxWidth,
      zIndex,
      showTooltip,
      listStyle,
      ...rest
    },
    ref,
  ) => {
    /* eslint-disable no-unused-vars */
    const { dataHook, className, ...textProps } = rest;

    const styleAttributes = {
      size,
      secondary,
      skin,
      light,
      weight,
      'list-style': listStyle,
    };
    const styleDataAttributes = getStyleDataAttributes(styleAttributes);

    return React.createElement(
      tagName,
      {
        ref,
        ...textProps,
        'data-hook': dataHook,
        className: st(classes.root, styleAttributes, className),
        ...styleDataAttributes,
      },
      children,
    );
  },
);

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']),
};

RawText.defaultProps = {
  size: 'medium',
  secondary: false,
  skin: 'standard',
  light: false,
  weight: 'thin',
  tagName: 'span',
  listStyle: 'checkmark',
};

export default RawText;