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

Basic UX components

'use strict';

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _detailStyle2 = _interopRequireDefault(_detailStyle);

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

let index = 0; /* eslint-disable complexity */

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

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

    return _temp = super(...args), this.index = index++, _temp;
  }

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


    if (isPlaceholder) {
      return _react2.default.createElement(
        'div',
        { className: _detailStyle2.default.placeholder },
        _react2.default.createElement('div', { className: _detailStyle2.default.media }),
        _react2.default.createElement(
          'div',
          { className: _detailStyle2.default.content },
          _react2.default.createElement(
            'h2',
            { className: _detailStyle2.default.title },
            'Loading'
          ),
          _react2.default.createElement(
            'h3',
            { className: _detailStyle2.default.subtitle },
            'Loading'
          ),
          _react2.default.createElement(
            'p',
            { className: _detailStyle2.default.description },
            'Loading'
          )
        )
      );
    }

    return _react2.default.createElement(
      'div',
      { className: _detailStyle2.default.root },
      _react2.default.createElement(
        'div',
        { className: _detailStyle2.default.media },
        typeof media === 'function' && media({ dimensions: mediaDimensions, layout: 'default' }),
        typeof media === 'string' && _react2.default.createElement(
          'div',
          { className: _detailStyle2.default.mediaString },
          media
        ),
        _react2.default.isValidElement(media) && media
      ),
      _react2.default.createElement(
        'div',
        { className: _detailStyle2.default.content },
        _react2.default.createElement(
          'div',
          { className: _detailStyle2.default.top },
          _react2.default.createElement(
            'div',
            { className: _detailStyle2.default.heading },
            _react2.default.createElement(
              'h2',
              { className: _detailStyle2.default.title },
              typeof title === 'function' && title({ layout: 'detail' }) || title
            ),
            subtitle && _react2.default.createElement(
              'h3',
              { className: _detailStyle2.default.subtitle },
              typeof subtitle === 'function' && subtitle({ layout: 'detail' }) || subtitle
            )
          ),
          status && _react2.default.createElement(
            'div',
            { className: _detailStyle2.default.status },
            typeof status === 'function' && status({ layout: 'detail' }) || status
          )
        ),
        description && _react2.default.createElement(
          'p',
          { className: _detailStyle2.default.description },
          typeof description === 'function' && description({ layout: 'detail' }),
          typeof description === 'string' && description,
          typeof description === 'object' && description
        )
      ),
      children
    );
  }
}
exports.default = DetailPreview;
DetailPreview.propTypes = {
  title: fieldProp,
  subtitle: fieldProp,
  description: fieldProp,
  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
};
DetailPreview.defaultProps = {
  title: 'Untitled',
  subtitle: 'No subtitle…',
  description: 'No description…',
  media: undefined,
  status: undefined,
  children: undefined,
  isPlaceholder: false,
  mediaDimensions: { width: 120, height: 120, fit: 'crop', aspect: 1 }
};