Skip to content

Commit 1545c74

Browse files
QdabuliuQQdabuliuQ
committed
feat: add resizable drawer feature
1 parent 2418e05 commit 1545c74

File tree

13 files changed

+738
-253
lines changed

13 files changed

+738
-253
lines changed

‎README.md

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -41,35 +41,39 @@ ReactDom.render(
4141

4242
## API
4343

44-
| props | type | default | description |
45-
| ------------------ | --------------------------------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------- |
46-
| className | string | null | - |
47-
| classNames | { mask?: string; content?: string; wrapper?: string; } | - | pass className to target area |
48-
| styles | { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | - | pass style to target area |
49-
| prefixCls | string | 'drawer' | prefix class |
50-
| width | string \| number | null | drawer content wrapper width, drawer level transition width |
51-
| height | string \| number | null | drawer content wrapper height, drawer level transition height |
52-
| open | boolean | false | open or close menu |
53-
| defaultOpen | boolean | false | default open menu |
54-
| placement | string | `left` | `left` `top` `right` `bottom` |
55-
| level | string \| array | `all` | With the drawer level element. `all`/ null / className / id / tagName / array |
56-
| levelMove | number \| array \| func | null | level move value. default is drawer width |
57-
| duration | string | `.3s` | level animation duration |
58-
| ease | string | `cubic-bezier(0.78, 0.14, 0.15, 0.86)` | level animation timing function |
59-
| getContainer | string \| func \| HTMLElement | `body` | Return the mount node for Drawer. if is `null` use React.creactElement |
60-
| showMask | boolean | true | mask is show |
61-
| maskClosable | boolean | true | Clicking on the mask (area outside the Drawer) to close the Drawer or not. |
62-
| maskStyle | CSSProperties | null | mask style |
63-
| afterOpenChange | func | null | transition end callback(open) |
64-
| onClose | func | null | close click function |
65-
| keyboard | boolean | true | Whether support press esc to close |
66-
| autoFocus | boolean | true | Whether focusing on the drawer after it opened |
67-
| onMouseEnter | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse enter drawer panel |
68-
| onMouseOver | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse over drawer panel |
69-
| onMouseLeave | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse leave drawer panel |
70-
| onClick | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse click drawer panel |
71-
| onKeyDown | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse keydown on drawer panel |
72-
| onKeyUp | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse keyup on drawer panel |
44+
| props | type | default | description |
45+
| --------------- | --------------------------------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------- |
46+
| className | string | null | - |
47+
| classNames | { mask?: string; content?: string; wrapper?: string; } | - | pass className to target area |
48+
| styles | { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | - | pass style to target area |
49+
| prefixCls | string | 'drawer' | prefix class |
50+
| width | string \| number | null | drawer content wrapper width, drawer level transition width |
51+
| height | string \| number | null | drawer content wrapper height, drawer level transition height |
52+
| open | boolean | false | open or close menu |
53+
| defaultOpen | boolean | false | default open menu |
54+
| placement | string | `left` | `left` `top` `right` `bottom` |
55+
| level | string \| array | `all` | With the drawer level element. `all`/ null / className / id / tagName / array |
56+
| levelMove | number \| array \| func | null | level move value. default is drawer width |
57+
| duration | string | `.3s` | level animation duration |
58+
| ease | string | `cubic-bezier(0.78, 0.14, 0.15, 0.86)` | level animation timing function |
59+
| getContainer | string \| func \| HTMLElement | `body` | Return the mount node for Drawer. if is `null` use React.creactElement |
60+
| showMask | boolean | true | mask is show |
61+
| maskClosable | boolean | true | Clicking on the mask (area outside the Drawer) to close the Drawer or not. |
62+
| maskStyle | CSSProperties | null | mask style |
63+
| afterOpenChange | func | null | transition end callback(open) |
64+
| onClose | func | null | close click function |
65+
| keyboard | boolean | true | Whether support press esc to close |
66+
| autoFocus | boolean | true | Whether focusing on the drawer after it opened |
67+
| resizable | boolean | false | Whether the drawer can be resized by dragging |
68+
| onMouseEnter | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse enter drawer panel |
69+
| onMouseOver | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse over drawer panel |
70+
| onMouseLeave | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse leave drawer panel |
71+
| onClick | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse click drawer panel |
72+
| onKeyDown | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse keydown on drawer panel |
73+
| onKeyUp | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse keyup on drawer panel |
74+
| onResize | (size: number) => void | - | Trigger when drawer is being resized |
75+
| onResizeStart | () => void | - | Trigger when resize starts |
76+
| onResizeEnd | () => void | - | Trigger when resize ends |
7377

7478
> 2.0 Rename `onMaskClick` -> `onClose`, add `maskClosable`.
7579

0 commit comments

Comments
 (0)