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

72 lines
1.7 KiB
Vue
Raw Normal View History

2019-01-12 03:33:27 +00:00
import PropTypes from '../_util/vue-types';
import Button from '../button';
import BaseMixin from '../_util/BaseMixin';
import buttonTypes from '../button/buttonTypes';
const ButtonType = buttonTypes().type;
2018-03-06 11:14:41 +00:00
const ActionButtonProps = {
type: ButtonType,
actionFn: PropTypes.func,
closeModal: PropTypes.func,
autoFocus: PropTypes.bool,
buttonProps: PropTypes.object,
2019-01-12 03:33:27 +00:00
};
2018-03-06 11:14:41 +00:00
export default {
mixins: [BaseMixin],
props: ActionButtonProps,
2019-01-12 03:33:27 +00:00
data() {
2018-03-06 11:14:41 +00:00
return {
loading: false,
2019-01-12 03:33:27 +00:00
};
2018-03-06 11:14:41 +00:00
},
2019-01-12 03:33:27 +00:00
mounted() {
2018-03-06 11:14:41 +00:00
if (this.autoFocus) {
2019-01-12 03:33:27 +00:00
this.timeoutId = setTimeout(() => this.$el.focus());
2018-03-06 11:14:41 +00:00
}
},
2019-01-12 03:33:27 +00:00
beforeDestroy() {
clearTimeout(this.timeoutId);
2018-03-06 11:14:41 +00:00
},
methods: {
2019-01-12 03:33:27 +00:00
onClick() {
const { actionFn, closeModal } = this;
2018-03-06 11:14:41 +00:00
if (actionFn) {
2019-01-12 03:33:27 +00:00
let ret;
2018-03-06 11:14:41 +00:00
if (actionFn.length) {
2019-01-12 03:33:27 +00:00
ret = actionFn(closeModal);
2018-03-06 11:14:41 +00:00
} else {
2019-01-12 03:33:27 +00:00
ret = actionFn();
2018-03-06 11:14:41 +00:00
if (!ret) {
2019-01-12 03:33:27 +00:00
closeModal();
2018-03-06 11:14:41 +00:00
}
}
if (ret && ret.then) {
2019-01-12 03:33:27 +00:00
this.setState({ loading: true });
ret.then(
(...args) => {
// It's unnecessary to set loading=false, for the Modal will be unmounted after close.
// this.setState({ loading: false });
closeModal(...args);
},
() => {
// See: https://github.com/ant-design/ant-design/issues/6183
this.setState({ loading: false });
},
);
2018-03-06 11:14:41 +00:00
}
} else {
2019-01-12 03:33:27 +00:00
closeModal();
2018-03-06 11:14:41 +00:00
}
},
},
2019-01-12 03:33:27 +00:00
render() {
const { type, $slots, loading, buttonProps } = this;
2018-03-06 11:14:41 +00:00
return (
2019-01-12 03:33:27 +00:00
<Button type={type} onClick={this.onClick} loading={loading} {...buttonProps}>
2018-03-06 11:14:41 +00:00
{$slots.default}
</Button>
2019-01-12 03:33:27 +00:00
);
2018-03-06 11:14:41 +00:00
},
2019-01-12 03:33:27 +00:00
};