123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268 |
- import _defineProperty from 'babel-runtime/helpers/defineProperty';
- import _extends from 'babel-runtime/helpers/extends';
- import classnames from 'classnames';
- import raf from 'raf';
- import Trigger from '../vc-trigger';
- import PropTypes from '../_util/vue-types';
- import DropdownMenu from './DropdownMenu';
- import { isSingleMode, saveRef } from './util';
- import BaseMixin from '../_util/BaseMixin';
- import { getListeners } from '../_util/props-util';
- var BUILT_IN_PLACEMENTS = {
- bottomLeft: {
- points: ['tl', 'bl'],
- offset: [0, 4],
- overflow: {
- adjustX: 0,
- adjustY: 1
- }
- },
- topLeft: {
- points: ['bl', 'tl'],
- offset: [0, -4],
- overflow: {
- adjustX: 0,
- adjustY: 1
- }
- }
- };
- export default {
- name: 'SelectTrigger',
- mixins: [BaseMixin],
- props: {
- // onPopupFocus: PropTypes.func,
- // onPopupScroll: PropTypes.func,
- dropdownMatchSelectWidth: PropTypes.bool,
- defaultActiveFirstOption: PropTypes.bool,
- dropdownAlign: PropTypes.object,
- visible: PropTypes.bool,
- disabled: PropTypes.bool,
- showSearch: PropTypes.bool,
- dropdownClassName: PropTypes.string,
- dropdownStyle: PropTypes.object,
- dropdownMenuStyle: PropTypes.object,
- multiple: PropTypes.bool,
- inputValue: PropTypes.string,
- filterOption: PropTypes.any,
- empty: PropTypes.bool,
- options: PropTypes.any,
- prefixCls: PropTypes.string,
- popupClassName: PropTypes.string,
- value: PropTypes.array,
- // children: PropTypes.any,
- showAction: PropTypes.arrayOf(PropTypes.string),
- combobox: PropTypes.bool,
- animation: PropTypes.string,
- transitionName: PropTypes.string,
- getPopupContainer: PropTypes.func,
- backfillValue: PropTypes.any,
- menuItemSelectedIcon: PropTypes.any,
- dropdownRender: PropTypes.func,
- ariaId: PropTypes.string
- },
- data: function data() {
- return {
- dropdownWidth: 0
- };
- },
- created: function created() {
- this.rafInstance = null;
- this.saveDropdownMenuRef = saveRef(this, 'dropdownMenuRef');
- this.saveTriggerRef = saveRef(this, 'triggerRef');
- },
- mounted: function mounted() {
- var _this = this;
- this.$nextTick(function () {
- _this.setDropdownWidth();
- });
- },
- updated: function updated() {
- var _this2 = this;
- this.$nextTick(function () {
- _this2.setDropdownWidth();
- });
- },
- beforeDestroy: function beforeDestroy() {
- this.cancelRafInstance();
- },
- methods: {
- setDropdownWidth: function setDropdownWidth() {
- var _this3 = this;
- this.cancelRafInstance();
- this.rafInstance = raf(function () {
- var width = _this3.$el.offsetWidth;
- if (width !== _this3.dropdownWidth) {
- _this3.setState({ dropdownWidth: width });
- }
- });
- },
- cancelRafInstance: function cancelRafInstance() {
- if (this.rafInstance) {
- raf.cancel(this.rafInstance);
- }
- },
- getInnerMenu: function getInnerMenu() {
- return this.dropdownMenuRef && this.dropdownMenuRef.$refs.menuRef;
- },
- getPopupDOMNode: function getPopupDOMNode() {
- return this.triggerRef.getPopupDomNode();
- },
- getDropdownElement: function getDropdownElement(newProps) {
- var h = this.$createElement;
- var value = this.value,
- firstActiveValue = this.firstActiveValue,
- defaultActiveFirstOption = this.defaultActiveFirstOption,
- dropdownMenuStyle = this.dropdownMenuStyle,
- getDropdownPrefixCls = this.getDropdownPrefixCls,
- backfillValue = this.backfillValue,
- menuItemSelectedIcon = this.menuItemSelectedIcon;
- var _getListeners = getListeners(this),
- menuSelect = _getListeners.menuSelect,
- menuDeselect = _getListeners.menuDeselect,
- popupScroll = _getListeners.popupScroll;
- var props = this.$props;
- var dropdownRender = props.dropdownRender,
- ariaId = props.ariaId;
- var dropdownMenuProps = {
- props: _extends({}, newProps.props, {
- ariaId: ariaId,
- prefixCls: getDropdownPrefixCls(),
- value: value,
- firstActiveValue: firstActiveValue,
- defaultActiveFirstOption: defaultActiveFirstOption,
- dropdownMenuStyle: dropdownMenuStyle,
- backfillValue: backfillValue,
- menuItemSelectedIcon: menuItemSelectedIcon
- }),
- on: _extends({}, newProps.on, {
- menuSelect: menuSelect,
- menuDeselect: menuDeselect,
- popupScroll: popupScroll
- }),
- directives: [{
- name: 'ant-ref',
- value: this.saveDropdownMenuRef
- }]
- };
- var menuNode = h(DropdownMenu, dropdownMenuProps);
- if (dropdownRender) {
- return dropdownRender(menuNode, props);
- }
- return null;
- },
- getDropdownTransitionName: function getDropdownTransitionName() {
- var props = this.$props;
- var transitionName = props.transitionName;
- if (!transitionName && props.animation) {
- transitionName = this.getDropdownPrefixCls() + '-' + props.animation;
- }
- return transitionName;
- },
- getDropdownPrefixCls: function getDropdownPrefixCls() {
- return this.prefixCls + '-dropdown';
- }
- },
- render: function render() {
- var _popupClassName;
- var h = arguments[0];
- var $props = this.$props,
- $slots = this.$slots;
- var multiple = $props.multiple,
- visible = $props.visible,
- inputValue = $props.inputValue,
- dropdownAlign = $props.dropdownAlign,
- disabled = $props.disabled,
- showSearch = $props.showSearch,
- dropdownClassName = $props.dropdownClassName,
- dropdownStyle = $props.dropdownStyle,
- dropdownMatchSelectWidth = $props.dropdownMatchSelectWidth,
- options = $props.options,
- getPopupContainer = $props.getPopupContainer,
- showAction = $props.showAction,
- empty = $props.empty;
- var _getListeners2 = getListeners(this),
- mouseenter = _getListeners2.mouseenter,
- mouseleave = _getListeners2.mouseleave,
- popupFocus = _getListeners2.popupFocus,
- dropdownVisibleChange = _getListeners2.dropdownVisibleChange;
- var dropdownPrefixCls = this.getDropdownPrefixCls();
- var popupClassName = (_popupClassName = {}, _defineProperty(_popupClassName, dropdownClassName, !!dropdownClassName), _defineProperty(_popupClassName, dropdownPrefixCls + '--' + (multiple ? 'multiple' : 'single'), 1), _defineProperty(_popupClassName, dropdownPrefixCls + '--empty', empty), _popupClassName);
- var popupElement = this.getDropdownElement({
- props: {
- menuItems: options,
- multiple: multiple,
- inputValue: inputValue,
- visible: visible
- },
- on: {
- popupFocus: popupFocus
- }
- });
- var hideAction = void 0;
- if (disabled) {
- hideAction = [];
- } else if (isSingleMode($props) && !showSearch) {
- hideAction = ['click'];
- } else {
- hideAction = ['blur'];
- }
- var popupStyle = _extends({}, dropdownStyle);
- var widthProp = dropdownMatchSelectWidth ? 'width' : 'minWidth';
- if (this.dropdownWidth) {
- popupStyle[widthProp] = this.dropdownWidth + 'px';
- }
- var triggerProps = {
- props: _extends({}, $props, {
- showAction: disabled ? [] : showAction,
- hideAction: hideAction,
- ref: 'triggerRef',
- popupPlacement: 'bottomLeft',
- builtinPlacements: BUILT_IN_PLACEMENTS,
- prefixCls: dropdownPrefixCls,
- popupTransitionName: this.getDropdownTransitionName(),
- popupAlign: dropdownAlign,
- popupVisible: visible,
- getPopupContainer: getPopupContainer,
- popupClassName: classnames(popupClassName),
- popupStyle: popupStyle
- }),
- on: {
- popupVisibleChange: dropdownVisibleChange
- },
- directives: [{
- name: 'ant-ref',
- value: this.saveTriggerRef
- }]
- };
- if (mouseenter) {
- triggerProps.on.mouseenter = mouseenter;
- }
- if (mouseleave) {
- triggerProps.on.mouseleave = mouseleave;
- }
- return h(
- Trigger,
- triggerProps,
- [$slots['default'], h(
- 'template',
- { slot: 'popup' },
- [popupElement]
- )]
- );
- }
- };
|