blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-30 04:39:46 +08:00
Code Issues Projects Releases Wiki Activity

types(Dialog): use tsx (#8097)

Browse Source
This commit is contained in:
neverland 2021-02-07 14:05:43 +08:00 committed by GitHub
parent 02669ad025
commit 597f34b8da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/dialog/Dialog.js → src/dialog/Dialog.tsx
View File

@ -1,7 +1,7 @@
import { reactive } from 'vue'; import { PropType, reactive } from 'vue';
// Utils // Utils
import { callInterceptor } from '../utils/interceptor'; import { callInterceptor, Interceptor } from '../utils/interceptor';
import { createNamespace, addUnit, pick } from '../utils'; import { createNamespace, addUnit, pick } from '../utils';
import { BORDER_TOP, BORDER_LEFT } from '../utils/constant'; import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
@ -13,6 +13,9 @@ import ActionBarButton from '../action-bar-button';
const [createComponent, bem, t] = createNamespace('dialog'); const [createComponent, bem, t] = createNamespace('dialog');
export type DialogAction = 'confirm' | 'cancel';
export type DialogMessageAlign = 'left' | 'center' | 'right';
const popupKeys = [ const popupKeys = [
...Object.keys(popupSharedProps), ...Object.keys(popupSharedProps),
'transition', 'transition',
@ -26,11 +29,11 @@ export default createComponent({
theme: String, theme: String,
width: [Number, String], width: [Number, String],
message: String, message: String,
callback: Function, callback: Function as PropType<(action?: DialogAction) => void>,
allowHtml: Boolean, allowHtml: Boolean,
className: null, className: null,
beforeClose: Function, beforeClose: Function as PropType<Interceptor>,
messageAlign: String, messageAlign: String as PropType<DialogMessageAlign>,
showCancelButton: Boolean, showCancelButton: Boolean,
cancelButtonText: String, cancelButtonText: String,
cancelButtonColor: String, cancelButtonColor: String,
@ -59,18 +62,18 @@ export default createComponent({
cancel: false, cancel: false,
}); });
const onUpdateShow = (value) => { const onUpdateShow = (value: boolean) => {
emit('update:show', value); emit('update:show', value);
}; };
const close = (action) => { const close = (action: DialogAction) => {
onUpdateShow(false); onUpdateShow(false);
if (props.callback) { if (props.callback) {
props.callback(action); props.callback(action);
} }
}; };
const handleAction = (action) => { const handleAction = (action: DialogAction) => {
// should not trigger close event when hidden // should not trigger close event when hidden
if (!props.show) { if (!props.show) {
return; return;
@ -119,6 +122,7 @@ export default createComponent({
const { title, message, allowHtml, messageAlign } = props; const { title, message, allowHtml, messageAlign } = props;
if (message) { if (message) {
const hasTitle = title || slots.title; const hasTitle = title || slots.title;
return ( return (
<div <div
// add key to force re-render // add key to force re-render
@ -129,7 +133,7 @@ export default createComponent({
<div <div
class={bem('message', { class={bem('message', {
'has-title': hasTitle, 'has-title': hasTitle,
[messageAlign]: messageAlign, [messageAlign as string]: messageAlign,
})} })}
{...{ {...{
[allowHtml ? 'innerHTML' : 'textContent']: message, [allowHtml ? 'innerHTML' : 'textContent']: message,
@ -173,7 +177,6 @@ export default createComponent({
<ActionBar class={bem('footer')}> <ActionBar class={bem('footer')}>
{props.showCancelButton && ( {props.showCancelButton && (
<ActionBarButton <ActionBarButton
size="large"
type="warning" type="warning"
text={props.cancelButtonText || t('cancel')} text={props.cancelButtonText || t('cancel')}
class={bem('cancel')} class={bem('cancel')}
@ -186,7 +189,6 @@ export default createComponent({
)} )}
{props.showConfirmButton && ( {props.showConfirmButton && (
<ActionBarButton <ActionBarButton
size="large"
type="danger" type="danger"
text={props.confirmButtonText || t('confirm')} text={props.confirmButtonText || t('confirm')}
class={bem('confirm')} class={bem('confirm')}