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

Front-end components library

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _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 _buttonIcon = require('kitten/components/buttons/button-icon');

var _separator = require('kitten/components/layout/separator');

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

var _arrowIcon = require('kitten/components/icons/arrow-icon');

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

var _loader = require('kitten/components/loaders/loader');

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 _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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 SimilarProjectCardComponent = function (_Component) {
  _inherits(SimilarProjectCardComponent, _Component);

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

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

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

  _createClass(SimilarProjectCardComponent, [{
    key: 'renderRefresh',
    value: function renderRefresh() {
      var _props = this.props,
          refresh = _props.refresh,
          onRefreshClick = _props.onRefreshClick;


      return _react2.default.createElement(
        'div',
        { className: 'k-ProjectSimilarCard__refresh' },
        _react2.default.createElement(
          'span',
          {
            className: 'k-ProjectSimilarCard__refresh__link',
            onClick: onRefreshClick
          },
          refresh
        )
      );
    }
  }, {
    key: 'renderLeftArrow',
    value: function renderLeftArrow() {
      return _react2.default.createElement(
        _buttonIcon.ButtonIcon,
        {
          size: 'tiny',
          type: 'button',
          verticalArrow: true,
          disabled: this.props.leftArrowDisabled,
          onClick: this.props.onLeftArrowClick
        },
        _react2.default.createElement(_arrowIcon.ArrowIcon, { direction: 'left', className: 'k-ButtonIcon__svg' })
      );
    }
  }, {
    key: 'renderRightArrow',
    value: function renderRightArrow() {
      return _react2.default.createElement(
        _buttonIcon.ButtonIcon,
        {
          size: 'tiny',
          type: 'button',
          verticalArrow: true,
          disabled: this.props.rightArrowDisabled,
          onClick: this.props.onRightArrowClick
        },
        _react2.default.createElement(_arrowIcon.ArrowIcon, { className: 'k-ButtonIcon__svg' })
      );
    }
  }, {
    key: 'renderHeader',
    value: function renderHeader() {
      var step = this.props.step;


      return _react2.default.createElement(
        'div',
        { className: 'k-ProjectSimilarCard__grid' },
        _react2.default.createElement(
          _marger.Marger,
          { top: '1', bottom: '1' },
          _react2.default.createElement(
            'div',
            { className: 'k-ProjectSimilarCard__grid--flex' },
            this.renderRefresh(),
            _react2.default.createElement(
              'div',
              { className: 'k-ProjectSimilarCard__navigation' },
              _react2.default.createElement(
                'div',
                { className: 'k-ProjectSimilarCard__header--step' },
                step
              ),
              _react2.default.createElement(
                'div',
                { className: 'k-ProjectSimilarCard__header--button' },
                this.renderLeftArrow(),
                this.renderRightArrow()
              )
            )
          )
        )
      );
    }
  }, {
    key: 'renderImage',
    value: function renderImage() {
      var imageSrc = this.props.imageSrc;


      if (!imageSrc) return;

      return _react2.default.createElement(
        _marger.Marger,
        { top: '2', bottom: '1', key: 'image' },
        _react2.default.createElement(
          'div',
          { className: 'k-ProjectSimilarCard__grid' },
          _react2.default.createElement('img', { className: 'k-ProjectSimilarCard__img', src: imageSrc, alt: '' })
        )
      );
    }
  }, {
    key: 'renderTitle',
    value: function renderTitle() {
      var _props2 = this.props,
          title = _props2.title,
          imageSrc = _props2.imageSrc;


      var top = imageSrc ? 1 : 2;

      return _react2.default.createElement(
        _marger.Marger,
        { top: top, bottom: '1' },
        _react2.default.createElement(
          _title.Title,
          { modifier: 'senary', margin: false, tag: 'p' },
          title
        )
      );
    }
  }, {
    key: 'renderDescription',
    value: function renderDescription() {
      var paragraph = this.props.paragraph;


      return _react2.default.createElement(
        'div',
        { key: 'description', className: 'k-ProjectSimilarCard__grid' },
        this.renderTitle(),
        this.renderTagsArea(),
        _react2.default.createElement(
          _marger.Marger,
          { top: '1', bottom: '2' },
          _react2.default.createElement(
            _paragraph.Paragraph,
            { modifier: 'tertiary', margin: false },
            paragraph
          )
        )
      );
    }
  }, {
    key: 'renderTags',
    value: function renderTags() {
      return _react2.default.createElement(
        _marger.Marger,
        { top: '1', bottom: '1' },
        _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(
        _marger.Marger,
        { top: '1', bottom: '1', 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() {
      var infos = this.props.infos;


      if (!infos) return;

      return _react2.default.createElement(
        'div',
        { key: 'infos' },
        _react2.default.createElement(_separator.Separator, null),
        _react2.default.createElement(
          _marger.Marger,
          { top: '1.5', bottom: '1.5', className: 'k-ProjectCard__grid--flex' },
          infos.map(this.renderInfo)
        )
      );
    }
  }, {
    key: 'renderInfo',
    value: function renderInfo(info) {
      var coloredInfosValues = this.props.coloredInfosValues;


      var infoClassName = (0, _classnames2.default)('k-ProjectSimilarCard__info__value', {
        'k-u-color-primary1': coloredInfosValues
      });

      return _react2.default.createElement(
        'div',
        {
          key: info.text,
          className: (0, _classnames2.default)('k-u-align-center', 'k-ProjectSimilarCard__info')
        },
        info.text,
        _react2.default.createElement('br', null),
        _react2.default.createElement(
          'span',
          { className: infoClassName },
          info.locked ? _react2.default.createElement(_lockIcon.LockIcon, { width: '12' }) : info.value
        )
      );
    }
  }, {
    key: 'renderLoader',
    value: function renderLoader() {
      var loading = this.props.loading;


      if (!loading) return;

      return _react2.default.createElement(
        _marger.Marger,
        { top: '9', bottom: '9' },
        _react2.default.createElement(
          'div',
          { className: 'k-ProjectSimilarCard__grid' },
          _react2.default.createElement(_loader.Loader, { className: 'k-ProjectSimilarCard__loading' })
        )
      );
    }
  }, {
    key: 'renderProject',
    value: function renderProject() {
      var loading = this.props.loading;


      if (loading) return;

      return [this.renderImage(), this.renderDescription(), this.renderInfos()];
    }
  }, {
    key: 'hasLink',
    value: function hasLink() {
      return !this.props.loading && !!this.props.link && !!this.props.link.href;
    }
  }, {
    key: 'contentTagProps',
    value: function contentTagProps() {
      var tagClassName = 'k-ProjectSimilarCard__content';

      if (!this.hasLink()) return { className: tagClassName };

      var _props$link = this.props.link,
          className = _props$link.className,
          target = _props$link.target,
          linkProps = _objectWithoutProperties(_props$link, ['className', 'target']);

      return _extends({}, linkProps, {
        target: target || '_blank',
        className: (0, _classnames2.default)(tagClassName, className)
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var className = this.props.className;


      var ProjectSimilarCardClassName = (0, _classnames2.default)('k-ProjectSimilarCard', className);

      var Tag = this.hasLink() ? 'a' : 'div';

      return _react2.default.createElement(
        'div',
        { className: ProjectSimilarCardClassName },
        this.renderHeader(),
        _react2.default.createElement(_separator.Separator, null),
        _react2.default.createElement(
          Tag,
          this.contentTagProps(),
          this.renderProject(),
          this.renderLoader()
        )
      );
    }
  }]);

  return SimilarProjectCardComponent;
}(_react.Component);

SimilarProjectCardComponent.defaultProps = {
  step: '',
  imageSrc: null,
  title: '',
  paragraph: '',
  tagLists: null,
  tags: null,
  infos: false, // Eg: [{ key: …, text: …, value: …, locked: … }]
  coloredInfosValues: false,
  refresh: 'Refresh',
  onRefreshClick: function onRefreshClick() {},
  onLeftArrowClick: function onLeftArrowClick() {},
  onRightArrowClick: function onRightArrowClick() {},
  loading: false,
  leftArrowDisabled: true,
  rightArrowDisabled: true,

  // `link` prop should be formatted as follow:
  // {
  //   href: 'link-url',
  //   target: '_blank',
  //   className: 'link-custom-classname',
  //   …
  // }
  link: null

  // Add generic card styles.
};var SimilarProjectCard = exports.SimilarProjectCard = (0, _card.card)(SimilarProjectCardComponent, {
  light: true,
  withBorder: true,
  withShadow: true,
  translateOnHover: true
});

// DEPRECATED
var ProjectSimilarCard = exports.ProjectSimilarCard = SimilarProjectCard;