informed/dist/cjs/hooks/useCursorPosition.js

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var useStateWithGetter = require('./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 = React.useMemo(function () {
    if (inputRefs) {
      var initOffset = {};
      Object.keys(inputRefs).forEach(function (key) {
        return initOffset[key] = 0;
      });
    } else {
      return 0;
    }
  }, []);
  var _useStateWithGetter = useStateWithGetter.useStateWithGetter(initialCursor),
    _useStateWithGetter2 = _rollupPluginBabelHelpers.slicedToArray(_useStateWithGetter, 3),
    cursor = _useStateWithGetter2[0],
    setCursor = _useStateWithGetter2[1],
    getCursor = _useStateWithGetter2[2];
  var _useStateWithGetter3 = useStateWithGetter.useStateWithGetter(initialCursor),
    _useStateWithGetter4 = _rollupPluginBabelHelpers.slicedToArray(_useStateWithGetter3, 3),
    cursorOffset = _useStateWithGetter4[0],
    setCursorOffset = _useStateWithGetter4[1],
    getCursorOffset = _useStateWithGetter4[2];
  var setCursorCallback = React.useCallback(function (c, key) {
    if (key) {
      var newCursor = _rollupPluginBabelHelpers.objectSpread2({}, getCursor());
      newCursor[key] = c;
      setCursor(newCursor);
    } else {
      setCursor(c);
    }
  }, []);
  var setCursorOffsetCallback = React.useCallback(function (c, key) {
    if (key) {
      var newCursor = _rollupPluginBabelHelpers.objectSpread2({}, getCursor());
      newCursor[key] = c[key];
      setCursorOffset(newCursor);
    } else {
      setCursorOffset(c);
    }
  }, []);
  React.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
  };
};

exports.useCursorPosition = useCursorPosition;