react-cm-ui/core/dataDisplay/image/image.js

React UI for Healthy Church

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _constants = require("../../global/constants");

var _colorExports = _interopRequireDefault(require("../../styles/colorExports"));

var _icon = _interopRequireDefault(require("../icon"));

var _utils = _interopRequireDefault(require("../../utils/utils"));

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

function _extends() { _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; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var asEnums = ['div', 'img'];
var typeEnums = ['person', 'user'];
var propTypes = {
  as: _propTypes["default"].oneOf(asEnums),
  border: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].number]),
  borderInverse: _propTypes["default"].bool,
  className: _propTypes["default"].string,
  dataTestId: _propTypes["default"].string,
  name: _propTypes["default"].string,
  size: _propTypes["default"].number,
  src: _propTypes["default"].string,
  style: _propTypes["default"].shape({}),
  title: _propTypes["default"].string,
  type: _propTypes["default"].oneOf(typeEnums)
};
var defaultProps = {
  as: 'img',
  border: undefined,
  borderInverse: undefined,
  dataTestId: "".concat(_constants.UI_CLASS_NAME, "-image"),
  className: undefined,
  name: undefined,
  size: undefined,
  src: undefined,
  style: {},
  title: undefined,
  type: undefined
};

function Image(props) {
  var as = props.as,
      border = props.border,
      borderInverse = props.borderInverse,
      className = props.className,
      dataTestId = props.dataTestId,
      name = props.name,
      size = props.size,
      src = props.src,
      style = props.style,
      title = props.title,
      type = props.type,
      otherProps = _objectWithoutProperties(props, ["as", "border", "borderInverse", "className", "dataTestId", "name", "size", "src", "style", "title", "type"]);

  var newStyle = style;

  var ElementType = _utils["default"].getElementType(!type ? as : 'div', props);

  var rootClasses = (0, _classnames["default"])('ui', 'image', className, {
    'image-avatar': type === 'person' || type === 'user',
    'image-avatar-person': type === 'person',
    'image-avatar-user': type === 'user'
  });

  if (ElementType === 'img') {
    newStyle = _objectSpread(_objectSpread({}, style), {}, {
      backgroundImage: src ? "url(".concat(src, ")") : null,
      width: size
    });
    return /*#__PURE__*/_react["default"].createElement(ElementType // eslint-disable-next-line react/jsx-props-no-spreading
    , _extends({}, otherProps, {
      className: rootClasses,
      "data-testid": dataTestId,
      src: src,
      style: newStyle,
      title: title
    }));
  }

  var newInitials;
  var avatarSize = 'xsmall';

  if (type) {
    var boxShadowStyle;

    if (src) {
      boxShadowStyle = 'none';
    } else {
      boxShadowStyle = !border ? "inset 0 0 0 1px ".concat(_colorExports["default"].borderColor) : null;
    }

    var borderColorStyle = borderInverse ? _colorExports["default"].borderColorInverse : _colorExports["default"].borderColor;
    var borderWidth = border === true ? '1' : border;
    newStyle = _objectSpread({
      backgroundImage: src ? "url(".concat(src, ")") : null,
      border: border ? "".concat(borderWidth, "px solid ").concat(borderColorStyle) : null,
      boxShadow: boxShadowStyle,
      fontSize: !size || size < 44 ? '.75rem' : '1.125rem',
      height: size,
      width: size
    }, style);

    if (name) {
      newInitials = name.match(/\b\w/g) || [];
      newInitials = ((newInitials.shift() || '') + (newInitials.pop() || '')).toUpperCase();
    }

    if (size >= 88) {
      avatarSize = 'xxlarge';
    } else if (size >= 66) {
      avatarSize = 'large';
    } else if (size >= 44) {
      avatarSize = 'small';
    }
  }

  return /*#__PURE__*/_react["default"].createElement(ElementType // eslint-disable-next-line react/jsx-props-no-spreading
  , _extends({}, otherProps, {
    className: rootClasses,
    "data-testid": dataTestId,
    src: !type ? src : null,
    style: newStyle,
    title: title
  }), type && !src && name && newInitials, type && !src && !name && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
    color: "static",
    compact: true,
    size: avatarSize,
    title: "This ".concat(type, " has no image"),
    type: type
  }));
}

Image.propTypes = propTypes;
Image.defaultProps = defaultProps;
var _default = Image;
exports["default"] = _default;