SelectTrigger.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import classnames from 'classnames';
  4. import raf from 'raf';
  5. import Trigger from '../vc-trigger';
  6. import PropTypes from '../_util/vue-types';
  7. import DropdownMenu from './DropdownMenu';
  8. import { isSingleMode, saveRef } from './util';
  9. import BaseMixin from '../_util/BaseMixin';
  10. import { getListeners } from '../_util/props-util';
  11. var BUILT_IN_PLACEMENTS = {
  12. bottomLeft: {
  13. points: ['tl', 'bl'],
  14. offset: [0, 4],
  15. overflow: {
  16. adjustX: 0,
  17. adjustY: 1
  18. }
  19. },
  20. topLeft: {
  21. points: ['bl', 'tl'],
  22. offset: [0, -4],
  23. overflow: {
  24. adjustX: 0,
  25. adjustY: 1
  26. }
  27. }
  28. };
  29. export default {
  30. name: 'SelectTrigger',
  31. mixins: [BaseMixin],
  32. props: {
  33. // onPopupFocus: PropTypes.func,
  34. // onPopupScroll: PropTypes.func,
  35. dropdownMatchSelectWidth: PropTypes.bool,
  36. defaultActiveFirstOption: PropTypes.bool,
  37. dropdownAlign: PropTypes.object,
  38. visible: PropTypes.bool,
  39. disabled: PropTypes.bool,
  40. showSearch: PropTypes.bool,
  41. dropdownClassName: PropTypes.string,
  42. dropdownStyle: PropTypes.object,
  43. dropdownMenuStyle: PropTypes.object,
  44. multiple: PropTypes.bool,
  45. inputValue: PropTypes.string,
  46. filterOption: PropTypes.any,
  47. empty: PropTypes.bool,
  48. options: PropTypes.any,
  49. prefixCls: PropTypes.string,
  50. popupClassName: PropTypes.string,
  51. value: PropTypes.array,
  52. // children: PropTypes.any,
  53. showAction: PropTypes.arrayOf(PropTypes.string),
  54. combobox: PropTypes.bool,
  55. animation: PropTypes.string,
  56. transitionName: PropTypes.string,
  57. getPopupContainer: PropTypes.func,
  58. backfillValue: PropTypes.any,
  59. menuItemSelectedIcon: PropTypes.any,
  60. dropdownRender: PropTypes.func,
  61. ariaId: PropTypes.string
  62. },
  63. data: function data() {
  64. return {
  65. dropdownWidth: 0
  66. };
  67. },
  68. created: function created() {
  69. this.rafInstance = null;
  70. this.saveDropdownMenuRef = saveRef(this, 'dropdownMenuRef');
  71. this.saveTriggerRef = saveRef(this, 'triggerRef');
  72. },
  73. mounted: function mounted() {
  74. var _this = this;
  75. this.$nextTick(function () {
  76. _this.setDropdownWidth();
  77. });
  78. },
  79. updated: function updated() {
  80. var _this2 = this;
  81. this.$nextTick(function () {
  82. _this2.setDropdownWidth();
  83. });
  84. },
  85. beforeDestroy: function beforeDestroy() {
  86. this.cancelRafInstance();
  87. },
  88. methods: {
  89. setDropdownWidth: function setDropdownWidth() {
  90. var _this3 = this;
  91. this.cancelRafInstance();
  92. this.rafInstance = raf(function () {
  93. var width = _this3.$el.offsetWidth;
  94. if (width !== _this3.dropdownWidth) {
  95. _this3.setState({ dropdownWidth: width });
  96. }
  97. });
  98. },
  99. cancelRafInstance: function cancelRafInstance() {
  100. if (this.rafInstance) {
  101. raf.cancel(this.rafInstance);
  102. }
  103. },
  104. getInnerMenu: function getInnerMenu() {
  105. return this.dropdownMenuRef && this.dropdownMenuRef.$refs.menuRef;
  106. },
  107. getPopupDOMNode: function getPopupDOMNode() {
  108. return this.triggerRef.getPopupDomNode();
  109. },
  110. getDropdownElement: function getDropdownElement(newProps) {
  111. var h = this.$createElement;
  112. var value = this.value,
  113. firstActiveValue = this.firstActiveValue,
  114. defaultActiveFirstOption = this.defaultActiveFirstOption,
  115. dropdownMenuStyle = this.dropdownMenuStyle,
  116. getDropdownPrefixCls = this.getDropdownPrefixCls,
  117. backfillValue = this.backfillValue,
  118. menuItemSelectedIcon = this.menuItemSelectedIcon;
  119. var _getListeners = getListeners(this),
  120. menuSelect = _getListeners.menuSelect,
  121. menuDeselect = _getListeners.menuDeselect,
  122. popupScroll = _getListeners.popupScroll;
  123. var props = this.$props;
  124. var dropdownRender = props.dropdownRender,
  125. ariaId = props.ariaId;
  126. var dropdownMenuProps = {
  127. props: _extends({}, newProps.props, {
  128. ariaId: ariaId,
  129. prefixCls: getDropdownPrefixCls(),
  130. value: value,
  131. firstActiveValue: firstActiveValue,
  132. defaultActiveFirstOption: defaultActiveFirstOption,
  133. dropdownMenuStyle: dropdownMenuStyle,
  134. backfillValue: backfillValue,
  135. menuItemSelectedIcon: menuItemSelectedIcon
  136. }),
  137. on: _extends({}, newProps.on, {
  138. menuSelect: menuSelect,
  139. menuDeselect: menuDeselect,
  140. popupScroll: popupScroll
  141. }),
  142. directives: [{
  143. name: 'ant-ref',
  144. value: this.saveDropdownMenuRef
  145. }]
  146. };
  147. var menuNode = h(DropdownMenu, dropdownMenuProps);
  148. if (dropdownRender) {
  149. return dropdownRender(menuNode, props);
  150. }
  151. return null;
  152. },
  153. getDropdownTransitionName: function getDropdownTransitionName() {
  154. var props = this.$props;
  155. var transitionName = props.transitionName;
  156. if (!transitionName && props.animation) {
  157. transitionName = this.getDropdownPrefixCls() + '-' + props.animation;
  158. }
  159. return transitionName;
  160. },
  161. getDropdownPrefixCls: function getDropdownPrefixCls() {
  162. return this.prefixCls + '-dropdown';
  163. }
  164. },
  165. render: function render() {
  166. var _popupClassName;
  167. var h = arguments[0];
  168. var $props = this.$props,
  169. $slots = this.$slots;
  170. var multiple = $props.multiple,
  171. visible = $props.visible,
  172. inputValue = $props.inputValue,
  173. dropdownAlign = $props.dropdownAlign,
  174. disabled = $props.disabled,
  175. showSearch = $props.showSearch,
  176. dropdownClassName = $props.dropdownClassName,
  177. dropdownStyle = $props.dropdownStyle,
  178. dropdownMatchSelectWidth = $props.dropdownMatchSelectWidth,
  179. options = $props.options,
  180. getPopupContainer = $props.getPopupContainer,
  181. showAction = $props.showAction,
  182. empty = $props.empty;
  183. var _getListeners2 = getListeners(this),
  184. mouseenter = _getListeners2.mouseenter,
  185. mouseleave = _getListeners2.mouseleave,
  186. popupFocus = _getListeners2.popupFocus,
  187. dropdownVisibleChange = _getListeners2.dropdownVisibleChange;
  188. var dropdownPrefixCls = this.getDropdownPrefixCls();
  189. var popupClassName = (_popupClassName = {}, _defineProperty(_popupClassName, dropdownClassName, !!dropdownClassName), _defineProperty(_popupClassName, dropdownPrefixCls + '--' + (multiple ? 'multiple' : 'single'), 1), _defineProperty(_popupClassName, dropdownPrefixCls + '--empty', empty), _popupClassName);
  190. var popupElement = this.getDropdownElement({
  191. props: {
  192. menuItems: options,
  193. multiple: multiple,
  194. inputValue: inputValue,
  195. visible: visible
  196. },
  197. on: {
  198. popupFocus: popupFocus
  199. }
  200. });
  201. var hideAction = void 0;
  202. if (disabled) {
  203. hideAction = [];
  204. } else if (isSingleMode($props) && !showSearch) {
  205. hideAction = ['click'];
  206. } else {
  207. hideAction = ['blur'];
  208. }
  209. var popupStyle = _extends({}, dropdownStyle);
  210. var widthProp = dropdownMatchSelectWidth ? 'width' : 'minWidth';
  211. if (this.dropdownWidth) {
  212. popupStyle[widthProp] = this.dropdownWidth + 'px';
  213. }
  214. var triggerProps = {
  215. props: _extends({}, $props, {
  216. showAction: disabled ? [] : showAction,
  217. hideAction: hideAction,
  218. ref: 'triggerRef',
  219. popupPlacement: 'bottomLeft',
  220. builtinPlacements: BUILT_IN_PLACEMENTS,
  221. prefixCls: dropdownPrefixCls,
  222. popupTransitionName: this.getDropdownTransitionName(),
  223. popupAlign: dropdownAlign,
  224. popupVisible: visible,
  225. getPopupContainer: getPopupContainer,
  226. popupClassName: classnames(popupClassName),
  227. popupStyle: popupStyle
  228. }),
  229. on: {
  230. popupVisibleChange: dropdownVisibleChange
  231. },
  232. directives: [{
  233. name: 'ant-ref',
  234. value: this.saveTriggerRef
  235. }]
  236. };
  237. if (mouseenter) {
  238. triggerProps.on.mouseenter = mouseenter;
  239. }
  240. if (mouseleave) {
  241. triggerProps.on.mouseleave = mouseleave;
  242. }
  243. return h(
  244. Trigger,
  245. triggerProps,
  246. [$slots['default'], h(
  247. 'template',
  248. { slot: 'popup' },
  249. [popupElement]
  250. )]
  251. );
  252. }
  253. };