123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301 |
- 'use strict';
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
- var _defineProperty3 = _interopRequireDefault(_defineProperty2);
- var _extends2 = require('babel-runtime/helpers/extends');
- var _extends3 = _interopRequireDefault(_extends2);
- var _classnames = require('classnames');
- var _classnames2 = _interopRequireDefault(_classnames);
- var _raf = require('raf');
- var _raf2 = _interopRequireDefault(_raf);
- var _vcTrigger = require('../vc-trigger');
- var _vcTrigger2 = _interopRequireDefault(_vcTrigger);
- var _vueTypes = require('../_util/vue-types');
- var _vueTypes2 = _interopRequireDefault(_vueTypes);
- var _DropdownMenu = require('./DropdownMenu');
- var _DropdownMenu2 = _interopRequireDefault(_DropdownMenu);
- var _util = require('./util');
- var _BaseMixin = require('../_util/BaseMixin');
- var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
- var _propsUtil = require('../_util/props-util');
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
- 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
- }
- }
- };
- exports['default'] = {
- name: 'SelectTrigger',
- mixins: [_BaseMixin2['default']],
- props: {
- // onPopupFocus: PropTypes.func,
- // onPopupScroll: PropTypes.func,
- dropdownMatchSelectWidth: _vueTypes2['default'].bool,
- defaultActiveFirstOption: _vueTypes2['default'].bool,
- dropdownAlign: _vueTypes2['default'].object,
- visible: _vueTypes2['default'].bool,
- disabled: _vueTypes2['default'].bool,
- showSearch: _vueTypes2['default'].bool,
- dropdownClassName: _vueTypes2['default'].string,
- dropdownStyle: _vueTypes2['default'].object,
- dropdownMenuStyle: _vueTypes2['default'].object,
- multiple: _vueTypes2['default'].bool,
- inputValue: _vueTypes2['default'].string,
- filterOption: _vueTypes2['default'].any,
- empty: _vueTypes2['default'].bool,
- options: _vueTypes2['default'].any,
- prefixCls: _vueTypes2['default'].string,
- popupClassName: _vueTypes2['default'].string,
- value: _vueTypes2['default'].array,
- // children: PropTypes.any,
- showAction: _vueTypes2['default'].arrayOf(_vueTypes2['default'].string),
- combobox: _vueTypes2['default'].bool,
- animation: _vueTypes2['default'].string,
- transitionName: _vueTypes2['default'].string,
- getPopupContainer: _vueTypes2['default'].func,
- backfillValue: _vueTypes2['default'].any,
- menuItemSelectedIcon: _vueTypes2['default'].any,
- dropdownRender: _vueTypes2['default'].func,
- ariaId: _vueTypes2['default'].string
- },
- data: function data() {
- return {
- dropdownWidth: 0
- };
- },
- created: function created() {
- this.rafInstance = null;
- this.saveDropdownMenuRef = (0, _util.saveRef)(this, 'dropdownMenuRef');
- this.saveTriggerRef = (0, _util.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 = (0, _raf2['default'])(function () {
- var width = _this3.$el.offsetWidth;
- if (width !== _this3.dropdownWidth) {
- _this3.setState({ dropdownWidth: width });
- }
- });
- },
- cancelRafInstance: function cancelRafInstance() {
- if (this.rafInstance) {
- _raf2['default'].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 = (0, _propsUtil.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: (0, _extends3['default'])({}, newProps.props, {
- ariaId: ariaId,
- prefixCls: getDropdownPrefixCls(),
- value: value,
- firstActiveValue: firstActiveValue,
- defaultActiveFirstOption: defaultActiveFirstOption,
- dropdownMenuStyle: dropdownMenuStyle,
- backfillValue: backfillValue,
- menuItemSelectedIcon: menuItemSelectedIcon
- }),
- on: (0, _extends3['default'])({}, newProps.on, {
- menuSelect: menuSelect,
- menuDeselect: menuDeselect,
- popupScroll: popupScroll
- }),
- directives: [{
- name: 'ant-ref',
- value: this.saveDropdownMenuRef
- }]
- };
- var menuNode = h(_DropdownMenu2['default'], 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 = (0, _propsUtil.getListeners)(this),
- mouseenter = _getListeners2.mouseenter,
- mouseleave = _getListeners2.mouseleave,
- popupFocus = _getListeners2.popupFocus,
- dropdownVisibleChange = _getListeners2.dropdownVisibleChange;
- var dropdownPrefixCls = this.getDropdownPrefixCls();
- var popupClassName = (_popupClassName = {}, (0, _defineProperty3['default'])(_popupClassName, dropdownClassName, !!dropdownClassName), (0, _defineProperty3['default'])(_popupClassName, dropdownPrefixCls + '--' + (multiple ? 'multiple' : 'single'), 1), (0, _defineProperty3['default'])(_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 ((0, _util.isSingleMode)($props) && !showSearch) {
- hideAction = ['click'];
- } else {
- hideAction = ['blur'];
- }
- var popupStyle = (0, _extends3['default'])({}, dropdownStyle);
- var widthProp = dropdownMatchSelectWidth ? 'width' : 'minWidth';
- if (this.dropdownWidth) {
- popupStyle[widthProp] = this.dropdownWidth + 'px';
- }
- var triggerProps = {
- props: (0, _extends3['default'])({}, $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: (0, _classnames2['default'])(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(
- _vcTrigger2['default'],
- triggerProps,
- [$slots['default'], h(
- 'template',
- { slot: 'popup' },
- [popupElement]
- )]
- );
- }
- };
|