@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
95 lines (94 loc) • 4.79 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useListItemRemove = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const useCursorListModel_1 = require("./useCursorListModel");
const keyUtils_1 = require("./keyUtils");
// retry a function each frame so we don't rely on the timing mechanism of React's render cycle.
const retryEachFrame = (cb, iterations) => {
if (cb() === false && iterations > 1) {
requestAnimationFrame(() => retryEachFrame(cb, iterations - 1));
}
};
/**
* This elemProps hook is used when a menu item is expected to be removed. It will advance the cursor to
* another item.
* This elemProps hook is used for cursor navigation by using [Roving
* Tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex). Only a single item in the
* collection has a tab stop. Pressing an arrow key moves the tab stop to a different item in the
* corresponding direction. See the [Roving Tabindex](#roving-tabindex) example. This elemProps hook
* should be applied to an `*.Item` component.
*
* ```ts
* const useMyItem = composeHooks(
* useListItemRovingFocus, // adds the roving tabindex support
* useListItemRegister
* );
* ```
*/
exports.useListItemRemove = (0, common_1.createElemPropsHook)(useCursorListModel_1.useCursorListModel)((model, _ref, elemProps = {}) => {
// Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
// current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
// empty array
const stateRef = react_1.default.useRef(model.state);
stateRef.current = model.state;
const keyElementRef = react_1.default.useRef(null);
const isRTL = (0, common_1.useIsRTL)();
react_1.default.useEffect(() => {
if (keyElementRef.current) {
const item = model.navigation.getItem(model.state.cursorId, model);
if (item) {
if (model.state.isVirtualized) {
model.state.UNSTABLE_virtual.scrollToIndex(item.index);
}
const selector = (id) => {
return document.querySelector(`[data-focus-id="${`${id}-${item.id}`}"]`);
};
// In React concurrent mode, there could be several render attempts before the element we're
// looking for could be available in the DOM
retryEachFrame(() => {
var _a, _b;
// Attempt to extract the ID from the DOM element. This fixes issues where the server and client
// do not agree on a generated ID
const clientId = (_b = (_a = keyElementRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('data-focus-id')) === null || _b === void 0 ? void 0 : _b.split('-')[0];
const element = selector(clientId) || selector(model.state.id);
element === null || element === void 0 ? void 0 : element.focus();
if (element) {
keyElementRef.current = null;
}
return !!element;
}, 5); // 5 should be enough, right?!
}
}
// we only want to run this effect if the cursor changes and not any other time
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [model.state.cursorId]);
// Roving focus must always have a focus stop to function correctly
react_1.default.useEffect(() => {
if (!model.state.cursorId && model.state.items.length) {
model.events.goTo({ id: model.state.items[0].id });
}
}, [model.state.cursorId, model.state.items, model.events]);
return {
onKeyDown(event) {
const handled = (0, keyUtils_1.keyboardEventToCursorEvents)(event, model, isRTL);
if (handled) {
event.preventDefault();
keyElementRef.current = event.currentTarget;
}
},
onClick() {
model.events.goTo({ id: elemProps['data-id'] });
},
'data-focus-id': `${model.state.id}-${elemProps['data-id']}`,
tabIndex: !model.state.cursorId
? 0 // cursor isn't known yet, be safe and mark this as focusable
: !!elemProps['data-id'] && model.state.cursorId === elemProps['data-id']
? 0 // A name is known and cursor is here
: -1, // A name is known an cursor is somewhere else
};
});