DraggleLayout.jsx 1.66 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
import React, { useRef, useState } from 'react';
import useDraggable from '../../pages/userCenter/userManage/UserManage';
import styles from './DraggleLayout.less';

function DraggleLayout({
  children, // 两列布局
  min = 0, // 左侧最小宽度
  max = Infinity, // 左侧最大宽度
  containerWidth = 0, // 容器宽度
  containerHeight = 0, // 容器高度
  initLeftWidth = 0, // 初始左侧容器宽度
  handler = null, // 拖拽器
  onWidthChange = width => width, // 左侧容器高度变化
}) {
  const ref = useRef(null);

  const [position, setPosition] = useState({ x: initLeftWidth, y: 0 });

  const [props] = useDraggable(
    ref,
    {
      onMouseMove: ({ x, y }) => {
        let _x = x;
        if (_x < min) _x = min;
        if (_x > max) _x = max;
        if (onWidthChange) onWidthChange(_x);
        setPosition({ x: _x, y });
      },
    },
    { overbound: false },
  );
  const _handler = handler ? (
    React.cloneElement(handler, {
      ...handler.props,
      style: {
        ...handler.props.style,
        pointerEvents: 'none',
      },
    })
  ) : (
    <span style={{ fontSize: 18, pointerEvents: 'none' }}></span>
  );

  return (
    <div
      ref={ref}
      className={styles.root}
      style={{ width: containerWidth, height: containerHeight }}
    >
      <div className={styles.left} style={{ width: position.x }}>
        {children[0]}

        <div className={styles.handler} {...props}>
          {_handler}
        </div>
      </div>
      <div
        className={styles.right}
        style={{ width: containerWidth - position.x }}
      >
        {children[1]}
      </div>
    </div>
  );
}

export default DraggleLayout;