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

Front-end components library

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CrowdfundingCard = 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 _radium = require('radium');

var _radium2 = _interopRequireDefault(_radium);

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

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

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

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

var _horizontalStroke = require('kitten/components/layout/horizontal-stroke');

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

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

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

var _colorsConfig2 = _interopRequireDefault(_colorsConfig);

var _reactTruncate = require('react-truncate');

var _reactTruncate2 = _interopRequireDefault(_reactTruncate);

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 Text = (0, _radium2.default)(_text.Text);
var Title = (0, _radium2.default)(_title.Title);
var HorizontalStroke = (0, _radium2.default)(_horizontalStroke.HorizontalStroke);
var Marger = (0, _radium2.default)(_marger.Marger);

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

  function CrowdfundingCardComponent() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, CrowdfundingCardComponent);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CrowdfundingCardComponent.__proto__ || Object.getPrototypeOf(CrowdfundingCardComponent)).call.apply(_ref, [this].concat(args))), _this), _this.removeCurrentFocus = function () {
      document.activeElement.blur();
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(CrowdfundingCardComponent, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          imageProps = _props.imageProps,
          avatarProps = _props.avatarProps,
          titleProps = _props.titleProps,
          ownerTitle = _props.ownerTitle,
          ownerDescription = _props.ownerDescription,
          cardTitle = _props.cardTitle,
          cardSubTitle = _props.cardSubTitle,
          titlesMinHeight = _props.titlesMinHeight,
          titleTruncate = _props.titleTruncate,
          subTitleTruncate = _props.subTitleTruncate,
          info1 = _props.info1,
          info2 = _props.info2,
          info3 = _props.info3,
          progress = _props.progress,
          progressColor = _props.progressColor,
          state = _props.state,
          loading = _props.loading,
          others = _objectWithoutProperties(_props, ['imageProps', 'avatarProps', 'titleProps', 'ownerTitle', 'ownerDescription', 'cardTitle', 'cardSubTitle', 'titlesMinHeight', 'titleTruncate', 'subTitleTruncate', 'info1', 'info2', 'info3', 'progress', 'progressColor', 'state', 'loading']);

      var Tag = this.props.href ? 'a' : 'div';

      return _react2.default.createElement(
        _radium.StyleRoot,
        null,
        _react2.default.createElement(
          Tag,
          _extends({}, others, { style: styles.card, onClick: this.removeCurrentFocus }),
          this.renderImage(),
          this.renderHeader(),
          _react2.default.createElement(
            Marger,
            { bottom: '2', style: titlesMinHeight && styles.titles },
            this.renderTitle(),
            this.renderSubtitle()
          ),
          this.renderInformation(),
          this.renderProgress(),
          this.renderState(),
          this.renderLoading()
        )
      );
    }
  }, {
    key: 'renderImage',
    value: function renderImage() {
      var _props$imageProps = this.props.imageProps,
          alt = _props$imageProps.alt,
          backgroundColor = _props$imageProps.backgroundColor,
          color = _props$imageProps.color,
          imageProps = _objectWithoutProperties(_props$imageProps, ['alt', 'backgroundColor', 'color']);

      var imageClassName = (0, _classnames2.default)('k-Card__image', imageProps.className);

      return _react2.default.createElement(
        Marger,
        {
          className: 'k-Card__imageContainer',
          style: _extends({}, styles.imageContainer, {
            backgroundColor: this.props.loading ? _colorsConfig2.default.line2 : backgroundColor
          })
        },
        !this.props.loading && _react2.default.createElement('img', _extends({}, imageProps, {
          alt: alt || '',
          className: imageClassName,
          style: _extends({}, imageProps.style, styles.image, {
            color: color
          })
        }))
      );
    }
  }, {
    key: 'renderHeader',
    value: function renderHeader() {
      var titleStyle = [this.props.loading && styles.header.owner.titleLoading];

      var descriptionStyle = [this.props.loading && styles.header.owner.descriptionLoading];

      return _react2.default.createElement(
        'div',
        { style: styles.header.grid },
        _react2.default.createElement(
          Marger,
          { top: '1', bottom: '1' },
          _react2.default.createElement(_buttonImage.ButtonImage, {
            tag: 'span',
            img: !this.props.loading && this.props.avatarProps,
            withoutPointerEvents: true,
            style: styles.header.avatar
          })
        ),
        _react2.default.createElement(
          'div',
          { style: styles.header.owner },
          _react2.default.createElement(
            Text,
            { tag: 'div', size: 'micro', weight: 'regular', style: titleStyle },
            !this.props.loading && this.props.ownerTitle
          ),
          _react2.default.createElement(
            Text,
            { tag: 'div', size: 'micro', weight: 'light', style: descriptionStyle },
            !this.props.loading && this.props.ownerDescription
          )
        )
      );
    }
  }, {
    key: 'renderTitle',
    value: function renderTitle() {
      var className = (0, _classnames2.default)('k-Card__title', this.props.titleProps.className);

      return _react2.default.createElement(
        Marger,
        { bottom: '1', style: styles.title },
        !this.props.loading && _react2.default.createElement(
          Title,
          _extends({
            tag: 'p'
          }, this.props.titleProps, {
            modifier: 'senary',
            margin: false,
            className: className
          }),
          this.props.titleTruncate && _react2.default.createElement(
            _reactTruncate2.default,
            { lines: 2, style: styles.truncate },
            this.props.cardTitle
          ),
          !this.props.titleTruncate && this.props.cardTitle
        ),
        this.props.loading && _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement('span', { style: styles.title.loading }),
          _react2.default.createElement('span', {
            style: _extends({}, styles.title.loading, styles.title.loading.small)
          })
        )
      );
    }
  }, {
    key: 'renderSubtitle',
    value: function renderSubtitle() {
      var horizontalStroke = [styles.stroke, this.props.loading && styles.stroke.loading];

      var textStyle = [styles.subtitle.text, this.props.subTitleTruncate && styles.subtitle.text.truncated];

      return _react2.default.createElement(
        Marger,
        { top: '1', style: styles.subtitle },
        _react2.default.createElement(HorizontalStroke, { size: 'tiny', style: horizontalStroke }),
        this.props.cardSubTitle && !this.props.loading && _react2.default.createElement(
          Text,
          { size: 'micro', weight: 'regular', tag: 'p', style: textStyle },
          this.props.subTitleTruncate && _react2.default.createElement(
            _reactTruncate2.default,
            { style: styles.truncate },
            this.props.cardSubTitle
          ),
          !this.props.subTitleTruncate && this.props.cardSubTitle
        ),
        this.props.loading && _react2.default.createElement('span', { style: styles.subtitle.loading })
      );
    }
  }, {
    key: 'renderInformation',
    value: function renderInformation() {
      if (!this.props.info1 && !this.props.info2 && !this.props.info3) return;

      return _react2.default.createElement(
        Marger,
        { top: '1.5', bottom: '.5', style: styles.informations },
        this.renderInfo(this.props.info1),
        this.renderInfo(this.props.info2),
        this.renderInfo(this.props.info3, true)
      );
    }
  }, {
    key: 'renderInfo',
    value: function renderInfo(text) {
      var lastItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

      var lastItemStyles = lastItem ? styles.informations.info.lastItem : {};

      return _react2.default.createElement(
        Marger,
        {
          top: '0.5',
          style: _extends({}, styles.informations.info, lastItemStyles)
        },
        !this.props.loading && _react2.default.createElement(
          Text,
          { size: 'micro', lineHeight: 'normal', weight: 'light' },
          text
        ),
        this.props.loading && _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement('span', { style: styles.informations.info.loading }),
          _react2.default.createElement('span', {
            style: _extends({}, styles.informations.info.loading, styles.informations.info.loading.large)
          })
        )
      );
    }
  }, {
    key: 'renderProgress',
    value: function renderProgress() {
      var _props2 = this.props,
          progress = _props2.progress,
          progressColor = _props2.progressColor,
          loading = _props2.loading;


      if (progress === false) return;

      var progressValue = loading ? 65 : progress;

      return _react2.default.createElement(
        Marger,
        { top: '.5', bottom: '2', style: styles.progress },
        _react2.default.createElement(_progress.Progress, {
          value: progressValue,
          className: loading && 'is-disabled',
          color: progressColor,
          rampProps: {
            style: { height: '4px' }
          },
          style: { flex: 1 }
        }),
        _react2.default.createElement(
          Text,
          { weight: 'regular', size: 'micro', style: styles.progress.percent },
          loading && _react2.default.createElement('span', { style: styles.informations.info.loading }),
          !loading && progress + ' %'
        )
      );
    }
  }, {
    key: 'renderState',
    value: function renderState() {
      if (!this.props.state || this.props.loading) return;

      return _react2.default.createElement(
        'div',
        { style: styles.state },
        _react2.default.createElement(
          Text,
          { size: 'micro', lineHeight: 'normal', weight: 'regular' },
          this.props.state
        )
      );
    }
  }, {
    key: 'renderLoading',
    value: function renderLoading() {
      if (!this.props.loading) return;

      return _react2.default.createElement('span', { style: styles.loading });
    }
  }]);

  return CrowdfundingCardComponent;
}(_react.Component);

