@procore/core-react
Version:
React library of Procore Design Guidelines
230 lines (229 loc) • 11.2 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); }
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); }
import { scrollIntoView } from '../_utils/scrollIntoView';
function noop() {}
var MOUSE_ENTER = 'mouseenter';
var MOUSE_LEAVE = 'mouseleave';
var menuItemsWrapperAttributeName = 'data-core-menuimperative-items-wrapper';
export var menuItemsWrapperAttribute = _defineProperty({}, menuItemsWrapperAttributeName, 'true');
var isItem = function isItem(element) {
return element === null || element === void 0 ? void 0 : element.hasAttribute('data-value');
};
function isGroup(el) {
return JSON.parse(el.dataset.group || 'false');
}
var isWrapper = function isWrapper(element) {
return (element === null || element === void 0 ? void 0 : element.getAttribute(menuItemsWrapperAttributeName)) === 'true';
};
function getAllItems(menu) {
return menu === null || menu === void 0 ? void 0 : menu.querySelectorAll('[data-value]:not([data-group="true"])');
}
function getFirstItem(menu) {
var _getAllItems;
return (_getAllItems = getAllItems(menu)) === null || _getAllItems === void 0 ? void 0 : _getAllItems[0];
}
function getPrevItem(item, menu) {
var items = getAllItems(menu);
return items ? items[Array.prototype.indexOf.call(items, item) - 1] : null;
}
function getNextItem(item, menu) {
var items = getAllItems(menu);
return items ? items[Array.prototype.indexOf.call(items, item) + 1] : null;
}
function getLastItem(menu) {
var items = getAllItems(menu);
return items === null || items === void 0 ? void 0 : items[items.length - 1];
}
function updateHighlightedAttribute(item, highlight) {
item === null || item === void 0 ? void 0 : item.setAttribute('data-highlighted', highlight ? 'true' : 'false');
item === null || item === void 0 ? void 0 : item.dispatchEvent(new MouseEvent(highlight ? MOUSE_ENTER : MOUSE_LEAVE));
}
export function createSensors(ref, circular, onChangeActiveDescendant) {
var highlightedItem = null;
var dragAndDropApi = null;
var onSelect = noop;
var isDraggingStateRef = {
current: false
};
function select(event) {
if (ref.current && highlightedItem) {
var _highlightedItem, _highlightedItem2, _highlightedItem3, _highlightedItem4, _highlightedItem5, _onSelect;
var disabled = JSON.parse(((_highlightedItem = highlightedItem) === null || _highlightedItem === void 0 ? void 0 : _highlightedItem.dataset.disabled) || 'false');
if (disabled) return;
var item = JSON.parse(((_highlightedItem2 = highlightedItem) === null || _highlightedItem2 === void 0 ? void 0 : _highlightedItem2.dataset.value) || 'null');
var selected = JSON.parse(((_highlightedItem3 = highlightedItem) === null || _highlightedItem3 === void 0 ? void 0 : _highlightedItem3.dataset.selected) || 'false');
var restoreFocus = (_highlightedItem4 = highlightedItem) !== null && _highlightedItem4 !== void 0 && _highlightedItem4.dataset.restorefocus ? JSON.parse((_highlightedItem5 = highlightedItem) === null || _highlightedItem5 === void 0 ? void 0 : _highlightedItem5.dataset.restorefocus) : undefined;
if (highlightedItem.tagName === 'A') {
highlightedItem.click();
}
(_onSelect = onSelect) === null || _onSelect === void 0 ? void 0 : _onSelect(_objectSpread({
event: event,
item: item,
group: false,
action: selected ? 'unselected' : 'selected'
}, restoreFocus === undefined ? {} : {
restoreFocus: restoreFocus
}));
}
}
function highlightItem(item) {
var shouldScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var shouldFocus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
// performance improvement, highlightItem is called onMouseMove for Item
if (item === highlightedItem) {
return;
}
if (item) {
var _item$getAttribute;
updateHighlightedAttribute(highlightedItem, false);
// TODO add localized screenreader instructions for the item
updateHighlightedAttribute(item, true);
var id = (_item$getAttribute = item.getAttribute('id')) !== null && _item$getAttribute !== void 0 ? _item$getAttribute : undefined;
onChangeActiveDescendant(id, ref.current);
highlightedItem = item;
if (shouldFocus) {
item.focus();
}
if (shouldScroll) {
scrollIntoView(-1, item);
}
} else {
onChangeActiveDescendant('', ref.current);
}
}
function _handleItemBlur(el) {
updateHighlightedAttribute(el, false);
highlightedItem = null;
}
function getPrevHighlightableItem(currentItem) {
var prev = getPrevItem(currentItem, ref.current);
if (prev) {
if (isItem(prev)) {
return prev;
}
} else if (circular) {
return getLastItem(ref.current);
}
return prev;
}
function getNextHighlightableItem(currentItem) {
var next = getNextItem(currentItem, ref.current);
if (next) {
if (isItem(next)) {
return next;
}
} else if (circular) {
return getFirstItem(ref.current);
}
}
function highlightFirstItem() {
var shouldScroll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var shouldFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
highlightItem(getFirstItem(ref.current), shouldScroll, shouldFocus);
}
function highlightLastItem() {
var shouldScroll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var shouldFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
highlightItem(getLastItem(ref.current), shouldScroll, shouldFocus);
}
function highlightPrevItem() {
var _ref$current;
if (highlightedItem && (_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(highlightedItem)) {
var prev = getPrevHighlightableItem(highlightedItem);
if (prev) {
highlightItem(prev, true, true);
}
} else {
highlightLastItem(true, true);
}
}
function highlightNextItem() {
var _ref$current2;
if (highlightedItem && (_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.contains(highlightedItem)) {
var next = getNextHighlightableItem(highlightedItem);
if (next) {
highlightItem(next, true, true);
}
} else {
highlightFirstItem(true, true);
}
}
return {
handleKeyDown: function handleKeyDown(event) {
if (ref.current) {
var isDragActive = isDraggingStateRef.current;
if (event.key === 'ArrowUp' || event.key === 'Up') {
if (!isDragActive) {
event.preventDefault();
highlightPrevItem();
}
} else if (event.key === 'ArrowDown' || event.key === 'Down') {
if (!isDragActive) {
event.preventDefault();
highlightNextItem();
}
} else if (event.key === 'Enter') {
event.preventDefault();
if (!isDragActive) {
select(event);
}
}
}
},
handleItemHover: function handleItemHover(el) {
highlightItem(el, false);
},
handleItemFocus: function handleItemFocus(el) {
highlightItem(el, true, true);
},
handleItemBlur: function handleItemBlur(el) {
_handleItemBlur(el);
},
useKeyboardSensor: function useKeyboardSensor(api) {
dragAndDropApi = api;
},
setIsDragging: function setIsDragging(isDragging) {
isDraggingStateRef.current = isDragging;
},
updateSelectCallback: function updateSelectCallback(callback) {
onSelect = callback;
},
highlight: highlightItem,
highlighted: function highlighted() {
var _highlightedItem6;
return JSON.parse(((_highlightedItem6 = highlightedItem) === null || _highlightedItem6 === void 0 ? void 0 : _highlightedItem6.dataset.value) || 'null');
},
highlightFirst: highlightFirstItem,
highlightLast: highlightLastItem,
rehighlightCurrent: function rehighlightCurrent() {
var _highlightedItem7;
// Rehighlights an item that may have lost its styling due to the re-render of the list items
var draggableId = (_highlightedItem7 = highlightedItem) === null || _highlightedItem7 === void 0 ? void 0 : _highlightedItem7.getAttribute('data-rbd-draggable-id');
if (draggableId) {
var _ref$current3;
var newItem = (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.querySelector("[data-rbd-draggable-id=\"".concat(draggableId.replace(/["\\]/g, '\\$&'), "\"]"));
highlightItem(newItem);
}
},
highlightSelected: function highlightSelected() {
var _ref$current4;
var shouldScroll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var selectedItem = (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.querySelector('[data-selected="true"]');
highlightItem(selectedItem, shouldScroll);
},
highlightSuggested: function highlightSuggested() {
var _ref$current5;
var shouldScroll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var suggestedItem = (_ref$current5 = ref.current) === null || _ref$current5 === void 0 ? void 0 : _ref$current5.querySelector('[data-suggested="true"]');
highlightItem(suggestedItem, shouldScroll);
},
prev: highlightPrevItem,
next: highlightNextItem,
select: select
};
}
//# sourceMappingURL=sensors.js.map