@openshift-console/dynamic-plugin-sdk
Version:
Provides core APIs, types and utilities used by dynamic plugins at runtime.
30 lines (29 loc) • 1.4 kB
JavaScript
import * as React from 'react';
import classNames from 'classnames';
import { DASH } from '../../constants';
import CamelCaseWrap from '../utils/camel-case-wrap';
/**
* Component for displaying a status icon and text
* @param {string} [title] - (optional) status text
* @param {boolean} [iconOnly] - (optional) if true, only displays icon
* @param {boolean} [noTooltip] - (optional) if true, tooltip won't be displayed
* @param {string} [className] - (optional) additional class name for the component
* @param {React.ReactElement} [icon] - (optional) icon to be displayed
* @param {boolean} [spin] - (optional) if true, icon rotates
* @example
* ```tsx
* <StatusIconAndText title={title} icon={renderIcon} />
* ```
*/
const StatusIconAndText = ({ icon, title, spin, iconOnly, noTooltip, className, }) => {
if (!title) {
return React.createElement(React.Fragment, null, DASH);
}
return (React.createElement("span", { className: classNames('co-icon-and-text', className), title: iconOnly && !noTooltip ? title : undefined },
icon &&
React.cloneElement(icon, {
className: classNames(spin && 'co-spin', icon.props.className, !iconOnly && 'co-icon-and-text__icon co-icon-flex-child'),
}),
!iconOnly && React.createElement(CamelCaseWrap, { value: title, dataTest: "status-text" })));
};
export default StatusIconAndText;