@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
110 lines • 5.33 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 FileContentItem = function (props) {
var actionNode = props.actionNode, aspect = props.aspect, className = props.className, content = props.content, gifIcon = props.gifIcon, isProtected = props.isProtected, loading = props.loading, loadingText = props.loadingText, onClick = props.onClick, style = props.style, subtitle = props.subtitle, title = props.title, otherProps = __rest(props, ["actionNode", "aspect", "className", "content", "gifIcon", "isProtected", "loading", "loadingText", "onClick", "style", "subtitle", "title"]);
var kebabify = function (aspect) {
if (aspect === 'wide') {
aspect = 'sixteenNine';
}
if (aspect === 'tall') {
aspect = 'nineSixteen';
}
var kebab = snakeCase(aspect);
return "md-content-file--".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__container" }, otherProps),
loading ? (React.createElement("div", { className: "md-content-file", style: { backgroundImage: content && "url(".concat(content, ")") } },
React.createElement("div", { className: "".concat((content && ' md-content--opacity') || '') },
React.createElement(LoadingSpinner, { "aria-hidden": true, scale: 32 })))) : (React.createElement("div", { className: 'md-content-file__block' +
"".concat((aspect === 'oneOne' && ' content-file--no-border') ||
(aspect === 'fourThree' && ' content-file--no-border') ||
'') },
React.createElement("div", { className: "".concat((aspect && kebabify(aspect)) || '') +
"".concat((!aspect && ' md-content-file--full') || '') +
"".concat((onClick && ' md-content-file--clickable') || '') +
"".concat((className && " ".concat(className)) || ''), onKeyDown: handleKeyDown, onClick: onClick, role: "presentation", style: __assign({ backgroundImage: content && "url(".concat(content, ")") }, style) }),
!isProtected && actionNode && (React.createElement("div", { className: "md-content-file__aspect" }, actionNode)),
gifIcon && (React.createElement("i", { className: "".concat(gifIcon, " md-content__gif") +
"".concat((aspect === 'oneOne' && ' md-content__gif--oneOne') ||
(aspect === 'fourThree' && ' md-content__gif--fourThree') ||
'') })))),
React.createElement("div", { className: "md-content-file__info-container" },
title && (React.createElement("span", { title: title, key: "title", className: "md-content-file__title" }, loading ? loadingText : title)),
subtitle && (React.createElement("span", { key: "subtitle", className: "md-content-file__subtitle" }, subtitle)))));
};
FileContentItem.defaultProps = {
actionNode: null,
aspect: null,
className: '',
content: '',
gifIcon: '',
icon: '',
isProtected: null,
loading: false,
loadingText: 'Loading',
onClick: null,
style: null,
subtitle: '',
title: '',
};
FileContentItem.propTypes = {
actionNode: PropTypes.node,
aspect: PropTypes.oneOf([
'fourThree',
'nineSixteen',
'oneOne',
'sixteenNine',
'tall',
'threeFour',
'threeTwo',
'twoThree',
'wide',
]),
className: PropTypes.string,
content: PropTypes.string,
gifIcon: PropTypes.string,
icon: PropTypes.string,
isProtected: PropTypes.bool,
loading: PropTypes.bool,
loadingText: PropTypes.string,
onClick: PropTypes.func,
style: PropTypes.object,
subtitle: PropTypes.node,
title: PropTypes.string,
};
FileContentItem.displayName = 'FileContentItem';
export default FileContentItem;
//# sourceMappingURL=index.js.map