@procore/core-react
Version:
React library of Procore Design Guidelines
193 lines (190 loc) • 10.2 kB
JavaScript
var _excluded = ["activePage", "maxHeight", "menuRef", "onSelect", "pages"];
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 _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; }
import { times } from 'ramda';
import React from 'react';
import { DropdownButton } from '../Dropdown/Dropdown';
import { MenuImperative } from '../MenuImperative/MenuImperative';
import { OverlayTrigger, useOverlayTriggerContext } from '../OverlayTrigger/OverlayTrigger';
import { mergeRefs } from '../_utils/mergeRefs';
import { StyledOverlay } from './Pagination.styles';
var noop = function noop() {};
var DEFAULT_MAX_HEIGHT = 300;
var VIEWPORT_PADDING = 16;
function computeAvailableHeight(triggerEl) {
if (!triggerEl) {
return DEFAULT_MAX_HEIGHT;
}
var rect = triggerEl.getBoundingClientRect();
var viewportHeight = window.innerHeight;
var spaceBelow = viewportHeight - rect.bottom - VIEWPORT_PADDING;
var spaceAbove = rect.top - VIEWPORT_PADDING;
var availableSpace = Math.max(spaceBelow, spaceAbove);
return Math.min(DEFAULT_MAX_HEIGHT, availableSpace);
}
var PaginationMenu = /*#__PURE__*/React.forwardRef(function PaginationMenu(_ref, ref) {
var activePage = _ref.activePage,
maxHeight = _ref.maxHeight,
menuRef = _ref.menuRef,
_ref$onSelect = _ref.onSelect,
onSelect_ = _ref$onSelect === void 0 ? noop : _ref$onSelect,
pages = _ref.pages,
props = _objectWithoutProperties(_ref, _excluded);
var ctx = useOverlayTriggerContext();
var lastItemRef = React.useRef(null);
var hasFooter = pages > 10;
React.useEffect(function () {
var _menuRef$current;
(_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.highlightFirst();
}, [menuRef]);
React.useEffect(function () {
var _menuRef$current2, _menuRef$current3;
(_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 ? void 0 : _menuRef$current2.highlightSuggested();
(_menuRef$current3 = menuRef.current) === null || _menuRef$current3 === void 0 ? void 0 : _menuRef$current3.highlightSelected();
}, [menuRef]);
function onKeyDown(event) {
var _menuRef$current4;
var currentPage = (_menuRef$current4 = menuRef.current) === null || _menuRef$current4 === void 0 ? void 0 : _menuRef$current4.highlighted();
if (event.key === 'ArrowDown' || event.key === 'Down') {
// when on the second to last item, want to jump to the last item (in the footer)
if (currentPage === pages - 1 && lastItemRef.current) {
var _menuRef$current5;
(_menuRef$current5 = menuRef.current) === null || _menuRef$current5 === void 0 ? void 0 : _menuRef$current5.highlight(lastItemRef.current);
}
} else if (event.key === 'ArrowUp' || event.key === 'Up') {
// on the last item (in the footer), want to jump back to the second to last
// item back in the menu
if (hasFooter && currentPage === pages) {
var _menuRef$current6;
event.stopPropagation();
(_menuRef$current6 = menuRef.current) === null || _menuRef$current6 === void 0 ? void 0 : _menuRef$current6.highlightLast();
}
}
}
function onSelect(selection) {
onSelect_(selection);
ctx.hide(selection.event);
}
var children = times(function (index) {
var page = index + 1;
return /*#__PURE__*/React.createElement(MenuImperative.Item, {
item: page,
key: index,
selected: page === activePage,
ref: lastItemRef
}, page);
}, pages);
var overlayStyle = maxHeight ? {
maxHeight: maxHeight
} : undefined;
return /*#__PURE__*/React.createElement(StyledOverlay, {
ref: ref,
shadowStrength: 2,
style: overlayStyle
}, /*#__PURE__*/React.createElement(MenuImperative, _extends({
circular: true
}, props, {
ref: menuRef,
onKeyDown: onKeyDown,
onSelect: onSelect
}), hasFooter ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuImperative.Options, null, children.slice(0, -1)), /*#__PURE__*/React.createElement(MenuImperative.Footer, {
padding: "xs none"
}, children[children.length - 1])) : /*#__PURE__*/React.createElement(MenuImperative.Options, null, children)));
});
export var PaginationSelect = /*#__PURE__*/React.forwardRef(function PaginationSelect(_ref2, ref) {
var _ref2$activePage = _ref2.activePage,
activePage = _ref2$activePage === void 0 ? 1 : _ref2$activePage,
ariaLabelledby = _ref2["aria-labelledby"],
disabled = _ref2.disabled,
id = _ref2.id,
onSelect = _ref2.onSelect,
_ref2$pages = _ref2.pages,
pages = _ref2$pages === void 0 ? 0 : _ref2$pages,
props = _objectWithoutProperties(_ref2, ["activePage", "aria-labelledby", "disabled", "id", "onSelect", "pages"]);
var menuRef = React.useRef(null);
var triggerRef = React.useRef(null);
var _React$useState = React.useState(undefined),
_React$useState2 = _slicedToArray(_React$useState, 2),
maxHeight = _React$useState2[0],
setMaxHeight = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
isOpen = _React$useState4[0],
setIsOpen = _React$useState4[1];
// Recompute height on viewport resize
React.useEffect(function () {
if (!isOpen) return;
function handleResize() {
setMaxHeight(computeAvailableHeight(triggerRef.current));
}
window.addEventListener('resize', handleResize);
return function () {
return window.removeEventListener('resize', handleResize);
};
}, [isOpen]);
// Safari has an issue with giving focus to buttons after clicking on them
// if the button or menu do not have focus, the keyboard navigation does not work,
// so just focus the menu when we open it
function afterShow() {
var _menuRef$current7, _menuRef$current7$el, _menuRef$current7$el$;
// this is brittle, if MenuImperative dom structure changes this could break
// but super specific to pagination, not really a concern elsewhere
;
(_menuRef$current7 = menuRef.current) === null || _menuRef$current7 === void 0 ? void 0 : (_menuRef$current7$el = _menuRef$current7.el) === null || _menuRef$current7$el === void 0 ? void 0 : (_menuRef$current7$el$ = _menuRef$current7$el.firstChild) === null || _menuRef$current7$el$ === void 0 ? void 0 : _menuRef$current7$el$.focus();
// Compute available height
setIsOpen(true);
setMaxHeight(computeAvailableHeight(triggerRef.current));
}
function afterHide() {
setIsOpen(false);
setMaxHeight(undefined);
}
function onKeyDown(e) {
if (e.key === 'Up' || e.key === 'ArrowUp') {
var _menuRef$current8;
e.preventDefault();
(_menuRef$current8 = menuRef.current) === null || _menuRef$current8 === void 0 ? void 0 : _menuRef$current8.prev();
} else if (e.key === 'Down' || e.key === 'ArrowDown') {
var _menuRef$current9;
e.preventDefault();
(_menuRef$current9 = menuRef.current) === null || _menuRef$current9 === void 0 ? void 0 : _menuRef$current9.next();
} else if (e.key === 'Enter') {
var _menuRef$current0;
e.preventDefault();
(_menuRef$current0 = menuRef.current) === null || _menuRef$current0 === void 0 ? void 0 : _menuRef$current0.select(e);
}
}
return /*#__PURE__*/React.createElement(OverlayTrigger, _extends({
role: "listbox",
passA11yPropsToOverlay: true,
autoFocus: true,
afterShow: afterShow,
afterHide: afterHide,
overlay: /*#__PURE__*/React.createElement(PaginationMenu, {
activePage: activePage,
maxHeight: maxHeight,
menuRef: menuRef,
onSelect: onSelect,
pages: pages
}),
placement: "bottom-left",
ref: mergeRefs(ref, triggerRef),
trigger: "click"
}, props), /*#__PURE__*/React.createElement(DropdownButton, {
"aria-labelledby": ariaLabelledby,
arrow: true,
disabled: disabled,
id: id,
onKeyDown: onKeyDown,
role: "combobox",
variant: "tertiary"
}, activePage));
});
//# sourceMappingURL=PaginationSelect.js.map