@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
74 lines • 3.57 kB
JavaScript
import React, { Children, cloneElement } from 'react';
import classnames from 'classnames';
import { STYLE } from './MeetingRowContent.constants';
import { DEFAULTS as MEETING_LIST_ITEM_DEFAULTS } from '../MeetingListItem/MeetingListItem.constants';
import './MeetingRowContent.style.scss';
import ListItemBaseSection from '../ListItemBaseSection';
import { verifyTypes } from '../../helpers/verifyTypes';
import ButtonPill from '../ButtonPill';
import ButtonCircle from '../ButtonCircle';
import Avatar from '../Avatar';
import Icon from '../Icon';
/**
* The MeetingRowContent component.
*/
var MeetingRowContent = function (props) {
var _a;
var children = props.children, _b = props.color, color = _b === void 0 ? MEETING_LIST_ITEM_DEFAULTS.color : _b, isDisabled = props.isDisabled, buttonGroup = props.buttonGroup, image = props.image;
var getRestrictedProps = function (element) {
var sizeProps = {};
if (verifyTypes(element, ButtonPill)) {
sizeProps['size'] = 28;
sizeProps['disabled'] = isDisabled;
}
else if (verifyTypes(element, ButtonCircle)) {
sizeProps['size'] = 32;
sizeProps['disabled'] = isDisabled;
}
else if (verifyTypes(element, Icon)) {
// Because this constraints get applied recursively to the children,
// I still want to be able to override some of the props (like scale).
if (!element.props.scale) {
sizeProps['scale'] = 12;
sizeProps['strokeColor'] = 'none';
sizeProps['weight'] = 'bold';
}
}
else if (verifyTypes(element, Avatar)) {
sizeProps['size'] = 32;
}
return sizeProps;
};
var getSizedElement = function (element) {
if (element && React.isValidElement(element)) {
var elementChildren = element.props['children'];
var sizedChildren_1;
if (elementChildren) {
if (Array.isArray(elementChildren)) {
sizedChildren_1 = [];
Children.map(elementChildren, function (child) {
sizedChildren_1.push(getSizedElement(child));
});
}
else {
sizedChildren_1 = getSizedElement(elementChildren);
}
}
return cloneElement(element, getRestrictedProps(element), sizedChildren_1);
}
return element;
};
var buttonSection = buttonGroup;
if (buttonGroup && React.isValidElement(buttonGroup)) {
buttonSection = getSizedElement(buttonGroup);
}
var middleSectionColorClass = color ? " md-meeting-row-content-middle-section-".concat(color) : '';
return (React.createElement(React.Fragment, null,
React.createElement(ListItemBaseSection, { className: classnames(STYLE.startSection, (_a = {}, _a[STYLE.startSectionNoImage] = !image, _a)), position: "start" },
React.createElement("div", { className: STYLE.border, "data-color": color }),
React.isValidElement(image) ? getSizedElement(image) : image),
React.createElement(ListItemBaseSection, { className: "".concat(STYLE.middleSection).concat(middleSectionColorClass), position: "middle" }, getSizedElement(children)),
buttonSection && (React.createElement(ListItemBaseSection, { className: STYLE.endSection, position: "end" }, buttonSection))));
};
export default MeetingRowContent;
//# sourceMappingURL=MeetingRowContent.js.map