mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-05 05:29:01 +08:00
82f28ce3d0
124 lines
3.5 KiB
Vue
124 lines
3.5 KiB
Vue
|
import type { ExtractPropTypes, PropType } from 'vue';
|
||
import { shallowRef, onMounted, defineComponent, onBeforeUnmount } from 'vue';
|
|||
|
import Button from '../button';
|
||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
import type { ButtonProps } from '../button';
|
||
|
import type { LegacyButtonType } from '../button/buttonTypes';
|
||
import { convertLegacyProps } from '../button/buttonTypes';
|
|||
import useDestroyed from './hooks/useDestroyed';
|
|||
import { objectType } from './type';
|
|||
import { findDOMNode } from './props-util';
|
|||
|
|
||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
const actionButtonProps = {
|
||
type: {
|
|||
type: String as PropType<LegacyButtonType>,
|
|||
},
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
actionFn: Function as PropType<(...args: any[]) => any | PromiseLike<any>>,
|
||
close: Function,
|
|||
autofocus: Boolean,
|
|||
prefixCls: String,
|
|||
buttonProps: objectType<ButtonProps>(),
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
emitEvent: Boolean,
|
||
quitOnNullishReturnValue: Boolean,
|
|||
|
};
|
||
|
|
||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
export type ActionButtonProps = ExtractPropTypes<typeof actionButtonProps>;
|
||
|
|||
function isThenable<T>(thing?: PromiseLike<T>): boolean {
|
|||
return !!(thing && thing.then);
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
}
|
||
|
|
||
export default defineComponent({
|
|||
compatConfig: { MODE: 3 },
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
name: 'ActionButton',
|
||
props: actionButtonProps,
|
|||
setup(props, { slots }) {
|
|||
const clickedRef = shallowRef<boolean>(false);
|
|||
const buttonRef = shallowRef();
|
|||
const loading = shallowRef(false);
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
let timeoutId: any;
|
||
const isDestroyed = useDestroyed();
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
onMounted(() => {
|
||
if (props.autofocus) {
|
|||
timeoutId = setTimeout(() => findDOMNode(buttonRef.value)?.focus?.());
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
}
|
||
});
|
|||
onBeforeUnmount(() => {
|
|||
clearTimeout(timeoutId);
|
|||
});
|
|||
|
|||
const onInternalClose = (...args: any[]) => {
|
|||
props.close?.(...args);
|
|||
};
|
|||
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
|
||
if (!isThenable(returnValueOfOnOk)) {
|
|||
return;
|
|||
}
|
|||
loading.value = true;
|
|||
returnValueOfOnOk!.then(
|
|||
(...args: any[]) => {
|
|||
if (!isDestroyed.value) {
|
|||
loading.value = false;
|
|||
}
|
|||
onInternalClose(...args);
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
clickedRef.value = false;
|
||
},
|
|||
(e: Error) => {
|
|||
// See: https://github.com/ant-design/ant-design/issues/6183
|
|||
if (!isDestroyed.value) {
|
|||
loading.value = false;
|
|||
}
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
clickedRef.value = false;
|
||
return Promise.reject(e);
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
},
|
||
);
|
|||
|
};
|
||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
|
||
const onClick = (e: MouseEvent) => {
|
|||
const { actionFn } = props;
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
if (clickedRef.value) {
|
||
return;
|
|||
}
|
|||
clickedRef.value = true;
|
|||
if (!actionFn) {
|
|||
onInternalClose();
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
return;
|
||
}
|
|||
let returnValueOfOnOk: PromiseLike<any>;
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
if (props.emitEvent) {
|
||
returnValueOfOnOk = actionFn(e);
|
|||
if (props.quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {
|
|||
clickedRef.value = false;
|
|||
onInternalClose(e);
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
return;
|
||
|
}
|
||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
} else if (actionFn.length) {
|
||
returnValueOfOnOk = actionFn(props.close);
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
// https://github.com/ant-design/ant-design/issues/23358
|
||
clickedRef.value = false;
|
|||
|
} else {
|
||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
returnValueOfOnOk = actionFn();
|
||
if (!returnValueOfOnOk) {
|
|||
onInternalClose();
|
|||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
return;
|
||
}
|
|||
|
}
|
||
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096
* refactor: modal
|
handlePromiseOnOk(returnValueOfOnOk);
|
||
};
|
|||
return () => {
|
|||
const { type, prefixCls, buttonProps } = props;
|
|||
return (
|
|||
<Button
|
|||
{...convertLegacyProps(type)}
|
|||
onClick={onClick}
|
|||
loading={loading.value}
|
|||
prefixCls={prefixCls}
|
|||
{...buttonProps}
|
|||
ref={buttonRef}
|
|||
v-slots={slots}
|
|||
></Button>
|
|||
);
|
|||
|
};
|
||
|
},
|
||
|
});
|