wix-style-react/dist/es/src/utils/AdaptiveHeading/AdaptiveHeading.js

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

var _appearanceToComponen, _appearanceToSizingPr;

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import React from 'react';
import PropTypes from 'prop-types';
import Heading from '../../Heading';
import Text from '../../Text';
import Tooltip from '../../Tooltip';
import DataHooks from './dataHooks';
import { st, classes } from './AdaptiveHeading.st.css';
import { APPEARANCES } from './constants';
var appearanceToComponent = (_appearanceToComponen = {}, _defineProperty(_appearanceToComponen, APPEARANCES.H1, Heading), _defineProperty(_appearanceToComponen, APPEARANCES.H2, Heading), _defineProperty(_appearanceToComponen, APPEARANCES.H3, Heading), _defineProperty(_appearanceToComponen, APPEARANCES.H4, Heading), _defineProperty(_appearanceToComponen, APPEARANCES.H5, Heading), _defineProperty(_appearanceToComponen, APPEARANCES.H6, Heading), _defineProperty(_appearanceToComponen, APPEARANCES.tiny, Text), _appearanceToComponen);
var appearanceToSizingProps = (_appearanceToSizingPr = {}, _defineProperty(_appearanceToSizingPr, APPEARANCES.H1, {
  appearance: 'H1'
}), _defineProperty(_appearanceToSizingPr, APPEARANCES.H2, {
  appearance: 'H2'
}), _defineProperty(_appearanceToSizingPr, APPEARANCES.H3, {
  appearance: 'H3'
}), _defineProperty(_appearanceToSizingPr, APPEARANCES.H4, {
  appearance: 'H4'
}), _defineProperty(_appearanceToSizingPr, APPEARANCES.H5, {
  appearance: 'H5'
}), _defineProperty(_appearanceToSizingPr, APPEARANCES.H6, {
  appearance: 'H6'
}), _defineProperty(_appearanceToSizingPr, APPEARANCES.tiny, {
  size: 'medium',
  weight: 'bold'
}), _appearanceToSizingPr);
/** AdaptiveHeading */

var AdaptiveHeading = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(AdaptiveHeading, _React$PureComponent);

  var _super = _createSuper(AdaptiveHeading);

  function AdaptiveHeading() {
    _classCallCheck(this, AdaptiveHeading);

    return _super.apply(this, arguments);
  }

  _createClass(AdaptiveHeading, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          dataHook = _this$props.dataHook,
          text = _this$props.text,
          _this$props$appearanc = _this$props.appearance,
          appearance = _this$props$appearanc === void 0 ? 'H1' : _this$props$appearanc,
          light = _this$props.light,
          emptyLast = _this$props.emptyLast,
          textInShort = _this$props.textInShort;
      var Component = appearanceToComponent[appearance];
      var sizingProps = appearanceToSizingProps[appearance];

      if (!textInShort) {
        if (emptyLast) {
          return /*#__PURE__*/React.createElement(Component, _extends({}, sizingProps, {
            className: st(classes.headerWrapper, {
              appearance: appearance
            }),
            dataHook: dataHook,
            light: light
          }), /*#__PURE__*/React.createElement("span", {
            className: classes.headerShort
          }, "\xA0"), /*#__PURE__*/React.createElement("span", {
            "data-hook": DataHooks.text,
            className: classes.headerFull
          }, text));
        }

        return /*#__PURE__*/React.createElement(Component, _extends({}, sizingProps, {
          dataHook: dataHook,
          light: light,
          ellipsis: true
        }), /*#__PURE__*/React.createElement("span", {
          "data-hook": DataHooks.text
        }, text));
      }

      if (emptyLast) {
        return /*#__PURE__*/React.createElement(Component, {
          className: st(classes.headerWrapper, {
            appearance: appearance
          }),
          dataHook: dataHook,
          appearance: appearance,
          light: light
        }, /*#__PURE__*/React.createElement("div", {
          className: classes.headerShort
        }, /*#__PURE__*/React.createElement("div", {
          "aria-hidden": "true",
          className: st(classes.headerWrapper, {
            appearance: appearance
          })
        }, /*#__PURE__*/React.createElement("span", {
          className: classes.headerShort
        }, "\xA0"), /*#__PURE__*/React.createElement("span", {
          className: classes.headerFull,
          "data-hook": DataHooks.textInShort,
          title: text
        }, textInShort))), /*#__PURE__*/React.createElement("span", {
          "data-hook": DataHooks.text,
          className: classes.headerFull
        }, text));
      }

      return /*#__PURE__*/React.createElement(Component, _extends({}, sizingProps, {
        className: st(classes.headerWrapper, {
          appearance: appearance
        }),
        dataHook: dataHook,
        light: light
      }), /*#__PURE__*/React.createElement("div", {
        className: classes.headerShort
      }, /*#__PURE__*/React.createElement("span", {
        "data-hook": DataHooks.textInShort,
        "aria-hidden": "true",
        title: text
      }, /*#__PURE__*/React.createElement(Tooltip, {
        content: text
      }, /*#__PURE__*/React.createElement("div", {
        className: classes.ellipsis
      }, textInShort)))), /*#__PURE__*/React.createElement("span", {
        "data-hook": DataHooks.text,
        className: classes.headerFull
      }, text));
    }
  }]);

  return AdaptiveHeading;
}(React.PureComponent);

_defineProperty(AdaptiveHeading, "displayName", 'AdaptiveHeading');

_defineProperty(AdaptiveHeading, "propTypes", {
  dataHook: PropTypes.string,

  /** Usual (long) version of header*/
  text: PropTypes.string.isRequired,

  /** Short version text */
  textInShort: PropTypes.string,

  /** H1-H6 to create a Heading component, or "tiny" for a bold Text component  */
  appearance: PropTypes.string,

  /** Use light theme */
  light: PropTypes.bool,

  /** Render empty content when there is not enough space for short text */
  emptyLast: PropTypes.bool
});

export default AdaptiveHeading;