@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
37 lines • 1.88 kB
JavaScript
import React, { Children, cloneElement } from 'react';
import classnames from 'classnames';
import ToastContent from '../ToastContent';
import ToastDetails from '../ToastDetails';
import Text from '../Text';
import { STYLE, DEFAULTS } from './Toast.constants';
import './Toast.style.scss';
/**
* The `<Toast />` component.
*/
var Toast = function (props) {
var ariaLive = props.ariaLive, children = props.children, className = props.className, content = props.content, controls = props.controls, details = props.details, id = props.id, style = props.style, title = props.title, titleTagName = props.titleTagName;
var childrenArray = Children.toArray(children);
var contentChild = childrenArray.find(function (_a) {
var type = _a.type;
return type === ToastContent;
});
var detailsChild = childrenArray.find(function (_a) {
var type = _a.type;
return type === ToastDetails;
});
var contentComponent = content || contentChild || null;
var detailsComponent = details || detailsChild || null;
var mutatedDetails = controls && detailsComponent && !title
? cloneElement(detailsComponent, { controls: controls })
: detailsComponent;
var controlsComponent = controls && title ? React.createElement("div", { className: STYLE.controls }, controls) : null;
var titleComponent = title ? (React.createElement("div", { className: STYLE.header },
React.createElement(Text, { tagName: titleTagName || DEFAULTS.HEADING_LEVEL_2, type: "label-compact", className: STYLE.title }, title),
controlsComponent)) : null;
return (React.createElement("div", { className: classnames(className, STYLE.wrapper), "aria-live": ariaLive, id: id, style: style },
titleComponent,
mutatedDetails,
contentComponent));
};
export default Toast;
//# sourceMappingURL=Toast.js.map