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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
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 _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/utils/AdaptiveHeading/AdaptiveHeading.js";
var appearanceToComponent = {
  [_constants.APPEARANCES.H1]: _Heading.default,
  [_constants.APPEARANCES.H2]: _Heading.default,
  [_constants.APPEARANCES.H3]: _Heading.default,
  [_constants.APPEARANCES.H4]: _Heading.default,
  [_constants.APPEARANCES.H5]: _Heading.default,
  [_constants.APPEARANCES.H6]: _Heading.default,
  [_constants.APPEARANCES.tiny]: _Text.default
};
var appearanceToSizingProps = {
  [_constants.APPEARANCES.H1]: {
    size: 'extraLarge'
  },
  [_constants.APPEARANCES.H2]: {
    size: 'large'
  },
  [_constants.APPEARANCES.H3]: {
    size: 'medium'
  },
  [_constants.APPEARANCES.H4]: {
    size: 'small'
  },
  [_constants.APPEARANCES.H5]: {
    size: 'tiny'
  },
  [_constants.APPEARANCES.H6]: {
    size: 'extraTiny'
  },
  [_constants.APPEARANCES.tiny]: {
    size: 'medium',
    weight: 'bold'
  }
};

/** AdaptiveHeading */
class AdaptiveHeading extends _react.default.PureComponent {
  render() {
    var {
      dataHook,
      text,
      appearance = 'H1',
      light,
      emptyLast,
      textInShort
    } = this.props;
    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
          }),
          dataHook: dataHook,
          light: light,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 68,
            columnNumber: 11
          }
        }), /*#__PURE__*/_react.default.createElement("span", {
          className: _AdaptiveHeadingSt.classes.headerShort,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 74,
            columnNumber: 13
          }
        }, "\xA0"), /*#__PURE__*/_react.default.createElement("span", {
          "data-hook": _dataHooks.default.text,
          className: _AdaptiveHeadingSt.classes.headerFull,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 75,
            columnNumber: 13
          }
        }, text));
      }
      return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, sizingProps, {
        dataHook: dataHook,
        light: light,
        ellipsis: true,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 83,
          columnNumber: 9
        }
      }), /*#__PURE__*/_react.default.createElement("span", {
        "data-hook": _dataHooks.default.text,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 84,
          columnNumber: 11
        }
      }, text));
    }
    if (emptyLast) {
      return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, sizingProps, {
        className: (0, _AdaptiveHeadingSt.st)(_AdaptiveHeadingSt.classes.headerWrapper, {
          appearance
        }),
        dataHook: dataHook,
        light: light,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 91,
          columnNumber: 9
        }
      }), /*#__PURE__*/_react.default.createElement("div", {
        className: _AdaptiveHeadingSt.classes.headerShort,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 97,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        "aria-hidden": "true",
        className: (0, _AdaptiveHeadingSt.st)(_AdaptiveHeadingSt.classes.headerWrapper, {
          appearance
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 98,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react.default.createElement("span", {
        className: _AdaptiveHeadingSt.classes.headerShort,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 102,
          columnNumber: 15
        }
      }, "\xA0"), /*#__PURE__*/_react.default.createElement("span", {
        className: _AdaptiveHeadingSt.classes.headerFull,
        "data-hook": _dataHooks.default.textInShort,
        title: text,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 103,
          columnNumber: 15
        }
      }, textInShort))), /*#__PURE__*/_react.default.createElement("span", {
        "data-hook": _dataHooks.default.text,
        className: _AdaptiveHeadingSt.classes.headerFull,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 112,
          columnNumber: 11
        }
      }, text));
    }
    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, sizingProps, {
      className: (0, _AdaptiveHeadingSt.st)(_AdaptiveHeadingSt.classes.headerWrapper, {
        appearance
      }),
      dataHook: dataHook,
      light: light,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 120,
        columnNumber: 7
      }
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: _AdaptiveHeadingSt.classes.headerShort,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 126,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement("span", {
      "data-hook": _dataHooks.default.textInShort,
      "aria-hidden": "true",
      title: text,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 127,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
      content: text,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 132,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _AdaptiveHeadingSt.classes.ellipsis,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 133,
        columnNumber: 15
      }
    }, textInShort)))), /*#__PURE__*/_react.default.createElement("span", {
      "data-hook": _dataHooks.default.text,
      className: _AdaptiveHeadingSt.classes.headerFull,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 137,
        columnNumber: 9
      }
    }, text));
  }
}
AdaptiveHeading.displayName = 'AdaptiveHeading';
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 = exports.default = AdaptiveHeading;
//# sourceMappingURL=AdaptiveHeading.js.map