backpack-ui/dist/components/profileHeader/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

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

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

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

var _createClass3 = _interopRequireDefault(_createClass2);

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

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

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

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _reactMeasure = require("react-measure");

var _reactMeasure2 = _interopRequireDefault(_reactMeasure);

var _avatar = require("../avatar");

var _avatar2 = _interopRequireDefault(_avatar);

var _locationLabel = require("../locationLabel");

var _locationLabel2 = _interopRequireDefault(_locationLabel);

var _tag = require("../tag");

var _tag2 = _interopRequireDefault(_tag);

var _tagList = require("../tagList");

var _tagList2 = _interopRequireDefault(_tagList);

var _text = require("../text");

var _profileIntro = require("../profileIntro");

var _profileIntro2 = _interopRequireDefault(_profileIntro);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _typography = require("../../styles/typography");

var _typography2 = require("../../utils/typography");

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

var _validations = require("../../utils/validations");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var ProfileHeader = function (_React$Component) {
  (0, _inherits3.default)(ProfileHeader, _React$Component);

  function ProfileHeader(props) {
    (0, _classCallCheck3.default)(this, ProfileHeader);

    var _this = (0, _possibleConstructorReturn3.default)(this, (ProfileHeader.__proto__ || (0, _getPrototypeOf2.default)(ProfileHeader)).call(this, props));

    _this.state = {
      dimensions: {
        width: -1
      }
    };

    _this.paragraphLineHeight = 24;
    return _this;
  }

  (0, _createClass3.default)(ProfileHeader, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          name = _props.name,
          intro = _props.intro,
          avatarSrc = _props.avatarSrc,
          website = _props.website,
          location = _props.location,
          interests = _props.interests,
          interestsLimit = _props.interestsLimit,
          style = _props.style;
      var width = this.state.dimensions.width;

      // Change the layout based on the component's size

      var alignment = width > 540 ? "left" : "center";

      var styles = {
        header: {
          center: {
            textAlign: "center"
          },

          left: {}
        },

        flexContainer: {
          center: {},

          left: {
            display: "flex",
            alignItems: "center"
          }
        },

        avatar: {
          center: {},

          left: {
            marginRight: "33px"
          }
        },

        textContainer: {
          center: {
            marginTop: "23px"
          },

          left: {}
        },

        locationLabel: {
          center: {
            marginTop: "10px"
          },

          left: {
            marginTop: "7px"
          }
        },

        heading: {
          lineHeight: _typography.lineHeightReset
        },

        website: {
          default: {
            fontSize: _typography.fontSizeHeading7 + "px",
            lineHeight: _typography.lineHeightReset
          },

          center: {
            marginTop: "6px"
          },

          left: {
            marginTop: "8px"
          }
        },

        intro: {
          default: {
            marginTop: "37px"
          },

          center: {
            lineHeight: this.paragraphLineHeight / _typography.fontSizeBodySmall
          },

          left: {
            fontSize: _typography.fontSizeHeading7 + "px",
            lineHeight: _typography.lineHeightHeading7
          }
        },

        tagList: {
          center: {
            marginTop: "39px"
          },

          left: {
            marginTop: "31px"
          }
        },

        textBodySmall: (0, _extends3.default)({}, {
          color: _colors2.default.textPrimary,
          marginBottom: 0,
          marginTop: 0
        }, (0, _typography2.textBodySmall)())
      };

      var urlParser = function urlParser(url) {
        var parsed = _validations.urlRegex.exec(url);

        if (!parsed) return null;

        return {
          href: parsed[0],
          protocol: parsed[1],
          hostname: parsed[2],
          pathname: parsed[3]
        };
      };

      var websiteParser = urlParser(website);

      return _react2.default.createElement(
        _reactMeasure2.default,
        {
          bounds: true,
          onResize: function onResize(contentRect) {
            _this2.setState({
              dimensions: contentRect.bounds
            });
          }
        },
        function (_ref) {
          var measureRef = _ref.measureRef;
          return _react2.default.createElement(
            "header",
            {
              className: "ProfileHeader",
              ref: measureRef,
              style: [styles.header[alignment], style]
            },
            _react2.default.createElement(
              "div",
              { style: styles.flexContainer[alignment] },
              avatarSrc && _react2.default.createElement(_avatar2.default, {
                src: avatarSrc,
                alt: "Avatar for user " + name,
                size: 80,
                className: "ProfileHeader-avatar",
                style: styles.avatar[alignment]
              }),
              _react2.default.createElement(
                "div",
                { style: styles.textContainer[alignment] },
                name && _react2.default.createElement(
                  _text.Heading,
                  {
                    level: 1,
                    size: 5,
                    weight: "medium",
                    style: styles.heading
                  },
                  name
                ),
                location && _react2.default.createElement(
                  _locationLabel2.default,
                  { style: styles.locationLabel[alignment] },
                  location
                ),
                websiteParser && _react2.default.createElement(
                  "p",
                  {
                    style: [styles.textBodySmall, styles.website.default, styles.website[alignment]]
                  },
                  _react2.default.createElement(
                    "a",
                    {
                      href: websiteParser.href,
                      target: "_blank",
                      rel: "noopener noreferrer nofollow"
                    },
                    "" + websiteParser.hostname.replace("www.", "") + websiteParser.pathname
                  )
                )
              )
            ),
            intro && _react2.default.createElement(
              _profileIntro2.default,
              {
                maxLines: 3,
                fontSize: alignment === "center" && _typography.fontSizeBodySmall || alignment === "left" && _typography.fontSizeHeading7,
                lineHeight: _this2.paragraphLineHeight,
                style: [styles.textBodySmall, styles.intro.default, styles.intro[alignment]]
              },
              intro
            ),
            interests && interests.length > 0 && _react2.default.createElement(
              _tagList2.default,
              {
                style: styles.tagList[alignment],
                limit: interestsLimit,
                rows: 10
              },
              interests.map(function (interest) {
                return _react2.default.createElement(
                  _tag2.default,
                  { key: interest },
                  interest
                );
              })
            )
          );
        }
      );
    }
  }]);
  return ProfileHeader;
}(_react2.default.Component);

ProfileHeader.propTypes = {
  name: _propTypes2.default.string.isRequired,
  intro: _propTypes2.default.string,
  website: _propTypes2.default.string,
  avatarSrc: _propTypes2.default.string,
  location: _propTypes2.default.string,
  interests: _propTypes2.default.arrayOf(_propTypes2.default.string),
  interestsLimit: _propTypes2.default.number,
  style: _propTypes4.default.style
};

ProfileHeader.defaultProps = {
  intro: "",
  website: "",
  avatarSrc: "",
  location: "",
  interests: [],
  style: null
};

exports.default = (0, _radium2.default)(ProfileHeader);