2019-01-12 11:33:27 +08:00
|
|
|
import Button from '../button';
|
|
|
|
import buttonTypes from '../button/buttonTypes';
|
|
|
|
import { ButtonGroupProps } from '../button/button-group';
|
|
|
|
import Dropdown from './dropdown';
|
|
|
|
import PropTypes from '../_util/vue-types';
|
|
|
|
import { hasProp, getComponentFromProp } from '../_util/props-util';
|
|
|
|
import getDropdownProps from './getDropdownProps';
|
2019-04-10 10:09:00 +08:00
|
|
|
import { ConfigConsumerProps } from '../config-provider';
|
2019-01-12 11:33:27 +08:00
|
|
|
const ButtonTypesProps = buttonTypes();
|
|
|
|
const DropdownProps = getDropdownProps();
|
|
|
|
const ButtonGroup = Button.Group;
|
2018-01-31 10:30:09 +08:00
|
|
|
const DropdownButtonProps = {
|
|
|
|
...ButtonGroupProps,
|
|
|
|
...DropdownProps,
|
2018-09-11 21:38:22 +08:00
|
|
|
type: PropTypes.oneOf(['primary', 'ghost', 'dashed', 'danger', 'default']).def('default'),
|
2019-07-31 11:22:47 +08:00
|
|
|
size: PropTypes.oneOf(['small', 'large', 'default']).def('default'),
|
2018-12-15 15:22:33 +08:00
|
|
|
htmlType: ButtonTypesProps.htmlType,
|
2019-04-10 10:09:00 +08:00
|
|
|
href: PropTypes.string,
|
2018-01-31 10:30:09 +08:00
|
|
|
disabled: PropTypes.bool,
|
2019-04-10 10:09:00 +08:00
|
|
|
prefixCls: PropTypes.string,
|
2018-01-31 10:30:09 +08:00
|
|
|
placement: DropdownProps.placement.def('bottomRight'),
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
export { DropdownButtonProps };
|
2018-01-29 18:57:20 +08:00
|
|
|
export default {
|
2018-04-08 21:17:20 +08:00
|
|
|
name: 'ADropdownButton',
|
2019-02-01 17:23:00 +08:00
|
|
|
model: {
|
|
|
|
prop: 'visible',
|
|
|
|
event: 'visibleChange',
|
|
|
|
},
|
2018-01-31 10:30:09 +08:00
|
|
|
props: DropdownButtonProps,
|
2019-07-04 18:12:52 +08:00
|
|
|
provide() {
|
|
|
|
return {
|
|
|
|
savePopupRef: this.savePopupRef,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
inject: {
|
|
|
|
configProvider: { default: () => ({}) },
|
|
|
|
},
|
2018-01-29 18:57:20 +08:00
|
|
|
methods: {
|
2019-07-04 18:12:52 +08:00
|
|
|
savePopupRef(ref) {
|
|
|
|
this.popupRef = ref;
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
onClick(e) {
|
|
|
|
this.$emit('click', e);
|
2018-01-29 18:57:20 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
onVisibleChange(val) {
|
|
|
|
this.$emit('visibleChange', val);
|
2018-01-29 18:57:20 +08:00
|
|
|
},
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
2018-01-29 18:57:20 +08:00
|
|
|
const {
|
2019-01-12 11:33:27 +08:00
|
|
|
type,
|
|
|
|
disabled,
|
|
|
|
htmlType,
|
2019-04-10 10:09:00 +08:00
|
|
|
prefixCls: customizePrefixCls,
|
2019-01-12 11:33:27 +08:00
|
|
|
trigger,
|
|
|
|
align,
|
|
|
|
visible,
|
|
|
|
placement,
|
|
|
|
getPopupContainer,
|
2019-04-10 10:09:00 +08:00
|
|
|
href,
|
2018-01-29 18:57:20 +08:00
|
|
|
...restProps
|
2019-01-12 11:33:27 +08:00
|
|
|
} = this.$props;
|
|
|
|
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
|
2019-04-10 10:09:00 +08:00
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
|
|
|
|
const prefixCls = getPrefixCls('dropdown-button', customizePrefixCls);
|
2018-01-29 18:57:20 +08:00
|
|
|
const dropdownProps = {
|
|
|
|
props: {
|
|
|
|
align,
|
|
|
|
disabled,
|
|
|
|
trigger: disabled ? [] : trigger,
|
|
|
|
placement,
|
2019-01-02 20:33:06 +08:00
|
|
|
getPopupContainer: getPopupContainer || getContextPopupContainer,
|
2018-01-29 18:57:20 +08:00
|
|
|
},
|
|
|
|
on: {
|
|
|
|
visibleChange: this.onVisibleChange,
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-01-29 18:57:20 +08:00
|
|
|
if (hasProp(this, 'visible')) {
|
2019-01-12 11:33:27 +08:00
|
|
|
dropdownProps.props.visible = visible;
|
2018-01-29 18:57:20 +08:00
|
|
|
}
|
|
|
|
|
2019-07-31 11:22:47 +08:00
|
|
|
const buttonGroupProps = {
|
|
|
|
props: {
|
|
|
|
...restProps,
|
|
|
|
},
|
|
|
|
class: prefixCls,
|
|
|
|
};
|
|
|
|
|
2018-01-29 18:57:20 +08:00
|
|
|
return (
|
2019-07-31 11:22:47 +08:00
|
|
|
<ButtonGroup {...buttonGroupProps}>
|
2019-01-12 11:33:27 +08:00
|
|
|
<Button type={type} disabled={disabled} onClick={this.onClick} htmlType={htmlType}>
|
2018-01-29 18:57:20 +08:00
|
|
|
{this.$slots.default}
|
|
|
|
</Button>
|
|
|
|
<Dropdown {...dropdownProps}>
|
2019-01-12 11:33:27 +08:00
|
|
|
<template slot="overlay">{getComponentFromProp(this, 'overlay')}</template>
|
2019-06-30 09:44:46 +08:00
|
|
|
<Button type={type} disabled={disabled} icon="ellipsis" />
|
2018-01-29 18:57:20 +08:00
|
|
|
</Dropdown>
|
|
|
|
</ButtonGroup>
|
2019-01-12 11:33:27 +08:00
|
|
|
);
|
2018-01-29 18:57:20 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|