@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 { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { ERROR_TYPE, WARNING_TYPE, INFORMATION_TYPE, SUCCESS_TYPE, ERROR, SUCCESS, WARNING, INFORMATION } from '../../i18n/i18n-defaults.js';
import { Button } from '../../webComponents/Button/index.js';
import { classNames, styleData } from './MessageViewButton.module.css.js';
import { jsx as _jsx } from "react/jsx-runtime";
const getTypes = type => {
  switch (type) {
    case ValueState.Negative:
      return {
        icon: errorIcon,
        i18nLabel: ERROR_TYPE,
        tooltip: ERROR
      };
    case ValueState.Positive:
      return {
        icon: sysEnter2Icon,
        i18nLabel: SUCCESS_TYPE,
        tooltip: SUCCESS
      };
    case ValueState.Critical:
      return {
        icon: alertIcon,
        i18nLabel: WARNING_TYPE,
        tooltip: WARNING
      };
    default:
      return {
        icon: informationIcon,
        i18nLabel: INFORMATION_TYPE,
        tooltip: INFORMATION
      };
  }
};

/**
 * 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,
    tooltip,
    accessibleName,
    ...rest
  } = props;
  useStylesheet(styleData, MessageViewButton.displayName);
  const classes = clsx(classNames.btn, className);
  const {
    icon,
    i18nLabel,
    tooltip: title
  } = getTypes(type);
  const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
  const label = i18nBundle.getText(i18nLabel);
  return /*#__PURE__*/_jsx(Button, {
    ref: ref,
    className: classes,
    icon: icon,
    ...rest,
    "data-type": type,
    tooltip: tooltip ?? i18nBundle.getText(title),
    accessibleName: accessibleName ?? `${counter > 0 ? `${counter} ` : ''}${label}`,
    children: counter > 0 && counter
  });
});
MessageViewButton.displayName = 'MessageViewButton';
export { MessageViewButton };