Header.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
  6. var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
  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 _moment = require('moment');
  12. var _moment2 = _interopRequireDefault(_moment);
  13. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  14. var Header = {
  15. mixins: [_BaseMixin2['default']],
  16. props: {
  17. format: _vueTypes2['default'].string,
  18. prefixCls: _vueTypes2['default'].string,
  19. disabledDate: _vueTypes2['default'].func,
  20. placeholder: _vueTypes2['default'].string,
  21. clearText: _vueTypes2['default'].string,
  22. value: _vueTypes2['default'].object,
  23. inputReadOnly: _vueTypes2['default'].bool.def(false),
  24. hourOptions: _vueTypes2['default'].array,
  25. minuteOptions: _vueTypes2['default'].array,
  26. secondOptions: _vueTypes2['default'].array,
  27. disabledHours: _vueTypes2['default'].func,
  28. disabledMinutes: _vueTypes2['default'].func,
  29. disabledSeconds: _vueTypes2['default'].func,
  30. // onChange: PropTypes.func,
  31. // onClear: PropTypes.func,
  32. // onEsc: PropTypes.func,
  33. allowEmpty: _vueTypes2['default'].bool,
  34. defaultOpenValue: _vueTypes2['default'].object,
  35. currentSelectPanel: _vueTypes2['default'].string,
  36. focusOnOpen: _vueTypes2['default'].bool,
  37. // onKeyDown: PropTypes.func,
  38. clearIcon: _vueTypes2['default'].any
  39. },
  40. data: function data() {
  41. var value = this.value,
  42. format = this.format;
  43. return {
  44. str: value && value.format(format) || '',
  45. invalid: false
  46. };
  47. },
  48. mounted: function mounted() {
  49. var _this = this;
  50. if (this.focusOnOpen) {
  51. // Wait one frame for the panel to be positioned before focusing
  52. var requestAnimationFrame = window.requestAnimationFrame || window.setTimeout;
  53. requestAnimationFrame(function () {
  54. _this.$refs.input.focus();
  55. _this.$refs.input.select();
  56. });
  57. }
  58. },
  59. watch: {
  60. value: function value(val) {
  61. var _this2 = this;
  62. this.$nextTick(function () {
  63. _this2.setState({
  64. str: val && val.format(_this2.format) || '',
  65. invalid: false
  66. });
  67. });
  68. }
  69. },
  70. methods: {
  71. onInputChange: function onInputChange(e) {
  72. var _e$target = e.target,
  73. str = _e$target.value,
  74. composing = _e$target.composing;
  75. var _str = this.str,
  76. oldStr = _str === undefined ? '' : _str;
  77. if (e.isComposing || composing || oldStr === str) return;
  78. this.setState({
  79. str: str
  80. });
  81. var format = this.format,
  82. hourOptions = this.hourOptions,
  83. minuteOptions = this.minuteOptions,
  84. secondOptions = this.secondOptions,
  85. disabledHours = this.disabledHours,
  86. disabledMinutes = this.disabledMinutes,
  87. disabledSeconds = this.disabledSeconds,
  88. originalValue = this.value;
  89. if (str) {
  90. var value = this.getProtoValue().clone();
  91. var parsed = (0, _moment2['default'])(str, format, true);
  92. if (!parsed.isValid()) {
  93. this.setState({
  94. invalid: true
  95. });
  96. return;
  97. }
  98. value.hour(parsed.hour()).minute(parsed.minute()).second(parsed.second());
  99. // if time value not allowed, response warning.
  100. if (hourOptions.indexOf(value.hour()) < 0 || minuteOptions.indexOf(value.minute()) < 0 || secondOptions.indexOf(value.second()) < 0) {
  101. this.setState({
  102. invalid: true
  103. });
  104. return;
  105. }
  106. // if time value is disabled, response warning.
  107. var disabledHourOptions = disabledHours();
  108. var disabledMinuteOptions = disabledMinutes(value.hour());
  109. var disabledSecondOptions = disabledSeconds(value.hour(), value.minute());
  110. if (disabledHourOptions && disabledHourOptions.indexOf(value.hour()) >= 0 || disabledMinuteOptions && disabledMinuteOptions.indexOf(value.minute()) >= 0 || disabledSecondOptions && disabledSecondOptions.indexOf(value.second()) >= 0) {
  111. this.setState({
  112. invalid: true
  113. });
  114. return;
  115. }
  116. if (originalValue) {
  117. if (originalValue.hour() !== value.hour() || originalValue.minute() !== value.minute() || originalValue.second() !== value.second()) {
  118. // keep other fields for rc-calendar
  119. var changedValue = originalValue.clone();
  120. changedValue.hour(value.hour());
  121. changedValue.minute(value.minute());
  122. changedValue.second(value.second());
  123. this.__emit('change', changedValue);
  124. }
  125. } else if (originalValue !== value) {
  126. this.__emit('change', value);
  127. }
  128. } else {
  129. this.__emit('change', null);
  130. }
  131. this.setState({
  132. invalid: false
  133. });
  134. },
  135. onKeyDown: function onKeyDown(e) {
  136. if (e.keyCode === 27) {
  137. this.__emit('esc');
  138. }
  139. this.__emit('keydown', e);
  140. },
  141. getProtoValue: function getProtoValue() {
  142. return this.value || this.defaultOpenValue;
  143. },
  144. getInput: function getInput() {
  145. var h = this.$createElement;
  146. var prefixCls = this.prefixCls,
  147. placeholder = this.placeholder,
  148. inputReadOnly = this.inputReadOnly,
  149. invalid = this.invalid,
  150. str = this.str;
  151. var invalidClass = invalid ? prefixCls + '-input-invalid' : '';
  152. return h('input', (0, _babelHelperVueJsxMergeProps2['default'])([{
  153. 'class': prefixCls + '-input ' + invalidClass,
  154. ref: 'input',
  155. on: {
  156. 'keydown': this.onKeyDown,
  157. 'input': this.onInputChange
  158. },
  159. domProps: {
  160. 'value': str
  161. },
  162. attrs: {
  163. placeholder: placeholder,
  164. readOnly: !!inputReadOnly
  165. }
  166. }, {
  167. directives: [{
  168. name: 'ant-input'
  169. }]
  170. }]));
  171. }
  172. },
  173. render: function render() {
  174. var h = arguments[0];
  175. var prefixCls = this.prefixCls;
  176. return h(
  177. 'div',
  178. { 'class': prefixCls + '-input-wrap' },
  179. [this.getInput()]
  180. );
  181. }
  182. };
  183. exports['default'] = Header;