@amaui/ui-react/esm/Avatar/Avatar.js

UI for React

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["tonal", "version", "size", "color", "image", "alt", "square", "elevation", "disabled", "TypeProps", "InteractionProps", "Component", "className", "children"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { classNames, style as styleMethod, useAmauiTheme } from '@amaui/style-react';
import ButtonElement from '../Button';
import TypeElement from '../Type';
import { staticClassName } from '../utils';
import { stringToColor } from '@amaui/utils';
const useStyle = styleMethod(theme => ({
  root: {
    '&.amaui-Button-root': {
      cursor: 'default',
      overflow: 'hidden',
      borderRadius: theme.methods.shape.radius.value(40, 'px')
    }
  },
  square: {
    borderRadius: '0px'
  },
  imageWrapper: {
    display: 'inline-flex',
    height: '100%',
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center'
  },
  image: {
    objectFit: 'cover'
  }
}), {
  name: 'amaui-Avatar'
});
const Avatar = /*#__PURE__*/React.forwardRef((props_, ref) => {
  const theme = useAmauiTheme();
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiAvatar?.props?.default), props_), [props_]);
  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
  const {
      tonal = false,
      version = 'filled',
      size = 'regular',
      color: color_ = 'auto',
      image,
      alt,
      square,
      elevation = 0,
      disabled,
      TypeProps,
      InteractionProps,
      Component = 'button',
      className,
      children: children_
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const {
    classes
  } = useStyle();
  let children = children_;
  if (image) {
    const imageProps = {
      style: {}
    };
    if (['text', 'outlined'].includes(version) && disabled) {
      imageProps.style.opacity = theme.palette.visual_contrast.default.opacity[theme.palette.light ? 'disabled' : 'active'];
    }
    children = /*#__PURE__*/React.createElement("span", {
      className: classes.imageWrapper
    }, /*#__PURE__*/React.createElement("img", _extends({
      className: classes.image,
      src: image,
      alt: alt
    }, imageProps)));
  } else if (! /*#__PURE__*/React.isValidElement(children)) {
    const typeProps = {
      version: 't1'
    };
    if (size === 'small') typeProps.size = '0.75rem';else if (size === 'regular') typeProps.size = '1rem';else if (size === 'large') typeProps.size = '1.25rem';else if (!['small', 'regular', 'large'].includes(size)) typeProps.size = `${size * 0.4 / 16}rem`;
    children = /*#__PURE__*/React.createElement(Type, _extends({}, typeProps, TypeProps), children);
  }
  const color = color_ === 'auto' ? stringToColor(children_) : color_;
  return /*#__PURE__*/React.createElement(Button, _extends({
    ref: ref,
    tonal: tonal,
    color: color,
    elevation: elevation,
    version: version,
    size: size,
    disabled: disabled,
    icon: true,
    InteractionProps: _objectSpread({
      background: false,
      wave: false
    }, InteractionProps),
    Component: Component,
    className: classNames([staticClassName('Avatar', theme) && ['amaui-Avatar-root', `amaui-Avatar-version-${version}`, `amaui-Avatar-size-${size}`], className, classes.root, square && classes.square])
  }, other), children);
});
Avatar.displayName = 'amaui-Avatar';
export default Avatar;