@onesy/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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { stringToColor } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import ButtonElement from '../Button';
import TypeElement from '../Type';
import { staticClassName } from '../utils';
const useStyle = styleMethod(theme => ({
  root: {
    '&.onesy-Button-root': {
      cursor: 'default',
      overflow: 'hidden',
      borderRadius: theme.methods.shape.radius.value(40, 'px'),
      '& .onesy-Button-icon-root': {
        width: '100%',
        height: '100%'
      }
    }
  },
  square: {
    borderRadius: '0px'
  },
  image: {
    width: '100%',
    height: '100%',
    backgroundPosition: 'center',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat'
  }
}), {
  name: 'onesy-Avatar'
});
const Avatar = /*#__PURE__*/React.forwardRef((props_, ref) => {
  const theme = useOnesyTheme();
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAvatar?.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", _extends({}, imageProps, {
      className: classNames([imageProps?.className, classes.image]),
      style: _objectSpread({
        backgroundImage: `url(${image})`
      }, imageProps?.style)
    }));
  } 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) && ['onesy-Avatar-root', `onesy-Avatar-version-${version}`, `onesy-Avatar-size-${size}`], className, classes.root, square && classes.square])
  }, other), children);
});
Avatar.displayName = 'onesy-Avatar';
export default Avatar;