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

UI for React

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 { c as _c } from "react/compiler-runtime";
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';
import { jsx as _jsx } from "react/jsx-runtime";
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 = props_ => {
  const $ = _c(3);
  const theme = useOnesyTheme();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAvatar?.props?.default), props_);
  const Button = theme?.elements?.Button || ButtonElement;
  const Type = theme?.elements?.Type || TypeElement;
  const {
      tonal: t0,
      version: t1,
      size: t2,
      color: t3,
      image,
      alt,
      square,
      elevation: t4,
      disabled,
      TypeProps,
      InteractionProps,
      Component: t5,
      className,
      children: children_
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const tonal = t0 === undefined ? false : t0;
  const version = t1 === undefined ? "filled" : t1;
  const size = t2 === undefined ? "regular" : t2;
  const color_ = t3 === undefined ? "auto" : t3;
  const elevation = t4 === undefined ? 0 : t4;
  const Component = t5 === undefined ? "button" : t5;
  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"];
    }
    const t6 = `url(${image})`;
    const t7 = imageProps?.style;
    let t8;
    if ($[0] !== t6 || $[1] !== t7) {
      t8 = _objectSpread({
        backgroundImage: t6
      }, t7);
      $[0] = t6;
      $[1] = t7;
      $[2] = t8;
    } else {
      t8 = $[2];
    }
    children = /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({}, imageProps), {}, {
      className: classNames([imageProps?.className, classes.image]),
      style: t8
    }));
  } 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__*/_jsx(Type, _objectSpread(_objectSpread(_objectSpread({}, typeProps), TypeProps), {}, {
        children: children
      }));
    }
  }
  const color = color_ === "auto" ? stringToColor(children_ || "") : color_;
  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
    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: children
  }));
};
Avatar.displayName = 'onesy-Avatar';
export default Avatar;