@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
166 lines (164 loc) • 6.57 kB
JavaScript
'use client';
import { VALUE_STATE_ERROR, VALUE_STATE_INFORMATION, VALUE_STATE_SUCCESS, VALUE_STATE_WARNING } from '@ui5/webcomponents/dist/generated/i18n/i18n-defaults.js';
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 successIcon 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 { ARIA_OBJ_STATUS_DESC, ARIA_OBJ_STATUS_DESC_INACTIVE, EMPTY_VALUE, INDICATION_COLOR } from '../../i18n/i18n-defaults.js';
import { Icon } from '../../webComponents/Icon/index.js';
import { classNames, styleData } from './ObjectStatus.module.css.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const getStateSpecifics = (state, showDefaultIcon, userIcon, stateAnnouncementText, i18nTexts) => {
const {
indicationColorText,
errorStateText,
warningStateText,
informationStateText,
successStateText
} = i18nTexts;
let icon = userIcon;
const renderDefaultIcon = showDefaultIcon && !icon;
let invisibleText = stateAnnouncementText;
if (!invisibleText && state.startsWith('Indication')) {
invisibleText = `${indicationColorText} ${state.substring(state.indexOf('0') + 1)}`;
}
if (!invisibleText || renderDefaultIcon) {
switch (state) {
case ValueState.Negative:
if (renderDefaultIcon) {
icon = /*#__PURE__*/_jsx(Icon, {
name: errorIcon,
"data-component-name": "ObjectStatusDefaultIcon",
"aria-hidden": true
});
}
if (!invisibleText) {
invisibleText = errorStateText;
}
break;
case ValueState.Positive:
if (renderDefaultIcon) {
icon = /*#__PURE__*/_jsx(Icon, {
name: successIcon,
"data-component-name": "ObjectStatusDefaultIcon",
"aria-hidden": true
});
}
if (!invisibleText) {
invisibleText = successStateText;
}
break;
case ValueState.Critical:
if (renderDefaultIcon) {
icon = /*#__PURE__*/_jsx(Icon, {
name: alertIcon,
"data-component-name": "ObjectStatusDefaultIcon",
"aria-hidden": true
});
}
if (!invisibleText) {
invisibleText = warningStateText;
}
break;
case ValueState.Information:
if (renderDefaultIcon) {
icon = /*#__PURE__*/_jsx(Icon, {
name: informationIcon,
"data-component-name": "ObjectStatusDefaultIcon",
"aria-hidden": true
});
}
if (!invisibleText) {
invisibleText = informationStateText;
}
break;
}
}
return [icon, invisibleText];
};
/**
* Status information that can be either text with a value state, or an icon.
*/
const ObjectStatus = /*#__PURE__*/forwardRef((props, ref) => {
const {
state = ValueState.None,
showDefaultIcon,
children,
icon,
className,
style,
interactive,
inverted,
onClick,
emptyIndicator,
stateAnnouncementText,
large,
...rest
} = props;
const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
const i18nBundleWc = useI18nBundle('@ui5/webcomponents');
useStylesheet(styleData, ObjectStatus.displayName);
const indicationColorText = i18nBundle.getText(INDICATION_COLOR);
const errorStateText = i18nBundleWc.getText(VALUE_STATE_ERROR);
const warningStateText = i18nBundleWc.getText(VALUE_STATE_WARNING);
const informationStateText = i18nBundleWc.getText(VALUE_STATE_INFORMATION);
const successStateText = i18nBundleWc.getText(VALUE_STATE_SUCCESS);
const [iconToRender, invisibleText] = getStateSpecifics(state, showDefaultIcon, icon, stateAnnouncementText, {
indicationColorText,
errorStateText,
warningStateText,
informationStateText,
successStateText
});
const showEmptyIndicator = emptyIndicator && !children;
const computedChildren = showEmptyIndicator ? /*#__PURE__*/_jsx("span", {
"aria-hidden": showEmptyIndicator,
"data-component-name": "ObjectStatusEmptyIndicator",
className: classNames.emptyIndicator,
children: "\u2013"
}) : children;
const objStatusClasses = clsx(classNames.normalizeCSS, classNames.objectStatus, classNames[`${state}`.toLowerCase()], interactive && classNames.active, inverted && !showEmptyIndicator && classNames.inverted, large && classNames.large, className);
const TagName = interactive ? 'button' : 'div';
return /*#__PURE__*/_jsxs(TagName
// @ts-expect-error: both refs are allowed (attributes, etc. of HTMLButtonElement should only be used if `interactive` is `true`)
, {
ref: ref,
className: objStatusClasses,
style: style
// @ts-expect-error: onClick is only registered if the event target is a HTMLButtonElement
,
onClick: interactive ? onClick : undefined,
tabIndex: interactive ? 0 : undefined,
"data-icon-only": !children,
role: interactive ? 'button' : 'group',
...rest,
children: [/*#__PURE__*/_jsx("span", {
className: classNames.pseudoInvisibleText,
"data-component-name": "ObjectStatusInvisibleDescriptionContainer",
children: interactive ? i18nBundle.getText(ARIA_OBJ_STATUS_DESC) : i18nBundle.getText(ARIA_OBJ_STATUS_DESC_INACTIVE)
}), iconToRender && /*#__PURE__*/_jsx("span", {
className: classNames.icon,
"data-icon-only": !children,
"data-component-name": "ObjectStatusIconContainer",
children: iconToRender
}), computedChildren && /*#__PURE__*/_jsxs("span", {
className: classNames.text,
"data-component-name": "ObjectStatusTextContainer",
children: [computedChildren, showEmptyIndicator && /*#__PURE__*/_jsx("span", {
className: classNames.pseudoInvisibleText,
"data-component-name": "ObjectStatusInvisibleEmptyTextContainer",
children: i18nBundle.getText(EMPTY_VALUE)
})]
}), !!invisibleText && (computedChildren || iconToRender) && /*#__PURE__*/_jsx("span", {
className: classNames.pseudoInvisibleText,
"data-component-name": "ObjectStatusInvisibleTextContainer",
children: invisibleText
})]
});
});
ObjectStatus.displayName = 'ObjectStatus';
export { ObjectStatus };