Skip to content
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

refactor: overlay(v2.0) #886

Merged
merged 8 commits into from
Apr 17, 2023
Merged

Conversation

junjun666
Copy link
Contributor

  • overlayClass 重命名为 className
  • overlayStyle 重命名为 style
  • closeOnClickOverlay 重命名为 closeOnOverlayClick
  • 增加 afterClose和afterShow,用于完全关闭后触发的回调和完全展示后触发的回调
  • 完善overlay的demo示例

@oasis-cloud oasis-cloud changed the title chore: overlay(v2.0) refactor: overlay(v2.0) Apr 10, 2023
@@ -146,11 +146,11 @@ export const MenuItem = forwardRef((props: Partial<MenuItemProps>, ref) => {
onClick={() => parent.toggleItemShow(orderKey)}
/>
<Overlay
overlayClass="nut-menu__overlay"
className="nut-menu__overlay"
Copy link
Collaborator

Choose a reason for hiding this comment

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

提出 classprefix

Copy link
Contributor Author

Choose a reason for hiding this comment

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

这个在开发menu组件的时候再自行提取classprefix即可。

style={getPosition()}
lockScroll={parent.lockScroll}
visible={_showPopup}
closeOnClickOverlay={parent.closeOnClickOverlay}
closeOnOverlayClick={parent.closeOnClickOverlay}
Copy link
Collaborator

Choose a reason for hiding this comment

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

parent.closeOnClickOverlay 这个顺便改了吧,改成一致的。

Copy link
Collaborator

Choose a reason for hiding this comment

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

menu 没有处理。

Copy link
Contributor Author

Choose a reason for hiding this comment

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

这个closeOnClickOverlay是MenuProps的一个属性,这个在开发menu组件的时候再修改即可。

@@ -99,16 +238,13 @@ export default App;
| visible | 当前组件是否显示 | boolean | `false` |
| zIndex | 遮罩层级 | number | `2000` |
| duration | 动画时长,单位秒 | number | `0.3` |
| overlayClass | 自定义遮罩类名 | string | - |
| overlayStyle | 自定义遮罩样式 | CSSProperties | - |
| className | 自定义遮罩类名 | string | - |
Copy link
Collaborator

Choose a reason for hiding this comment

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

是否可以不用写。

Copy link
Contributor Author

Choose a reason for hiding this comment

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

是的,已经修改~

overlayClass: string
overlayStyle: React.CSSProperties
closeOnClickOverlay: boolean
className: string
Copy link
Collaborator

Choose a reason for hiding this comment

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

继承 BasicComponent

Copy link
Contributor Author

Choose a reason for hiding this comment

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

已修改~

@@ -84,13 +94,13 @@ export const Overlay: FunctionComponent<
}

const handleClick = (event: ITouchEvent) => {
if (closeOnClickOverlay) {
if (closeOnOverlayClick) {
afterClose && afterClose()
Copy link
Collaborator

Choose a reason for hiding this comment

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

afterclose 的时机不对~

Copy link
Contributor Author

Choose a reason for hiding this comment

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

已修改~

position: string
transition: string
style: React.CSSProperties
Copy link
Collaborator

Choose a reason for hiding this comment

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

这个为甚删掉呢~~~

Copy link
Contributor Author

Choose a reason for hiding this comment

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

因为这个已经继承自OverlayProps的属性了,OverlayProps属性又继承BasicComponent的属性,所以这个style属性先去掉了,为了先解决本地启动报错的问题。

@@ -161,7 +163,7 @@ export const Popup: FunctionComponent<
}

const onHandleClickOverlay = (e: ITouchEvent) => {
if (closeOnClickOverlay) {
if (closeOnOverlayClick) {
onClickOverlay && onClickOverlay(e)
Copy link
Collaborator

Choose a reason for hiding this comment

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

改成一致的吧

Copy link
Contributor Author

Choose a reason for hiding this comment

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

这个onClickOverlay是PopupProps的一个属性,这个在开发popup组件的时候再修改即可。

@oasis-cloud oasis-cloud merged commit a8ce510 into jdf2e:next Apr 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants