@procore/core-react
Version:
React library of Procore Design Guidelines
568 lines (560 loc) • 27.9 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var _excluded = ["hasCaptionPlaceholder", "caption", "label", "disabled"],
_excluded2 = ["hasCaptionPlaceholder", "caption", "label", "disabled", "role"],
_excluded3 = ["children", "as", "label", "name", "onChange", "role", "qa", "value"],
_excluded4 = ["caption", "hasCaptionPlaceholder", "src"],
_excluded5 = ["hasCaptionPlaceholder", "disabled", "role"],
_excluded6 = ["children", "as", "label", "name", "onChange", "role", "qa", "value"],
_excluded7 = ["caption", "hasCaptionPlaceholder", "src", "disabled"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import { mergeProps } from '@react-aria/utils';
import { VisuallyHidden } from '@react-aria/visually-hidden';
import React, { useState } from 'react';
import { Tooltip } from '../Tooltip';
import { useI18nContext } from '../_hooks/I18n';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { mergeRefs } from '../_utils/mergeRefs';
import { useThumbnail } from './Thumbnail.hooks';
import { StyledFileIcon, StyledImageThumbnail, StyledImageThumbnailImage, StyledImageThumbnailOverlay, StyledLabel, StyledLabelText, StyledPlaceholderThumbnail, StyledThumbnailFigCaption, StyledThumbnailWrapper, StyledTickIcon } from './Thumbnail.styles';
import { getThumbnailAriaLabel, getThumbnailVariantForFilename } from './Thumbnail.utils';
import { ThumbnailCaption } from './ThumbnailCaption';
import { ThumbnailPreview } from './ThumbnailPreview';
var defaultSize = 'lg';
function TickIcon(_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? defaultSize : _ref$size,
selected = _ref.selected;
var i18n = useI18nContext();
return /*#__PURE__*/React.createElement(StyledTickIcon, {
"aria-hidden": selected ? false : true,
"aria-label": selected ? i18n.t('core.thumbnail.checked') : undefined
// in IE11, all svg element are focusable by default
,
focusable: false,
$selected: selected,
$size: size,
width: "26",
height: "26",
viewBox: "0 0 26 26",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("path", {
d: "M1 13C1 6.37258 6.37258 1 13 1C19.6274 1 25 6.37258 25 13C25 19.6274 19.6274 25 13 25C6.37258 25 1 19.6274 1 13Z",
fill: "white"
}), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M11.167 17.5L7 13.459L8.6155 12.0535L11.167 14.5285L17.3845 8.5L19 9.9055L11.167 17.5ZM13 1C6.3715 1 1 6.373 1 13C1 19.627 6.3715 25 13 25C19.627 25 25 19.627 25 13C25 6.373 19.627 1 13 1Z",
fill: "hsl(218,75%,50%)"
}), /*#__PURE__*/React.createElement("path", {
d: "M13 24C6.92487 24 2 19.0751 2 13H0C0 20.1797 5.8203 26 13 26V24ZM24 13C24 19.0751 19.0751 24 13 24V26C20.1797 26 26 20.1797 26 13H24ZM13 2C19.0751 2 24 6.92487 24 13H26C26 5.8203 20.1797 0 13 0V2ZM13 0C5.8203 0 0 5.8203 0 13H2C2 6.92487 6.92487 2 13 2V0Z",
fill: "white"
}));
}
function FigCaption(_ref2) {
var label = _ref2.label,
disabled = _ref2.disabled;
if (!label) {
return null;
}
return /*#__PURE__*/React.createElement(StyledThumbnailFigCaption, {
$color: disabled ? 'gray70' : 'gray15'
}, label);
}
function Label(_ref3) {
var label = _ref3.label;
if (!label) {
return null;
}
return /*#__PURE__*/React.createElement(StyledLabel, null, /*#__PURE__*/React.createElement(StyledLabelText, {
intent: "small",
weight: "bold"
}, label));
}
function ThumbnailCaptionTooltip(_ref4) {
var caption = _ref4.caption,
captionOverflowing = _ref4.captionOverflowing,
children = _ref4.children;
return /*#__PURE__*/React.createElement(Tooltip, {
overlay: /*#__PURE__*/React.createElement(Tooltip.Content, null, caption),
placement: "bottom",
trigger: captionOverflowing && caption ? ['hover', 'focus'] : 'none'
}, children);
}
var BasePlaceholder = /*#__PURE__*/React.forwardRef(function BasePlaceholder(props, ref) {
var _props$filename, _thumbnail$qa;
var i18n = useI18nContext();
var thumbnail = useThumbnail(props);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
captionOverflowing = _useState2[0],
setCaptionOverflowing = _useState2[1];
var hasCaptionPlaceholder = props.hasCaptionPlaceholder,
caption = props.caption,
label = props.label,
_disabled = props.disabled,
wrapperProps = _objectWithoutProperties(props, _excluded);
var ariaLabel = getThumbnailAriaLabel(i18n, thumbnail.label, thumbnail.caption);
return /*#__PURE__*/React.createElement(ThumbnailCaptionTooltip, {
caption: thumbnail.caption,
captionOverflowing: captionOverflowing
}, /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
ref: ref,
$layout: thumbnail.layout,
$size: thumbnail.size,
tabIndex: 0,
role: "group",
"aria-label": ariaLabel
}, wrapperProps), /*#__PURE__*/React.createElement(StyledPlaceholderThumbnail, {
$focused: thumbnail.focused,
$disabled: thumbnail.disabled,
$selected: thumbnail.selected,
$clickable: thumbnail.clickable,
$size: thumbnail.size
}, /*#__PURE__*/React.createElement(TickIcon, {
size: thumbnail.size,
selected: thumbnail.toggleState.isSelected
}), /*#__PURE__*/React.createElement(StyledFileIcon, {
variant: props.variant || getThumbnailVariantForFilename((_props$filename = props.filename) !== null && _props$filename !== void 0 ? _props$filename : '')
}), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
label: thumbnail.label,
disabled: thumbnail.disabled
}), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
error: thumbnail.error,
qa: (_thumbnail$qa = thumbnail.qa) === null || _thumbnail$qa === void 0 ? void 0 : _thumbnail$qa.caption,
multiline: thumbnail.size === 'lg',
layout: thumbnail.layout,
caption: thumbnail.caption,
hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
disabled: thumbnail.disabled,
onCaptionOverflowChange: setCaptionOverflowing
}), thumbnail.disabled && !thumbnail.clickable && /*#__PURE__*/React.createElement(VisuallyHidden, null, i18n.t('core.thumbnail.unavailable', {
defaultValue: 'Content is unavailable'
}))));
});
var FigurePlaceholder = /*#__PURE__*/React.forwardRef(function FigurePlaceholder(props, ref) {
var _props$filename2, _thumbnail$qa2;
var thumbnail = useThumbnail(props);
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
captionOverflowing = _useState4[0],
setCaptionOverflowing = _useState4[1];
var hasCaptionPlaceholder = props.hasCaptionPlaceholder,
caption = props.caption,
label = props.label,
_disabled = props.disabled,
_role = props.role,
wrapperProps = _objectWithoutProperties(props, _excluded2);
var i18n = useI18nContext();
var ariaLabel = getThumbnailAriaLabel(i18n, thumbnail.label, thumbnail.caption);
return /*#__PURE__*/React.createElement(ThumbnailCaptionTooltip, {
caption: thumbnail.caption,
captionOverflowing: captionOverflowing
}, /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
ref: ref,
$layout: thumbnail.layout,
$size: thumbnail.size,
tabIndex: 0,
role: "group",
"aria-label": ariaLabel
}, wrapperProps), /*#__PURE__*/React.createElement(StyledPlaceholderThumbnail, {
$focused: thumbnail.focused,
$disabled: thumbnail.disabled,
$selected: thumbnail.selected,
$clickable: thumbnail.clickable,
$size: thumbnail.size,
as: thumbnail.as
}, /*#__PURE__*/React.createElement(TickIcon, {
size: thumbnail.size,
selected: thumbnail.toggleState.isSelected
}), /*#__PURE__*/React.createElement(StyledFileIcon, {
variant: props.variant || getThumbnailVariantForFilename((_props$filename2 = props.filename) !== null && _props$filename2 !== void 0 ? _props$filename2 : '')
}), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(FigCaption, {
label: thumbnail.label,
disabled: thumbnail.disabled
}), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
error: thumbnail.error,
qa: (_thumbnail$qa2 = thumbnail.qa) === null || _thumbnail$qa2 === void 0 ? void 0 : _thumbnail$qa2.caption,
multiline: thumbnail.size === 'lg',
layout: thumbnail.layout,
caption: thumbnail.caption,
hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
disabled: thumbnail.disabled,
onCaptionOverflowChange: setCaptionOverflowing
}), thumbnail.disabled && !thumbnail.clickable && /*#__PURE__*/React.createElement(VisuallyHidden, null, i18n.t('core.thumbnail.unavailable', {
defaultValue: 'Content is unavailable'
}))));
});
var CheckboxPlaceholder = /*#__PURE__*/React.forwardRef(function CheckboxPlaceholder(_ref5, ref) {
var _props$filename3, _thumbnail$qa3;
var children = _ref5.children,
as = _ref5.as,
label = _ref5.label,
name = _ref5.name,
onChange = _ref5.onChange,
role = _ref5.role,
_qa = _ref5.qa,
value = _ref5.value,
props_ = _objectWithoutProperties(_ref5, _excluded3);
var props = _objectSpread(_objectSpread({}, props_), {}, {
as: as,
label: label,
onChange: onChange,
role: role,
value: value,
isDisabled: props_.disabled,
isSelected: props_.checked,
defaultSelected: props_.defaultChecked
});
var thumbnail = useThumbnail(props);
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
captionOverflowing = _useState6[0],
setCaptionOverflowing = _useState6[1];
var caption = props_.caption,
hasCaptionPlaceholder = props_.hasCaptionPlaceholder,
src = props_.src,
wrapperProps = _objectWithoutProperties(props_, _excluded4);
var isInputFocused = document.activeElement === thumbnail.inputRef.current;
var i18n = useI18nContext();
var ariaLabel = getThumbnailAriaLabel(i18n, thumbnail.label, thumbnail.caption) || i18n.t('core.thumbnail.select');
var preventSpaceOnDisabledThumbnail = function preventSpaceOnDisabledThumbnail(e) {
if (e.key === ' ' && thumbnail.disabled) {
e.preventDefault();
}
};
React.useEffect(function () {
if (props.focused && thumbnail.inputRef.current) {
thumbnail.inputRef.current.focus();
}
}, [props.focused, thumbnail.inputRef]);
return /*#__PURE__*/React.createElement(ThumbnailCaptionTooltip, {
caption: thumbnail.caption,
captionOverflowing: captionOverflowing
}, /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
$layout: thumbnail.layout,
$size: thumbnail.size
}, wrapperProps, {
onClick: function onClick(e) {
if (!thumbnail.disabled) {
var _thumbnail$onClick;
thumbnail.toggleState.toggle();
(_thumbnail$onClick = thumbnail.onClick) === null || _thumbnail$onClick === void 0 ? void 0 : _thumbnail$onClick.call(thumbnail, e);
}
}
}), /*#__PURE__*/React.createElement(StyledPlaceholderThumbnail, {
$focused: thumbnail.focused || isInputFocused,
$disabled: thumbnail.disabled,
$selected: thumbnail.selected,
$clickable: thumbnail.clickable,
$size: thumbnail.size
}, /*#__PURE__*/React.createElement(TickIcon, {
size: thumbnail.size,
selected: thumbnail.toggleState.isSelected
}), /*#__PURE__*/React.createElement(StyledFileIcon, {
variant: props.variant || getThumbnailVariantForFilename((_props$filename3 = props.filename) !== null && _props$filename3 !== void 0 ? _props$filename3 : '')
}), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
label: thumbnail.label,
disabled: thumbnail.disabled
}), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
error: thumbnail.error,
qa: (_thumbnail$qa3 = thumbnail.qa) === null || _thumbnail$qa3 === void 0 ? void 0 : _thumbnail$qa3.caption,
multiline: thumbnail.size === 'lg',
layout: thumbnail.layout,
caption: thumbnail.caption,
hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
disabled: thumbnail.disabled,
onCaptionOverflowChange: setCaptionOverflowing
}), /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", _extends({
type: "checkbox",
ref: mergeRefs(thumbnail.inputRef, ref),
"aria-label": ariaLabel
}, mergeProps(thumbnail.inputProps, thumbnail.focusProps), {
disabled: thumbnail.disabled,
onKeyDown: preventSpaceOnDisabledThumbnail
})))));
});
function PlaceholderInner(props, ref) {
switch (props.role) {
case 'checkbox':
{
return /*#__PURE__*/React.createElement(CheckboxPlaceholder, _extends({
ref: ref
}, props));
}
case 'figure':
{
return /*#__PURE__*/React.createElement(FigurePlaceholder, _extends({
ref: ref
}, props));
}
default:
{
return /*#__PURE__*/React.createElement(BasePlaceholder, _extends({
ref: ref
}, props));
}
}
}
var BaseThumbnail = /*#__PURE__*/React.forwardRef(function BaseThumbnail(props, ref) {
var _thumbnail$filename, _thumbnail$qa4;
var i18n = useI18nContext();
var thumbnail = useThumbnail(props);
var _useState7 = useState(false),
_useState8 = _slicedToArray(_useState7, 2),
captionOverflowing = _useState8[0],
setCaptionOverflowing = _useState8[1];
var hasCaptionPlaceholder = props.hasCaptionPlaceholder,
_disabled = props.disabled,
_role = props.role,
wrapperProps = _objectWithoutProperties(props, _excluded5);
var ariaLabel = getThumbnailAriaLabel(i18n, thumbnail.label, thumbnail.caption);
return /*#__PURE__*/React.createElement(ThumbnailCaptionTooltip, {
caption: thumbnail.caption,
captionOverflowing: captionOverflowing
}, /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
ref: ref,
$layout: thumbnail.layout,
$size: thumbnail.size,
tabIndex: 0,
role: "group",
"aria-label": ariaLabel
}, wrapperProps), /*#__PURE__*/React.createElement(StyledImageThumbnail, {
$focused: thumbnail.focused,
$disabled: thumbnail.disabled,
$selected: thumbnail.selected,
$clickable: thumbnail.clickable,
$size: thumbnail.size
}, thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? /*#__PURE__*/React.createElement(StyledImageThumbnailImage, {
src: thumbnail.src,
alt: thumbnail.alt
}) : /*#__PURE__*/React.createElement(ThumbnailPreview, {
file: thumbnail.src,
"aria-label": thumbnail.alt
}), /*#__PURE__*/React.createElement(TickIcon, {
size: thumbnail.size,
selected: thumbnail.toggleState.isSelected
}), thumbnail.shouldUsePlaceholder && /*#__PURE__*/React.createElement(StyledFileIcon, {
variant: thumbnail.variant || getThumbnailVariantForFilename((_thumbnail$filename = thumbnail.filename) !== null && _thumbnail$filename !== void 0 ? _thumbnail$filename : '')
}), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
label: thumbnail.label,
disabled: thumbnail.disabled
}), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
qa: (_thumbnail$qa4 = thumbnail.qa) === null || _thumbnail$qa4 === void 0 ? void 0 : _thumbnail$qa4.caption,
multiline: thumbnail.size === 'lg',
layout: thumbnail.layout,
caption: thumbnail.caption,
hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
disabled: thumbnail.disabled,
error: thumbnail.error,
onCaptionOverflowChange: setCaptionOverflowing
}), thumbnail.disabled && !thumbnail.clickable && /*#__PURE__*/React.createElement(VisuallyHidden, null, i18n.t('core.thumbnail.unavailable', {
defaultValue: 'Content is unavailable'
}))));
});
var FigureThumbnail = /*#__PURE__*/React.forwardRef(function FigureThumbnail(props, ref) {
var _thumbnail$filename2, _thumbnail$qa5;
var i18n = useI18nContext();
var thumbnail = useThumbnail(props);
var _useState9 = useState(false),
_useState0 = _slicedToArray(_useState9, 2),
captionOverflowing = _useState0[0],
setCaptionOverflowing = _useState0[1];
var ariaLabel = getThumbnailAriaLabel(i18n, thumbnail.label, thumbnail.caption);
return /*#__PURE__*/React.createElement(ThumbnailCaptionTooltip, {
caption: thumbnail.caption,
captionOverflowing: captionOverflowing
}, /*#__PURE__*/React.createElement(StyledThumbnailWrapper, {
$layout: thumbnail.layout,
$size: thumbnail.size,
tabIndex: 0,
role: "group",
"aria-label": ariaLabel
}, /*#__PURE__*/React.createElement(StyledImageThumbnail, {
ref: ref,
$focused: thumbnail.focused,
$disabled: thumbnail.disabled,
$selected: thumbnail.selected,
$clickable: thumbnail.clickable,
$size: thumbnail.size,
as: thumbnail.as
}, thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? /*#__PURE__*/React.createElement(StyledImageThumbnailImage, {
src: thumbnail.src,
alt: thumbnail.alt
}) : /*#__PURE__*/React.createElement(ThumbnailPreview, {
file: thumbnail.src,
"aria-label": thumbnail.alt
}), /*#__PURE__*/React.createElement(TickIcon, {
size: thumbnail.size,
selected: thumbnail.toggleState.isSelected
}), thumbnail.shouldUsePlaceholder && /*#__PURE__*/React.createElement(StyledFileIcon, {
variant: thumbnail.variant || getThumbnailVariantForFilename((_thumbnail$filename2 = thumbnail.filename) !== null && _thumbnail$filename2 !== void 0 ? _thumbnail$filename2 : '')
}), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(FigCaption, {
label: thumbnail.label,
disabled: thumbnail.disabled
}), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
qa: (_thumbnail$qa5 = thumbnail.qa) === null || _thumbnail$qa5 === void 0 ? void 0 : _thumbnail$qa5.caption,
multiline: thumbnail.size === 'lg',
layout: thumbnail.layout,
caption: thumbnail.caption,
hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
disabled: thumbnail.disabled,
error: thumbnail.error,
onCaptionOverflowChange: setCaptionOverflowing
}), thumbnail.disabled && !thumbnail.clickable && /*#__PURE__*/React.createElement(VisuallyHidden, null, i18n.t('core.thumbnail.unavailable', {
defaultValue: 'Content is unavailable'
}))));
});
var CheckboxThumbnail = /*#__PURE__*/React.forwardRef(function CheckboxThumbnail(_ref6, ref) {
var _thumbnail$filename3, _thumbnail$qa6;
var children = _ref6.children,
as = _ref6.as,
label = _ref6.label,
name = _ref6.name,
onChange = _ref6.onChange,
role = _ref6.role,
_qa = _ref6.qa,
value = _ref6.value,
props_ = _objectWithoutProperties(_ref6, _excluded6);
var props = _objectSpread(_objectSpread({}, props_), {}, {
as: as,
label: label,
name: name,
onChange: onChange,
role: role,
value: value,
isDisabled: props_.disabled,
isSelected: props_.checked,
defaultSelected: props_.defaultChecked
});
var thumbnail = useThumbnail(props);
var _useState1 = useState(false),
_useState10 = _slicedToArray(_useState1, 2),
captionOverflowing = _useState10[0],
setCaptionOverflowing = _useState10[1];
var caption = props_.caption,
hasCaptionPlaceholder = props_.hasCaptionPlaceholder,
src = props_.src,
_disabled = props_.disabled,
wrapperProps = _objectWithoutProperties(props_, _excluded7);
var isInputFocused = document.activeElement === thumbnail.inputRef.current;
var preventSpaceOnDisabledThumbnail = function preventSpaceOnDisabledThumbnail(e) {
if (e.key === ' ' && thumbnail.disabled) {
e.preventDefault();
}
};
React.useEffect(function () {
if (props.focused && thumbnail.inputRef.current) {
thumbnail.inputRef.current.focus();
}
}, [props.focused, thumbnail.inputRef]);
return /*#__PURE__*/React.createElement(ThumbnailCaptionTooltip, {
caption: thumbnail.caption,
captionOverflowing: captionOverflowing
}, /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
$layout: thumbnail.layout,
$size: thumbnail.size
}, wrapperProps, {
onClick: function onClick(e) {
if (!thumbnail.disabled) {
var _thumbnail$onClick2;
thumbnail.toggleState.toggle();
(_thumbnail$onClick2 = thumbnail.onClick) === null || _thumbnail$onClick2 === void 0 ? void 0 : _thumbnail$onClick2.call(thumbnail, e);
}
}
}), /*#__PURE__*/React.createElement(StyledImageThumbnail, {
$focused: thumbnail.focused || isInputFocused,
$disabled: thumbnail.disabled,
$selected: thumbnail.selected,
$clickable: thumbnail.clickable,
$size: thumbnail.size
}, thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? /*#__PURE__*/React.createElement(StyledImageThumbnailImage, {
src: thumbnail.src,
alt: thumbnail.alt
}) : /*#__PURE__*/React.createElement(ThumbnailPreview, {
file: thumbnail.src,
"aria-label": thumbnail.alt
}), /*#__PURE__*/React.createElement(TickIcon, {
size: thumbnail.size,
selected: thumbnail.toggleState.isSelected
}), thumbnail.shouldUsePlaceholder && /*#__PURE__*/React.createElement(StyledFileIcon, {
variant: thumbnail.variant || getThumbnailVariantForFilename((_thumbnail$filename3 = thumbnail.filename) !== null && _thumbnail$filename3 !== void 0 ? _thumbnail$filename3 : '')
}), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
label: thumbnail.label,
disabled: thumbnail.disabled
}), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
qa: (_thumbnail$qa6 = thumbnail.qa) === null || _thumbnail$qa6 === void 0 ? void 0 : _thumbnail$qa6.caption,
multiline: thumbnail.size === 'lg',
layout: thumbnail.layout,
caption: thumbnail.caption,
hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
disabled: thumbnail.disabled,
error: props.error,
onCaptionOverflowChange: setCaptionOverflowing
}), /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", _extends({
ref: mergeRefs(thumbnail.inputRef, ref),
type: 'checkbox'
}, mergeProps(thumbnail.inputProps, thumbnail.focusProps), {
disabled: thumbnail.disabled,
onKeyDown: preventSpaceOnDisabledThumbnail
})))));
});
function ThumbnailInner(props, ref) {
var isFile = props.src instanceof File;
var isImageURL = typeof props.src === 'string';
if (!isFile && !isImageURL) {
console.warn('Unknown Thumbnail source:', props.src);
}
switch (props.role) {
case 'checkbox':
{
return /*#__PURE__*/React.createElement(CheckboxThumbnail, _extends({
ref: ref
}, props));
}
case 'figure':
{
return /*#__PURE__*/React.createElement(FigureThumbnail, _extends({
ref: ref
}, props));
}
default:
{
return /*#__PURE__*/React.createElement(BaseThumbnail, _extends({
ref: ref
}, props));
}
}
}
var Thumbnail_ = /*#__PURE__*/React.forwardRef(ThumbnailInner);
var Placeholder = /*#__PURE__*/React.forwardRef(PlaceholderInner);
// @ts-ignore
Placeholder.displayName = 'Thumbnail.Placeholder';
// @ts-ignore
Thumbnail_.displayName = 'Thumbnail';
/**
We use thumbnails to display previews for images or files as either a smaller
version of an uploaded image, or an icon representing the file type. If an
image preview can be generated from the file (in the case of images) then
display that image.
@since 10.19.0
@see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-thumbnail--demo-thumbnail)
@see [Design Guidelines](https://design.procore.com/thumbnail)
*/
export var Thumbnail = addSubcomponents({
Placeholder: Placeholder
}, Thumbnail_);
//# sourceMappingURL=Thumbnail.js.map