Skip to content

feat: add resizable drawer feature #527

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
517 changes: 298 additions & 219 deletions assets/index.less

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions docs/demo/resizable.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: resizable
nav:
title: Resizable
path: /resizable
---

<code src="../examples/resizable.tsx"></code>
42 changes: 42 additions & 0 deletions docs/examples/assets/motion.less
Original file line number Diff line number Diff line change
Expand Up @@ -83,4 +83,46 @@
}
}
}

&-top {
.panel-motion();

&-enter,
&-appear {
transform: translateY(-100%);

&-active {
transform: translateX(0);
}
}

&-leave {
transform: translateX(0);

&-active {
transform: translateY(-100%) !important;
}
}
}

&-bottom {
.panel-motion();

&-enter,
&-appear {
transform: translateY(100%);

&-active {
transform: translateX(0);
}
}

&-leave {
transform: translateX(0);

&-active {
transform: translateY(100%) !important;
}
}
}
}
2 changes: 1 addition & 1 deletion docs/examples/base.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Demo = () => {
afterOpenChange={(c: boolean) => {
console.log('transitionEnd: ', c);
}}
placement="right"
placement="top"
// width={400}
width="60%"
// Motion
Expand Down
57 changes: 57 additions & 0 deletions docs/examples/resizable.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import * as React from 'react';

import Drawer from 'rc-drawer';

import '../../assets/index.less';
import './assets/index.less';
import motionProps from './motion';

export default () => {
const [open, setOpen] = React.useState(false);
const [placement, setPlacement] = React.useState<
'left' | 'right' | 'top' | 'bottom'
>('right');
const [resizable, setResizable] = React.useState(true);

return (
<div>
<div style={{ marginBottom: 16 }}>
<button onClick={() => setOpen(true)} style={{ marginRight: 8 }}>
打开抽屉
</button>
<label style={{ marginRight: 8 }}>
<input
type="checkbox"
checked={resizable}
onChange={e => setResizable(e.target.checked)}
/>
可拖拽调整大小
</label>
<span>位置:</span>
<select
value={placement}
onChange={e => setPlacement(e.target.value as any)}
>
<option value="left">左侧</option>
<option value="right">右侧</option>
<option value="top">顶部</option>
<option value="bottom">底部</option>
</select>
</div>
<Drawer
width={placement === 'left' || placement === 'right' ? 320 : undefined}
height={placement === 'top' || placement === 'bottom' ? 240 : undefined}
placement={placement}
open={open}
key={placement}
onClose={() => setOpen(false)}
resizable={resizable}
{...motionProps}
>
<div style={{ marginTop: 24, color: '#888' }}>
<p>你可以拖拽抽屉边缘调整大小(仅在勾选“可拖拽调整大小”时生效)。</p>
</div>
</Drawer>
</div>
);
};
11 changes: 11 additions & 0 deletions src/Drawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@ export interface DrawerProps
panelRef?: React.Ref<HTMLDivElement>;
classNames?: DrawerClassNames;
styles?: DrawerStyles;
/** 是否启用调整大小功能 */
resizable?: boolean;
onResize?: (size: number) => void;
onResizeStart?: () => void;
onResizeEnd?: () => void;
Comment on lines +31 to +33
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不确定是否需要一开始暴露这么多回调,看看大佬们怎么说~ 也可以说说你的想法

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

参考了 splitter 的设计是吧,功能是好功能~

image

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

是的嘞,我觉得有必要暴露出去,因为 antd/drawer 组件使用的时候需要监听到 start / end 事件,取消 / 恢复 transition 过渡 antd/drawer 宽度的样式,这样在拖拽的时候可以动态开启和关闭 transition 影响。

}

