2020-10-15 09:58:05 +00:00
|
|
|
import { provide, inject, defineComponent } from 'vue';
|
2019-01-12 03:33:27 +00:00
|
|
|
import Button from '../button';
|
2020-08-31 08:53:19 +00:00
|
|
|
import classNames from '../_util/classNames';
|
2019-01-12 03:33:27 +00:00
|
|
|
import buttonTypes from '../button/buttonTypes';
|
|
|
|
import { ButtonGroupProps } from '../button/button-group';
|
|
|
|
import Dropdown from './dropdown';
|
|
|
|
import PropTypes from '../_util/vue-types';
|
2020-06-21 14:45:30 +00:00
|
|
|
import { hasProp, getComponent, getSlot } from '../_util/props-util';
|
2019-01-12 03:33:27 +00:00
|
|
|
import getDropdownProps from './getDropdownProps';
|
2020-09-30 02:47:18 +00:00
|
|
|
import { defaultConfigProvider } from '../config-provider';
|
2020-03-26 03:58:48 +00:00
|
|
|
import EllipsisOutlined from '@ant-design/icons-vue/EllipsisOutlined';
|
2020-10-15 09:58:05 +00:00
|
|
|
import { tuple } from '../_util/type';
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
const ButtonTypesProps = buttonTypes();
|
|
|
|
const DropdownProps = getDropdownProps();
|
|
|
|
const ButtonGroup = Button.Group;
|
2018-01-31 02:30:09 +00:00
|
|
|
const DropdownButtonProps = {
|
|
|
|
...ButtonGroupProps,
|
|
|
|
...DropdownProps,
|
2020-10-15 09:58:05 +00:00
|
|
|
type: PropTypes.oneOf(tuple('primary', 'ghost', 'dashed', 'danger', 'default')).def('default'),
|
|
|
|
size: PropTypes.oneOf(tuple('small', 'large', 'default')).def('default'),
|
2018-12-15 07:22:33 +00:00
|
|
|
htmlType: ButtonTypesProps.htmlType,
|
2019-04-10 02:09:00 +00:00
|
|
|
href: PropTypes.string,
|
2020-10-10 10:16:28 +00:00
|
|
|
disabled: PropTypes.looseBool,
|
2019-04-10 02:09:00 +00:00
|
|
|
prefixCls: PropTypes.string,
|
2018-01-31 02:30:09 +00:00
|
|
|
placement: DropdownProps.placement.def('bottomRight'),
|
2020-03-07 11:45:13 +00:00
|
|
|
icon: PropTypes.any,
|
|
|
|
title: PropTypes.string,
|
2020-07-30 07:41:54 +00:00
|
|
|
onClick: PropTypes.func,
|
|
|
|
onVisibleChange: PropTypes.func,
|
|
|
|
'onUpdate:visible': PropTypes.func,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
|
|
|
export { DropdownButtonProps };
|
2020-10-15 09:58:05 +00:00
|
|
|
export default defineComponent({
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'ADropdownButton',
|
2020-07-30 07:41:54 +00:00
|
|
|
inheritAttrs: false,
|
2018-01-31 02:30:09 +00:00
|
|
|
props: DropdownButtonProps,
|
2020-06-21 14:45:30 +00:00
|
|
|
setup() {
|
2019-07-04 10:12:52 +00:00
|
|
|
return {
|
2020-09-30 02:47:18 +00:00
|
|
|
configProvider: inject('configProvider', defaultConfigProvider),
|
2020-10-19 08:43:10 +00:00
|
|
|
popupRef: null,
|
2019-07-04 10:12:52 +00:00
|
|
|
};
|
|
|
|
},
|
2020-06-21 14:45:30 +00:00
|
|
|
created() {
|
|
|
|
provide('savePopupRef', this.savePopupRef);
|
2019-07-04 10:12:52 +00:00
|
|
|
},
|
2018-01-29 10:57:20 +00:00
|
|
|
methods: {
|
2020-10-15 09:58:05 +00:00
|
|
|
savePopupRef(ref: any) {
|
2019-07-04 10:12:52 +00:00
|
|
|
this.popupRef = ref;
|
|
|
|
},
|
2020-07-30 07:41:54 +00:00
|
|
|
handleClick(e) {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.$emit('click', e);
|
2018-01-29 10:57:20 +00:00
|
|
|
},
|
2020-07-30 07:41:54 +00:00
|
|
|
handleVisibleChange(val) {
|
2020-06-21 14:45:30 +00:00
|
|
|
this.$emit('update:visible', val);
|
2019-01-12 03:33:27 +00:00
|
|
|
this.$emit('visibleChange', val);
|
2018-01-29 10:57:20 +00:00
|
|
|
},
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
render() {
|
2018-01-29 10:57:20 +00:00
|
|
|
const {
|
2019-01-12 03:33:27 +00:00
|
|
|
type,
|
|
|
|
disabled,
|
2020-07-30 07:41:54 +00:00
|
|
|
onClick,
|
2019-01-12 03:33:27 +00:00
|
|
|
htmlType,
|
2020-07-30 07:41:54 +00:00
|
|
|
class: className,
|
2019-04-10 02:09:00 +00:00
|
|
|
prefixCls: customizePrefixCls,
|
2020-07-30 07:41:54 +00:00
|
|
|
overlay,
|
2019-01-12 03:33:27 +00:00
|
|
|
trigger,
|
|
|
|
align,
|
|
|
|
visible,
|
2020-07-30 07:41:54 +00:00
|
|
|
onVisibleChange,
|
2019-01-12 03:33:27 +00:00
|
|
|
placement,
|
|
|
|
getPopupContainer,
|
2019-04-10 02:09:00 +00:00
|
|
|
href,
|
2020-03-07 11:45:13 +00:00
|
|
|
title,
|
2018-01-29 10:57:20 +00:00
|
|
|
...restProps
|
2020-10-15 09:58:05 +00:00
|
|
|
} = { ...this.$props, ...this.$attrs } as any;
|
2020-06-21 14:45:30 +00:00
|
|
|
const icon = getComponent(this, 'icon') || <EllipsisOutlined />;
|
2019-01-12 03:33:27 +00:00
|
|
|
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
|
2019-09-11 14:35:25 +00:00
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
2019-04-10 02:09:00 +00:00
|
|
|
const prefixCls = getPrefixCls('dropdown-button', customizePrefixCls);
|
2020-10-15 09:58:05 +00:00
|
|
|
const dropdownProps: any = {
|
2020-06-21 14:45:30 +00:00
|
|
|
align,
|
|
|
|
disabled,
|
|
|
|
trigger: disabled ? [] : trigger,
|
|
|
|
placement,
|
|
|
|
getPopupContainer: getPopupContainer || getContextPopupContainer,
|
2020-07-30 07:41:54 +00:00
|
|
|
onVisibleChange: this.handleVisibleChange,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-01-29 10:57:20 +00:00
|
|
|
if (hasProp(this, 'visible')) {
|
2020-06-21 14:45:30 +00:00
|
|
|
dropdownProps.visible = visible;
|
2018-01-29 10:57:20 +00:00
|
|
|
}
|
|
|
|
|
2019-07-31 03:22:47 +00:00
|
|
|
const buttonGroupProps = {
|
2020-06-21 14:45:30 +00:00
|
|
|
...restProps,
|
2020-07-30 07:41:54 +00:00
|
|
|
class: classNames(prefixCls, className),
|
2019-07-31 03:22:47 +00:00
|
|
|
};
|
|
|
|
|
2018-01-29 10:57:20 +00:00
|
|
|
return (
|
2019-07-31 03:22:47 +00:00
|
|
|
<ButtonGroup {...buttonGroupProps}>
|
2019-09-10 10:57:08 +00:00
|
|
|
<Button
|
|
|
|
type={type}
|
|
|
|
disabled={disabled}
|
2020-07-30 07:41:54 +00:00
|
|
|
onClick={this.handleClick}
|
2019-09-10 10:57:08 +00:00
|
|
|
htmlType={htmlType}
|
|
|
|
href={href}
|
2020-03-07 11:45:13 +00:00
|
|
|
title={title}
|
2019-09-10 10:57:08 +00:00
|
|
|
>
|
2020-06-21 14:45:30 +00:00
|
|
|
{getSlot(this)}
|
2018-01-29 10:57:20 +00:00
|
|
|
</Button>
|
2020-06-21 14:45:30 +00:00
|
|
|
<Dropdown {...dropdownProps} overlay={getComponent(this, 'overlay')}>
|
2020-03-07 11:45:13 +00:00
|
|
|
<Button type={type}>{icon}</Button>
|
2018-01-29 10:57:20 +00:00
|
|
|
</Dropdown>
|
|
|
|
</ButtonGroup>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2018-01-29 10:57:20 +00:00
|
|
|
},
|
2020-10-15 09:58:05 +00:00
|
|
|
});
|