@procore/core-react
Version:
React library of Procore Design Guidelines
192 lines (191 loc) • 9.21 kB
JavaScript
var _excluded = ["items", "onCancel", "listHeight", "rowHeight", "onKeyDown", "onFocus", "onBlur"];
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; }
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 _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); }
import { Clear } from '@procore/core-icons/dist';
import { useId } from '@react-aria/utils';
import { VisuallyHidden } from '@react-aria/visually-hidden';
import { clamp, isNil } from 'ramda';
import React from 'react';
import { ProgressBar } from '../../ProgressBar';
import { useI18nContext } from '../../_hooks/I18n';
import { StyledDeleteIcon, StyledProgress, StyledThumbnail, StyledThumbnailList, StyledThumbnailListContainer, StyledThumbnailListItem } from './ThumbnailList.styles';
export var defaultListHeight = 305;
export var defaultRowHeight = 56;
var progressValueText = function progressValueText(_ref) {
var value = _ref.value;
return "".concat(value, "%");
};
var Row = function Row(_ref2) {
var _ref2$data = _ref2.data,
items = _ref2$data.items,
onCancel = _ref2$data.onCancel,
isFocused = _ref2$data.isFocused,
setNavigationPosition = _ref2$data.setNavigationPosition,
style = _ref2.style,
index = _ref2.index;
var i18n = useI18nContext();
var progressBarLabelId = useId();
var item = items[index];
var src = item.src,
name = item.name,
progress = item.progress,
error = item.error;
var focused = isFocused(index);
var ariaLive = error ? 'assertive' : undefined;
return /*#__PURE__*/React.createElement("div", {
style: style,
onMouseEnter: function onMouseEnter() {
return setNavigationPosition(index);
},
"aria-live": ariaLive
}, /*#__PURE__*/React.createElement(StyledThumbnailListItem, {
error: error,
focused: focused
}, /*#__PURE__*/React.createElement(StyledThumbnail, {
src: src,
size: "sm",
clickable: false,
caption: name,
error: error
}), /*#__PURE__*/React.createElement(StyledProgress, null, error || !isNil(progress) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("span", {
id: progressBarLabelId
}, i18n.t('core.thumbnailList.uploading'))), /*#__PURE__*/React.createElement(ProgressBar, {
"aria-labelledby": progressBarLabelId,
value: progress,
"aria-valuetext": progressValueText,
animated: true
}))), onCancel && /*#__PURE__*/React.createElement(StyledDeleteIcon, {
"aria-label": i18n.t('core.thumbnailList.removeUpload'),
icon: /*#__PURE__*/React.createElement(Clear, {
size: "sm"
}),
size: "sm",
tabIndex: -1,
variant: "tertiary",
onClick: function onClick() {
return onCancel(item);
}
})));
};
// See https://github.com/bvaughn/react-window/issues/130
var outerElementType = /*#__PURE__*/React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement("div", _extends({
ref: ref,
tabIndex: -1
}, props));
});
var getNewNavigationPosition = function getNewNavigationPosition(next, max) {
return clamp(0, Math.max(0, max - 1), next);
};
export var ThumbnailList = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
var items = _ref3.items,
onCancel = _ref3.onCancel,
_ref3$listHeight = _ref3.listHeight,
listHeight = _ref3$listHeight === void 0 ? defaultListHeight : _ref3$listHeight,
_ref3$rowHeight = _ref3.rowHeight,
rowHeight = _ref3$rowHeight === void 0 ? defaultRowHeight : _ref3$rowHeight,
onKeyDown = _ref3.onKeyDown,
_onFocus = _ref3.onFocus,
_onBlur = _ref3.onBlur,
props = _objectWithoutProperties(_ref3, _excluded);
var rowCount = items.length;
var height = Math.min(rowCount * defaultRowHeight, listHeight);
var listRef = React.useRef(null);
var listInstance = listRef.current;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isListFocused = _React$useState2[0],
setIsListFocused = _React$useState2[1];
var _React$useState3 = React.useState(0),
_React$useState4 = _slicedToArray(_React$useState3, 2),
navigationPosition = _React$useState4[0],
setNavigationPosition = _React$useState4[1];
var isFocused = React.useCallback(function (index) {
return isListFocused && navigationPosition === index;
}, [isListFocused, navigationPosition]);
var updateNavigationPosition = React.useCallback(function (newPosition) {
setNavigationPosition(newPosition);
listInstance === null || listInstance === void 0 ? void 0 : listInstance.scrollToItem(newPosition);
}, [listInstance]);
React.useEffect(function () {
if (isListFocused) {
listInstance === null || listInstance === void 0 ? void 0 : listInstance.scrollToItem(navigationPosition);
}
}, [isListFocused]);
React.useEffect(function () {
if (rowCount > 0 && rowCount <= navigationPosition) {
setNavigationPosition(rowCount - 1);
}
if (rowCount <= 0) {
setIsListFocused(false);
}
}, [rowCount]);
var handleNavigation = function handleNavigation(e) {
if (!isListFocused) return;
switch (e.key) {
case 'Enter':
e.preventDefault();
var highlightedItem = items[navigationPosition];
onCancel === null || onCancel === void 0 ? void 0 : onCancel(highlightedItem);
// Ensure scrolling only after the item was deleted
setTimeout(function () {
updateNavigationPosition(getNewNavigationPosition(navigationPosition, rowCount - 1));
}, 0);
if (rowCount - 1 === 0) {
setIsListFocused(false);
}
break;
case 'ArrowDown':
case 'Down':
e.preventDefault();
updateNavigationPosition(getNewNavigationPosition(navigationPosition + 1, rowCount));
break;
case 'ArrowUp':
case 'Up':
e.preventDefault();
updateNavigationPosition(getNewNavigationPosition(navigationPosition - 1, rowCount));
break;
}
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
};
if (!rowCount) return null;
return /*#__PURE__*/React.createElement(StyledThumbnailListContainer, _extends({
tabIndex: rowCount !== 0 ? 0 : -1,
onFocus: function onFocus(e) {
setIsListFocused(true);
_onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(e);
},
onBlur: function onBlur(e) {
setIsListFocused(false);
_onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
},
onKeyDown: handleNavigation
}, props, {
ref: ref
}), /*#__PURE__*/React.createElement(StyledThumbnailList, {
ref: listRef,
width: "100%",
height: height,
itemCount: rowCount,
itemSize: rowHeight,
itemData: {
items: items,
onCancel: onCancel,
isFocused: isFocused,
setNavigationPosition: setNavigationPosition
},
style: {
minHeight: height
},
outerElementType: outerElementType
}, Row));
});
ThumbnailList.displayName = 'ThumbnailList';
//# sourceMappingURL=ThumbnailList.js.map