wix-style-react/dist/src/SocialPreview/SocialPreview.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _SocialPreviewSt = require("./SocialPreview.st.css");
var _Text = _interopRequireDefault(require("../Text"));
var _Box = _interopRequireDefault(require("../Box"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/SocialPreview/SocialPreview.js";
/**
 * A displayer for a social post
 */
class SocialPreview extends _react.default.Component {
  _isTwitter() {
    var {
      skin
    } = this.props;
    return skin === 'twitter';
  }
  _isTwitterSmall() {
    var {
      size
    } = this.props;
    return this._isTwitter() && size === 'small';
  }
  _renderTitle() {
    var {
      skin,
      title
    } = this.props;
    return /*#__PURE__*/_react.default.createElement(_Text.default, {
      weight: "bold",
      size: this._isTwitter() ? 'tiny' : 'small',
      dataHook: _constants.dataHooks.socialPreviewTitle,
      className: (0, _SocialPreviewSt.st)(_SocialPreviewSt.classes.socialPreviewTitle, {
        skin
      }),
      ellipsis: true,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 50,
        columnNumber: 7
      }
    }, title);
  }
  _renderDescription() {
    var {
      skin,
      description
    } = this.props;
    return /*#__PURE__*/_react.default.createElement(_Text.default, {
      weight: this._isTwitter() ? 'normal' : 'thin',
      size: "tiny",
      dataHook: _constants.dataHooks.socialPreviewDescription,
      className: (0, _SocialPreviewSt.st)(_SocialPreviewSt.classes.socialPreviewDescription, {
        skin
      }),
      ellipsis: true,
      maxLines: this._isTwitter() ? 2 : 1,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 65,
        columnNumber: 7
      }
    }, description);
  }
  _renderUrlText() {
    var {
      skin,
      previewUrl
    } = this.props;
    return /*#__PURE__*/_react.default.createElement(_Text.default, {
      weight: "normal",
      size: "tiny",
      dataHook: _constants.dataHooks.socialPreviewUrl,
      className: (0, _SocialPreviewSt.st)(_SocialPreviewSt.classes.socialPreviewUrl, {
        skin
      }),
      ellipsis: true,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 81,
        columnNumber: 7
      }
    }, this._isTwitter() ? previewUrl : previewUrl && previewUrl.toUpperCase());
  }
  _renderUrl() {
    var {
      skin,
      previewUrl
    } = this.props;
    if (this._isTwitter()) {
      return previewUrl && /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _SocialPreviewSt.st)(_SocialPreviewSt.classes.socialPreviewUrlContainer, {
          skin
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 100,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Link, {
        size: "14px",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 101,
          columnNumber: 13
        }
      }), this._renderUrlText());
    } else {
      return this._renderUrlText();
    }
  }
  _renderMedia() {
    var {
      skin,
      size,
      media
    } = this.props;
    if (this._isTwitterSmall()) {
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _SocialPreviewSt.st)(_SocialPreviewSt.classes.mediaContainer, {
          skin,
          size
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 115,
          columnNumber: 9
        }
      }, media);
    }
    return media;
  }
  render() {
    var {
      skin,
      size
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _SocialPreviewSt.st)(_SocialPreviewSt.classes.root, {
        skin,
        size
      }),
      "data-hook": this.props.dataHook,
      "data-skin": skin,
      "data-size": size,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 128,
        columnNumber: 7
      }
    }, this._renderMedia(), /*#__PURE__*/_react.default.createElement(_Box.default, {
      className: (0, _SocialPreviewSt.st)(_SocialPreviewSt.classes.container, {
        skin,
        size
      }),
      direction: "vertical",
      verticalAlign: this._isTwitterSmall() ? 'middle' : undefined,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 135,
        columnNumber: 9
      }
    }, !this._isTwitter() && this._renderUrl(), this._renderTitle(), this._renderDescription(), this._isTwitter() && this._renderUrl()));
  }
}
SocialPreview.displayName = 'SocialPreview';
SocialPreview.propTypes = {
  dataHook: _propTypes.default.string,
  /** A social post link title */
  title: _propTypes.default.string,
  /** A social post link description */
  description: _propTypes.default.string,
  /** A url representation of the social post link */
  previewUrl: _propTypes.default.string,
  /** A slot to render a media item, most common will be the ImageViewer component */
  media: _propTypes.default.node,
  /** Changes the style of the preview */
  skin: _propTypes.default.oneOf(['social', 'twitter']),
  /** Specifies the size of the preview. Size small works only in combination with twitter skin */
  size: _propTypes.default.oneOf(['small', 'large'])
};
SocialPreview.defaultProps = {
  skin: 'social',
  size: 'large'
};
var _default = exports.default = SocialPreview;
//# sourceMappingURL=SocialPreview.js.map