zmp-react/esm/zalo-ui-kits/text.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
import { classNames } from '../shared/utils';
import { FONT_SIZE_LINE_HEIGHT_MAP } from '../../common/constants';
/* dts-props
  className?: string;
  style?: React.CSSProperties;
  size?: 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'normal' | 'large' | 'xlarge';
  bold?: boolean;
  fontSize?: number;
  noSpace?: boolean
  ref?: React.MutableRefObject<{el: HTMLElement | null;}>;
  CHILDREN_PROP
*/

var Text = /*#__PURE__*/forwardRef(function (props, ref) {
  var elRef = useRef(null);
  var size = props.size,
      className = props.className,
      style = props.style,
      bold = props.bold,
      noSpacing = props.noSpacing,
      fontSize = props.fontSize;
  var classes = classNames(className, 'typo-body', {
    'typo-body-bold': bold,
    'typo-body-xxxsmall': size === 'xxxsmall',
    'typo-body-xxsmall': size === 'xxsmall',
    'typo-body-xsmall': size === 'xsmall',
    'typo-body-small': size === 'small',
    'typo-body-normal': !size || size === 'normal',
    'typo-body-large': size === 'large',
    'typo-body-xlarge': size === 'xlarge',
    'typo-body-no-spacing': noSpacing
  });
  var styles = {};

  if (!size && fontSize) {
    var lineHeight = FONT_SIZE_LINE_HEIGHT_MAP[fontSize];

    if (lineHeight) {
      styles.fontSize = fontSize + "px";
      styles.lineHeight = lineHeight + "px";
    }
  }

  useImperativeHandle(ref, function () {
    return {
      el: ref.current
    };
  });
  return /*#__PURE__*/React.createElement("p", {
    ref: elRef,
    className: classes,
    style: _extends({}, styles, style)
  }, props.children);
});
Text.displayName = 'zmp-text';
export default Text;