Select.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  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 _vueTypes = require('../_util/vue-types');
  8. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  9. var _BaseMixin = require('../_util/BaseMixin');
  10. var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
  11. var _classnames2 = require('classnames');
  12. var _classnames3 = _interopRequireDefault(_classnames2);
  13. var _raf = require('raf');
  14. var _raf2 = _interopRequireDefault(_raf);
  15. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  16. function noop() {}
  17. var scrollTo = function scrollTo(element, to, duration) {
  18. // jump to target if duration zero
  19. if (duration <= 0) {
  20. (0, _raf2['default'])(function () {
  21. element.scrollTop = to;
  22. });
  23. return;
  24. }
  25. var difference = to - element.scrollTop;
  26. var perTick = difference / duration * 10;
  27. (0, _raf2['default'])(function () {
  28. element.scrollTop += perTick;
  29. if (element.scrollTop === to) return;
  30. scrollTo(element, to, duration - 10);
  31. });
  32. };
  33. var Select = {
  34. mixins: [_BaseMixin2['default']],
  35. props: {
  36. prefixCls: _vueTypes2['default'].string,
  37. options: _vueTypes2['default'].array,
  38. selectedIndex: _vueTypes2['default'].number,
  39. type: _vueTypes2['default'].string
  40. // onSelect: PropTypes.func,
  41. // onMouseEnter: PropTypes.func,
  42. },
  43. data: function data() {
  44. return {
  45. active: false
  46. };
  47. },
  48. mounted: function mounted() {
  49. var _this = this;
  50. this.$nextTick(function () {
  51. // jump to selected option
  52. _this.scrollToSelected(0);
  53. });
  54. },
  55. watch: {
  56. selectedIndex: function selectedIndex() {
  57. var _this2 = this;
  58. this.$nextTick(function () {
  59. // smooth scroll to selected option
  60. _this2.scrollToSelected(120);
  61. });
  62. }
  63. },
  64. methods: {
  65. onSelect: function onSelect(value) {
  66. var type = this.type;
  67. this.__emit('select', type, value);
  68. },
  69. onEsc: function onEsc(e) {
  70. this.__emit('esc', e);
  71. },
  72. getOptions: function getOptions() {
  73. var _this3 = this;
  74. var h = this.$createElement;
  75. var options = this.options,
  76. selectedIndex = this.selectedIndex,
  77. prefixCls = this.prefixCls;
  78. return options.map(function (item, index) {
  79. var _classnames;
  80. var cls = (0, _classnames3['default'])((_classnames = {}, (0, _defineProperty3['default'])(_classnames, prefixCls + '-select-option-selected', selectedIndex === index), (0, _defineProperty3['default'])(_classnames, prefixCls + '-select-option-disabled', item.disabled), _classnames));
  81. var onClick = item.disabled ? noop : function () {
  82. _this3.onSelect(item.value);
  83. };
  84. var onKeyDown = function onKeyDown(e) {
  85. if (e.keyCode === 13) onClick();else if (e.keyCode === 27) _this3.onEsc();
  86. };
  87. return h(
  88. 'li',
  89. {
  90. attrs: {
  91. role: 'button',
  92. disabled: item.disabled,
  93. tabIndex: '0'
  94. },
  95. on: {
  96. 'click': onClick,
  97. 'keydown': onKeyDown
  98. },
  99. 'class': cls,
  100. key: index },
  101. [item.value]
  102. );
  103. });
  104. },
  105. handleMouseEnter: function handleMouseEnter(e) {
  106. this.setState({ active: true });
  107. this.__emit('mouseenter', e);
  108. },
  109. handleMouseLeave: function handleMouseLeave() {
  110. this.setState({ active: false });
  111. },
  112. scrollToSelected: function scrollToSelected(duration) {
  113. // move to selected item
  114. var select = this.$el;
  115. var list = this.$refs.list;
  116. if (!list) {
  117. return;
  118. }
  119. var index = this.selectedIndex;
  120. if (index < 0) {
  121. index = 0;
  122. }
  123. var topOption = list.children[index];
  124. var to = topOption.offsetTop;
  125. scrollTo(select, to, duration);
  126. }
  127. },
  128. render: function render() {
  129. var _cls;
  130. var h = arguments[0];
  131. var prefixCls = this.prefixCls,
  132. options = this.options,
  133. active = this.active;
  134. if (options.length === 0) {
  135. return null;
  136. }
  137. var cls = (_cls = {}, (0, _defineProperty3['default'])(_cls, prefixCls + '-select', 1), (0, _defineProperty3['default'])(_cls, prefixCls + '-select-active', active), _cls);
  138. return h(
  139. 'div',
  140. { 'class': cls, on: {
  141. 'mouseenter': this.handleMouseEnter,
  142. 'mouseleave': this.handleMouseLeave
  143. }
  144. },
  145. [h(
  146. 'ul',
  147. { ref: 'list' },
  148. [this.getOptions()]
  149. )]
  150. );
  151. }
  152. };
  153. exports['default'] = Select;