调整抽屉大小的推荐方法？

Question

我想通过可拖动的手柄来调整材料ui抽屉的宽度。我当前的方法是在整个应用程序上使用mousevent侦听器，该侦听器将检查是否按下了手柄并根据每次鼠标移动时的鼠标位置来更新宽度。

但是，这需要在整个应用程序上使用恒定的mouseevent侦听器，对于简单的调整大小功能而言，这似乎有些过分。

是否有更好/建议的调整大小方法？

Answer 1

它可能是一个useResize带有 API 的钩子，可以调整大小并提供当前宽度。

import { useCallback, useEffect, useState } from 'react'

type UseResizeProps = {
  minWidth: number
}

type UseResizeReturn = {
  width: number
  enableResize: () => void
}

const useResize = ({
  minWidth,
}: UseResizeProps): UseResizeReturn => {
  const [isResizing, setIsResizing] = useState(false)
  const [width, setWidth] = useState(minWidth)

  const enableResize = useCallback(() => {
    setIsResizing(true)
  }, [setIsResizing])

  const disableResize = useCallback(() => {
    setIsResizing(false)
  }, [setIsResizing])

  const resize = useCallback(
    (e: MouseEvent) => {
      if (isResizing) {
        const newWidth = e.clientX // You may want to add some offset here from props
        if (newWidth >= minWidth) {
          setWidth(newWidth)
        }
      }
    },
    [minWidth, isResizing, setWidth],
  )

  useEffect(() => {
    document.addEventListener('mousemove', resize)
    document.addEventListener('mouseup', disableResize)

    return () => {
      document.removeEventListener('mousemove', resize)
      document.removeEventListener('mouseup', disableResize)
    }
  }, [disableResize, resize])

  return { width, enableResize }
}

export default useResize

然后，您可以将调整大小逻辑与布局组件分离，如下所示：

const Layout = () => {
  const { width, enableResize } = useResize({ minWidth: 200 });

  return (
    <Drawer
      variant="permanent"
      open
      PaperProps={{ style: { width } }}
    >
      {drawer}
      <div
        style={{ 
          position: 'absolute',
          width: '2px',
          top: '0',
          right: '-1px',
          bottom: '0',
          cursor: 'col-resize'
        }}
        onMouseDown={enableResize}
      />
    </Drawer>
)

Answer 2

您可以mousedown在其上使用指示器拖动器。

例如这里

// styles
dragger: {
  width: '5px',
  cursor: 'ew-resize',
  padding: '4px 0 0',
  borderTop: '1px solid #ddd',
  position: 'absolute',
  top: 0,
  left: 0,
  bottom: 0,
  zIndex: '100',
  backgroundColor: '#f4f7f9'
}

...

state = {
  isResizing: false,
  lastDownX: 0,
  newWidth: {}
};

handleMousedown = e => {
  this.setState({ isResizing: true, lastDownX: e.clientX });
};

handleMousemove = e => {
  // we don't want to do anything if we aren't resizing.
  if (!this.state.isResizing) {
    return;
  }

  let offsetRight =
    document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
  let minWidth = 50;
  let maxWidth = 600;
  if (offsetRight > minWidth && offsetRight < maxWidth) {
    this.setState({ newWidth: { width: offsetRight } });
  }
};

handleMouseup = e => {
  this.setState({ isResizing: false });
};

componentDidMount() {
  document.addEventListener('mousemove', e => this.handleMousemove(e));
  document.addEventListener('mouseup', e => this.handleMouseup(e));
}

...

<Drawer
  variant="permanent"
  open
  anchor={'right'}
  classes={{
    paper: classes.drawerPaper
  }}
  PaperProps={{ style: this.state.newWidth }}
>
  <div
    id="dragger"
    onMouseDown={event => {
      this.handleMousedown(event);
    }}
    className={classes.dragger}
  />
  {drawer}
</Drawer>

这个想法是，当单击Drawer拖动器时，它将随着鼠标移动来调整宽度的大小。

播放演示。

Answer 3

我想使用 React Hooks 添加一个更新的答案。

你可以这样做，然后：

CSS：

sidebar-dragger: {
  width: '5px',
  cursor: 'ew-resize',
  padding: '4px 0 0',
  borderTop: '1px solid #ddd',
  position: 'absolute',
  top: 0,
  left: 0,
  bottom: 0,
  zIndex: '100',
  backgroundColor: '#f4f7f9'
}

React（使用带有引用和状态的钩子）

let isResizing = null;

function ResizeableSidebar (props) {
  const sidebarPanel = React.useRef('sidebarPanel');
  const cbHandleMouseMove = React.useCallback(handleMousemove, []);
  const cbHandleMouseUp = React.useCallback(handleMouseup, []);

  function handleMousedown (e) {
    e.stopPropagation();
    e.preventDefault();
    // we will only add listeners when needed, and remove them afterward
    document.addEventListener('mousemove', cbHandleMouseMove);
    document.addEventListener('mouseup', cbHandleMouseUp);
    isResizing = true;
  };

  function handleMousemove (e) {
    if (!isResizing) {
      return;
    }

    let offsetRight =
      document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
    let minWidth = 50;
    if (offsetRight > minWidth) {
      let curSize = offsetRight - 60;
      // using a ref instead of state will be way faster
      sidebarPanel.current.style.width = curSize + 'px';
    }
  };

  function handleMouseup (e) {
    if (!isResizing) {
      return;
    }
    isResizing = false;
    document.removeEventListener('mousemove', cbHandleMouseMove);
    document.removeEventListener('mouseup', cbHandleMouseUp);
  };

  return <div className="sidebar-container">
    <div
      className="sidebar-dragger"
      onMouseDown={handleMousedown}
    />
    <div>
      Your stuff goes here
    </div>
  </div>;
}