Header.js 5.6 KB

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