@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
114 lines • 5.26 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import PropTypes from 'prop-types';
import { snakeCase } from '../../utils/snakeCase';
import LoadingSpinner from '../../../components/LoadingSpinner';
/**
* @deprecated - Components in the legacy folder (/src/legacy) are deprecated. Please use a component from the components folder (/src/components) instead. Legacy components may not follow accessibility standards.
**/
var ChatContentItem = function (props) {
var actionNode = props.actionNode, aspect = props.aspect, className = props.className, content = props.content, gifIcon = props.gifIcon, isProtected = props.isProtected, loading = props.loading, subtitle = props.subtitle, onClick = props.onClick, style = props.style, title = props.title, otherProps = __rest(props, ["actionNode", "aspect", "className", "content", "gifIcon", "isProtected", "loading", "subtitle", "onClick", "style", "title"]);
delete otherProps.fileSize;
var kebabify = function (holder, aspect) {
var cases = ['fourThree', 'sixteenNine', 'threeTwo'];
var kebab = snakeCase(aspect);
if (holder === 'container') {
if (cases.includes(aspect)) {
return " md-content__chat-".concat(kebab);
}
}
else if (holder === 'inner') {
if (cases.includes(aspect)) {
return ' md-content-file--full';
}
else {
return " md-content-file--chat-".concat(kebab);
}
}
};
var handleKeyDown = function (e) {
if (e.which === 32 || e.which === 13 || e.charCode === 32 || e.charCode === 13) {
onClick && onClick(e);
e.preventDefault();
}
};
return (React.createElement("div", __assign({ className: 'md-content__chat-inner-container' +
"".concat((aspect === 'wide' && ' md-content__chat-wide-container') || '') +
"".concat((aspect && kebabify('container', aspect)) || '') }, otherProps),
React.createElement("div", { className: "".concat((aspect && kebabify('inner', aspect)) || '') +
"".concat((!aspect && ' md-content-file--full') || '') +
"".concat((onClick && ' md-content-file--clickable') || '') +
"".concat((className && " ".concat(className)) || ''), onClick: onClick, onKeyDown: handleKeyDown, role: "presentation", style: __assign({ backgroundImage: content && "url(".concat(content, ")") }, style) },
loading && (React.createElement("div", { className: "".concat(content ? ' md-content--opacity' : ' md-content--centered') },
React.createElement(LoadingSpinner, { scale: 32, "aria-hidden": true }))),
gifIcon && React.createElement("i", { className: "".concat(gifIcon, " md-content__gif") })),
!loading && (React.createElement("div", { className: 'md-content__hover' + "".concat((aspect === 'wide' && ' md-content__hover--wide') || '') },
React.createElement("div", { className: "md-content__hover-files" },
React.createElement("span", { title: title, className: "md-content__hover-files--file-name" }, title),
React.createElement("span", { className: "md-content__hover-files--file-size" }, subtitle)),
actionNode && !isProtected && (React.createElement("div", { className: "md-content__hover-icons" }, actionNode))))));
};
ChatContentItem.defaultProps = {
actionNode: null,
aspect: null,
className: '',
content: '',
fileSize: '',
gifIcon: '',
isProtected: null,
loading: false,
subtitle: '',
onClick: null,
style: null,
title: '',
type: '',
};
ChatContentItem.propTypes = {
actionNode: PropTypes.node,
aspect: PropTypes.oneOf([
'oneOne',
'tall',
'threeFour',
'wide',
'fourThree',
'nineSixteen',
'sixteenNine',
'twoThree',
'threeTwo',
]),
className: PropTypes.string,
content: PropTypes.string,
fileSize: PropTypes.string,
gifIcon: PropTypes.string,
isProtected: PropTypes.bool,
loading: PropTypes.bool,
subtitle: PropTypes.node,
onClick: PropTypes.func,
style: PropTypes.object,
title: PropTypes.string,
type: PropTypes.string,
};
ChatContentItem.displayName = 'ChatContentItem';
export default ChatContentItem;
//# sourceMappingURL=index.js.map