# All files / src/window-splitter useLocalStorageWindowSplitter.ts

100% Statements 82/82
100% Branches 5/5
66.66% Functions 2/3
100% Lines 82/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
    831x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    6x
    2x
    2x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
     "use client";
    import { useEffect, useState } from "react";
    import {
      deserializeDraggableValue,
      getDraggableDefaultValue,
    } from "../draggable/utils.js";
    import type {
      LocalStorageHookOptions,
      LocalStorageHookReturnValue,
    } from "../useLocalStorage.js";
    import { useLocalStorage } from "../useLocalStorage.js";
    import { useControlledWindowSplitter } from "./useControlledWindowSplitter.js";
    import type {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      useWindowSplitter,
      WindowSplitterImplementation,
      WindowSplitterOptions,
    } from "./useWindowSplitter.js";

    /**
     * @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,
      };
    }