kitten-components/dist/javascripts/kitten/components/form/comment.js

Front-end components library

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Comment = exports.CommentComponent = undefined;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _radium = require('radium');

var _radium2 = _interopRequireDefault(_radium);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _marger = require('kitten/components/layout/marger');

var _commentAvatar = require('kitten/components/form/comment-avatar');

var _text = require('kitten/components/typography/text');

var _screenConfig = require('kitten/constants/screen-config');

var _mediaQueries = require('kitten/hoc/media-queries');

var _colorsConfig = require('kitten/constants/colors-config');

var _colorsConfig2 = _interopRequireDefault(_colorsConfig);

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var Text = (0, _radium2.default)(_text.Text);
var CommentContent = function CommentContent(_ref) {
  var text = _ref.text,
      ownerName = _ref.ownerName,
      viewportIsMobile = _ref.viewportIsMobile,
      style = _ref.style;
  return _react2.default.createElement(
    _radium.StyleRoot,
    { style: style },
    _react2.default.createElement(
      _marger.Marger,
      { bottom: '1' },
      _react2.default.createElement(
        Text,
        { color: 'font1', size: 'tiny', weight: 'regular' },
        ownerName
      )
    ),
    _react2.default.createElement(
      _marger.Marger,
      { top: '1' },
      _react2.default.createElement(
        Text,
        {
          color: 'font1',
          size: viewportIsMobile ? 'tiny' : 'default',
          weight: 'light'
        },
        text
      )
    ),
    _react2.default.createElement('span', { style: styles.comment.arrow })
  );
};

var CommentComponent = exports.CommentComponent = function CommentComponent(_ref2) {
  var text = _ref2.text,
      ownerName = _ref2.ownerName,
      avatarImgProps = _ref2.avatarImgProps,
      commentDate = _ref2.commentDate,
      viewportIsMobile = _ref2.viewportIsMobile,
      bottomNotes = _ref2.bottomNotes;
  return _react2.default.createElement(
    _react.Fragment,
    null,
    _react2.default.createElement(
      'div',
      { style: styles.grid },
      _react2.default.createElement(_commentAvatar.CommentAvatar, {
        avatarImgProps: avatarImgProps,
        commentDate: commentDate
      }),
      _react2.default.createElement(
        _radium.StyleRoot,
        { style: styles.commentContent },
        _react2.default.createElement(CommentContent, {
          style: styles.comment,
          text: text,
          ownerName: ownerName,
          viewportIsMobile: viewportIsMobile
        }),
        bottomNotes && _react2.default.createElement(
          _marger.Marger,
          { top: '.5' },
          _react2.default.createElement(
            Text,
            {
              style: styles.bottomNotes,
              tag: 'p',
              color: 'font1',
              size: 'micro',
              weight: 'bold'
            },
            bottomNotes
          )
        )
      )
    )
  );
};

CommentComponent.propTypes = {
  text: _propTypes2.default.node.isRequired,
  ownerName: _propTypes2.default.string.isRequired,
  avatarImgProps: _propTypes2.default.object.isRequired,
  commentDate: _propTypes2.default.string.isRequired,
  viewportIsMobile: _propTypes2.default.bool.isRequired,
  bottomNotes: _propTypes2.default.node
};

CommentComponent.defaultProps = {
  bottomNotes: ''
};

var styles = {
  grid: {
    display: 'flex'
  },
  commentContent: _defineProperty({
    position: 'relative',
    marginLeft: 20
  }, '@media (min-width: ' + _screenConfig.ScreenConfig['S'].min + 'px)', {
    marginLeft: 35
  }),
  bottomNotes: {
    paddingLeft: 30
  },
  comment: {
    borderWidth: 2,
    backgroundColor: _colorsConfig2.default.background3,
    borderColor: _colorsConfig2.default.background3,
    color: _colorsConfig2.default.font1,
    padding: 30,
    fontSize: 16,

    arrow: _defineProperty({
      position: 'absolute',
      top: 20,
      display: 'block',
      width: 0,
      height: 0,
      borderWidth: 10,
      borderStyle: 'solid',
      borderColor: 'transparent',
      borderRightColor: _colorsConfig2.default.background3,
      left: -20
    }, '@media (min-width: ' + _screenConfig.ScreenConfig['S'].min + 'px)', {
      top: 35
    })
  }
};

var Comment = exports.Comment = (0, _mediaQueries.mediaQueries)((0, _radium2.default)(CommentComponent), {
  viewportIsMobile: true
});