UNPKG

@wix/design-system

Version:

@wix/design-system

235 lines (233 loc) 10.1 kB
"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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn")); var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf")); var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _react = _interopRequireDefault(require("react")); 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.js"); var _constants = require("./constants"); var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/common/AdaptiveHeading/AdaptiveHeading.jsx"; function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); } function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } var appearanceToComponent = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _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 = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _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 */ var AdaptiveHeading = /*#__PURE__*/function (_React$PureComponent) { function AdaptiveHeading() { (0, _classCallCheck2["default"])(this, AdaptiveHeading); return _callSuper(this, AdaptiveHeading, arguments); } (0, _inherits2["default"])(AdaptiveHeading, _React$PureComponent); return (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, __self: this, __source: { fileName: _jsxFileName, lineNumber: 50, columnNumber: 11 } }), /*#__PURE__*/_react["default"].createElement("span", { className: _AdaptiveHeadingSt.classes.headerShort, __self: this, __source: { fileName: _jsxFileName, lineNumber: 56, columnNumber: 13 } }, "\xA0"), /*#__PURE__*/_react["default"].createElement("span", { "data-hook": _dataHooks["default"].text, className: _AdaptiveHeadingSt.classes.headerFull, __self: this, __source: { fileName: _jsxFileName, lineNumber: 57, 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: 65, columnNumber: 9 } }), /*#__PURE__*/_react["default"].createElement("span", { "data-hook": _dataHooks["default"].text, __self: this, __source: { fileName: _jsxFileName, lineNumber: 66, columnNumber: 11 } }, text)); } 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, __self: this, __source: { fileName: _jsxFileName, lineNumber: 73, columnNumber: 9 } }), /*#__PURE__*/_react["default"].createElement("div", { className: _AdaptiveHeadingSt.classes.headerShort, __self: this, __source: { fileName: _jsxFileName, lineNumber: 79, columnNumber: 11 } }, /*#__PURE__*/_react["default"].createElement("div", { "aria-hidden": "true", className: (0, _AdaptiveHeadingSt.st)(_AdaptiveHeadingSt.classes.headerWrapper, { appearance: appearance }), __self: this, __source: { fileName: _jsxFileName, lineNumber: 80, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement("span", { className: _AdaptiveHeadingSt.classes.headerShort, __self: this, __source: { fileName: _jsxFileName, lineNumber: 84, 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: 85, columnNumber: 15 } }, textInShort))), /*#__PURE__*/_react["default"].createElement("span", { "data-hook": _dataHooks["default"].text, className: _AdaptiveHeadingSt.classes.headerFull, __self: this, __source: { fileName: _jsxFileName, lineNumber: 94, columnNumber: 11 } }, text)); } return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, sizingProps, { className: (0, _AdaptiveHeadingSt.st)(_AdaptiveHeadingSt.classes.headerWrapper, { appearance: appearance }), dataHook: dataHook, light: light, __self: this, __source: { fileName: _jsxFileName, lineNumber: 102, columnNumber: 7 } }), /*#__PURE__*/_react["default"].createElement("div", { className: _AdaptiveHeadingSt.classes.headerShort, __self: this, __source: { fileName: _jsxFileName, lineNumber: 108, columnNumber: 9 } }, /*#__PURE__*/_react["default"].createElement("span", { "data-hook": _dataHooks["default"].textInShort, "aria-hidden": "true", title: text, __self: this, __source: { fileName: _jsxFileName, lineNumber: 109, columnNumber: 11 } }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], { content: text, __self: this, __source: { fileName: _jsxFileName, lineNumber: 114, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement("div", { className: _AdaptiveHeadingSt.classes.ellipsis, __self: this, __source: { fileName: _jsxFileName, lineNumber: 115, columnNumber: 15 } }, textInShort)))), /*#__PURE__*/_react["default"].createElement("span", { "data-hook": _dataHooks["default"].text, className: _AdaptiveHeadingSt.classes.headerFull, __self: this, __source: { fileName: _jsxFileName, lineNumber: 119, columnNumber: 9 } }, text)); } }]); }(_react["default"].PureComponent); AdaptiveHeading.displayName = 'AdaptiveHeading'; var _default = exports["default"] = AdaptiveHeading;