How to use the @react-md/utils.scrollIntoView function in @react-md/utils

To help you get started, we’ve selected a few @react-md/utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mlaursen / react-md / packages / tree / src / useTreeMovement.ts View on Github external
let index = -1;
      // try to "focus" the first selected itemId if there is a selection.
      if (selectedIds.length) {
        index = visibleItems.findIndex(item =>
          selectedIds.includes(item.itemId)
        );
      }

      // fallback to the first visible tree item if there were no selected ids
      if (index === -1) {
        index = Math.max(0, Math.min(lastFocus.current, visibleItems.length));
      }

      const currentItem = itemIdRefs[visibleItems[index]?.itemId]?.ref.current;
      if (currentItem && isKeyboard) {
        scrollIntoView(event.currentTarget, currentItem);
      }
      setFocusedIndex(index);
    },
    [
github mlaursen / react-md / packages / form / src / select / Listbox.tsx View on Github external
(event: React.FocusEvent) => {
      if (onFocus) {
        onFocus(event);
      }

      const item = itemRefs[focusedIndex] && itemRefs[focusedIndex].current;
      if (item) {
        scrollIntoView(event.currentTarget, item);
      }
    },
    [focusedIndex, itemRefs, onFocus]
github mlaursen / react-md / packages / tree / src / useTreeMovement.ts View on Github external
onChange(data) {
      const { index, target, query } = data;
      const { itemId } = visibleItems[index];
      const item = itemIdRefs[itemId].ref.current;
      if (item && target && target.scrollHeight > target.offsetHeight) {
        scrollIntoView(target, item);
      }

      if (!multiSelect) {
        return;
      }

      const isToStart = query.endsWith(JumpMovementKey.ControlShiftHome);
      const isToEnd = query.endsWith(JumpMovementKey.ControlShiftEnd);
      if (!isToStart && !isToEnd) {
        return;
      }

      const start = isToStart ? 0 : focusedIndex;
      const end = isToStart ? focusedIndex + 1 : undefined;
      const jumpSelectedIds = visibleItems
        .slice(start, end)