@mantine/core/cjs/components/Tree/use-tree.cjs

React components library focused on usability, accessibility and developer experience

'use client';
'use strict';

var react = require('react');

function getInitialState(initialState, data, value, acc = {}) {
  data.forEach((node) => {
    acc[node.value] = node.value in initialState ? initialState[node.value] : node.value === value;
    if (Array.isArray(node.children)) {
      getInitialState(initialState, node.children, value, acc);
    }
  });
  return acc;
}
function useTree({
  initialSelectedState = [],
  initialExpandedState = {},
  multiple = false
} = {}) {
  const [expandedState, setExpandedState] = react.useState(initialExpandedState);
  const [selectedState, setSelectedState] = react.useState(initialSelectedState);
  const [anchorNode, setAnchorNode] = react.useState(null);
  const initialize = react.useCallback(
    (data) => {
      setExpandedState((current) => getInitialState(current, data, selectedState));
    },
    [selectedState]
  );
  const toggleExpanded = react.useCallback((value) => {
    setExpandedState((current) => ({ ...current, [value]: !current[value] }));
  }, []);
  const collapse = react.useCallback((value) => {
    setExpandedState((current) => ({ ...current, [value]: false }));
  }, []);
  const expand = react.useCallback((value) => {
    setExpandedState((current) => ({ ...current, [value]: true }));
  }, []);
  const expandAllNodes = react.useCallback(() => {
    setExpandedState((current) => {
      const next = { ...current };
      Object.keys(next).forEach((key) => {
        next[key] = true;
      });
      return next;
    });
  }, []);
  const collapseAllNodes = react.useCallback(() => {
    setExpandedState((current) => {
      const next = { ...current };
      Object.keys(next).forEach((key) => {
        next[key] = false;
      });
      return next;
    });
  }, []);
  const toggleSelected = react.useCallback(
    (value) => setSelectedState((current) => {
      if (!multiple) {
        if (current.includes(value)) {
          setAnchorNode(null);
          return [];
        }
        setAnchorNode(value);
        return [value];
      }
      if (current.includes(value)) {
        setAnchorNode(null);
        return current.filter((item) => item !== value);
      }
      setAnchorNode(value);
      return [...current, value];
    }),
    []
  );
  const select = react.useCallback((value) => {
    setAnchorNode(value);
    setSelectedState(
      (current) => multiple ? current.includes(value) ? current : [...current, value] : [value]
    );
  }, []);
  const deselect = react.useCallback((value) => {
    anchorNode === value && setAnchorNode(null);
    setSelectedState((current) => current.filter((item) => item !== value));
  }, []);
  const clearSelected = react.useCallback(() => {
    setSelectedState([]);
    setAnchorNode(null);
  }, []);
  return {
    multiple,
    expandedState,
    selectedState,
    anchorNode,
    initialize,
    toggleExpanded,
    collapse,
    expand,
    expandAllNodes,
    collapseAllNodes,
    setExpandedState,
    toggleSelected,
    select,
    deselect,
    clearSelected,
    setSelectedState
  };
}

exports.useTree = useTree;
//# sourceMappingURL=use-tree.cjs.map