diff --git a/components/modal/AlertContainer.tsx b/components/modal/AlertContainer.tsx index f3e110c4..b0cd7c68 100644 --- a/components/modal/AlertContainer.tsx +++ b/components/modal/AlertContainer.tsx @@ -48,14 +48,19 @@ export default class AlertContainer extends React.Component< const { title, actions, content, onAnimationEnd } = this.props const footer = actions.map((button) => { // tslint:disable-next-line:only-arrow-functions - const orginPress = button.onPress || function () {} - button.onPress = () => { - const res = orginPress() - if (res && res.then) { - res.then(() => { - this.onClose() - }) - } else { + const originPress = button.onPress ?? function () {} + const originStyle = button.style + button.onPress = async () => { + if (button.style === 'disabled') { + return + } + button.style = 'disabled' + // developer should handle the errors by themselves, + // so we don't need to do anything at here + try { + await originPress() + } finally { + button.style = originStyle this.onClose() } } diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 77fe4f9a..a0b1fdd6 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -98,15 +98,16 @@ class AntmModal extends React.Component { } if (button.style) { buttonStyle = button.style - if (typeof buttonStyle === 'string') { + if (typeof button.style === 'string') { const styleMap: { [key: string]: object } = { cancel: { color: '#000' }, default: {}, destructive: { color: 'red' }, + disabled: { color: 'lightgray' }, } - buttonStyle = styleMap[buttonStyle] || {} + buttonStyle = styleMap[button.style] || {} } } const noneBorder =