# All files / window-splitter useLocalStorageWindowSplitter.ts

0% Statements 0/82
0% Branches 0/1
0% Functions 0/1
0% Lines 0/82

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83

     "use client";
    import { useEffect, useState } from "react";
    import {
      deserializeDraggableValue,
      getDraggableDefaultValue,
    } from "../draggable/utils";
    import type {
      LocalStorageHookOptions,
      LocalStorageHookReturnValue,
    } from "../useLocalStorage";
    import { useLocalStorage } from "../useLocalStorage";
    import { useControlledWindowSplitter } from "./useControlledWindowSplitter";
    import type {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      useWindowSplitter,
      WindowSplitterImplementation,
      WindowSplitterOptions,
    } from "./useWindowSplitter";

    /**
     * @remarks \@since 6.0.0
     */
    export interface LocalStorageWindowSplitterOptions<
      E extends HTMLElement = HTMLButtonElement
    > extends WindowSplitterOptions<E>,
        Pick<LocalStorageHookOptions<E>, "key" | "manual"> {}

    /**
     * @remarks \@since 6.0.0
     */
    export interface LocalStorageWindowSplitterImplementation<
      E extends HTMLElement = HTMLButtonElement
    > extends WindowSplitterImplementation<E>,
        Pick<LocalStorageHookReturnValue<E>, "persist" | "remove"> {}

    /**
     * This is the `useWindowSplitter` that also allows the value to be saved into
     * local storage.
     *
     * @see {@link useWindowSplitter} for an example.
     * @remarks \@since 6.0.0
     */
    export function useLocalStorageWindowSplitter<
      E extends HTMLElement = HTMLButtonElement
    >(
      options: LocalStorageWindowSplitterOptions<E>
    ): LocalStorageWindowSplitterImplementation<E> {
      const { min, max, defaultValue, key, manual, ...remaining } = options;

      // Note: this is pretty much the same setup as the `useLocalStorageDraggable`
      // hook. the only difference is passing to the `useControlledWindowSplitter`
      const [dragging, setDragging] = useState(false);
      const { value, setValue, persist, remove } = useLocalStorage({
        key,
        manual: manual || dragging,
        defaultValue: () => getDraggableDefaultValue({ min, max, defaultValue }),
        deserializer: (item) => deserializeDraggableValue({ min, max, item }),
      });
      const splitter = useControlledWindowSplitter({
        min,
        max,
        value,
        setValue,
        dragging,
        setDragging,
        ...remaining,
      });
      useEffect(() => {
        if (!dragging && splitter.draggedOnce.current) {
          persist();
        }
      }, [dragging, persist, splitter.draggedOnce]);

      return {
        ...splitter,
        value,
        setValue,
        dragging,
        persist,
        remove,
      };
    }