TimePicker.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
  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 _moment = require('moment');
  8. var _moment2 = _interopRequireDefault(_moment);
  9. var _classnames = require('classnames');
  10. var _classnames2 = _interopRequireDefault(_classnames);
  11. var _vueTypes = require('../_util/vue-types');
  12. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  13. var _BaseMixin = require('../_util/BaseMixin');
  14. var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
  15. var _propsUtil = require('../_util/props-util');
  16. var _vnode = require('../_util/vnode');
  17. var _vcTrigger = require('../vc-trigger');
  18. var _vcTrigger2 = _interopRequireDefault(_vcTrigger);
  19. var _Panel = require('./Panel');
  20. var _Panel2 = _interopRequireDefault(_Panel);
  21. var _placements = require('./placements');
  22. var _placements2 = _interopRequireDefault(_placements);
  23. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  24. function noop() {}
  25. exports['default'] = {
  26. name: 'VcTimePicker',
  27. mixins: [_BaseMixin2['default']],
  28. props: (0, _propsUtil.initDefaultProps)({
  29. prefixCls: _vueTypes2['default'].string,
  30. clearText: _vueTypes2['default'].string,
  31. value: _vueTypes2['default'].any,
  32. defaultOpenValue: {
  33. type: Object,
  34. 'default': function _default() {
  35. return (0, _moment2['default'])();
  36. }
  37. },
  38. inputReadOnly: _vueTypes2['default'].bool,
  39. disabled: _vueTypes2['default'].bool,
  40. allowEmpty: _vueTypes2['default'].bool,
  41. defaultValue: _vueTypes2['default'].any,
  42. open: _vueTypes2['default'].bool,
  43. defaultOpen: _vueTypes2['default'].bool,
  44. align: _vueTypes2['default'].object,
  45. placement: _vueTypes2['default'].any,
  46. transitionName: _vueTypes2['default'].string,
  47. getPopupContainer: _vueTypes2['default'].func,
  48. placeholder: _vueTypes2['default'].string,
  49. format: _vueTypes2['default'].string,
  50. showHour: _vueTypes2['default'].bool,
  51. showMinute: _vueTypes2['default'].bool,
  52. showSecond: _vueTypes2['default'].bool,
  53. popupClassName: _vueTypes2['default'].string,
  54. popupStyle: _vueTypes2['default'].object,
  55. disabledHours: _vueTypes2['default'].func,
  56. disabledMinutes: _vueTypes2['default'].func,
  57. disabledSeconds: _vueTypes2['default'].func,
  58. hideDisabledOptions: _vueTypes2['default'].bool,
  59. // onChange: PropTypes.func,
  60. // onAmPmChange: PropTypes.func,
  61. // onOpen: PropTypes.func,
  62. // onClose: PropTypes.func,
  63. // onFocus: PropTypes.func,
  64. // onBlur: PropTypes.func,
  65. name: _vueTypes2['default'].string,
  66. autoComplete: _vueTypes2['default'].string,
  67. use12Hours: _vueTypes2['default'].bool,
  68. hourStep: _vueTypes2['default'].number,
  69. minuteStep: _vueTypes2['default'].number,
  70. secondStep: _vueTypes2['default'].number,
  71. focusOnOpen: _vueTypes2['default'].bool,
  72. // onKeyDown: PropTypes.func,
  73. autoFocus: _vueTypes2['default'].bool,
  74. id: _vueTypes2['default'].string,
  75. inputIcon: _vueTypes2['default'].any,
  76. clearIcon: _vueTypes2['default'].any,
  77. addon: _vueTypes2['default'].func
  78. }, {
  79. clearText: 'clear',
  80. prefixCls: 'rc-time-picker',
  81. defaultOpen: false,
  82. inputReadOnly: false,
  83. popupClassName: '',
  84. popupStyle: {},
  85. align: {},
  86. allowEmpty: true,
  87. showHour: true,
  88. showMinute: true,
  89. showSecond: true,
  90. disabledHours: noop,
  91. disabledMinutes: noop,
  92. disabledSeconds: noop,
  93. hideDisabledOptions: false,
  94. placement: 'bottomLeft',
  95. use12Hours: false,
  96. focusOnOpen: false
  97. }),
  98. data: function data() {
  99. var defaultOpen = this.defaultOpen,
  100. defaultValue = this.defaultValue,
  101. _open = this.open,
  102. open = _open === undefined ? defaultOpen : _open,
  103. _value = this.value,
  104. value = _value === undefined ? defaultValue : _value;
  105. return {
  106. sOpen: open,
  107. sValue: value
  108. };
  109. },
  110. watch: {
  111. value: function value(val) {
  112. this.setState({
  113. sValue: val
  114. });
  115. },
  116. open: function open(val) {
  117. if (val !== undefined) {
  118. this.setState({
  119. sOpen: val
  120. });
  121. }
  122. }
  123. },
  124. mounted: function mounted() {
  125. var _this = this;
  126. this.$nextTick(function () {
  127. if (_this.autoFocus) {
  128. _this.focus();
  129. }
  130. });
  131. },
  132. methods: {
  133. onPanelChange: function onPanelChange(value) {
  134. this.setValue(value);
  135. },
  136. onAmPmChange: function onAmPmChange(ampm) {
  137. this.__emit('amPmChange', ampm);
  138. },
  139. onClear: function onClear(event) {
  140. event.stopPropagation();
  141. this.setValue(null);
  142. this.setOpen(false);
  143. },
  144. onVisibleChange: function onVisibleChange(open) {
  145. this.setOpen(open);
  146. },
  147. onEsc: function onEsc() {
  148. this.setOpen(false);
  149. this.focus();
  150. },
  151. onKeyDown: function onKeyDown(e) {
  152. if (e.keyCode === 40) {
  153. this.setOpen(true);
  154. }
  155. },
  156. onKeyDown2: function onKeyDown2(e) {
  157. this.__emit('keydown', e);
  158. },
  159. setValue: function setValue(value) {
  160. if (!(0, _propsUtil.hasProp)(this, 'value')) {
  161. this.setState({
  162. sValue: value
  163. });
  164. }
  165. this.__emit('change', value);
  166. },
  167. getFormat: function getFormat() {
  168. var format = this.format,
  169. showHour = this.showHour,
  170. showMinute = this.showMinute,
  171. showSecond = this.showSecond,
  172. use12Hours = this.use12Hours;
  173. if (format) {
  174. return format;
  175. }
  176. if (use12Hours) {
  177. var fmtString = [showHour ? 'h' : '', showMinute ? 'mm' : '', showSecond ? 'ss' : ''].filter(function (item) {
  178. return !!item;
  179. }).join(':');
  180. return fmtString.concat(' a');
  181. }
  182. return [showHour ? 'HH' : '', showMinute ? 'mm' : '', showSecond ? 'ss' : ''].filter(function (item) {
  183. return !!item;
  184. }).join(':');
  185. },
  186. getPanelElement: function getPanelElement() {
  187. var h = this.$createElement;
  188. var prefixCls = this.prefixCls,
  189. placeholder = this.placeholder,
  190. disabledHours = this.disabledHours,
  191. addon = this.addon,
  192. disabledMinutes = this.disabledMinutes,
  193. disabledSeconds = this.disabledSeconds,
  194. hideDisabledOptions = this.hideDisabledOptions,
  195. inputReadOnly = this.inputReadOnly,
  196. showHour = this.showHour,
  197. showMinute = this.showMinute,
  198. showSecond = this.showSecond,
  199. defaultOpenValue = this.defaultOpenValue,
  200. clearText = this.clearText,
  201. use12Hours = this.use12Hours,
  202. focusOnOpen = this.focusOnOpen,
  203. onKeyDown2 = this.onKeyDown2,
  204. hourStep = this.hourStep,
  205. minuteStep = this.minuteStep,
  206. secondStep = this.secondStep,
  207. sValue = this.sValue;
  208. var clearIcon = (0, _propsUtil.getComponentFromProp)(this, 'clearIcon');
  209. return h(_Panel2['default'], {
  210. attrs: {
  211. clearText: clearText,
  212. prefixCls: prefixCls + '-panel',
  213. value: sValue,
  214. inputReadOnly: inputReadOnly,
  215. defaultOpenValue: defaultOpenValue,
  216. showHour: showHour,
  217. showMinute: showMinute,
  218. showSecond: showSecond,
  219. format: this.getFormat(),
  220. placeholder: placeholder,
  221. disabledHours: disabledHours,
  222. disabledMinutes: disabledMinutes,
  223. disabledSeconds: disabledSeconds,
  224. hideDisabledOptions: hideDisabledOptions,
  225. use12Hours: use12Hours,
  226. hourStep: hourStep,
  227. minuteStep: minuteStep,
  228. secondStep: secondStep,
  229. focusOnOpen: focusOnOpen,
  230. clearIcon: clearIcon,
  231. addon: addon
  232. },
  233. ref: 'panel', on: {
  234. 'change': this.onPanelChange,
  235. 'amPmChange': this.onAmPmChange,
  236. 'esc': this.onEsc,
  237. 'keydown': onKeyDown2
  238. }
  239. });
  240. },
  241. getPopupClassName: function getPopupClassName() {
  242. var showHour = this.showHour,
  243. showMinute = this.showMinute,
  244. showSecond = this.showSecond,
  245. use12Hours = this.use12Hours,
  246. prefixCls = this.prefixCls,
  247. popupClassName = this.popupClassName;
  248. var selectColumnCount = 0;
  249. if (showHour) {
  250. selectColumnCount += 1;
  251. }
  252. if (showMinute) {
  253. selectColumnCount += 1;
  254. }
  255. if (showSecond) {
  256. selectColumnCount += 1;
  257. }
  258. if (use12Hours) {
  259. selectColumnCount += 1;
  260. }
  261. // Keep it for old compatibility
  262. return (0, _classnames2['default'])(popupClassName, (0, _defineProperty3['default'])({}, prefixCls + '-panel-narrow', (!showHour || !showMinute || !showSecond) && !use12Hours), prefixCls + '-panel-column-' + selectColumnCount);
  263. },
  264. setOpen: function setOpen(open) {
  265. if (this.sOpen !== open) {
  266. if (!(0, _propsUtil.hasProp)(this, 'open')) {
  267. this.setState({ sOpen: open });
  268. }
  269. if (open) {
  270. this.__emit('open', { open: open });
  271. } else {
  272. this.__emit('close', { open: open });
  273. }
  274. }
  275. },
  276. focus: function focus() {
  277. this.$refs.picker.focus();
  278. },
  279. blur: function blur() {
  280. this.$refs.picker.blur();
  281. },
  282. onFocus: function onFocus(e) {
  283. this.__emit('focus', e);
  284. },
  285. onBlur: function onBlur(e) {
  286. this.__emit('blur', e);
  287. },
  288. renderClearButton: function renderClearButton() {
  289. var _this2 = this;
  290. var h = this.$createElement;
  291. var sValue = this.sValue;
  292. var _$props = this.$props,
  293. prefixCls = _$props.prefixCls,
  294. allowEmpty = _$props.allowEmpty,
  295. clearText = _$props.clearText,
  296. disabled = _$props.disabled;
  297. if (!allowEmpty || !sValue || disabled) {
  298. return null;
  299. }
  300. var clearIcon = (0, _propsUtil.getComponentFromProp)(this, 'clearIcon');
  301. if ((0, _propsUtil.isValidElement)(clearIcon)) {
  302. var _ref = (0, _propsUtil.getEvents)(clearIcon) || {},
  303. _click = _ref.click;
  304. return (0, _vnode.cloneElement)(clearIcon, {
  305. on: {
  306. click: function click() {
  307. if (_click) _click.apply(undefined, arguments);
  308. _this2.onClear.apply(_this2, arguments);
  309. }
  310. }
  311. });
  312. }
  313. return h(
  314. 'a',
  315. {
  316. attrs: {
  317. role: 'button',
  318. title: clearText,
  319. tabIndex: 0
  320. },
  321. 'class': prefixCls + '-clear', on: {
  322. 'click': this.onClear
  323. }
  324. },
  325. [clearIcon || h('i', { 'class': prefixCls + '-clear-icon' })]
  326. );
  327. }
  328. },
  329. render: function render() {
  330. var h = arguments[0];
  331. var prefixCls = this.prefixCls,
  332. placeholder = this.placeholder,
  333. placement = this.placement,
  334. align = this.align,
  335. id = this.id,
  336. disabled = this.disabled,
  337. transitionName = this.transitionName,
  338. getPopupContainer = this.getPopupContainer,
  339. name = this.name,
  340. autoComplete = this.autoComplete,
  341. autoFocus = this.autoFocus,
  342. sOpen = this.sOpen,
  343. sValue = this.sValue,
  344. onFocus = this.onFocus,
  345. onBlur = this.onBlur,
  346. popupStyle = this.popupStyle;
  347. var popupClassName = this.getPopupClassName();
  348. var inputIcon = (0, _propsUtil.getComponentFromProp)(this, 'inputIcon');
  349. return h(
  350. _vcTrigger2['default'],
  351. {
  352. attrs: {
  353. prefixCls: prefixCls + '-panel',
  354. popupClassName: popupClassName,
  355. popupStyle: popupStyle,
  356. popupAlign: align,
  357. builtinPlacements: _placements2['default'],
  358. popupPlacement: placement,
  359. action: disabled ? [] : ['click'],
  360. destroyPopupOnHide: true,
  361. getPopupContainer: getPopupContainer,
  362. popupTransitionName: transitionName,
  363. popupVisible: sOpen
  364. },
  365. on: {
  366. 'popupVisibleChange': this.onVisibleChange
  367. }
  368. },
  369. [h(
  370. 'template',
  371. { slot: 'popup' },
  372. [this.getPanelElement()]
  373. ), h(
  374. 'span',
  375. { 'class': '' + prefixCls },
  376. [h('input', {
  377. 'class': prefixCls + '-input',
  378. ref: 'picker',
  379. attrs: { type: 'text',
  380. placeholder: placeholder,
  381. name: name,
  382. disabled: disabled,
  383. autoComplete: autoComplete,
  384. autoFocus: autoFocus,
  385. readOnly: true,
  386. id: id
  387. },
  388. on: {
  389. 'keydown': this.onKeyDown,
  390. 'focus': onFocus,
  391. 'blur': onBlur
  392. },
  393. domProps: {
  394. 'value': sValue && sValue.format(this.getFormat()) || ''
  395. }
  396. }), inputIcon || h('span', { 'class': prefixCls + '-icon' }), this.renderClearButton()]
  397. )]
  398. );
  399. }
  400. };