Combobox.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _vueTypes = require('../_util/vue-types');
  6. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  7. var _Select = require('./Select');
  8. var _Select2 = _interopRequireDefault(_Select);
  9. var _BaseMixin = require('../_util/BaseMixin');
  10. var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
  11. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  12. var formatOption = function formatOption(option, disabledOptions) {
  13. var value = '' + option;
  14. if (option < 10) {
  15. value = '0' + option;
  16. }
  17. var disabled = false;
  18. if (disabledOptions && disabledOptions.indexOf(option) >= 0) {
  19. disabled = true;
  20. }
  21. return {
  22. value: value,
  23. disabled: disabled
  24. };
  25. };
  26. var Combobox = {
  27. mixins: [_BaseMixin2['default']],
  28. name: 'Combobox',
  29. props: {
  30. format: _vueTypes2['default'].string,
  31. defaultOpenValue: _vueTypes2['default'].object,
  32. prefixCls: _vueTypes2['default'].string,
  33. value: _vueTypes2['default'].object,
  34. // onChange: PropTypes.func,
  35. // onAmPmChange: PropTypes.func,
  36. showHour: _vueTypes2['default'].bool,
  37. showMinute: _vueTypes2['default'].bool,
  38. showSecond: _vueTypes2['default'].bool,
  39. hourOptions: _vueTypes2['default'].array,
  40. minuteOptions: _vueTypes2['default'].array,
  41. secondOptions: _vueTypes2['default'].array,
  42. disabledHours: _vueTypes2['default'].func,
  43. disabledMinutes: _vueTypes2['default'].func,
  44. disabledSeconds: _vueTypes2['default'].func,
  45. // onCurrentSelectPanelChange: PropTypes.func,
  46. use12Hours: _vueTypes2['default'].bool,
  47. isAM: _vueTypes2['default'].bool
  48. },
  49. methods: {
  50. onItemChange: function onItemChange(type, itemValue) {
  51. var defaultOpenValue = this.defaultOpenValue,
  52. use12Hours = this.use12Hours,
  53. propValue = this.value,
  54. isAM = this.isAM;
  55. var value = (propValue || defaultOpenValue).clone();
  56. if (type === 'hour') {
  57. if (use12Hours) {
  58. if (isAM) {
  59. value.hour(+itemValue % 12);
  60. } else {
  61. value.hour(+itemValue % 12 + 12);
  62. }
  63. } else {
  64. value.hour(+itemValue);
  65. }
  66. } else if (type === 'minute') {
  67. value.minute(+itemValue);
  68. } else if (type === 'ampm') {
  69. var ampm = itemValue.toUpperCase();
  70. if (use12Hours) {
  71. if (ampm === 'PM' && value.hour() < 12) {
  72. value.hour(value.hour() % 12 + 12);
  73. }
  74. if (ampm === 'AM') {
  75. if (value.hour() >= 12) {
  76. value.hour(value.hour() - 12);
  77. }
  78. }
  79. }
  80. this.__emit('amPmChange', ampm);
  81. } else {
  82. value.second(+itemValue);
  83. }
  84. this.__emit('change', value);
  85. },
  86. onEnterSelectPanel: function onEnterSelectPanel(range) {
  87. this.__emit('currentSelectPanelChange', range);
  88. },
  89. onEsc: function onEsc(e) {
  90. this.__emit('esc', e);
  91. },
  92. getHourSelect: function getHourSelect(hour) {
  93. var _this = this;
  94. var h = this.$createElement;
  95. var prefixCls = this.prefixCls,
  96. hourOptions = this.hourOptions,
  97. disabledHours = this.disabledHours,
  98. showHour = this.showHour,
  99. use12Hours = this.use12Hours;
  100. if (!showHour) {
  101. return null;
  102. }
  103. var disabledOptions = disabledHours();
  104. var hourOptionsAdj = void 0;
  105. var hourAdj = void 0;
  106. if (use12Hours) {
  107. hourOptionsAdj = [12].concat(hourOptions.filter(function (h) {
  108. return h < 12 && h > 0;
  109. }));
  110. hourAdj = hour % 12 || 12;
  111. } else {
  112. hourOptionsAdj = hourOptions;
  113. hourAdj = hour;
  114. }
  115. return h(_Select2['default'], {
  116. attrs: {
  117. prefixCls: prefixCls,
  118. options: hourOptionsAdj.map(function (option) {
  119. return formatOption(option, disabledOptions);
  120. }),
  121. selectedIndex: hourOptionsAdj.indexOf(hourAdj),
  122. type: 'hour'
  123. },
  124. on: {
  125. 'select': this.onItemChange,
  126. 'mouseenter': function mouseenter() {
  127. return _this.onEnterSelectPanel('hour');
  128. },
  129. 'esc': this.onEsc
  130. }
  131. });
  132. },
  133. getMinuteSelect: function getMinuteSelect(minute) {
  134. var _this2 = this;
  135. var h = this.$createElement;
  136. var prefixCls = this.prefixCls,
  137. minuteOptions = this.minuteOptions,
  138. disabledMinutes = this.disabledMinutes,
  139. defaultOpenValue = this.defaultOpenValue,
  140. showMinute = this.showMinute,
  141. propValue = this.value;
  142. if (!showMinute) {
  143. return null;
  144. }
  145. var value = propValue || defaultOpenValue;
  146. var disabledOptions = disabledMinutes(value.hour());
  147. return h(_Select2['default'], {
  148. attrs: {
  149. prefixCls: prefixCls,
  150. options: minuteOptions.map(function (option) {
  151. return formatOption(option, disabledOptions);
  152. }),
  153. selectedIndex: minuteOptions.indexOf(minute),
  154. type: 'minute'
  155. },
  156. on: {
  157. 'select': this.onItemChange,
  158. 'mouseenter': function mouseenter() {
  159. return _this2.onEnterSelectPanel('minute');
  160. },
  161. 'esc': this.onEsc
  162. }
  163. });
  164. },
  165. getSecondSelect: function getSecondSelect(second) {
  166. var _this3 = this;
  167. var h = this.$createElement;
  168. var prefixCls = this.prefixCls,
  169. secondOptions = this.secondOptions,
  170. disabledSeconds = this.disabledSeconds,
  171. showSecond = this.showSecond,
  172. defaultOpenValue = this.defaultOpenValue,
  173. propValue = this.value;
  174. if (!showSecond) {
  175. return null;
  176. }
  177. var value = propValue || defaultOpenValue;
  178. var disabledOptions = disabledSeconds(value.hour(), value.minute());
  179. return h(_Select2['default'], {
  180. attrs: {
  181. prefixCls: prefixCls,
  182. options: secondOptions.map(function (option) {
  183. return formatOption(option, disabledOptions);
  184. }),
  185. selectedIndex: secondOptions.indexOf(second),
  186. type: 'second'
  187. },
  188. on: {
  189. 'select': this.onItemChange,
  190. 'mouseenter': function mouseenter() {
  191. return _this3.onEnterSelectPanel('second');
  192. },
  193. 'esc': this.onEsc
  194. }
  195. });
  196. },
  197. getAMPMSelect: function getAMPMSelect() {
  198. var _this4 = this;
  199. var h = this.$createElement;
  200. var prefixCls = this.prefixCls,
  201. use12Hours = this.use12Hours,
  202. format = this.format,
  203. isAM = this.isAM;
  204. if (!use12Hours) {
  205. return null;
  206. }
  207. var AMPMOptions = ['am', 'pm'] // If format has A char, then we should uppercase AM/PM
  208. .map(function (c) {
  209. return format.match(/\sA/) ? c.toUpperCase() : c;
  210. }).map(function (c) {
  211. return { value: c };
  212. });
  213. var selected = isAM ? 0 : 1;
  214. return h(_Select2['default'], {
  215. attrs: {
  216. prefixCls: prefixCls,
  217. options: AMPMOptions,
  218. selectedIndex: selected,
  219. type: 'ampm'
  220. },
  221. on: {
  222. 'select': this.onItemChange,
  223. 'mouseenter': function mouseenter() {
  224. return _this4.onEnterSelectPanel('ampm');
  225. },
  226. 'esc': this.onEsc
  227. }
  228. });
  229. }
  230. },
  231. render: function render() {
  232. var h = arguments[0];
  233. var prefixCls = this.prefixCls,
  234. defaultOpenValue = this.defaultOpenValue,
  235. propValue = this.value;
  236. var value = propValue || defaultOpenValue;
  237. return h(
  238. 'div',
  239. { 'class': prefixCls + '-combobox' },
  240. [this.getHourSelect(value.hour()), this.getMinuteSelect(value.minute()), this.getSecondSelect(value.second()), this.getAMPMSelect(value.hour())]
  241. );
  242. }
  243. };
  244. exports['default'] = Combobox;