kitten-components/dist/javascripts/kitten/components/cards/project-card.js

Front-end components library

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ProjectCard = exports.MARGIN_BETWEEN = exports.MIN_WIDTH = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _deprecated = require('prop-types-extra/lib/deprecated');

var _deprecated2 = _interopRequireDefault(_deprecated);

var _card = require('kitten/hoc/card');

var _grid = require('kitten/components/grid/grid');

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

var _title = require('kitten/components/typography/title');

var _paragraph = require('kitten/components/typography/paragraph');

var _progress = require('kitten/components/meters/progress');

var _buttonImage = require('kitten/components/buttons/button-image');

var _iconBadge = require('kitten/components/notifications/icon-badge');

var _lockIcon = require('kitten/components/icons/lock-icon');

var _checkedCircleIcon = require('kitten/components/icons/checked-circle-icon');

var _tagList = require('kitten/components/lists/tag-list');

var _typologyTagIcon = require('kitten/components/icons/typology-tag-icon');

var _instrumentTagIcon = require('kitten/components/icons/instrument-tag-icon');

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var MIN_WIDTH = exports.MIN_WIDTH = 280;
var MARGIN_BETWEEN = exports.MARGIN_BETWEEN = 40;

var ProjectCardComponent = function (_Component) {
  _inherits(ProjectCardComponent, _Component);

  function ProjectCardComponent() {
    _classCallCheck(this, ProjectCardComponent);

    var _this = _possibleConstructorReturn(this, (ProjectCardComponent.__proto__ || Object.getPrototypeOf(ProjectCardComponent)).call(this));

    _this.renderTagsInList = _this.renderTagsInList.bind(_this);
    return _this;
  }

  _createClass(ProjectCardComponent, [{
    key: 'renderDescription',
    value: function renderDescription() {
      var _props = this.props,
          ownerAvatarSrc = _props.ownerAvatarSrc,
          ownerName = _props.ownerName,
          ownerLocation = _props.ownerLocation,
          title = _props.title;


      return _react2.default.createElement(
        'div',
        { className: 'k-ProjectCard__grid' },
        _react2.default.createElement(
          _marger.Marger,
          { top: '2', bottom: '1', className: 'k-ProjectCard__grid--flex' },
          _react2.default.createElement(_buttonImage.ButtonImage, {
            tag: 'span',
            img: { src: ownerAvatarSrc },
            withoutPointerEvents: true
          }),
          _react2.default.createElement(
            _paragraph.Paragraph,
            {
              className: (0, _classnames2.default)('k-ProjectCard__grid--flex__item-fluid', 'k-u-margin-left-single', 'k-u-margin-right-single'),
              margin: false,
              normalLineHeight: true,
              modifier: 'quaternary'
            },
            _react2.default.createElement(
              'span',
              { className: 'k-u-weight-regular' },
              ownerName
            ),
            _react2.default.createElement('br', null),
            ownerLocation
          ),
          this.renderTooltip()
        ),
        _react2.default.createElement(
          _marger.Marger,
          { top: '1', bottom: '1.5', className: 'k-ProjectCard__grid--flex' },
          _react2.default.createElement(
            _title.Title,
            {
              className: 'k-ProjectCard__grid--flex__item-fluid k-Card__title',
              margin: false,
              modifier: 'senary',
              tag: 'p'
            },
            title
          ),
          this.renderScore()
        )
      );
    }
  }, {
    key: 'renderTooltip',
    value: function renderTooltip() {
      if (!this.props.tooltipText) return;

      return _react2.default.createElement(
        'div',
        { className: 'k-ProjectCard__tooltip' },
        _react2.default.createElement(
          'span',
          { className: 'k-ProjectCard__tooltip__content' },
          this.props.tooltipText
        ),
        _react2.default.createElement(_checkedCircleIcon.CheckedCircleIcon, {
          style: { width: '20px', height: '20px' },
          circleColor: this.props.tooltipIconColor,
          checkedColor: '#fff'
        })
      );
    }
  }, {
    key: 'renderScore',
    value: function renderScore() {
      if (!this.props.scoreValue) return;

      var scoreStyles = {
        backgroundColor: this.props.scoreBackgroundColor
      };

      return _react2.default.createElement(
        _iconBadge.IconBadge,
        { style: scoreStyles, className: 'k-u-margin-left-single' },
        this.props.scoreValue
      );
    }
  }, {
    key: 'renderImage',
    value: function renderImage() {
      if (!this.props.imageSrc) return;

      return _react2.default.createElement(
        'div',
        { className: 'k-ProjectCard__grid' },
        _react2.default.createElement(
          _marger.Marger,
          {
            top: '1.5',
            bottom: '1.3',
            className: 'k-Card__imageContainer',
            style: styles.imageContainer
          },
          _react2.default.createElement('img', {
            className: 'k-ProjectCard__img k-Card__image',
            style: styles.image,
            src: this.props.imageSrc,
            alt: ''
          })
        )
      );
    }
  }, {
    key: 'renderProgress',
    value: function renderProgress() {
      var _props2 = this.props,
          progress = _props2.progress,
          progressColor = _props2.progressColor;


      if (progress === false) return;

      return _react2.default.createElement(
        'div',
        {
          className: (0, _classnames2.default)('k-ProjectCard__grid', 'k-ProjectCard__grid--withBorderTop')
        },
        _react2.default.createElement(
          _marger.Marger,
          { top: '1.3', bottom: '1.5', className: 'k-ProjectCard__grid--flex' },
          _react2.default.createElement(_progress.Progress, {
            className: 'k-ProjectCard__grid--flex__item-fluid',
            value: progress,
            color: progressColor
          }),
          _react2.default.createElement(
            _paragraph.Paragraph,
            {
              margin: false,
              modifier: 'quaternary',
              className: (0, _classnames2.default)('k-u-margin-left-double', 'k-u-color-primary1', 'k-u-weight-regular')
            },
            progress,
            '\xA0%'
          )
        )
      );
    }
  }, {
    key: 'renderTags',
    value: function renderTags() {
      return _react2.default.createElement(
        'div',
        { key: 'tag-list-' + Math.random(1), className: 'k-ProjectCard__grid' },
        _react2.default.createElement(
          _marger.Marger,
          { top: '1.3', bottom: '1.3' },
          _react2.default.createElement(_tagList.TagList, { icon: _typologyTagIcon.TypologyTagIcon, items: this.props.tags, tiny: true })
        )
      );
    }
  }, {
    key: 'renderTagsInList',
    value: function renderTagsInList(tagList, index) {
      var icon = this.convertToClass(tagList.icon);
      var list = _react2.default.createElement(_tagList.TagList, { icon: icon, items: tagList.items, tiny: true });

      var separator = _react2.default.createElement(
        'div',
        { className: 'k-u-margin-left-single' },
        _react2.default.createElement('hr', {
          className: (0, _classnames2.default)('k-VerticalSeparator', 'k-VerticalSeparator--darker')
        })
      );

      var tagListWithMargin = _react2.default.createElement(
        'div',
        { className: 'k-u-margin-left-single' },
        list
      );

      return _react2.default.createElement(
        'div',
        { key: 'tag-list-' + index, className: 'k-ProjectCard__grid--flex' },
        index != 0 && separator,
        index != 0 && tagListWithMargin,
        index == 0 && list
      );
    }
  }, {
    key: 'convertToClass',
    value: function convertToClass(stringClassName) {
      switch (stringClassName) {
        case 'InstrumentTagIcon':
          return _instrumentTagIcon.InstrumentTagIcon;
        default:
          return _typologyTagIcon.TypologyTagIcon;
      }
    }
  }, {
    key: 'renderTagLists',
    value: function renderTagLists() {
      return _react2.default.createElement(
        'div',
        { className: 'k-ProjectCard__grid' },
        _react2.default.createElement(
          _marger.Marger,
          { top: '1.3', bottom: '1.3', className: 'k-ProjectCard__grid--flex' },
          this.props.tagLists.map(this.renderTagsInList)
        )
      );
    }
  }, {
    key: 'renderTagsArea',
    value: function renderTagsArea() {
      if (!this.props.tagLists && !this.props.tags) return;

      return this.props.tagLists ? this.renderTagLists() : this.renderTags();
    }
  }, {
    key: 'renderInfos',
    value: function renderInfos() {
      if (!this.props.info1 && !this.props.info2 && !this.props.info3) return;

      return _react2.default.createElement(
        'div',
        { className: 'k-ProjectCard__grid--withBorderTop' },
        _react2.default.createElement(
          _marger.Marger,
          { top: '1.5', bottom: '1.5', className: 'k-ProjectCard__grid--flex' },
          this.renderInfo(this.props.info1),
          this.renderInfo(this.props.info2),
          this.renderInfo(this.props.info3)
        )
      );
    }
  }, {
    key: 'renderParagraph',
    value: function renderParagraph() {
      if (!this.props.paragraph) return;

      return _react2.default.createElement(
        'div',
        {
          className: (0, _classnames2.default)('k-ProjectCard__paragraph', 'k-ProjectCard__grid--withBorderTop')
        },
        _react2.default.createElement(
          _marger.Marger,
          { top: '2', bottom: '2' },
          _react2.default.createElement(
            _paragraph.Paragraph,
            { margin: false, modifier: 'quaternary' },
            this.props.paragraph
          )
        )
      );
    }
  }, {
    key: 'renderInfo',
    value: function renderInfo(info) {
      if (!info) return;

      var valueClassName = (0, _classnames2.default)('k-ProjectCard__info__value', {
        'k-u-color-primary1': this.props.coloredInfosValues
      });

      var renderValue = _react2.default.createElement(
        'span',
        { className: valueClassName },
        info.locked ? _react2.default.createElement(_lockIcon.LockIcon, { width: '12' }) : info.value
      );

      var renderLabel = info.text;

      return _react2.default.createElement(
        'div',
        { className: 'k-u-align-center k-ProjectCard__info' },
        info.reverse ? renderValue : renderLabel,
        _react2.default.createElement('br', null),
        info.reverse ? renderLabel : renderValue
      );
    }
  }, {
    key: 'renderStatus',
    value: function renderStatus() {
      var _props3 = this.props,
          statusContent = _props3.statusContent,
          statusPrimaryBackground = _props3.statusPrimaryBackground,
          statusValidBackground = _props3.statusValidBackground,
          statusTertiaryBackground = _props3.statusTertiaryBackground,
          statusGreyBackground = _props3.statusGreyBackground,
          statusErrorBackground = _props3.statusErrorBackground,
          statusErrorReverseBackground = _props3.statusErrorReverseBackground,
          statusWithoutTopBorder = _props3.statusWithoutTopBorder;


      if (!statusContent) return;

      var statusClassName = (0, _classnames2.default)('k-ProjectCard__grid', 'k-ProjectCard__status', {
        'k-ProjectCard__grid--withBorderTop': !statusWithoutTopBorder,
        'k-ProjectCard__status--primaryBackground': statusPrimaryBackground,
        'k-ProjectCard__status--validBackground': statusValidBackground,
        'k-ProjectCard__status--tertiaryBackground': statusTertiaryBackground,
        'k-ProjectCard__status--greyBackground': statusGreyBackground,
        'k-ProjectCard__status--errorBackground': statusErrorBackground,
        'k-ProjectCard__status--errorReverseBackground': statusErrorReverseBackground
      });

      return _react2.default.createElement(
        'div',
        { className: statusClassName },
        _react2.default.createElement(
          _marger.Marger,
          { top: '1', bottom: '1', className: 'k-ProjectCard__status__content' },
          statusContent
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var projectCardClassName = (0, _classnames2.default)('k-ProjectCard', { 'is-disabled': this.props.disabled }, this.props.className);

      var Tag = this.props.linkHref && !this.props.disabled ? 'a' : 'div';
      var href = this.props.disabled ? null : this.props.linkHref;
      var title = this.props.disabled ? null : this.props.linkTitle;

      return _react2.default.createElement(
        Tag,
        {
          key: this.props.id,
          href: href,
          title: title,
          className: projectCardClassName
        },
        this.renderDescription(),
        this.renderImage(),
        this.renderTagsArea(),
        this.renderProgress(),
        this.renderParagraph(),
        this.renderInfos(),
        this.renderStatus()
      );
    }
  }]);

  return ProjectCardComponent;
}(_react.Component);

var styles = {
  imageContainer: {
    overflow: 'hidden',
    position: 'relative',
    paddingTop: 9 / 16 * 100 + '%'
  },
  image: {
    position: 'absolute',
    top: 0,
    display: 'block',
    width: '100%'
  }
};

ProjectCardComponent.defaultProps = {
  id: null,
  linkHref: null,
  linkTitle: null,
  ownerAvatarSrc: null,
  ownerName: 'Name',
  ownerLocation: 'Location',
  tagLists: null,
  tags: null,
  paragraph: null,
  tooltipText: null,
  tooltipIconColor: '#19b4fa',
  scoreValue: null,
  scoreBackgroundColor: null,
  title: 'Title',
  imageSrc: null,
  progress: false,
  coloredInfosValues: false,
  info1: null,
  info2: null,
  info3: null,
  disabled: false,
  statusContent: null,
  statusPrimaryBackground: false,
  statusValidBackground: false,
  statusTertiaryBackground: false,
  statusGreyBackground: false,
  statusErrorBackground: false,
  statusErrorReverseBackground: false,
  statusWithoutTopBorder: false

  // Deprecated props

};ProjectCardComponent.propTypes = {
  tags: (0, _deprecated2.default)(_propTypes2.default.array, 'Use `tagLists` prop instead')

  // Add card generic styles.

};var ProjectCard = exports.ProjectCard = (0, _card.card)(ProjectCardComponent, {
  light: true
});