const Drawer: React.FC<DrawerProps> = props => {
Expand All @@ -48,6 +53,9 @@ const Drawer: React.FC<DrawerProps> = props => {
onClick,
onKeyDown,
onKeyUp,
onResize,
onResizeStart,
onResizeEnd,

// Refs
panelRef,
Expand Down Expand Up @@ -114,6 +122,9 @@ const Drawer: React.FC<DrawerProps> = props => {
onClick,
onKeyDown,
onKeyUp,
onResize,
onResizeStart,
onResizeEnd,
};
const drawerPopupProps = {
...props,
Expand Down
85 changes: 83 additions & 2 deletions src/DrawerPopup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import type {
DrawerPanelEvents,
} from './DrawerPanel';
import DrawerPanel from './DrawerPanel';
import ResizableLine from './ResizableLine';
import { parseWidthHeight } from './util';
import type { DrawerClassNames, DrawerStyles } from './inter';

Expand Down Expand Up @@ -75,6 +76,12 @@ export interface DrawerPopupProps
// styles
styles?: DrawerStyles;
drawerRender?: (node: React.ReactNode) => React.ReactNode;

// resizable
resizable?: boolean;
onResize?: (size: number) => void;
onResizeStart?: () => void;
onResizeEnd?: () => void;
}

function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
Expand Down Expand Up @@ -120,9 +127,13 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
onClick,
onKeyDown,
onKeyUp,
onResize,
onResizeStart,
onResizeEnd,

styles,
drawerRender,
resizable,
} = props;

// ================================ Refs ================================
Expand Down Expand Up @@ -280,6 +291,63 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
onKeyUp,
};

// ============================ Resizable ============================
const [currentSize, setCurrentSize] = React.useState<number>();
const [isDragging, setIsDragging] = React.useState(false);

const handleResize = React.useCallback(
(size: number) => {
setCurrentSize(size);
onResize?.(size);
},
[onResize],
);

const handleResizeStart = React.useCallback(() => {
setIsDragging(true);
onResizeStart?.();
}, [onResizeStart]);

const handleResizeEnd = React.useCallback(() => {
setIsDragging(false);
onResizeEnd?.();
}, [onResizeEnd]);

const dynamicWrapperStyle = React.useMemo(() => {
const style: React.CSSProperties = { ...wrapperStyle };

if (currentSize !== undefined && resizable) {
if (placement === 'left' || placement === 'right') {
style.width = currentSize;
} else {
style.height = currentSize;
}
}

if (resizable) {
style.overflow = 'none';
} else {
style.overflow = 'auto';
}

return style;
}, [wrapperStyle, currentSize, resizable, placement]);

const wrapperRef = React.useRef<HTMLDivElement>(null);
const [maxSize, setMaxSize] = React.useState(0);
React.useEffect(() => {
if (wrapperRef.current) {
const rect = wrapperRef.current.parentElement?.getBoundingClientRect();
console.log(rect, 'rect');

setMaxSize(
placement === 'left' || placement === 'right'
? (rect?.width ?? 0)
: (rect?.height ?? 0),
);
}
}, [wrapperRef.current]);

const panelNode: React.ReactNode = (
<CSSMotion
key="panel"
Expand Down Expand Up @@ -311,18 +379,31 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
);
return (
<div
ref={wrapperRef}
className={classNames(
`${prefixCls}-content-wrapper`,
drawerClassNames?.wrapper,
motionClassName,
!isDragging && motionClassName,
)}
style={{
...wrapperStyle,
...dynamicWrapperStyle,
...motionStyle,
...styles?.wrapper,
}}
{...pickAttrs(props, { data: true })}
>
<ResizableLine
prefixCls={`${prefixCls}-resizable`}
direction={placement}
resizable={resizable}
className={drawerClassNames?.resizableLine}
style={styles?.resizableLine}
minSize={0}
maxSize={maxSize}
onResize={handleResize}
onResizeStart={handleResizeStart}
onResizeEnd={handleResizeEnd}
/>
{drawerRender ? drawerRender(content) : content}
</div>
);
Expand Down
Loading