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.

Sign up for GitHub

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

Jump to bottom

floatLayout 添加 closeOnClickOverlay 属性 #1516

Open
wants to merge 2 commits into
base: next
Choose a base branch
from
Open

floatLayout 添加 closeOnClickOverlay 属性 #1516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d9d1348
floatLayout 添加 closeOnClickOverlay 属性
obf1313 Aug 11, 2022
23061bf
feat: 新增点击遮罩层是否关闭弹窗功能
obf1313 Sep 15, 2022
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
24 changes: 13 additions & 11 deletions packages/taro-ui/src/components/float-layout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,15 @@ export default class AtFloatLayout extends React.Component<
}
}

private close = (): void => {
this.setState(
{
_isOpened: false
},
this.handleClose
)
private close = (type: 'overlay' | 'button', closeOnClickOverlay?: boolean): void => {
if ((type === 'overlay' && closeOnClickOverlay) || type === 'button') {
this.setState(
{
_isOpened: false
},
this.handleClose
)
}
}

private handleTouchMove = (e: CommonEvent): void => {
Expand All @@ -65,14 +67,14 @@ export default class AtFloatLayout extends React.Component<
const { _isOpened } = this.state
const {
title,

scrollY,
scrollX,
scrollTop,
scrollLeft,
upperThreshold,
lowerThreshold,
scrollWithAnimation
scrollWithAnimation,
closeOnClickOverlay = true
} = this.props

const rootClass = classNames(
Expand All @@ -85,12 +87,12 @@ export default class AtFloatLayout extends React.Component<

return (
<View className={rootClass} onTouchMove={this.handleTouchMove}>
<View onClick={this.close} className='at-float-layout__overlay' />
<View onClick={() => this.close('overlay', closeOnClickOverlay)} className='at-float-layout__overlay' />
<View className='at-float-layout__container layout'>
{title ? (
<View className='layout-header'>
<Text className='layout-header__title'>{title}</Text>
<View className='layout-header__btn-close' onClick={this.close} />
<View className='layout-header__btn-close' onClick={() => this.close('button')} />
</View>
) : null}
<View className='layout-body'>
Expand Down
4 changes: 4 additions & 0 deletions packages/taro-ui/types/float-layout.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,10 @@ export interface AtFloatLayoutProps extends AtComponent {
* 滚动到底部/右边，会触发 onScrollToLower 事件
*/
onScrollToLower?: CommonEventFunction
/**
* 点击遮罩层是否关闭，默认关闭
*/
closeOnClickOverlay?: boolean
}

export interface AtFloatLayoutState {
Expand Down