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

Feature compoent modal popup #531

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

Feature compoent modal popup #531

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
5187204
feat(modal):add new function about modal popup and animationType
xiangxiong Apr 14, 2019
c65d6b6
feat(modal):add new function about modal popup and animationType
xiangxiong Apr 14, 2019
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
6 changes: 6 additions & 0 deletions src/components/modal/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@ exports[`Modal Snap render opened Modal -- simple 1`] = `"<div class=\\"at-moda

exports[`Modal Snap render opened Modal -- not header 1`] = `"<div class=\\"at-modal at-modal--active\\"><div class=\\"at-modal__overlay\\"></div><div class=\\"at-modal__container\\"><div scrollY class=\\"taro-scroll taro-scroll-view__scroll-y at-modal__content\\">这里是正文内容，欢迎加入京东凹凸实验室 这里是正文内容，欢迎加入京东凹凸实验室 这里是正文内容，欢迎加入京东凹凸实验室</div><div class=\\"at-modal__footer\\"><div class=\\"at-modal__action\\"><button class=\\"weui-btn weui-btn_default\\">undefined取消</button><button class=\\"weui-btn weui-btn_default\\">undefined确定</button></div></div></div></div>"`;

exports[`Modal Snap render opened Modal -- popup 1`] = `"<div class=\\"at-modal\\"><div class=\\"at-modal__overlay\\"></div><div class=\\"at-modal__popup\\"><div class=\\"at-modal__header\\"><span class=\\"taro-text\\">标题</span></div><div scrollY class=\\"taro-scroll taro-scroll-view__scroll-y at-modal__content\\"><div class=\\"content-simple\\"><span class=\\"taro-text\\">欢迎加入京东凹凸实验室&#039;n&#039;r欢迎加入京东凹凸实验室</span></div></div><div class=\\"at-modal__footer at-modal__footer--simple\\"><div class=\\"at-modal__action\\"><button class=\\"weui-btn weui-btn_default\\">undefined取消</button><button class=\\"weui-btn weui-btn_default\\">undefined确认</button></div></div></div></div>"`;

exports[`Modal Snap render opened Modal -- popup animationType 1`] = `"<div class=\\"at-modal\\"><div class=\\"at-modal__overlay\\"></div><div class=\\"at-modal__popup at-modal__popup-slide-up\\"><div class=\\"at-modal__header\\"><span class=\\"taro-text\\">标题</span></div><div scrollY class=\\"taro-scroll taro-scroll-view__scroll-y at-modal__content\\"><div class=\\"content-simple\\"><span class=\\"taro-text\\">欢迎加入京东凹凸实验室&#039;n&#039;r欢迎加入京东凹凸实验室</span></div></div><div class=\\"at-modal__footer at-modal__footer--simple\\"><div class=\\"at-modal__action\\"><button class=\\"weui-btn weui-btn_default\\">undefined取消</button><button class=\\"weui-btn weui-btn_default\\">undefined确认</button></div></div></div></div>"`;

exports[`Modal Snap render opened Modal -- simple 1`] = `"<div class=\\"at-modal\\"><div class=\\"at-modal__overlay\\"></div><div class=\\"at-modal__popup\\"><div class=\\"at-modal__header\\"><span class=\\"taro-text\\">标题</span></div><div scrollY class=\\"taro-scroll taro-scroll-view__scroll-y at-modal__content\\"><div class=\\"content-simple\\"><span class=\\"taro-text\\">欢迎加入京东凹凸实验室&#039;n&#039;r欢迎加入京东凹凸实验室</span></div></div><div class=\\"at-modal__footer at-modal__footer--simple\\"><div class=\\"at-modal__action\\"><button class=\\"weui-btn weui-btn_default\\">undefined取消</button><button class=\\"weui-btn weui-btn_default\\">undefined确认</button></div></div></div></div>"`;

exports[`Modal Snap render opened Modal -- single button 1`] = `"<div class=\\"at-modal at-modal--active\\"><div class=\\"at-modal__overlay\\"></div><div class=\\"at-modal__container\\"><div scrollY class=\\"taro-scroll taro-scroll-view__scroll-y at-modal__content\\">这里是正文内容，欢迎加入京东凹凸实验室 这里是正文内容，欢迎加入京东凹凸实验室 这里是正文内容，欢迎加入京东凹凸实验室</div><div class=\\"at-modal__footer\\"><div class=\\"at-modal__action\\"><button class=\\"weui-btn weui-btn_default\\">undefined确定</button></div></div></div></div>"`;

exports[`Modal Snap render opened Modal 1`] = `"<div class=\\"at-modal at-modal--active\\"><div class=\\"at-modal__overlay\\"></div><div class=\\"at-modal__container\\"><div class=\\"at-modal__header\\">标题</div><div scrollY class=\\"taro-scroll taro-scroll-view__scroll-y at-modal__content\\">这里是正文内容，欢迎加入京东凹凸实验室 这里是正文内容，欢迎加入京东凹凸实验室 这里是正文内容，欢迎加入京东凹凸实验室</div><div class=\\"at-modal__footer\\"><div class=\\"at-modal__action\\"><button class=\\"weui-btn weui-btn_default\\">undefined取消</button><button class=\\"weui-btn weui-btn_default\\">undefined确定</button></div></div></div></div>"`;
21 changes: 18 additions & 3 deletions src/components/modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export default class AtModal extends AtComponent {

render () {
const { _isOpened } = this.state
const { title, content, cancelText, confirmText } = this.props
const { title, content, cancelText, confirmText, popup, animationType } = this.props

const rootClass = classNames(
'at-modal',
Expand All @@ -81,6 +81,21 @@ export default class AtModal extends AtComponent {
this.props.className
)

let isPopUp = false

if (popup) {
isPopUp = true
// eslint-disable-next-line no-unused-expressions
animationType === 'slide-up' ? 'slide-up' : 'slide-down'
}
const popUpClass = classNames(
{
'at-modal__container': !isPopUp,
'at-modal__popup': isPopUp,
[`at-modal__popup-${animationType}`]: isPopUp && animationType
}
)

if (title || content) {
const isRenderAction = cancelText || confirmText
return (
Expand All @@ -89,7 +104,7 @@ export default class AtModal extends AtComponent {
onClick={this.handleClickOverlay}
className='at-modal__overlay'
/>
<View className='at-modal__container'>
<View className={popUpClass}>
{title && (
<AtModalHeader>
<Text>{title}</Text>
Expand Down Expand Up @@ -120,7 +135,7 @@ export default class AtModal extends AtComponent {
return (
<View onTouchMove={this.handleTouchMove} className={rootClass}>
<View className='at-modal__overlay' onClick={this.handleClickOverlay} />
<View className='at-modal__container'>{this.props.children}</View>
<View className={popUpClass}>{this.props.children}</View>
</View>
)
}
Expand Down
27 changes: 27 additions & 0 deletions src/components/modal/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,33 @@ describe('Modal Snap', () => {
)
expect(component).toMatchSnapshot()
})

it('render opened Modal -- popup', () => {
const component = renderToString(
<AtModal
popup
title='标题'
cancelText='取消'
confirmText='确认'
content='欢迎加入京东凹凸实验室\n\r欢迎加入京东凹凸实验室'
/>
)
expect(component).toMatchSnapshot()
})

it('render opened Modal -- popup animationType', () => {
const component = renderToString(
<AtModal
popup
animationType='slide-up'
title='标题'
cancelText='取消'
confirmText='确认'
content='欢迎加入京东凹凸实验室\n\r欢迎加入京东凹凸实验室'
/>
)
expect(component).toMatchSnapshot()
})
})

describe('Modal Behavior ', () => {
Expand Down
48 changes: 45 additions & 3 deletions src/pages/action/modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Taro from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import { View, Button, Text, Input } from '@tarojs/components'
import {
AtButton,
AtModal,
Expand Down Expand Up @@ -27,7 +27,8 @@ export default class ModalPage extends Taro.Component {
isOpened2: false,
isOpened3: false,
isOpened4: false,
isOpened5: false
isOpened5: false,
isOpened6: false
}
}

Expand Down Expand Up @@ -61,7 +62,7 @@ export default class ModalPage extends Taro.Component {
}

render () {
const { isOpened1, isOpened2, isOpened3, isOpened4, isOpened5 } = this.state
const { isOpened1, isOpened2, isOpened3, isOpened4, isOpened5, isOpened6 } = this.state

return (
<View className='page'>
Expand Down Expand Up @@ -116,6 +117,17 @@ export default class ModalPage extends Taro.Component {
</View>
</View>

<View className='panel'>
<View className='panel__title'>打开popup</View>
<View className='panel__content'>
<View className='example-item'>
<AtButton onClick={this.handleClick.bind(this, 6)}>
打开popup
</AtButton>
</View>
</View>
</View>

{/* 城市索引 */}
<View className='panel'>
<View className='panel__title'>城市索引</View>
Expand Down Expand Up @@ -204,6 +216,36 @@ export default class ModalPage extends Taro.Component {
onConfirm={this.closeModalConfirm.bind(this, 4, '点击了确认')}
/>

{/* Popup */}
<AtModal
popup
animationType='slide-up'
isOpened={isOpened6}
cancelText='取消'
confirmText='确认'
onClose={this.closeModal.bind(this, 6, 'Modal被关闭了')}
onCancel={this.closeModal.bind(this, 6, '点击了取消')}
onConfirm={this.closeModalConfirm.bind(this, 6, '点击了确认')}
>
<AtModalHeader>完善信息</AtModalHeader>
<AtModalContent>
<View className='modal-content' style='display:flex; margin:5px;'>
<Text style='height:30px; line-height:30px; width:50px; '>姓名:</Text>
<Input style='height:30px; line-height:30px; border:1px solid #ddd; margin-left:20px;' />
</View>
<View className='modal-content' style='display:flex; margin:5px;'>
<Text style='height:30px; line-height:30px; width:50px;'>呢称:</Text>
<Input style='height:30px; line-height:30px; border:1px solid #ddd; margin-left:20px;' />
</View>
</AtModalContent>
<AtModalAction>
<Button onClick={this.closeModal.bind(this, 6, '点击了确定')}>
确定
</Button>
</AtModalAction>
</AtModal>


<AtModal isOpened={isOpened5}>
<AtModalContent>
<AtIndexes list={mockData} topKey='Top'>
Expand Down
16 changes: 16 additions & 0 deletions src/style/components/modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,22 @@ $at-modal-duration: 200ms;
overflow: hidden;
}

&__popup {
position: absolute;
width: 100%;
background: #fff;

&-slide-down {
top: 0;
}

&-slide-up {
position: absolute;
width: 100%;
bottom: 0;
}
}

&__header {
@include hairline-bottom-relative($color: $color-grey-4);
@include line(1);
Expand Down