Skip to content

Commit 77c44f5

Browse files
nrps9909nrps9909
committed
docs: explain resize callback sizes
1 parent aaadac9 commit 77c44f5

3 files changed

Lines changed: 47 additions & 41 deletions

File tree

‎README.md‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -56,43 +56,43 @@ Then open `http://localhost:8000`.
5656

5757
## API
5858

59-
| Property | Type | Default | Description |
60-
| ---------------------- | -------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------- |
61-
| afterOpenChange | `(open: boolean) => void` | - | Called after the open or close animation ends. |
62-
| autoFocus | boolean | true | Whether to focus the drawer after it opens. |
63-
| children | ReactNode | - | Drawer content. |
64-
| className | string | - | Class name for the drawer panel. |
65-
| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | Semantic class names for internal drawer elements. |
66-
| defaultSize | number \| string | - | Default size for uncontrolled resizable drawer. |
67-
| destroyOnHidden | boolean | false | Unmount the drawer after it is fully closed. |
68-
| drawerRender | `(node: ReactNode) => ReactNode` | - | Customize rendered drawer panel content. |
69-
| focusTrap | boolean | - | Whether to trap focus inside the drawer. |
70-
| focusTriggerAfterClose | boolean | true | Whether to return focus to the trigger after closing. |
71-
| forceRender | boolean | false | Render the drawer before it is opened. |
72-
| getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | Return the mount node. Set to `false` to render inline. |
73-
| height | number \| string | - | Deprecated. Use `size` for top or bottom placement. |
74-
| keyboard | boolean | true | Whether pressing Esc closes the drawer. |
75-
| mask | boolean | true | Whether to show the mask. |
76-
| maskClassName | string | - | Class name for the mask. |
77-
| maskClosable | boolean | true | Whether clicking the mask closes the drawer. |
78-
| maskMotion | CSSMotionProps | - | Motion config for the mask. |
79-
| maskStyle | CSSProperties | - | Style for the mask. |
80-
| maxSize | number | - | Maximum size for a resizable drawer. |
81-
| motion | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | Motion config for the drawer panel. |
82-
| onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | Called when the drawer requests to close. |
83-
| open | boolean | false | Whether the drawer is open. |
84-
| panelRef | Ref<HTMLDivElement> | - | Ref for the drawer panel. |
85-
| placement | `left` \| `right` \| `top` \| `bottom` | `right` | Drawer placement. |
86-
| prefixCls | string | `rc-drawer` | Class name prefix. |
87-
| push | boolean \| `{ distance?: number \| string }` | - | Push parent drawers when nested. |
88-
| resizable | boolean \| `{ onResize?: (size: number) => void; onResizeStart?: () => void; onResizeEnd?: () => void }` | false | Enable resizing and optional resize callbacks. |
89-
| rootClassName | string | - | Class name for the root wrapper. |
90-
| rootStyle | CSSProperties | - | Style for the root wrapper. |
91-
| size | number \| string | `378` for left/right | Drawer size. Controls width for left/right and height for top/bottom placement. |
92-
| style | CSSProperties | - | Style for the drawer panel. |
93-
| styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | Semantic styles for internal drawer elements. |
94-
| width | number \| string | - | Deprecated. Use `size` for left or right placement. |
95-
| zIndex | number | - | Root wrapper z-index. |
59+
| Property | Type | Default | Description |
60+
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------- |
61+
| afterOpenChange | `(open: boolean) => void` | - | Called after the open or close animation ends. |
62+
| autoFocus | boolean | true | Whether to focus the drawer after it opens. |
63+
| children | ReactNode | - | Drawer content. |
64+
| className | string | - | Class name for the drawer panel. |
65+
| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | Semantic class names for internal drawer elements. |
66+
| defaultSize | number \| string | - | Default size for uncontrolled resizable drawer. |
67+
| destroyOnHidden | boolean | false | Unmount the drawer after it is fully closed. |
68+
| drawerRender | `(node: ReactNode) => ReactNode` | - | Customize rendered drawer panel content. |
69+
| focusTrap | boolean | - | Whether to trap focus inside the drawer. |
70+
| focusTriggerAfterClose | boolean | true | Whether to return focus to the trigger after closing. |
71+
| forceRender | boolean | false | Render the drawer before it is opened. |
72+
| getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | Return the mount node. Set to `false` to render inline. |
73+
| height | number \| string | - | Deprecated. Use `size` for top or bottom placement. |
74+
| keyboard | boolean | true | Whether pressing Esc closes the drawer. |
75+
| mask | boolean | true | Whether to show the mask. |
76+
| maskClassName | string | - | Class name for the mask. |
77+
| maskClosable | boolean | true | Whether clicking the mask closes the drawer. |
78+
| maskMotion | CSSMotionProps | - | Motion config for the mask. |
79+
| maskStyle | CSSProperties | - | Style for the mask. |
80+
| maxSize | number | - | Maximum size for a resizable drawer. |
81+
| motion | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | Motion config for the drawer panel. |
82+
| onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | Called when the drawer requests to close. |
83+
| open | boolean | false | Whether the drawer is open. |
84+
| panelRef | Ref<HTMLDivElement> | - | Ref for the drawer panel. |
85+
| placement | `left` \| `right` \| `top` \| `bottom` | `right` | Drawer placement. |
86+
| prefixCls | string | `rc-drawer` | Class name prefix. |
87+
| push | boolean \| `{ distance?: number \| string }` | - | Push parent drawers when nested. |
88+
| resizable | boolean \| `{ onResize?: (size: number) => void; onResizeStart?: (size: number) => void; onResizeEnd?: (size: number) => void }` | false | Enable resizing. Each callback receives the current size in pixels. |
89+
| rootClassName | string | - | Class name for the root wrapper. |
90+
| rootStyle | CSSProperties | - | Style for the root wrapper. |
91+
| size | number \| string | `378` for left/right | Drawer size. Controls width for left/right and height for top/bottom placement. |
92+
| style | CSSProperties | - | Style for the drawer panel. |
93+
| styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | Semantic styles for internal drawer elements. |
94+
| width | number \| string | - | Deprecated. Use `size` for left or right placement. |
95+
| zIndex | number | - | Root wrapper z-index. |
9696

