@zohodesk/hooks/es/accordion/useAccordionHeight.js

Unified Component Library - Hooks

import { useState, useLayoutEffect } from 'react';
import useId from "../utils/useId";
/**
 @module accordion/useAccordionHeight
*/

/**
 * accordion reducer description
 * @function useAccordionHeight
 * @param {Array<boolean>} state - previous state
 * @param {object} action - action object
 * @param {string} action.type
 * @param {object} action.data
 * @returns {Array<boolean>}
 */

export default function useAccordionHeight(container, headingSelector) {
  const [accordionContentHeight, setAccordionConentHeight] = useState(0);
  useLayoutEffect(() => {
    function onResize() {
      if (container) {
        const containerHeight = container.getBoundingClientRect().height;
        const headings = container.querySelectorAll(headingSelector);
        const sumOfAccordionHeadingHeight = Array.from(headings).reduce((result, item) => {
          // eslint-disable-next-line no-param-reassign
          result += item.getBoundingClientRect().height;
          return result;
        }, 0);
        const remainingHeight = containerHeight - sumOfAccordionHeadingHeight;
        setAccordionConentHeight(remainingHeight);
      } else {
        setAccordionConentHeight(0);
      }
    }

    onResize();
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('resize', onResize);
    };
  }, [container, headingSelector]);
  return {
    accordionContentHeight
  };
}