@ozen-ui/kit
Version:
React component library
43 lines (42 loc) • 2.5 kB
JavaScript
import { __assign, __rest } from "tslib";
import './modules/SectionMessageButton/SectionMessageButton.css';
import './SectionMessage.css';
import React, { forwardRef } from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { SECTION_MESSAGE_ICON_BY_STATUS } from './config';
import { SECTION_MESSAGE_DEFAULT_SIZE, SECTION_MESSAGE_DEFAULT_STATUS, } from './constants';
import { SectionMessageContext } from './SectionMessageContext';
export var cnSectionMessage = cn('SectionMessage');
export var SectionMessage = forwardRef(function (inProps, ref) {
var props = useThemeProps({
props: inProps,
name: 'SectionMessage',
});
var _a = props.status, status = _a === void 0 ? SECTION_MESSAGE_DEFAULT_STATUS : _a, _b = props.size, size = _b === void 0 ? SECTION_MESSAGE_DEFAULT_SIZE : _b, _c = props.showIcon, showIcon = _c === void 0 ? true : _c, children = props.children, action = props.action, title = props.title, className = props.className, otherProps = __rest(props, ["status", "size", "showIcon", "children", "action", "title", "className"]);
var iconSize = size === 'm' || size === 'l' ? 'm' : 's';
var resolveAction = function (action) {
var actionProps = {
variant: 'function',
size: size,
className: cnSectionMessage('Button'),
};
if (!action) {
return null;
}
if (typeof action === 'function') {
return action(actionProps);
}
return React.cloneElement(action, actionProps);
};
return (React.createElement(SectionMessageContext.Provider, { value: {
size: size,
} },
React.createElement("div", __assign({ className: cnSectionMessage({ status: status, size: size }, [className]), role: "alert" }, otherProps, { ref: ref }),
showIcon && (React.createElement("div", { className: cnSectionMessage('Icon') }, SECTION_MESSAGE_ICON_BY_STATUS[status][iconSize])),
React.createElement("div", { className: cnSectionMessage('Content') },
title && React.createElement("div", { className: cnSectionMessage('Title') }, title),
children && (React.createElement("div", { className: cnSectionMessage('Body') }, children)),
action && (React.createElement("div", { className: cnSectionMessage('Action') }, resolveAction(action)))))));
});
SectionMessage.displayName = 'SectionMessage';