ant-design-vue/components/modal/ActionButton.tsx

87 lines
2.2 KiB
Vue

import { defineComponent, ExtractPropTypes } from 'vue';
import PropTypes from '../_util/vue-types';
import Button from '../button';
import BaseMixin from '../_util/BaseMixin';
import buttonTypes from '../button/buttonTypes';
import { getSlot, findDOMNode } from '../_util/props-util';
const ButtonType = buttonTypes().type;
const ActionButtonProps = {
type: ButtonType,
actionFn: PropTypes.func,
closeModal: PropTypes.func,
autofocus: PropTypes.looseBool,
buttonProps: PropTypes.object,
};
export type IActionButtonProps = ExtractPropTypes<typeof ActionButtonProps>;
export default defineComponent({
mixins: [BaseMixin],
props: ActionButtonProps,
setup() {
return {
timeoutId: undefined,
};
},
data() {
return {
loading: false,
};
},
mounted() {
if (this.autofocus) {
this.timeoutId = setTimeout(() => findDOMNode(this).focus());
}
},
beforeUnmount() {
clearTimeout(this.timeoutId);
},
methods: {
onClick() {
const { actionFn, closeModal } = this;
if (actionFn) {
let ret: any;
if (actionFn.length) {
ret = actionFn(closeModal);
} else {
ret = actionFn();
if (!ret) {
closeModal();
}
}
if (ret && ret.then) {
this.setState({ loading: true });
ret.then(
(...args: any[]) => {
// It's unnecessary to set loading=false, for the Modal will be unmounted after close.
// this.setState({ loading: false });
closeModal(...args);
},
(e: Event) => {
// Emit error when catch promise reject
// eslint-disable-next-line no-console
console.error(e);
// See: https://github.com/ant-design/ant-design/issues/6183
this.setState({ loading: false });
},
);
}
} else {
closeModal();
}
},
},
render() {
const { type, loading, buttonProps } = this;
const props = {
type,
onClick: this.onClick,
loading,
...buttonProps,
};
return <Button {...props}>{getSlot(this)}</Button>;
},
});