@ui5/webcomponents-react/wrappers/components/MessageViewButton/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
import alertIcon from '@ui5/webcomponents-icons/dist/alert.js';
import errorIcon from '@ui5/webcomponents-icons/dist/error.js';
import informationIcon from '@ui5/webcomponents-icons/dist/information.js';
import sysEnter2Icon from '@ui5/webcomponents-icons/dist/sys-enter-2.js';
import { useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { Button } from '../../webComponents/index.js';
import { classNames, styleData } from './MessageViewButton.module.css.js';
import { jsx as _jsx } from "react/jsx-runtime";
const getIcon = type => {
  switch (type) {
    case ValueState.Negative:
      return errorIcon;
    case ValueState.Positive:
      return sysEnter2Icon;
    case ValueState.Critical:
      return alertIcon;
    default:
      return informationIcon;
  }
};

/**
 * The `MessageViewButton` can be used for opening a `Popover` containing the `MessageView` component. It should always reflect the message `type` with the highest severity.
 */
const MessageViewButton = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    type = ValueState.Negative,
    counter,
    className,
    ...rest
  } = props;
  useStylesheet(styleData, MessageViewButton.displayName);
  const classes = clsx(classNames.btn, className);
  const icon = getIcon(type);
  return /*#__PURE__*/_jsx(Button, {
    ref: ref,
    className: classes,
    icon: icon,
    ...rest,
    "data-type": type,
    children: counter > 1 && counter
  });
});
MessageViewButton.displayName = 'MessageViewButton';
export { MessageViewButton };