@lyra/components/lib/previews/BlockImagePreview.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 _blockImageStyle = require('part:@lyra/components/previews/block-image-style');

var _blockImageStyle2 = _interopRequireDefault(_blockImageStyle);

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

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

class BlockImagePreview extends _react2.default.PureComponent {

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


    return _react2.default.createElement(
      'div',
      { className: _blockImageStyle2.default.root },
      media && _react2.default.createElement(
        'div',
        { className: `${_blockImageStyle2.default.media}` },
        typeof media === 'function' && media({ dimensions: mediaDimensions, layout: 'blockImage' }),
        typeof media === 'string' && _react2.default.createElement(
          'div',
          { className: _blockImageStyle2.default.mediaString },
          media
        ),
        _react2.default.isValidElement(media) && media
      ),
      _react2.default.createElement(
        'div',
        { className: _blockImageStyle2.default.heading },
        _react2.default.createElement(
          'h2',
          { className: _blockImageStyle2.default.title },
          title
        ),
        subtitle && _react2.default.createElement(
          'h3',
          { className: _blockImageStyle2.default.subtitle },
          subtitle
        ),
        description && _react2.default.createElement(
          'p',
          { className: _blockImageStyle2.default.description },
          description
        ),
        status && _react2.default.createElement(
          'div',
          { className: _blockImageStyle2.default.status },
          typeof status === 'function' && status({ layout: 'default' }) || status
        )
      ),
      children && _react2.default.createElement(
        'div',
        { className: _blockImageStyle2.default.children },
        children
      )
    );
  }
}
exports.default = BlockImagePreview;
BlockImagePreview.propTypes = {
  title: _propTypes2.default.string,
  subtitle: _propTypes2.default.string,
  description: _propTypes2.default.string,
  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
  }),
  media: fieldProp,
  children: _propTypes2.default.func,
  type: _propTypes2.default.shape({
    title: _propTypes2.default.string,
    name: _propTypes2.default.string
  })
};
BlockImagePreview.defaultProps = {
  mediaDimensions: { width: 600, height: 300, aspect: 1, fit: 'fill' },
  type: {
    title: undefined,
    name: undefined
  }
};