@livelike/react-native/lib/commonjs/hooks/useAutoScroll.js

LiveLike React Native package

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useAutoScroll = useAutoScroll;
var _react = require("react");
var _reactNative = require("react-native");
const MIN_MESSAGE_HEIGHT = 50;
const DEFAULT_SCROLL_TO_END_DELAY = 500;
function useAutoScroll(_ref) {
  let {
    ref
  } = _ref;
  const [currentContentHeight, setCurrentContentHeight] = (0, _react.useState)(0);
  const userScrolled = (0, _react.useRef)(false);
  const scrollToEnd = (0, _react.useCallback)(_ref2 => {
    let {
      delay
    } = _ref2;
    if (ref.current && !userScrolled.current) {
      setTimeout(() => {
        var _ref$current;
        (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.scrollToEnd();
      }, delay);
    }
  }, [ref, userScrolled.current]);
  (0, _react.useEffect)(() => {
    const keyboardDidShowListener = _reactNative.Keyboard.addListener('keyboardDidShow', () => {
      scrollToEnd({
        delay: DEFAULT_SCROLL_TO_END_DELAY
      });
    });
    return () => {
      keyboardDidShowListener.remove();
    };
  }, [scrollToEnd, userScrolled.current]);
  const onScrollEndDrag = (0, _react.useCallback)(() => {
    if (!userScrolled.current) {
      userScrolled.current = true;
    }
  }, [userScrolled.current]);
  const onContentSizeChangeHandler = (width, height) => {
    if (height - currentContentHeight > MIN_MESSAGE_HEIGHT && !userScrolled.current) {
      scrollToEnd({
        delay: DEFAULT_SCROLL_TO_END_DELAY
      });
    }
    setCurrentContentHeight(height);
  };
  return {
    onScrollEndDrag,
    onContentSizeChangeHandler
  };
}
//# sourceMappingURL=useAutoScroll.js.map