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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Heading = _interopRequireDefault(require("../../Heading"));

var _Text = _interopRequireDefault(require("../../Text"));

var _Tooltip = _interopRequireDefault(require("../../Tooltip"));

var _dataHooks = _interopRequireDefault(require("./dataHooks"));

var _AdaptiveHeadingSt = require("./AdaptiveHeading.st.css");

var _constants = require("./constants");

var _appearanceToComponen, _appearanceToSizingPr;

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }

var appearanceToComponent = (_appearanceToComponen = {}, (0, _defineProperty2["default"])(_appearanceToComponen, _constants.APPEARANCES.H1, _Heading["default"]), (0, _defineProperty2["default"])(_appearanceToComponen, _constants.APPEARANCES.H2, _Heading["default"]), (0, _defineProperty2["default"])(_appearanceToComponen, _constants.APPEARANCES.H3, _Heading["default"]), (0, _defineProperty2["default"])(_appearanceToComponen, _constants.APPEARANCES.H4, _Heading["default"]), (0, _defineProperty2["default"])(_appearanceToComponen, _constants.APPEARANCES.H5, _Heading["default"]), (0, _defineProperty2["default"])(_appearanceToComponen, _constants.APPEARANCES.H6, _Heading["default"]), (0, _defineProperty2["default"])(_appearanceToComponen, _constants.APPEARANCES.tiny, _Text["default"]), _appearanceToComponen);
var appearanceToSizingProps = (_appearanceToSizingPr = {}, (0, _defineProperty2["default"])(_appearanceToSizingPr, _constants.APPEARANCES.H1, {
  appearance: 'H1'
}), (0, _defineProperty2["default"])(_appearanceToSizingPr, _constants.APPEARANCES.H2, {
  appearance: 'H2'
}), (0, _defineProperty2["default"])(_appearanceToSizingPr, _constants.APPEARANCES.H3, {
  appearance: 'H3'
}), (0, _defineProperty2["default"])(_appearanceToSizingPr, _constants.APPEARANCES.H4, {
  appearance: 'H4'
}), (0, _defineProperty2["default"])(_appearanceToSizingPr, _constants.APPEARANCES.H5, {
  appearance: 'H5'
}), (0, _defineProperty2["default"])(_appearanceToSizingPr, _constants.APPEARANCES.H6, {
  appearance: 'H6'
}), (0, _defineProperty2["default"])(_appearanceToSizingPr, _constants.APPEARANCES.tiny, {
  size: 'medium',
  weight: 'bold'
}), _appearanceToSizingPr);
/** AdaptiveHeading */

var AdaptiveHeading = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inherits2["default"])(AdaptiveHeading, _React$PureComponent);

  var _super = _createSuper(AdaptiveHeading);

  function AdaptiveHeading() {
    (0, _classCallCheck2["default"])(this, AdaptiveHeading);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(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["default"].createElement(Component, (0, _extends2["default"])({}, sizingProps, {
            className: (0, _AdaptiveHeadingSt.st)(_AdaptiveHeadingSt.classes.headerWrapper, {
              appearance: appearance
            }),
            dataHook: dataHook,
            light: light
          }), /*#__PURE__*/_react["default"].createElement("span", {
            className: _AdaptiveHeadingSt.classes.headerShort
          }, "\xA0"), /*#__PURE__*/_react["default"].createElement("span", {
            "data-hook": _dataHooks["default"].text,
            className: _AdaptiveHeadingSt.classes.headerFull
          }, text));
        }

        return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, sizingProps, {
          dataHook: dataHook,
          light: light,
          ellipsis: true
        }), /*#__PURE__*/_react["default"].createElement("span", {
          "data-hook": _dataHooks["default"].text
        }, text));
      }

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

      return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, sizingProps, {
        className: (0, _AdaptiveHeadingSt.st)(_AdaptiveHeadingSt.classes.headerWrapper, {
          appearance: appearance
        }),
        dataHook: dataHook,
        light: light
      }), /*#__PURE__*/_react["default"].createElement("div", {
        className: _AdaptiveHeadingSt.classes.headerShort
      }, /*#__PURE__*/_react["default"].createElement("span", {
        "data-hook": _dataHooks["default"].textInShort,
        "aria-hidden": "true",
        title: text
      }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
        content: text
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: _AdaptiveHeadingSt.classes.ellipsis
      }, textInShort)))), /*#__PURE__*/_react["default"].createElement("span", {
        "data-hook": _dataHooks["default"].text,
        className: _AdaptiveHeadingSt.classes.headerFull
      }, text));
    }
  }]);
  return AdaptiveHeading;
}(_react["default"].PureComponent);

(0, _defineProperty2["default"])(AdaptiveHeading, "displayName", 'AdaptiveHeading');
(0, _defineProperty2["default"])(AdaptiveHeading, "propTypes", {
  dataHook: _propTypes["default"].string,

  /** Usual (long) version of header*/
  text: _propTypes["default"].string.isRequired,

  /** Short version text */
  textInShort: _propTypes["default"].string,

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

  /** Use light theme */
  light: _propTypes["default"].bool,

  /** Render empty content when there is not enough space for short text */
  emptyLast: _propTypes["default"].bool
});
var _default = AdaptiveHeading;
exports["default"] = _default;