@ozen-ui/kit
Version:
React component library
46 lines (45 loc) • 2.88 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SectionMessage = exports.cnSectionMessage = void 0;
var tslib_1 = require("tslib");
require("./modules/SectionMessageButton/SectionMessageButton.css");
require("./SectionMessage.css");
var react_1 = tslib_1.__importStar(require("react"));
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var config_1 = require("./config");
var constants_1 = require("./constants");
var SectionMessageContext_1 = require("./SectionMessageContext");
exports.cnSectionMessage = (0, classname_1.cn)('SectionMessage');
exports.SectionMessage = (0, react_1.forwardRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'SectionMessage',
});
var _a = props.status, status = _a === void 0 ? constants_1.SECTION_MESSAGE_DEFAULT_STATUS : _a, _b = props.size, size = _b === void 0 ? constants_1.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 = tslib_1.__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: (0, exports.cnSectionMessage)('Button'),
};
if (!action) {
return null;
}
if (typeof action === 'function') {
return action(actionProps);
}
return react_1.default.cloneElement(action, actionProps);
};
return (react_1.default.createElement(SectionMessageContext_1.SectionMessageContext.Provider, { value: {
size: size,
} },
react_1.default.createElement("div", tslib_1.__assign({ className: (0, exports.cnSectionMessage)({ status: status, size: size }, [className]), role: "alert" }, otherProps, { ref: ref }),
showIcon && (react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Icon') }, config_1.SECTION_MESSAGE_ICON_BY_STATUS[status][iconSize])),
react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Content') },
title && react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Title') }, title),
children && (react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Body') }, children)),
action && (react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Action') }, resolveAction(action)))))));
});
exports.SectionMessage.displayName = 'SectionMessage';