128 lines
3.2 KiB
Vue
128 lines
3.2 KiB
Vue
import PropTypes from '../../_util/vue-types';
|
|
|
|
import Trigger from '../../vc-trigger';
|
|
import { createRef } from './util';
|
|
import classNames from 'classnames';
|
|
|
|
const BUILT_IN_PLACEMENTS = {
|
|
bottomLeft: {
|
|
points: ['tl', 'bl'],
|
|
offset: [0, 4],
|
|
overflow: {
|
|
adjustX: 0,
|
|
adjustY: 1,
|
|
},
|
|
ignoreShake: true,
|
|
},
|
|
topLeft: {
|
|
points: ['bl', 'tl'],
|
|
offset: [0, -4],
|
|
overflow: {
|
|
adjustX: 0,
|
|
adjustY: 1,
|
|
},
|
|
ignoreShake: true,
|
|
},
|
|
};
|
|
|
|
const SelectTrigger = {
|
|
name: 'SelectTrigger',
|
|
props: {
|
|
// Pass by outside user props
|
|
disabled: PropTypes.bool,
|
|
showSearch: PropTypes.bool,
|
|
prefixCls: PropTypes.string,
|
|
dropdownPopupAlign: PropTypes.object,
|
|
dropdownClassName: PropTypes.string,
|
|
dropdownStyle: PropTypes.object,
|
|
transitionName: PropTypes.string,
|
|
animation: PropTypes.string,
|
|
getPopupContainer: PropTypes.func,
|
|
|
|
dropdownMatchSelectWidth: PropTypes.bool,
|
|
|
|
// Pass by Select
|
|
isMultiple: PropTypes.bool,
|
|
dropdownPrefixCls: PropTypes.string,
|
|
dropdownVisibleChange: PropTypes.func,
|
|
popupElement: PropTypes.node,
|
|
open: PropTypes.bool,
|
|
},
|
|
created() {
|
|
this.triggerRef = createRef();
|
|
},
|
|
methods: {
|
|
getDropdownTransitionName() {
|
|
const { transitionName, animation, dropdownPrefixCls } = this.$props;
|
|
if (!transitionName && animation) {
|
|
return `${dropdownPrefixCls}-${animation}`;
|
|
}
|
|
return transitionName;
|
|
},
|
|
|
|
forcePopupAlign() {
|
|
const $trigger = this.triggerRef.current;
|
|
if ($trigger) {
|
|
$trigger.forcePopupAlign();
|
|
}
|
|
},
|
|
},
|
|
|
|
render() {
|
|
const {
|
|
disabled,
|
|
isMultiple,
|
|
dropdownPopupAlign,
|
|
dropdownMatchSelectWidth,
|
|
dropdownClassName,
|
|
dropdownStyle,
|
|
dropdownVisibleChange,
|
|
getPopupContainer,
|
|
dropdownPrefixCls,
|
|
popupElement,
|
|
open,
|
|
} = this.$props;
|
|
|
|
// TODO: [Legacy] Use new action when trigger fixed: https://github.com/react-component/trigger/pull/86
|
|
|
|
// When false do nothing with the width
|
|
// ref: https://github.com/ant-design/ant-design/issues/10927
|
|
let stretch;
|
|
if (dropdownMatchSelectWidth !== false) {
|
|
stretch = dropdownMatchSelectWidth ? 'width' : 'minWidth';
|
|
}
|
|
return (
|
|
<Trigger
|
|
{...{
|
|
directives: [
|
|
{
|
|
name: 'ant-ref',
|
|
value: this.triggerRef,
|
|
},
|
|
],
|
|
}}
|
|
action={disabled ? [] : ['click']}
|
|
popupPlacement="bottomLeft"
|
|
builtinPlacements={BUILT_IN_PLACEMENTS}
|
|
popupAlign={dropdownPopupAlign}
|
|
prefixCls={dropdownPrefixCls}
|
|
popupTransitionName={this.getDropdownTransitionName()}
|
|
onPopupVisibleChange={dropdownVisibleChange}
|
|
popup={popupElement}
|
|
popupVisible={open}
|
|
getPopupContainer={getPopupContainer}
|
|
stretch={stretch}
|
|
popupClassName={classNames(dropdownClassName, {
|
|
[`${dropdownPrefixCls}--multiple`]: isMultiple,
|
|
[`${dropdownPrefixCls}--single`]: !isMultiple,
|
|
})}
|
|
popupStyle={dropdownStyle}
|
|
>
|
|
{this.$slots.default}
|
|
</Trigger>
|
|
);
|
|
},
|
|
};
|
|
|
|
export default SelectTrigger;
|