feat: add resizable drawer feature #527
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the โจ Finishing Touches๐งช Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. ๐ชง TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@QdabuliuQ is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
| mask?: React.CSSProperties; | ||
| wrapper?: React.CSSProperties; | ||
| content?: React.CSSProperties; | ||
| resizableLine?: React.CSSProperties; |
There was a problem hiding this comment.
| onResize?: (size: number) => void; | ||
| onResizeStart?: () => void; | ||
| onResizeEnd?: () => void; |
There was a problem hiding this comment.
ไธ็กฎๅฎๆฏๅฆ้่ฆไธๅผๅงๆด้ฒ่ฟไนๅคๅ่ฐ๏ผ็็ๅคงไฝฌไปฌๆไน่ฏด~ ไนๅฏไปฅ่ฏด่ฏดไฝ ็ๆณๆณ
There was a problem hiding this comment.
ๅ่ไบ splitter ็่ฎพ่ฎกๆฏๅง๏ผๅ่ฝๆฏๅฅฝๅ่ฝ~
There was a problem hiding this comment.
ๆฏ็ๅ๏ผๆ่งๅพๆๅฟ ่ฆๆด้ฒๅบๅป๏ผๅ ไธบ antd/drawer ็ปไปถไฝฟ็จ็ๆถๅ้่ฆ็ๅฌๅฐ start / end ไบไปถ๏ผๅๆถ / ๆขๅค transition ่ฟๆธก antd/drawer ๅฎฝๅบฆ็ๆ ทๅผ๏ผ่ฟๆ ทๅจๆๆฝ็ๆถๅๅฏไปฅๅจๆๅผๅฏๅๅ ณ้ญ transition ๅฝฑๅใ
|
ไธ้ข็้ฎ้ข้ฝ่ฐๆดไบ๏ผ้บป็ฆๅคงไฝฌไปฌๅ็็๏ฝ |
| // Add global mouse event listeners during drag | ||
| document.addEventListener('mousemove', handleMouseMove); | ||
| document.addEventListener('mouseup', handleMouseUp); | ||
| document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize'; |
There was a problem hiding this comment.
ไธบๅฅๆฏ body๏ผๅฆๆ dom ไธๅจ body ไธๅข
There was a problem hiding this comment.
่ฟ้ๆฏ้ผ ๆ ๆไฝresizable ็ปไปถ็ๅ่ฟๅ
ฅisDragging ็ถๆ๏ผๅฐฑ็ป body ็ๅฌ้ผ ๆ ็งปๅจๅๆฌ่ตทไบไปถ๏ผ่ฎก็ฎ drawer ็ๅฎฝๅบฆ็ๅ๏ผdom ไธๅจ body ไนๆฏๅฏไปฅๆญฃๅธธ่ฎก็ฎ็ๅฉ
There was a problem hiding this comment.
ๆ่ฏด็ๆฏ style.cursor๏ผไธ่ฟๅฅฝๅ้ฎ้ขไนไธๅคง(ไบคไบไธ็่ตทๆฅๆฒกๅฅ้ฎ้ข)๏ผisDragging false ็ๆถๅไนๅธ่ฝฝไบใ
ๆๆฏ็ naive๏ผไปๆฏ style ๆ ทๅผๆพๅจ drawer ้้ข็
|
็ฐๅจ่ฟไธช็ปดๆคๆๆฌไผๆฏ่พๅคง๏ผๅจantdไพงไผๆๅพๅค็ๅฒ็ช๏ผ๏ผๆนไพฟๅฐrc-drawer master ไธๆฅไธไธชไน๏ผๅฏไปฅ็จ git cherry-pick๏ผ่ฟ่พนไธ่ฌๆฅ่ฏด่ฟๆฏๅธๆๅผๅฐ next ๅๆฏไธใ |
ๅฅฝ็ ๆ้ๆฐๅผๅฐ master ้้ข |
|
่พ่ฆไบ~ ๆ่ฐขไฝ ็่ดก็ฎ๏ผๅคชๆ่ฐขไบใ |
|
#528 @thinkasany ๆฐ็ pr ๅๅนถๅฐ master็๏ฝ |
ๅ่ไธไธ bot ็ cr ๅปบ่ฎฎ๏ผๆ็ๅฅฝๅๆฏๅฏไปฅ่่็๏ผ็ถๅๆๅคฉๅธฎไฝ ้ฎ้ฎ่ฑ้ ฑ๏ฝ |
3 participants
๐ค This is a ...
๐ Related Issues
feat: ant-design/ant-design#54597
๐ก Background and Solution
add resizable feature to Drawer component
add ResizableLine component to control the size of drawer
๐ Change Log