-
Notifications
You must be signed in to change notification settings - Fork 319
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1059 from Tencent/feat/drawer-size-drag
feat(Drawer): 新增sizeDraggable 支持通过拖拽改变抽屉宽度/高度
- Loading branch information
Showing
6 changed files
with
298 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Drawer, Radio, Button, Space } from 'tdesign-react'; | ||
|
|
||
| export default function () { | ||
| const [visible, setVisible] = useState(false); | ||
| const [placement, setPlacement] = useState('right'); | ||
|
|
||
| const handleClick = () => { | ||
| setVisible(true); | ||
| }; | ||
| const handleClose = () => { | ||
| setVisible(false); | ||
| }; | ||
| return ( | ||
| <Space> | ||
| <Radio.Group value={placement} onChange={(value) => setPlacement(value)}> | ||
| <Radio.Button value="left">从左侧拖拽抽屉</Radio.Button> | ||
| <Radio.Button value="right">从右侧拖拽抽屉</Radio.Button> | ||
| <Radio.Button value="top">从上方拖拽抽屉</Radio.Button> | ||
| <Radio.Button value="bottom">从下方拖拽抽屉</Radio.Button> | ||
| </Radio.Group> | ||
|
|
||
| <div> | ||
| <Button theme="primary" onClick={handleClick}> | ||
| 打开抽屉 | ||
| </Button> | ||
| </div> | ||
| <Drawer placement={placement} key={placement} visible={visible} onClose={handleClose} sizeDraggable={true}> | ||
| <p>抽屉的内容</p> | ||
| </Drawer> | ||
| </Space> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { useMemo, useState } from 'react'; | ||
| import { TdDrawerProps } from '../type'; | ||
| import { Styles } from '../../common'; | ||
|
|
||
| const useDrag = (placement: TdDrawerProps['placement'], sizeDraggable: TdDrawerProps['sizeDraggable']) => { | ||
| const [dragSizeValue, changeDragSizeValue] = useState<string>(null); | ||
|
|
||
| const handleMousemove = (e: MouseEvent) => { | ||
| // 鼠标移动时计算draggedSizeValue的值 | ||
| const { x, y } = e; | ||
| if (sizeDraggable) { | ||
| if (placement === 'right') { | ||
| changeDragSizeValue(`${document.documentElement.clientWidth - x + 8}px`); | ||
| } | ||
| if (placement === 'left') { | ||
| changeDragSizeValue(`${x + 8}px`); | ||
| } | ||
| if (placement === 'top') { | ||
| changeDragSizeValue(`${y + 8}px`); | ||
| } | ||
| if (placement === 'bottom') { | ||
| changeDragSizeValue(`${document.documentElement.clientHeight - y + 8}px`); | ||
| } | ||
| } | ||
| }; | ||
| const handleMouseup = () => { | ||
| document.removeEventListener('mouseup', handleMouseup, true); | ||
| document.removeEventListener('mousemove', handleMousemove, true); | ||
| }; | ||
| const draggableLineStyles: Styles = useMemo(() => { | ||
| // 设置拖拽control的样式 | ||
| const isHorizontal = ['right', 'left'].includes(placement); | ||
| const oppositeMap = { | ||
| left: 'right', | ||
| right: 'left', | ||
| top: 'bottom', | ||
| bottom: 'top', | ||
| }; | ||
| return { | ||
| zIndex: 1, | ||
| position: 'absolute', | ||
| background: 'transparent', | ||
| [oppositeMap[placement]]: 0, | ||
| width: isHorizontal ? '16px' : '100%', | ||
| height: isHorizontal ? '100%' : '16px', | ||
| cursor: isHorizontal ? 'col-resize' : 'row-resize', | ||
| }; | ||
| }, [placement]); | ||
|
|
||
| const enableDrag = () => { | ||
| // mousedown绑定mousemove和mouseup事件 | ||
| document.addEventListener('mouseup', handleMouseup, true); | ||
| document.addEventListener('mousemove', handleMousemove, true); | ||
| }; | ||
|
|
||
| return { dragSizeValue, enableDrag, draggableLineStyles }; | ||
| }; | ||
|
|
||
| export default useDrag; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters