Skip to content

Commit

Permalink
Modal 适配微信 (#1035)
Browse files Browse the repository at this point in the history
* feat: modal 适配微信

* fix: remove cancel

---------

Co-authored-by: DiamondYuan <fandi.yfd@antgroup.com>
  • Loading branch information
DiamondYuan and DiamondYuan authored Jan 18, 2024
1 parent 08f7a92 commit 07034fd
Show file tree
Hide file tree
Showing 27 changed files with 800 additions and 167 deletions.
75 changes: 38 additions & 37 deletions compiled/alipay/demo/pages/Modal/index.axml
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<modal
<ant-modal
content="人在天边月上明"
visible="{{ basicVisible }}"
onClose="handleClose"
primaryButtonText="我知道了"
onPrimaryButtonTap="handlePrimaryButtonTap" />
<modal
<ant-modal
title="带标题的弹窗"
content="人在天边月上明"
visible="{{ withTitleVisible }}"
onClose="handleClose"
primaryButtonText="我知道了"
onPrimaryButtonTap="handlePrimaryButtonTap" />
<modal
<ant-modal
title="确定删除吗?"
content="删除后无法恢复"
visible="{{ basicTwoVisible }}"
Expand All @@ -20,7 +20,7 @@
secondaryButtonText="取消"
onPrimaryButtonTap="handlePrimaryButtonTap"
onSecondaryButtonTap="handleSecondaryButtonTap" />
<modal
<ant-modal
title="标题"
content="人在天边月上明"
visible="{{ basicThreeVisible }}"
Expand All @@ -30,16 +30,16 @@
cancelButtonText="取消"
onPrimaryButtonTap="handlePrimaryButtonTap"
onSecondaryButtonTap="handleSecondaryButtonTap"
onCancelButtonTap="handleSecondaryButtonTap" />
<modal
onCancelButtonTap="handleCancelButtonTap" />
<ant-modal
title="强调模式"
content="主操作按钮是Button,右上角可有关闭按钮,是用来强调让用户去注意到主操作"
type="focus"
visible="{{ focusOneVisible }}"
onClose="handleClose"
primaryButtonText="我知道了"
onPrimaryButtonTap="handlePrimaryButtonTap" />
<modal
<ant-modal
title="强调模式"
content="主操作按钮是Button,右上角可有关闭按钮,是用来强调让用户去注意到主操作"
type="focus"
Expand All @@ -49,7 +49,7 @@
secondaryButtonText="辅助操作"
onPrimaryButtonTap="handlePrimaryButtonTap"
onSecondaryButtonTap="handleSecondaryButtonTap" />
<modal
<ant-modal
title="强调模式"
content="主操作按钮是Button,右上角可有关闭按钮,是用来强调让用户去注意到主操作"
type="focus"
Expand All @@ -60,8 +60,8 @@
cancelButtonText="取消"
onPrimaryButtonTap="handlePrimaryButtonTap"
onSecondaryButtonTap="handleSecondaryButtonTap"
onCancelButtonTap="handleSecondaryButtonTap" />
<modal
onCancelButtonTap="handleCancelButtonTap" />
<ant-modal
title="确定删除吗?"
content="删除后无法恢复"
visible="{{ customVisible }}"
Expand All @@ -71,7 +71,7 @@
secondaryButtonText="取消"
onPrimaryButtonTap="handlePrimaryButtonTap"
onSecondaryButtonTap="handleSecondaryButtonTap" />
<modal
<ant-modal
visible="{{ customBodyVisible }}"
onClose="handleClose">
<view class="body">
Expand All @@ -80,66 +80,67 @@
src="https://mdn.alipayobjects.com/huamei_yujk1o/afts/img/A*xYjqRJiKsvoAAAAAAAAAAAAADuaJAQ/original"
class="bodyImg" />
<view class="bodyAction">
<icon
<ant-icon
type="CloseCircleOutline"
onTap="handleClose" />
</view>
</view>
</modal>
<container
</ant-modal>

<ant-container
title="基础用法"
className="list">
<button
<ant-button
data-field="basicVisible"
onTap="handleOpen">
最简单的弹框
</button>
<button
</ant-button>
<ant-button
data-field="withTitleVisible"
onTap="handleOpen">
带有标题
</button>
<button
</ant-button>
<ant-button
data-field="basicTwoVisible"
onTap="handleOpen">
带辅助按钮
</button>
<button
</ant-button>
<ant-button
data-field="basicThreeVisible"
onTap="handleOpen">
带辅助和取消按钮
</button>
</container>
<container
</ant-button>
</ant-container>
<ant-container
title="强调模式"
className="list">
<button
<ant-button
data-field="focusOneVisible"
onTap="handleOpen">
只有主按钮
</button>
<button
</ant-button>
<ant-button
data-field="focusTwoVisible"
onTap="handleOpen">
带辅助按钮
</button>
<button
</ant-button>
<ant-button
data-field="focusThreeVisible"
onTap="handleOpen">
带辅助和取消按钮
</button>
</container>
<container
</ant-button>
</ant-container>
<ant-container
title="自定义"
className="list">
<button
<ant-button
data-field="customVisible"
onTap="handleOpen">
自定义按钮样式
</button>
<button
</ant-button>
<ant-button
data-field="customBodyVisible"
onTap="handleOpen">
完全自定义内容区
</button>
</container>
</ant-button>
</ant-container>
9 changes: 6 additions & 3 deletions compiled/alipay/demo/pages/Modal/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,17 @@ Page({
},
handlePrimaryButtonTap() {
this.handleClose();
my.showToast({ content: '点击主按钮', duration: 1000 });
this.showToast('点击主要按钮');
},
handleSecondaryButtonTap() {
this.handleClose();
my.showToast({ content: '点击辅助按钮', duration: 1000 });
this.showToast('点击辅助按钮');
},
handleCancelButtonTap() {
this.handleClose();
my.showToast({ content: '点击取消按钮', duration: 1000 });
this.showToast('点击取消按钮');
},
showToast(content) {
my.showToast({ content, duration: 1000 });
},
});
8 changes: 4 additions & 4 deletions compiled/alipay/demo/pages/Modal/index.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"defaultTitle": "Modal",
"usingComponents": {
"modal": "../../../src/Modal/index",
"button": "../../../src/Button/index",
"icon": "../../../src/Icon/index",
"container": "../../../src/Container/index"
"ant-modal": "../../../src/Modal/index",
"ant-button": "../../../src/Button/index",
"ant-icon": "../../../src/Icon/index",
"ant-container": "../../../src/Container/index"
}
}
2 changes: 1 addition & 1 deletion compiled/alipay/src/Modal/index.axml
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@
{{ content }}
</view>
</slot>

<slot name="footer">
<view
a:if="{{ type === 'focus' }}"
Expand Down Expand Up @@ -114,6 +113,7 @@
</slot>
</view>
</slot>

<ant-icon
a:if="{{ type === 'focus' && closable }}"
type="CloseOutline"
Expand Down
63 changes: 27 additions & 36 deletions compiled/alipay/src/Modal/index.ts
Original file line number Diff line number Diff line change
@@ -1,38 +1,29 @@
import { ModalDefaultProps } from './props';
import { useEvent } from 'functional-mini/component';
import '../_util/assert-component2';
import { mountComponent } from '../_util/component';
import { useComponentEvent } from '../_util/hooks/useComponentEvent';
import { IModalProps, ModalFunctionalProps } from './props';

Component({
props: ModalDefaultProps,
methods: {
onClose() {
const { onClose } = this.props;
if (onClose) {
onClose();
}
},
onMaskClose() {
const { onClose, maskClosable } = this.props;
if (maskClosable && onClose) {
onClose();
}
},
onPrimaryButtonTap() {
const { onPrimaryButtonTap } = this.props;
if (onPrimaryButtonTap) {
onPrimaryButtonTap();
}
},
onSecondaryButtonTap() {
const { onSecondaryButtonTap } = this.props;
if (onSecondaryButtonTap) {
onSecondaryButtonTap();
}
},
onCancelButtonTap() {
const { onCancelButtonTap } = this.props;
if (onCancelButtonTap) {
onCancelButtonTap();
}
},
},
});
const Modal = (props: IModalProps) => {
const { triggerEventOnly } = useComponentEvent(props);
useEvent('onClose', () => {
triggerEventOnly('close');
});
useEvent('onMaskClose', () => {
if (props.maskClosable) {
triggerEventOnly('close');
}
});
useEvent('onPrimaryButtonTap', () => {
triggerEventOnly('primaryButtonTap');
});
useEvent('onSecondaryButtonTap', () => {
triggerEventOnly('secondaryButtonTap');
});
useEvent('onCancelButtonTap', () => {
triggerEventOnly('cancelButtonTap');
});
return {};
};

mountComponent(Modal, ModalFunctionalProps);
21 changes: 21 additions & 0 deletions compiled/alipay/src/Modal/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -104,3 +104,24 @@ export const ModalDefaultProps: Partial<IModalProps> = {
type: 'default',
duration: 200,
};

export const ModalFunctionalProps: Partial<IModalProps> = {
bodyClassName: '',
bodyStyle: '',
maskClassName: '',
maskStyle: '',
maskClosable: true,
type: 'default',
closable: true,
duration: 200,
title: '',
content: '',
visible: false,
destroyOnClose: false,
primaryButtonText: '',
secondaryButtonText: '',
cancelButtonText: '',
primaryButtonStyle: '',
secondaryButtonStyle: '',
cancelButtonStyle: '',
};
1 change: 1 addition & 0 deletions compiled/wechat/app.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"pages": [
"demo/pages/Modal/index",
"demo/pages/GuideTour/index",
"demo/pages/Skeleton/index",
"demo/pages/Form/index",
Expand Down
50 changes: 50 additions & 0 deletions compiled/wechat/demo/pages/Modal/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
Page({
data: {
basicVisible: false,
withTitleVisible: false,
basicTwoVisible: false,
basicThreeVisible: false,
focusOneVisible: false,
focusTwoVisible: false,
focusThreeVisible: false,
customVisible: false,
customBodyVisible: false,
},
handleOpen: function (e) {
var _a;
var field = e.target.dataset.field;
this.setData((_a = {}, _a[field] = true, _a));
},
handleClose: function () {
this.setData({
basicVisible: false,
withTitleVisible: false,
basicTwoVisible: false,
basicThreeVisible: false,
focusOneVisible: false,
focusTwoVisible: false,
focusThreeVisible: false,
customVisible: false,
customBodyVisible: false,
});
},
handlePrimaryButtonTap: function () {
this.handleClose();
this.showToast('点击主要按钮');
},
handleSecondaryButtonTap: function () {
this.handleClose();
this.showToast('点击辅助按钮');
},
handleCancelButtonTap: function () {
this.handleClose();
this.showToast('点击取消按钮');
},
showToast: function (content) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
wx.showToast({
title: content,
});
},
});
9 changes: 9 additions & 0 deletions compiled/wechat/demo/pages/Modal/index.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"defaultTitle": "Modal",
"usingComponents": {
"ant-modal": "../../../src/Modal/index",
"ant-button": "../../../src/Button/index",
"ant-icon": "../../../src/Icon/index",
"ant-container": "../../../src/Container/index"
}
}
Loading

0 comments on commit 07034fd

Please sign in to comment.