Function useDragResize

packages/graphiql-react/src/utility/resize.ts:45–278

({
  defaultSizeRelation = DEFAULT_FLEX,
  direction,
  initiallyHidden,
  onHiddenElementChange,
  sizeThresholdFirst = 100,
  sizeThresholdSecond = 100,
  storageKey,
}: UseDragResizeArgs)

};

export function useDragResize({
  defaultSizeRelation = DEFAULT_FLEX,
  direction,
  initiallyHidden,
  onHiddenElementChange,
  sizeThresholdFirst = 100,
  sizeThresholdSecond = 100,
  storageKey,
}: UseDragResizeArgs) {
  const storage = useStorageContext();

  const store = debounce(500, (value: string) => {
    if (storageKey) {
      storage?.set(storageKey, value);
    }
  });

  const [hiddenElement, setHiddenElement] = useState<ResizableElement | null>(
    () => {
      const storedValue = storageKey && storage?.get(storageKey);
      if (storedValue === HIDE_FIRST || initiallyHidden === 'first') {
        return 'first';
      }
      if (storedValue === HIDE_SECOND || initiallyHidden === 'second') {
        return 'second';
      }
      return null;
    },
  );

  const setHiddenElementWithCallback = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, function is optimized by react-compiler, no need to wrap with useCallback
    (element: ResizableElement | null) => {
      if (element !== hiddenElement) {
        setHiddenElement(element);
        onHiddenElementChange?.(element);
      }
    };

  const firstRef = useRef<HTMLDivElement>(null);
  const dragBarRef = useRef<HTMLDivElement>(null);
  const secondRef = useRef<HTMLDivElement>(null);

  const defaultFlexRef = useRef(`${defaultSizeRelation}`);

  /**
   * Set initial flex values
   */
  useLayoutEffect(() => {
    const storedValue =
      (storageKey && storage?.get(storageKey)) || defaultFlexRef.current;

    if (firstRef.current) {
      firstRef.current.style.display = 'flex';
      firstRef.current.style.flex =
        storedValue === HIDE_FIRST || storedValue === HIDE_SECOND
          ? defaultFlexRef.current
          : storedValue;
    }