@zohodesk/dot/es/avatar/AvatarStatus/AvatarStatus.js

In this Library, we Provide Some Basic Components to Build Your Application

function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import Avatar from '@zohodesk/components/es/Avatar/Avatar';
import style from "./AvatarStatus.module.css";
export default class AvatarStatus extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    let {
      src,
      name,
      size,
      onClick,
      title,
      state,
      dataId,
      initial,
      shape,
      needTitle,
      className,
      needBorder,
      palette,
      textPalette,
      customTextClass,
      statusTitle,
      customProps,
      dataSelectorId,
      needDefaultBorder
    } = this.props;
    let {
      AvatarStatusProps = {},
      AvatarProps = {}
    } = customProps;
    return /*#__PURE__*/React.createElement("div", _extends({
      className: `${style.container} ${className} `
    }, AvatarStatusProps, {
      "aria-label": `${title}, ${name}, ${statusTitle}`,
      "data-selector-id": dataSelectorId
    }), /*#__PURE__*/React.createElement(Avatar, _extends({
      src: src,
      name: name,
      palette: palette,
      textPalette: textPalette,
      customClass: customTextClass,
      title: title,
      onClick: onClick,
      size: size,
      dataId: dataId,
      initial: initial,
      shape: shape,
      needTitle: needTitle,
      needDefaultBorder: needDefaultBorder,
      needBorder: needBorder
    }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
      "data-title": statusTitle,
      className: `${style.state} ${style[state]} ${style[size]} ${style[shape]}`
    }));
  }

}
AvatarStatus.defaultProps = defaultProps;
AvatarStatus.propTypes = propTypes; // if (__DOCS__) {
//   AvatarStatus.docs = {
//     componentGroup: 'Avatar Group'
//   };
// }