informed/dist/esm/hooks/useCursorPosition.js

A lightweight framework and utility for building powerful forms in React applications

import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
import { useMemo, useCallback, useEffect } from 'react';
import { useStateWithGetter } from './useStateWithGetter.js';

var useCursorPosition = function useCursorPosition(_ref) {
  var value = _ref.value,
    inputRef = _ref.inputRef,
    inputRefs = _ref.inputRefs,
    _ref$maintainCursor = _ref.maintainCursor,
    maintainCursor = _ref$maintainCursor === void 0 ? false : _ref$maintainCursor;
  var initialCursor = useMemo(function () {
    if (inputRefs) {
      var initOffset = {};
      Object.keys(inputRefs).forEach(function (key) {
        return initOffset[key] = 0;
      });
    } else {
      return 0;
    }
  }, []);
  var _useStateWithGetter = useStateWithGetter(initialCursor),
    _useStateWithGetter2 = _slicedToArray(_useStateWithGetter, 3),
    cursor = _useStateWithGetter2[0],
    setCursor = _useStateWithGetter2[1],
    getCursor = _useStateWithGetter2[2];
  var _useStateWithGetter3 = useStateWithGetter(initialCursor),
    _useStateWithGetter4 = _slicedToArray(_useStateWithGetter3, 3),
    cursorOffset = _useStateWithGetter4[0],
    setCursorOffset = _useStateWithGetter4[1],
    getCursorOffset = _useStateWithGetter4[2];
  var setCursorCallback = useCallback(function (c, key) {
    if (key) {
      var newCursor = _objectSpread2({}, getCursor());
      newCursor[key] = c;
      setCursor(newCursor);
    } else {
      setCursor(c);
    }
  }, []);
  var setCursorOffsetCallback = useCallback(function (c, key) {
    if (key) {
      var newCursor = _objectSpread2({}, getCursor());
      newCursor[key] = c[key];
      setCursorOffset(newCursor);
    } else {
      setCursorOffset(c);
    }
  }, []);
  useEffect(function () {
    // console.log('inputRef', inputRef.current, 'Cursor', getCursor());
    if (!inputRefs && inputRef.current != null && getCursor()) {
      // inputRef.current.selectionEnd = getCursor() + getCursorOffset();
      var offset = getCursorOffset(); // getCursorOffset() < 0 ? 0 : getCursorOffset();
      var cursorLoc = getCursor() + offset;
      // console.log('Cursor', getCursor());
      // console.log('Offset', offset);
      // console.log('CursorLoc', cursorLoc);
      // Only offset if we need to
      if (maintainCursor) {
        inputRef.current.setSelectionRange(cursorLoc, cursorLoc);
      }
    }
    if (inputRefs && getCursor()) {
      // console.log('Cursor', getCursor());
      // Loop over each ref and set selection range
      Object.keys(inputRefs).forEach(function (key) {
        var offset = getCursorOffset()[key] < 0 ? 0 : getCursorOffset()[key];
        var cursorLoc = getCursor()[key] + offset;
        // Only offset if we need to
        if (maintainCursor) {
          inputRefs[key].current.setSelectionRange(cursorLoc, cursorLoc);
        }
      });
    }
  }, [value, cursor, cursorOffset]);
  return {
    setCursorOffset: setCursorOffsetCallback,
    setCursor: setCursorCallback,
    cursor: cursor,
    getCursor: getCursor,
    cursorOffset: cursorOffset
  };
};

export { useCursorPosition };