9797
Mouse and keyboard event handlers such as `onClick`, `onMouseEnter`, `onMouseLeave`, `onKeyDown`, and `onKeyUp` are passed to the drawer panel.
9898

‎docs/demo/resizable.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@ nav:
55
path: /resizable
66
---
77

8+
Drag an edge to resize the drawer. `onResizeStart`, `onResize`, and `onResizeEnd` each receive the current size in pixels.
9+
810
<code src="../examples/resizable.tsx"></code>

‎docs/examples/resizable.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export default () => {
1212
const [placement, setPlacement] = React.useState<Placement>('right');
1313
const [width, setWidth] = React.useState(320);
1414
const [height, setHeight] = React.useState(240);
15+
const [resizeStatus, setResizeStatus] = React.useState('Ready to resize');
1516

1617
const buttons = [
1718
{ placement: 'left' as Placement, label: 'Left Drawer' },
@@ -40,6 +41,9 @@ export default () => {
4041
</button>
4142
))}
4243
</div>
44+
<div style={{ marginBottom: 16 }}>
45+
Current size: {isHorizontal ? width : height}px. {resizeStatus}
46+
</div>
4347
<Drawer
4448
width={isHorizontal ? width : undefined}
4549
height={!isHorizontal ? height : undefined}
@@ -55,11 +59,11 @@ export default () => {
5559
setHeight(size);
5660
}
5761
},
58-
onResizeStart: () => {
59-
console.log('onResizeStart');
62+
onResizeStart: size => {
63+
setResizeStatus(`Resize started at ${size}px`);
6064
},
61-
onResizeEnd: () => {
62-
console.log('onResizeEnd');
65+
onResizeEnd: size => {
66+
setResizeStatus(`Resize ended at ${size}px`);
6367
},
6468
}}
6569
{...motionProps}

0 commit comments

Comments
 (0)