var COMPONENT_GUTTER = 10;

var loadingKeyframes = _radium2.default.keyframes({
  '0%': { transform: 'translateX(-100%)' },
  '100%': { transform: 'translateX(100%)' }
});

var styles = {
  card: {
    position: 'relative',
    paddingBottom: '5px'
  },
  imageContainer: {
    overflow: 'hidden',
    position: 'relative',
    paddingTop: 9 / 16 * 100 + '%',
    backgroundColor: _colorsConfig2.default.line2
  },
  imageContainerLoading: {
    backgroundColor: _colorsConfig2.default.line2
  },
  image: {
    position: 'absolute',
    top: 0,
    width: '100%',
    display: 'block',
    textAlign: 'center'
  },
  header: {
    grid: {
      display: 'inline-flex',
      alignItems: 'center',
      position: 'relative',
      top: '0',
      marginTop: '-30px',
      backgroundColor: _colorsConfig2.default.background1
    },
    avatar: {
      marginLeft: COMPONENT_GUTTER + 'px',
      backgroundColor: _colorsConfig2.default.line2
    },
    owner: {
      marginLeft: COMPONENT_GUTTER + 'px',
      marginRight: COMPONENT_GUTTER * 2 + 'px',
      lineHeight: '1.2',

      titleLoading: {
        backgroundColor: _colorsConfig2.default.line2,
        borderBottom: '1px solid ' + _colorsConfig2.default.background1,
        width: '70px',
        height: '14px'
      },

      descriptionLoading: {
        backgroundColor: _colorsConfig2.default.line2,
        borderTop: '1px solid ' + _colorsConfig2.default.background1,
        width: '100px',
        height: '14px'
      }
    }
  },
  truncate: {
    whiteSpace: 'nowrap'
  },
  titles: {
    minHeight: '75px'
  },
  title: {
    padding: '0 ' + COMPONENT_GUTTER + 'px',
    lineHeight: '1',

    loading: {
      display: 'block',
      backgroundColor: _colorsConfig2.default.line2,
      borderBottom: '1px solid ' + _colorsConfig2.default.background1,
      height: '24px',

      small: {
        width: '70%',
        borderTop: '1px solid ' + _colorsConfig2.default.background1,
        borderBottom: 0
      }
    }
  },
  subtitle: {
    display: 'flex',
    alignItems: 'center',
    lineHeight: '1',
    padding: '0 ' + COMPONENT_GUTTER + 'px',

    loading: {
      display: 'block',
      backgroundColor: _colorsConfig2.default.line2,
      width: '80px',
      height: '12px'
    },

    text: {
      lineHeight: '1rem',
      flex: 1,
      truncated: {
        whiteSpace: 'nowrap',
        overflow: 'hidden'
      }
    }
  },
  stroke: {
    flexShrink: 0,
    margin: '5px ' + COMPONENT_GUTTER + 'px 5px 0',

    loading: {
      backgroundColor: _colorsConfig2.default.line2
    }
  },
  informations: {
    display: 'flex',
    flexWrap: 'wrap',
    padding: '0 ' + COMPONENT_GUTTER + 'px',
    lineHeight: '1',

    info: {
      marginRight: '30px',

      lastItem: {
        marginRight: 0
      },

      loading: {
        display: 'block',
        backgroundColor: _colorsConfig2.default.line2,
        borderBottom: '1px solid ' + _colorsConfig2.default.background1,
        width: '40px',
        height: '16px',

        large: {
          width: '65px',
          borderTop: '1px solid ' + _colorsConfig2.default.background1,
          borderBottom: 0
        }
      }
    }
  },
  progress: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    padding: '0 ' + COMPONENT_GUTTER + 'px',

    percent: {
      flexShrink: 0,
      marginLeft: COMPONENT_GUTTER * 2 + 'px'
    }
  },
  state: {
    position: 'absolute',
    top: '0',
    right: '0',
    display: 'inline-flex',
    alignItems: 'center',
    backgroundColor: _colorsConfig2.default.background1,
    padding: COMPONENT_GUTTER + 'px',
    lineHeight: '1'
  },

  loading: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    transform: 'translateX(-100%)',
    background: 'linear-gradient(90deg, rgba(0, 0, 0, 0), \
      rgba(255, 255, 255, .3), rgba(0, 0, 0, 0))',
    animation: 'x 1s linear infinite',
    animationName: loadingKeyframes
  }
};

CrowdfundingCardComponent.defaultProps = {
  href: null,
  imageProps: {
    backgroundColor: _colorsConfig2.default.line2,
    src: 'https://placehold.it/350x200/caf4fe/caf4fe',
    alt: ''
  },
  avatarProps: {
    src: 'https://placehold.it/100x100/caf4fe/caf4fe',
    alt: ''
  },
  ownerTitle: null,
  ownerDescription: null,
  titleProps: {},
  cardTitle: null,
  cardSubTitle: null,
  titlesMinHeight: true,
  titleTruncate: true,
  subTitleTruncate: true,
  info1: null,
  info2: null,
  info3: null,
  progress: false,
  state: null,
  loading: false
};

var CrowdfundingCard = exports.CrowdfundingCard = (0, _card.card)(CrowdfundingCardComponent, {
  light: true,
  withoutBoxShadowOnHover: true
});