Panel.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. import moment from 'moment';
  2. import PropTypes from '../_util/vue-types';
  3. import BaseMixin from '../_util/BaseMixin';
  4. import Header from './Header';
  5. import Combobox from './Combobox';
  6. import { getComponentFromProp, getListeners } from '../_util/props-util';
  7. function noop() {}
  8. function generateOptions(length, disabledOptions, hideDisabledOptions) {
  9. var step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
  10. var arr = [];
  11. for (var value = 0; value < length; value += step) {
  12. if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
  13. arr.push(value);
  14. }
  15. }
  16. return arr;
  17. }
  18. function toNearestValidTime(time, hourOptions, minuteOptions, secondOptions) {
  19. var hour = hourOptions.slice().sort(function (a, b) {
  20. return Math.abs(time.hour() - a) - Math.abs(time.hour() - b);
  21. })[0];
  22. var minute = minuteOptions.slice().sort(function (a, b) {
  23. return Math.abs(time.minute() - a) - Math.abs(time.minute() - b);
  24. })[0];
  25. var second = secondOptions.slice().sort(function (a, b) {
  26. return Math.abs(time.second() - a) - Math.abs(time.second() - b);
  27. })[0];
  28. return moment(hour + ':' + minute + ':' + second, 'HH:mm:ss');
  29. }
  30. var Panel = {
  31. mixins: [BaseMixin],
  32. props: {
  33. clearText: PropTypes.string,
  34. prefixCls: PropTypes.string.def('rc-time-picker-panel'),
  35. defaultOpenValue: {
  36. type: Object,
  37. 'default': function _default() {
  38. return moment();
  39. }
  40. },
  41. value: PropTypes.any,
  42. defaultValue: PropTypes.any,
  43. placeholder: PropTypes.string,
  44. format: PropTypes.string,
  45. inputReadOnly: PropTypes.bool.def(false),
  46. disabledHours: PropTypes.func.def(noop),
  47. disabledMinutes: PropTypes.func.def(noop),
  48. disabledSeconds: PropTypes.func.def(noop),
  49. hideDisabledOptions: PropTypes.bool,
  50. // onChange: PropTypes.func,
  51. // onEsc: PropTypes.func,
  52. allowEmpty: PropTypes.bool,
  53. showHour: PropTypes.bool,
  54. showMinute: PropTypes.bool,
  55. showSecond: PropTypes.bool,
  56. // onClear: PropTypes.func,
  57. use12Hours: PropTypes.bool.def(false),
  58. hourStep: PropTypes.number,
  59. minuteStep: PropTypes.number,
  60. secondStep: PropTypes.number,
  61. addon: PropTypes.func.def(noop),
  62. focusOnOpen: PropTypes.bool,
  63. // onKeydown: PropTypes.func,
  64. clearIcon: PropTypes.any
  65. },
  66. data: function data() {
  67. return {
  68. sValue: this.value,
  69. selectionRange: [],
  70. currentSelectPanel: ''
  71. };
  72. },
  73. watch: {
  74. value: function value(val) {
  75. this.setState({
  76. sValue: val
  77. });
  78. }
  79. },
  80. methods: {
  81. onChange: function onChange(newValue) {
  82. this.setState({ sValue: newValue });
  83. this.__emit('change', newValue);
  84. },
  85. onAmPmChange: function onAmPmChange(ampm) {
  86. this.__emit('amPmChange', ampm);
  87. },
  88. onCurrentSelectPanelChange: function onCurrentSelectPanelChange(currentSelectPanel) {
  89. this.setState({ currentSelectPanel: currentSelectPanel });
  90. },
  91. // https://github.com/ant-design/ant-design/issues/5829
  92. close: function close() {
  93. this.__emit('esc');
  94. },
  95. onEsc: function onEsc(e) {
  96. this.__emit('esc', e);
  97. },
  98. disabledHours2: function disabledHours2() {
  99. var use12Hours = this.use12Hours,
  100. disabledHours = this.disabledHours;
  101. var disabledOptions = disabledHours();
  102. if (use12Hours && Array.isArray(disabledOptions)) {
  103. if (this.isAM()) {
  104. disabledOptions = disabledOptions.filter(function (h) {
  105. return h < 12;
  106. }).map(function (h) {
  107. return h === 0 ? 12 : h;
  108. });
  109. } else {
  110. disabledOptions = disabledOptions.map(function (h) {
  111. return h === 12 ? 12 : h - 12;
  112. });
  113. }
  114. }
  115. return disabledOptions;
  116. },
  117. isAM: function isAM() {
  118. var value = this.sValue || this.defaultOpenValue;
  119. return value.hour() >= 0 && value.hour() < 12;
  120. }
  121. },
  122. render: function render() {
  123. var h = arguments[0];
  124. var prefixCls = this.prefixCls,
  125. placeholder = this.placeholder,
  126. disabledMinutes = this.disabledMinutes,
  127. addon = this.addon,
  128. disabledSeconds = this.disabledSeconds,
  129. hideDisabledOptions = this.hideDisabledOptions,
  130. showHour = this.showHour,
  131. showMinute = this.showMinute,
  132. showSecond = this.showSecond,
  133. format = this.format,
  134. defaultOpenValue = this.defaultOpenValue,
  135. clearText = this.clearText,
  136. use12Hours = this.use12Hours,
  137. focusOnOpen = this.focusOnOpen,
  138. hourStep = this.hourStep,
  139. minuteStep = this.minuteStep,
  140. secondStep = this.secondStep,
  141. inputReadOnly = this.inputReadOnly,
  142. sValue = this.sValue,
  143. currentSelectPanel = this.currentSelectPanel;
  144. var clearIcon = getComponentFromProp(this, 'clearIcon');
  145. var _getListeners = getListeners(this),
  146. _getListeners$esc = _getListeners.esc,
  147. esc = _getListeners$esc === undefined ? noop : _getListeners$esc,
  148. _getListeners$keydown = _getListeners.keydown,
  149. keydown = _getListeners$keydown === undefined ? noop : _getListeners$keydown;
  150. var disabledHourOptions = this.disabledHours2();
  151. var disabledMinuteOptions = disabledMinutes(sValue ? sValue.hour() : null);
  152. var disabledSecondOptions = disabledSeconds(sValue ? sValue.hour() : null, sValue ? sValue.minute() : null);
  153. var hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions, hourStep);
  154. var minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions, minuteStep);
  155. var secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions, secondStep);
  156. var validDefaultOpenValue = toNearestValidTime(defaultOpenValue, hourOptions, minuteOptions, secondOptions);
  157. return h(
  158. 'div',
  159. { 'class': prefixCls + '-inner' },
  160. [h(Header, {
  161. attrs: {
  162. clearText: clearText,
  163. prefixCls: prefixCls,
  164. defaultOpenValue: validDefaultOpenValue,
  165. value: sValue,
  166. currentSelectPanel: currentSelectPanel,
  167. format: format,
  168. placeholder: placeholder,
  169. hourOptions: hourOptions,
  170. minuteOptions: minuteOptions,
  171. secondOptions: secondOptions,
  172. disabledHours: this.disabledHours2,
  173. disabledMinutes: disabledMinutes,
  174. disabledSeconds: disabledSeconds,
  175. focusOnOpen: focusOnOpen,
  176. inputReadOnly: inputReadOnly,
  177. clearIcon: clearIcon
  178. },
  179. on: {
  180. 'esc': esc,
  181. 'change': this.onChange,
  182. 'keydown': keydown
  183. }
  184. }), h(Combobox, {
  185. attrs: {
  186. prefixCls: prefixCls,
  187. value: sValue,
  188. defaultOpenValue: validDefaultOpenValue,
  189. format: format,
  190. showHour: showHour,
  191. showMinute: showMinute,
  192. showSecond: showSecond,
  193. hourOptions: hourOptions,
  194. minuteOptions: minuteOptions,
  195. secondOptions: secondOptions,
  196. disabledHours: this.disabledHours2,
  197. disabledMinutes: disabledMinutes,
  198. disabledSeconds: disabledSeconds,
  199. use12Hours: use12Hours,
  200. isAM: this.isAM()
  201. },
  202. on: {
  203. 'change': this.onChange,
  204. 'amPmChange': this.onAmPmChange,
  205. 'currentSelectPanelChange': this.onCurrentSelectPanelChange,
  206. 'esc': this.onEsc
  207. }
  208. }), addon(this)]
  209. );
  210. }
  211. };
  212. export default Panel;