use-toggle-expend.ts 702 B

1234567891011121314151617181920212223242526
  1. import { useEffect, useState } from 'react'
  2. type Params = {
  3. ref: React.RefObject<HTMLDivElement>
  4. hasFooter?: boolean
  5. }
  6. const useToggleExpend = ({ ref, hasFooter = true }: Params) => {
  7. const [isExpand, setIsExpand] = useState(false)
  8. const [wrapHeight, setWrapHeight] = useState(ref.current?.clientHeight)
  9. const editorExpandHeight = isExpand ? wrapHeight! - (hasFooter ? 56 : 29) : 0
  10. useEffect(() => {
  11. setWrapHeight(ref.current?.clientHeight)
  12. }, [isExpand])
  13. const wrapClassName = isExpand && 'absolute z-10 left-4 right-6 top-[52px] bottom-0 pb-4 bg-white'
  14. return {
  15. wrapClassName,
  16. editorExpandHeight,
  17. isExpand,
  18. setIsExpand,
  19. }
  20. }
  21. export default useToggleExpend