@lyra/components/lib/previews/CardPreview.js

Basic UX components

'use strict';

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

var _truncate2 = require('lodash/truncate');

var _truncate3 = _interopRequireDefault(_truncate2);

var _debounce2 = require('lodash/debounce');

var _debounce3 = _interopRequireDefault(_debounce2);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _format = require('date-fns/format');

var _format2 = _interopRequireDefault(_format);

var _cardStyle = require('part:@lyra/components/previews/card-style');

var _cardStyle2 = _interopRequireDefault(_cardStyle);

var _elementResizeDetector = require('element-resize-detector');

var _elementResizeDetector2 = _interopRequireDefault(_elementResizeDetector);

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

let index = 0;

const svgStyles = {
  position: 'relative',
  width: '100%',
  height: '100%'
};

const fieldProp = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node, _propTypes2.default.func]);

class CardPreview extends _react2.default.PureComponent {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.index = index++, this._elementResizeDetector = (0, _elementResizeDetector2.default)({ strategy: 'scroll' }), this.state = {
      emWidth: 10
    }, this.setDateElement = element => {
      this.dateElement = element;
      if (element) {
        this._elementResizeDetector.listenTo(this.dateElement, this.onResize);
      }
    }, this.onResize = (0, _debounce3.default)(() => {
      const el = this.dateElement;
      if (el) {
        const fontSize = window.getComputedStyle(el, null).getPropertyValue('font-size').split('px')[0];
        const emWidth = el.offsetWidth / fontSize;
        this.setState({
          emWidth: Math.round(emWidth)
        });
      }
    }, 1000 / 60), _temp;
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.isPlaceholder && this.dateElement) {
      this._elementResizeDetector.uninstall(this.dateElement);
    }

    if (!nextProps.isPlaceholder && this.dateElement) {
      this._elementResizeDetector.listenTo(this.dateElement, this.onResize);
    }
  }

  componentWillUnmount() {
    this._elementResizeDetector.uninstall(this.dateElement);
  }

  render() {
    var _props = this.props;
    const title = _props.title,
          subtitle = _props.subtitle,
          description = _props.description,
          date = _props.date,
          media = _props.media,
          mediaDimensions = _props.mediaDimensions,
          children = _props.children,
          isPlaceholder = _props.isPlaceholder,
          status = _props.status;
    const emWidth = this.state.emWidth;

    const aspect = mediaDimensions.aspect;

    if (isPlaceholder) {
      return _react2.default.createElement(
        'div',
        { className: _cardStyle2.default.placeholder },
        _react2.default.createElement(
          'div',
          { className: _cardStyle2.default.svg, style: svgStyles },
          _react2.default.createElement(
            'div',
            { className: _cardStyle2.default.media },
            aspect && _react2.default.createElement('div', {
              className: _cardStyle2.default.mediaPadding,
              style: {
                paddingTop: `${100 / aspect}%`
              }
            }),
            _react2.default.createElement('div', { className: _cardStyle2.default.mediaContent })
          ),
          _react2.default.createElement(
            'div',
            { className: _cardStyle2.default.meta },
            _react2.default.createElement(
              'div',
              { className: _cardStyle2.default.heading },
              _react2.default.createElement(
                'div',
                { className: _cardStyle2.default.title },
                '\xA0'
              ),
              _react2.default.createElement(
                'div',
                { className: _cardStyle2.default.date },
                '\xA0'
              )
            ),
            _react2.default.createElement(
              'div',
              { className: _cardStyle2.default.subtitle },
              '\xA0'
            ),
            _react2.default.createElement(
              'div',
              { className: _cardStyle2.default.description_1 },
              '\xA0'
            ),
            _react2.default.createElement(
              'div',
              { className: _cardStyle2.default.description_2 },
              '\xA0'
            )
          )
        )
      );
    }

    return _react2.default.createElement(
      'div',
      { className: _cardStyle2.default.root },
      _react2.default.createElement(
        'div',
        { className: _cardStyle2.default.inner },
        media && _react2.default.createElement(
          'div',
          { className: _cardStyle2.default.media },
          _react2.default.createElement('div', {
            className: _cardStyle2.default.mediaPadding,
            style: {
              paddingTop: `${100 / aspect}%`
            }
          }),
          _react2.default.createElement(
            'div',
            {
              className: aspect ? _cardStyle2.default.mediaContent : _cardStyle2.default.mediaContentRelative
            },
            typeof media === 'function' && media({ dimensions: mediaDimensions, layout: 'default' }),
            typeof media === 'string' && _react2.default.createElement(
              'div',
              { className: _cardStyle2.default.mediaString },
              media
            ),
            _react2.default.isValidElement(media) && media
          )
        ),
        _react2.default.createElement(
          'div',
          { className: _cardStyle2.default.meta },
          _react2.default.createElement(
            'div',
            { className: _cardStyle2.default.heading },
            _react2.default.createElement(
              'h2',
              { className: _cardStyle2.default.title },
              title
            ),
            status && _react2.default.createElement(
              'div',
              { className: _cardStyle2.default.status },
              typeof status === 'function' && status({ layout: 'default' }) || status
            ),
            date && _react2.default.createElement(
              'div',
              {
                ref: this.setDateElement,
                className: _cardStyle2.default.date,
                title: (0, _format2.default)(date, 'ddd, MMM Do, YYYY hh:mm A')
              },
              emWidth <= 10 && (0, _format2.default)(date, 'DD.MM.YY'),
              emWidth > 10 && emWidth <= 15 && (0, _format2.default)(date, 'DD.MM.YY hh:mm A'),
              emWidth > 15 && (0, _format2.default)(date, 'ddd, MMM Do, YYYY hh:mm A')
            )
          ),
          subtitle && _react2.default.createElement(
            'h3',
            { className: _cardStyle2.default.subtitle },
            typeof subtitle === 'function' && subtitle({ layout: 'card' }),
            typeof subtitle === 'object' && subtitle,
            typeof subtitle === 'string' && (0, _truncate3.default)(subtitle, {
              length: 30,
              separator: /,? +/
            })
          ),
          description && _react2.default.createElement(
            'p',
            { className: _cardStyle2.default.description },
            typeof description === 'function' && description({ layout: 'card' }),
            typeof description === 'object' && description,
            typeof description === 'string' && (0, _truncate3.default)(description, {
              length: 100,
              separator: /,? +/
            })
          ),
          children
        )
      )
    );
  }
}
exports.default = CardPreview;
CardPreview.propTypes = {
  title: fieldProp,
  subtitle: fieldProp,
  description: fieldProp,
  date: _propTypes2.default.instanceOf(Date),
  status: fieldProp,
  media: fieldProp,
  mediaDimensions: _propTypes2.default.shape({
    width: _propTypes2.default.number,
    height: _propTypes2.default.number,
    fit: _propTypes2.default.oneOf(['clip', 'crop', 'fill', 'fillmax', 'max', 'scale', 'min']),
    aspect: _propTypes2.default.number
  }),
  children: _propTypes2.default.node,
  isPlaceholder: _propTypes2.default.bool
};
CardPreview.defaultProps = {
  title: 'Untitled',
  subtitle: undefined,
  description: undefined,
  date: undefined,
  status: undefined,
  media: undefined,
  isPlaceholder: false,
  children: undefined,
  mediaDimensions: { width: 300, height: 225, aspect: 4 / 3, fit: 'crop' }
};