curls/dist/cjs/Avatar/Avatar.js

💪 Responsive, expressive UI primitives for React written with Style Hooks and Emotion

'use strict'

exports.__esModule = true
exports.Avatar = exports.useAvatar = void 0

var _react = _interopRequireWildcard(require('react'))

var _core = require('@emotion/core')

var _core2 = require('@style-hooks/core')

var _Box = require('../Box')

var _utils = require('../utils')

var styles = _interopRequireWildcard(require('./styles'))

var _getImage = _interopRequireDefault(require('./getImage'))

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

function _interopRequireWildcard(obj) {
  if (obj && obj.__esModule) {
    return obj
  } else {
    var newObj = {}
    if (obj != null) {
      for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          var desc =
            Object.defineProperty && Object.getOwnPropertyDescriptor
              ? Object.getOwnPropertyDescriptor(obj, key)
              : {}
          if (desc.get || desc.set) {
            Object.defineProperty(newObj, key, desc)
          } else {
            newObj[key] = obj[key]
          }
        }
      }
    }
    newObj.default = obj
    return newObj
  }
}

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)
}

const getOrientation = (width, height) =>
  width > height ? 'landscape' : width === height ? 'square' : 'portrait'

const useImageOrientation = () => {
  const element = (0, _react.useRef)(null),
    [orientation, setOrientation] = (0, _react.useState)('square')

  function _ref2({target}) {
    return setOrientation(
      getOrientation(target.naturalWidth, target.naturalHeight)
    )
  }

  ;(0, _react.useEffect)(() => {
    if (element.current !== null) {
      const loader = (0, _utils.loadImage)(element.current)
      loader.then(_ref2)
      return loader.cancel.bind(loader)
    }
  }, [element.current])
  return [element, orientation]
}

const defaultStyles = {
    name: '1js0tti',
    styles:
      'display:flex;position:relative;justify-content:center;align-items:center;overflow:hidden;& img{object-fit:cover;}',
  },
  supportsObjectFit = (0, _utils.supportsCSS)('object-fit')

const useAvatar = props =>
    (0, _core2.useStyles)(
      'avatar',
      styles,
      (0, _utils.pushCss)(
        _extends(
          {
            size: 'sm',
          },
          props
        ),
        defaultStyles
      )
    ),
  Avatar = _react.default.forwardRef((_ref, ref) => {
    let props = _extends({}, _ref)

    let imageRef,
      src = props.src
    if (supportsObjectFit) props.orientation = props.orientation || 'square'
    else {
      const o = useImageOrientation()
      imageRef = o[0]
      props.orientation = props.orientation || o[1]
    }
    props = (0, _Box.useBasicBox)(useAvatar(props))

    const imgProps = _extends(
      {
        src,
        ref: el => {
          imageRef !== void 0 && (imageRef.current = el)
          if (typeof ref === 'function') ref(el)
          else if (
            typeof ref === 'object' &&
            ref !== null &&
            ref.current !== void 0
          )
            ref.current = el
        },
      },
      props
    )

    delete props.alt
    delete props.defaultSrc
    props.children = (props.children || _getImage.default)(imgProps)
    return (0, _core2.createElement)('span', props)
  })

exports.Avatar = Avatar
exports.useAvatar = useAvatar

if (process.env.NODE_ENV !== 'production') {
  const propTypes = require('./propTypes').default,
    boxPropTypes = require('../Box/propTypes').default,
    flexPropTypes = require('../Flex/propTypes').default

  Avatar.displayName = 'Avatar'
  Avatar.propTypes = _extends({}, propTypes, boxPropTypes, flexPropTypes)
}