SelectTrigger.js 9.3 KB

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