@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
126 lines (125 loc) • 5.13 kB
JavaScript
const _excluded = ["showFileIcon", "className", "href", "info", "text", "details", "icon", "fileIcon"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
/**
* DecorativeLink module.
* @module @massds/mayflower-react/DecorativeLink
* @requires module:@massds/mayflower-assets/scss/01-atoms/decorative-link
* @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
* @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
*/
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
// eslint-disable-next-line import/no-unresolved
import IconDocPdf from "../Icon/IconDocPdf.mjs";
// eslint-disable-next-line import/no-unresolved
import IconDocDocx from "../Icon/IconDocDocx.mjs";
// eslint-disable-next-line import/no-unresolved
import IconDocXlsx from "../Icon/IconDocXlsx.mjs";
// eslint-disable-next-line import/no-unresolved
import IconDocGeneric from "../Icon/IconDocGeneric.mjs";
// eslint-disable-next-line import/no-unresolved
import IconArrow from "../Icon/IconArrow.mjs";
// eslint-disable-next-line import/no-unresolved
import IconDownload from "../Icon/IconDownload.mjs";
const DecorativeLink = props => {
var _classNames;
const showFileIcon = props.showFileIcon,
className = props.className,
href = props.href,
info = props.info,
text = props.text,
details = props.details,
icon = props.icon,
fileIcon = props.fileIcon,
rest = _objectWithoutPropertiesLoose(props, _excluded);
const classes = classNames((_classNames = {
'ma__decorative-link': true,
'ma__download-link': showFileIcon
}, _classNames[props.className] = className, _classNames));
let preIcon;
let title;
let postIcon = /*#__PURE__*/React.createElement(IconArrow, {
width: "0.8em",
height: "0.8em"
});
if (showFileIcon) {
// eslint-disable-next-line no-bitwise
const getFileExtension = filename => filename.slice((filename.lastIndexOf('.') - 1 >>> 0) + 2);
let ext = getFileExtension(href);
title = ext + " file";
const genericFile = ['csv', 'doc', 'docm', 'dot', 'dotx', 'dwg', 'geojson', 'gif', 'json', 'jpg', 'kml', 'kmz', 'mp3', 'mpp', 'msg', 'odf', 'ods', 'odt', 'png', 'pps', 'ppsx', 'potx', 'ppt', 'pptm', 'pptx', 'ppsm', 'prx', 'pub', 'rdf', 'rtf', 'tiff', 'tsv', 'txt', 'xls', 'xlsb', 'xlsm', 'xml', 'zip'];
ext = genericFile.indexOf(ext) !== -1 ? 'generic' : ext;
postIcon = /*#__PURE__*/React.createElement(IconDownload, {
width: "0.8em",
height: "0.8em"
});
switch (ext) {
case 'pdf':
preIcon = /*#__PURE__*/React.createElement(IconDocPdf, {
title: title,
height: 28,
width: 28,
bold: false
});
break;
case 'docx':
preIcon = /*#__PURE__*/React.createElement(IconDocDocx, {
title: title,
height: 28,
width: 28,
bold: false
});
break;
case 'xlxs':
preIcon = /*#__PURE__*/React.createElement(IconDocXlsx, {
title: title,
height: 28,
width: 28,
bold: false
});
break;
case 'generic':
preIcon = /*#__PURE__*/React.createElement(IconDocGeneric, {
title: title,
height: 28,
width: 28,
bold: false
});
break;
default:
preIcon = null;
postIcon = /*#__PURE__*/React.createElement(IconArrow, {
width: "0.8em",
height: "0.8em"
});
}
}
return /*#__PURE__*/React.createElement("span", {
className: classes
}, /*#__PURE__*/React.createElement("a", _extends({}, rest, {
href: href,
title: info || null
}), (fileIcon || preIcon) && /*#__PURE__*/React.createElement("span", {
className: "ma__download-link--icon"
}, fileIcon || preIcon, /*#__PURE__*/React.createElement("span", null, "\xA0")), /*#__PURE__*/React.createElement("span", null, text), details && /*#__PURE__*/React.createElement("span", {
className: "ma__decorative-link__details"
}, /*#__PURE__*/React.createElement("span", null, "\xA0"), /*#__PURE__*/React.createElement("span", null, details)), /*#__PURE__*/React.createElement("span", null, "\xA0"), icon || postIcon));
};
DecorativeLink.propTypes = process.env.NODE_ENV !== "production" ? {
href: PropTypes.string,
info: PropTypes.string,
text: PropTypes.string,
showFileIcon: PropTypes.bool,
className: PropTypes.string,
details: PropTypes.string,
icon: PropTypes.element,
fileIcon: PropTypes.element
} : {};
DecorativeLink.defaultProps = {
href: '#',
text: 'Lorem ipsum dolor sit amet',
showFileIcon: false
};
export default DecorativeLink;