index.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import omit from 'omit.js';
  4. import VcTimePicker from '../vc-time-picker';
  5. import LocaleReceiver from '../locale-provider/LocaleReceiver';
  6. import BaseMixin from '../_util/BaseMixin';
  7. import PropTypes from '../_util/vue-types';
  8. import warning from '../_util/warning';
  9. import Icon from '../icon';
  10. import enUS from './locale/en_US';
  11. import { initDefaultProps, hasProp, getOptionProps, getComponentFromProp, isValidElement, getListeners } from '../_util/props-util';
  12. import { cloneElement } from '../_util/vnode';
  13. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  14. import Base from '../base';
  15. import { checkValidate, stringToMoment, momentToString, TimeOrTimesType } from '../_util/moment-util';
  16. export function generateShowHourMinuteSecond(format) {
  17. // Ref: http://momentjs.com/docs/#/parsing/string-format/
  18. return {
  19. showHour: format.indexOf('H') > -1 || format.indexOf('h') > -1 || format.indexOf('k') > -1,
  20. showMinute: format.indexOf('m') > -1,
  21. showSecond: format.indexOf('s') > -1
  22. };
  23. }
  24. export var TimePickerProps = function TimePickerProps() {
  25. return {
  26. size: PropTypes.oneOf(['large', 'default', 'small']),
  27. value: TimeOrTimesType,
  28. defaultValue: TimeOrTimesType,
  29. open: PropTypes.bool,
  30. format: PropTypes.string,
  31. disabled: PropTypes.bool,
  32. placeholder: PropTypes.string,
  33. prefixCls: PropTypes.string,
  34. hideDisabledOptions: PropTypes.bool,
  35. disabledHours: PropTypes.func,
  36. disabledMinutes: PropTypes.func,
  37. disabledSeconds: PropTypes.func,
  38. getPopupContainer: PropTypes.func,
  39. use12Hours: PropTypes.bool,
  40. focusOnOpen: PropTypes.bool,
  41. hourStep: PropTypes.number,
  42. minuteStep: PropTypes.number,
  43. secondStep: PropTypes.number,
  44. allowEmpty: PropTypes.bool,
  45. allowClear: PropTypes.bool,
  46. inputReadOnly: PropTypes.bool,
  47. clearText: PropTypes.string,
  48. defaultOpenValue: PropTypes.object,
  49. popupClassName: PropTypes.string,
  50. popupStyle: PropTypes.object,
  51. suffixIcon: PropTypes.any,
  52. align: PropTypes.object,
  53. placement: PropTypes.any,
  54. transitionName: PropTypes.string,
  55. autoFocus: PropTypes.bool,
  56. addon: PropTypes.any,
  57. clearIcon: PropTypes.any,
  58. locale: PropTypes.object,
  59. valueFormat: PropTypes.string
  60. };
  61. };
  62. var TimePicker = {
  63. name: 'ATimePicker',
  64. mixins: [BaseMixin],
  65. props: initDefaultProps(TimePickerProps(), {
  66. align: {
  67. offset: [0, -2]
  68. },
  69. disabled: false,
  70. disabledHours: undefined,
  71. disabledMinutes: undefined,
  72. disabledSeconds: undefined,
  73. hideDisabledOptions: false,
  74. placement: 'bottomLeft',
  75. transitionName: 'slide-up',
  76. focusOnOpen: true,
  77. allowClear: true
  78. }),
  79. model: {
  80. prop: 'value',
  81. event: 'change'
  82. },
  83. provide: function provide() {
  84. return {
  85. savePopupRef: this.savePopupRef
  86. };
  87. },
  88. inject: {
  89. configProvider: { 'default': function _default() {
  90. return ConfigConsumerProps;
  91. } }
  92. },
  93. data: function data() {
  94. var value = this.value,
  95. defaultValue = this.defaultValue,
  96. valueFormat = this.valueFormat;
  97. checkValidate('TimePicker', defaultValue, 'defaultValue', valueFormat);
  98. checkValidate('TimePicker', value, 'value', valueFormat);
  99. warning(!hasProp(this, 'allowEmpty'), 'TimePicker', '`allowEmpty` is deprecated. Please use `allowClear` instead.');
  100. return {
  101. sValue: stringToMoment(value || defaultValue, valueFormat)
  102. };
  103. },
  104. watch: {
  105. value: function value(val) {
  106. checkValidate('TimePicker', val, 'value', this.valueFormat);
  107. this.setState({ sValue: stringToMoment(val, this.valueFormat) });
  108. }
  109. },
  110. methods: {
  111. getDefaultFormat: function getDefaultFormat() {
  112. var format = this.format,
  113. use12Hours = this.use12Hours;
  114. if (format) {
  115. return format;
  116. } else if (use12Hours) {
  117. return 'h:mm:ss a';
  118. }
  119. return 'HH:mm:ss';
  120. },
  121. getAllowClear: function getAllowClear() {
  122. var _$props = this.$props,
  123. allowClear = _$props.allowClear,
  124. allowEmpty = _$props.allowEmpty;
  125. if (hasProp(this, 'allowClear')) {
  126. return allowClear;
  127. }
  128. return allowEmpty;
  129. },
  130. getDefaultLocale: function getDefaultLocale() {
  131. var defaultLocale = _extends({}, enUS, this.$props.locale);
  132. return defaultLocale;
  133. },
  134. savePopupRef: function savePopupRef(ref) {
  135. this.popupRef = ref;
  136. },
  137. handleChange: function handleChange(value) {
  138. if (!hasProp(this, 'value')) {
  139. this.setState({ sValue: value });
  140. }
  141. var _format = this.format,
  142. format = _format === undefined ? 'HH:mm:ss' : _format;
  143. this.$emit('change', this.valueFormat ? momentToString(value, this.valueFormat) : value, value && value.format(format) || '');
  144. },
  145. handleOpenClose: function handleOpenClose(_ref) {
  146. var open = _ref.open;
  147. this.$emit('openChange', open);
  148. this.$emit('update:open', open);
  149. },
  150. focus: function focus() {
  151. this.$refs.timePicker.focus();
  152. },
  153. blur: function blur() {
  154. this.$refs.timePicker.blur();
  155. },
  156. renderInputIcon: function renderInputIcon(prefixCls) {
  157. var h = this.$createElement;
  158. var suffixIcon = getComponentFromProp(this, 'suffixIcon');
  159. suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
  160. var clockIcon = suffixIcon && isValidElement(suffixIcon) && cloneElement(suffixIcon, {
  161. 'class': prefixCls + '-clock-icon'
  162. }) || h(Icon, {
  163. attrs: { type: 'clock-circle' },
  164. 'class': prefixCls + '-clock-icon' });
  165. return h(
  166. 'span',
  167. { 'class': prefixCls + '-icon' },
  168. [clockIcon]
  169. );
  170. },
  171. renderClearIcon: function renderClearIcon(prefixCls) {
  172. var h = this.$createElement;
  173. var clearIcon = getComponentFromProp(this, 'clearIcon');
  174. var clearIconPrefixCls = prefixCls + '-clear';
  175. if (clearIcon && isValidElement(clearIcon)) {
  176. return cloneElement(clearIcon, {
  177. 'class': clearIconPrefixCls
  178. });
  179. }
  180. return h(Icon, {
  181. attrs: { type: 'close-circle', theme: 'filled' },
  182. 'class': clearIconPrefixCls });
  183. },
  184. renderTimePicker: function renderTimePicker(locale) {
  185. var h = this.$createElement;
  186. var props = getOptionProps(this);
  187. props = omit(props, ['defaultValue', 'suffixIcon', 'allowEmpty', 'allowClear']);
  188. var _props = props,
  189. customizePrefixCls = _props.prefixCls,
  190. getPopupContainer = _props.getPopupContainer,
  191. placeholder = _props.placeholder,
  192. size = _props.size;
  193. var getPrefixCls = this.configProvider.getPrefixCls;
  194. var prefixCls = getPrefixCls('time-picker', customizePrefixCls);
  195. var format = this.getDefaultFormat();
  196. var pickerClassName = _defineProperty({}, prefixCls + '-' + size, !!size);
  197. var tempAddon = getComponentFromProp(this, 'addon', {}, false);
  198. var pickerAddon = function pickerAddon(panel) {
  199. return tempAddon ? h(
  200. 'div',
  201. { 'class': prefixCls + '-panel-addon' },
  202. [typeof tempAddon === 'function' ? tempAddon(panel) : tempAddon]
  203. ) : null;
  204. };
  205. var inputIcon = this.renderInputIcon(prefixCls);
  206. var clearIcon = this.renderClearIcon(prefixCls);
  207. var getContextPopupContainer = this.configProvider.getPopupContainer;
  208. var timeProps = {
  209. props: _extends({}, generateShowHourMinuteSecond(format), props, {
  210. allowEmpty: this.getAllowClear(),
  211. prefixCls: prefixCls,
  212. getPopupContainer: getPopupContainer || getContextPopupContainer,
  213. format: format,
  214. value: this.sValue,
  215. placeholder: placeholder === undefined ? locale.placeholder : placeholder,
  216. addon: pickerAddon,
  217. inputIcon: inputIcon,
  218. clearIcon: clearIcon
  219. }),
  220. 'class': pickerClassName,
  221. ref: 'timePicker',
  222. on: _extends({}, getListeners(this), {
  223. change: this.handleChange,
  224. open: this.handleOpenClose,
  225. close: this.handleOpenClose
  226. })
  227. };
  228. return h(VcTimePicker, timeProps);
  229. }
  230. },
  231. render: function render() {
  232. var h = arguments[0];
  233. return h(LocaleReceiver, {
  234. attrs: {
  235. componentName: 'TimePicker',
  236. defaultLocale: this.getDefaultLocale()
  237. },
  238. scopedSlots: { 'default': this.renderTimePicker }
  239. });
  240. }
  241. };
  242. /* istanbul ignore next */
  243. TimePicker.install = function (Vue) {
  244. Vue.use(Base);
  245. Vue.component(TimePicker.name, TimePicker);
  246. };
  247. export default TimePicker;