resizableDrawer.js

import React, {useCallback, useRef, useState} from 'react';
import {Drawer, makeStyles} from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  dragger: {
    height: '4px',
    cursor: 'ns-resize',
    padding: '0 4px',
    borderLeft: '1px solid #ddd',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 999,
    background: '#eaeaea'
  }
}));


export const ResizableDrawer = ({children, minHeight, maxHeight, ...props}) => {
  const classes = useStyles();
  const drawerRef = useRef();
  const [drawerHeight, setDrawerHeight] = useState(240);

  const onMouseMove = useCallback(e => {
    const newHeight = window.innerHeight-e.clientY;
    if (newHeight > minHeight && newHeight < maxHeight) {
      setDrawerHeight(newHeight);
    }
    e.preventDefault();
  }, []);

  const onMouseDown = e => {
    document.addEventListener('mouseup', onMouseUp, true);
    document.addEventListener('mousemove', onMouseMove, true);
    e.preventDefault();
  };
  const onMouseUp = () => {
    document.removeEventListener('mouseup', onMouseDown, true);
    document.removeEventListener('mousemove', onMouseMove, true);
  };
  return (
    <Drawer ref={drawerRef} {...props} PaperProps={{style: {height: drawerHeight}}}>
      <div onMouseDown={e => onMouseDown(e)} className={classes.dragger}/>
      {children}
    </Drawer>
  );
};