@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
255 lines (204 loc) • 9.29 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.Provider = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));
var _Attachment = _interopRequireWildcard(require("./Attachment.Provider"));
var _Truncate = _interopRequireDefault(require("../Truncate"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Attachment2 = require("./Attachment.css");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function noop() {}
var Attachment = function Attachment(props) {
var children = props.children,
className = props.className,
content = props.content,
download = props.download,
elementClassName = props.elementClassName,
id = props.id,
imageUrl = props.imageUrl,
mime = props.mime,
name = props.name,
onClick = props.onClick,
onRemoveClick = props.onRemoveClick,
isRemovableProp = props.isRemovable,
size = props.size,
state = props.state,
target = props.target,
themeProp = props.theme,
truncateLimit = props.truncateLimit,
type = props.type,
url = props.url,
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "className", "content", "download", "elementClassName", "id", "imageUrl", "mime", "name", "onClick", "onRemoveClick", "isRemovable", "size", "state", "target", "theme", "truncateLimit", "type", "url"]);
var _useState = (0, _react.useState)(false),
isBrokenImage = _useState[0],
setBrokenImage = _useState[1];
var _ref = (0, _react.useContext)(_Attachment.AttachmentContext) || {},
themeContext = _ref.theme,
isRemovableContext = _ref.isRemovable;
var theme = themeContext || themeProp;
var isRemovable = Boolean(isRemovableContext) ? isRemovableContext : isRemovableProp;
var isThemePreview = theme === 'preview';
var attachmentProps = {
id: id,
imageUrl: imageUrl,
mime: mime,
name: name,
size: size,
url: url
};
var handleOnClick = function handleOnClick(event) {
onClick && onClick(event, attachmentProps);
};
var handleOnRemoveClick = function handleOnRemoveClick(event) {
// prevent from opening a link set on attachment if remove button clicked
event.preventDefault();
onRemoveClick && onRemoveClick(event, attachmentProps);
};
var downloadProps = {
download: download,
target: target
};
if (downloadProps.download === undefined) {
downloadProps.download = Boolean(url);
}
if (downloadProps.target === undefined) {
downloadProps.target = url ? '_blank' : '';
}
var componentClassName = (0, _classnames.default)('c-Attachment', className);
var componentElementClassName = (0, _classnames.default)('c-AttachmentElement', imageUrl && 'has-image', state && "is-" + state, type && "is-" + type, theme && "is-theme-" + theme, isBrokenImage && imageUrl && 'is-broken-image', elementClassName);
function contentMarkup() {
if (content) {
return content;
}
if (imageUrl && !isBrokenImage) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Attachment2.ImageUI, {
block: true,
className: "c-Attachment__image",
src: imageUrl,
alt: name,
onError: function onError() {
return setBrokenImage(true);
}
});
}
var nameComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Attachment2.NameUI, {
className: "c-Attachment__name",
lineHeightReset: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.default, {
limit: truncateLimit,
text: name,
type: "middle",
children: name
})
});
var sizeComponent = size && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Attachment2.SizeUI, {
className: "c-Attachment__size",
lineHeightReset: true,
children: size
});
if (isBrokenImage) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
size: "24",
name: "image-broken"
}), nameComponent]
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [nameComponent, sizeComponent]
});
}
var shouldShowRemoveIcon = isRemovable && isThemePreview;
var attachmentComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Attachment2.AttachmentElementUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
className: componentElementClassName,
href: url,
onClick: handleOnClick,
title: !isBrokenImage ? name : null
}, downloadProps, {
children: contentMarkup()
}));
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Attachment2.AttachmentUI, {
className: componentClassName,
children: [isBrokenImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
role: "tooltip",
title: "Unavailable image",
appendTo: function appendTo() {
return document.body;
},
withTriggerWrapper: false,
children: attachmentComponent
}) : attachmentComponent, shouldShowRemoveIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Attachment2.RemoveButtonUI, {
className: "c-Attachment__closeButton",
onClick: handleOnRemoveClick,
size: "sm",
title: "Remove attachment",
"aria-label": "Remove attachment",
theme: "grey",
icon: "cross-small"
})]
});
};
Attachment.defaultProps = {
'data-cy': 'Attachment',
'data-testid': 'Attachment',
mime: 'image/png',
name: 'image.png',
onClick: noop,
onRemoveClick: noop,
isRemovable: true,
truncateLimit: 20,
state: 'default',
type: 'link'
};
Attachment.propTypes = {
/** Custom class names to be added to the component. */
className: _propTypes.default.string,
/** Enables file downloaded. Allowed by default if `url` is provided. */
download: _propTypes.default.any,
/** Custom class names to be added to the element/button component. */
elementClassName: _propTypes.default.string,
/** The id of the attachment. */
id: _propTypes.default.string,
/** The URL of the an image attachment to render. */
imageUrl: _propTypes.default.string,
/** The file type of the attachment. */
mime: _propTypes.default.string,
/** The name of the attachment. */
name: _propTypes.default.string,
/** The callback when the component is clicked. */
onClick: _propTypes.default.func,
/** The callback when the component's `CloseButton` UI is clicked. */
onRemoveClick: _propTypes.default.func,
/** On theme preview, it will display a remove icon when hovering the attachment. */
isRemovable: _propTypes.default.bool,
/** The size of the attachment. */
size: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** The state of the attachment. */
state: _propTypes.default.string,
/** Determines the link target. Set to `_blank` by default if `url` is provided. */
target: _propTypes.default.string,
/** The amount of characters to truncate the file name. */
truncateLimit: _propTypes.default.number,
/** The type of UI for the component. */
type: _propTypes.default.oneOf(['action', 'link']),
/** The URL of the attachment. */
url: _propTypes.default.string,
/** Data attr for Cypress tests. */
'data-cy': _propTypes.default.string,
/** Data attr for RTL tests. */
'data-testid': _propTypes.default.string
};
Attachment.Provider = _Attachment.default;
var Provider = _Attachment.default;
exports.Provider = Provider;
var _default = Attachment;
exports.default = _default;