@wix/design-system
Version:
@wix/design-system
28 lines • 1.55 kB
JavaScript
import React from 'react';
import { StatusAlertFilledSmall, StatusWarningFilledSmall, } from '@wix/wix-ui-icons-common';
import Box from '../../Box';
import Tooltip from '../../Tooltip';
import { useIcons } from '../../WixDesignSystemIconThemeProvider';
import { st, classes } from './RowStatusCell.st.css.js';
const renderMessages = messages => {
if (!messages?.length)
return undefined;
if (messages.length === 1)
return messages[0];
return (React.createElement("ul", { className: classes.messageList }, messages.map((line, i) => (React.createElement("li", { key: i }, line)))));
};
export const RowStatusCell = ({ status, messages }) => {
const icons = useIcons('RowStatusCell', {
StatusAlertFilledSmall,
StatusWarningFilledSmall,
});
const resolvedStatus = status === 'warning' ? 'warning' : 'error';
const Icon = resolvedStatus === 'warning'
? icons.StatusWarningFilledSmall
: icons.StatusAlertFilledSmall;
const message = renderMessages(messages);
const iconElement = (React.createElement("span", { "data-hook": "row-status-indicator", "data-status": resolvedStatus, ...(message ? { tabIndex: 0 } : {}) },
React.createElement(Icon, null)));
return (React.createElement(Box, { className: st(classes.root, { status: resolvedStatus }), align: "center", verticalAlign: "middle" }, message ? (React.createElement(Tooltip, { content: message, appendTo: "window", maxWidth: 250 }, iconElement)) : (iconElement)));
};
//# sourceMappingURL=RowStatusCell.js.map