rsuite/esm/InputPicker/hooks/useInput.js

A suite of react components

'use client';
import { useRef, useCallback, useMemo } from 'react';
import useMaxWidth from "./useMaxWidth.js";
import InputAutosize from "../InputAutosize.js";
const INPUT_MARGIN_RIGHT = 60;
function useInput(props) {
  const {
    multi,
    triggerRef
  } = props;
  const inputRef = useRef(null);
  const maxWidth = useMaxWidth(triggerRef);
  const getInput = useCallback(() => {
    return multi ? inputRef.current?.input : inputRef.current;
  }, [multi]);
  const focus = useCallback(() => {
    getInput()?.focus();
  }, [getInput]);
  const blur = useCallback(() => {
    getInput()?.blur();
  }, [getInput]);
  const inputProps = useMemo(() => {
    return multi ? {
      inputStyle: {
        maxWidth: maxWidth - INPUT_MARGIN_RIGHT
      },
      as: InputAutosize
    } : {
      as: 'input'
    };
  }, [maxWidth, multi]);
  return {
    inputProps,
    inputRef,
    focus,
    blur
  };
}
export default useInput;