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

Build full featured iOS & Android apps using ZMP & React

import React, { forwardRef, useRef, useImperativeHandle } from 'react';
import { classNames } from '../shared/utils';
/* dts-props
  className?: string;
  style?: React.CSSProperties;
  size?: 'xsmall' | 'small' | 'normal' | 'large' | 'xlarge';
  textAlign?: 'center' | 'left' | 'right';
  noSpace?: boolean
  bold?: boolean
  ref?: React.MutableRefObject<{el: HTMLElement | null;}>;
  CHILDREN_PROP
*/

var Title = /*#__PURE__*/forwardRef(function (props, ref) {
  var elRef = useRef(null);
  var size = props.size,
      className = props.className,
      style = props.style,
      bold = props.bold,
      textAlign = props.textAlign,
      noSpacing = props.noSpacing;
  useImperativeHandle(ref, function () {
    return {
      el: ref.current
    };
  });
  var classes = classNames(className, 'typo-heading', {
    'typo-heading-bold': bold,
    'typo-heading-xsmall': size === 'xsmall',
    'typo-heading-small': size === 'small',
    'typo-heading-normal': !size || size === 'normal',
    'typo-heading-large': size === 'large',
    'typo-heading-xlarge': size === 'xlarge',
    'typo-heading-center': textAlign === 'center',
    'typo-heading-left': textAlign === 'left',
    'typo-heading-right': textAlign === 'right',
    'typo-heading-no-spacing': noSpacing
  });
  return /*#__PURE__*/React.createElement("div", {
    ref: elRef,
    className: classes,
    style: style
  }, props.children);
});
Title.displayName = 'zmp-title-heading';
export default Title;