wrapPicker.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import TimePickerPanel from '../vc-time-picker/Panel';
  4. import classNames from 'classnames';
  5. import LocaleReceiver from '../locale-provider/LocaleReceiver';
  6. import { generateShowHourMinuteSecond } from '../time-picker';
  7. import enUS from './locale/en_US';
  8. import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
  9. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  10. import { checkValidate, stringToMoment, momentToString } from '../_util/moment-util';
  11. var DEFAULT_FORMAT = {
  12. date: 'YYYY-MM-DD',
  13. dateTime: 'YYYY-MM-DD HH:mm:ss',
  14. week: 'gggg-wo',
  15. month: 'YYYY-MM'
  16. };
  17. var LOCALE_FORMAT_MAPPING = {
  18. date: 'dateFormat',
  19. dateTime: 'dateTimeFormat',
  20. week: 'weekFormat',
  21. month: 'monthFormat'
  22. };
  23. function getColumns(_ref) {
  24. var showHour = _ref.showHour,
  25. showMinute = _ref.showMinute,
  26. showSecond = _ref.showSecond,
  27. use12Hours = _ref.use12Hours;
  28. var column = 0;
  29. if (showHour) {
  30. column += 1;
  31. }
  32. if (showMinute) {
  33. column += 1;
  34. }
  35. if (showSecond) {
  36. column += 1;
  37. }
  38. if (use12Hours) {
  39. column += 1;
  40. }
  41. return column;
  42. }
  43. export default function wrapPicker(Picker, props, pickerType) {
  44. return {
  45. name: Picker.name,
  46. props: initDefaultProps(props, {
  47. transitionName: 'slide-up',
  48. popupStyle: {},
  49. locale: {}
  50. }),
  51. model: {
  52. prop: 'value',
  53. event: 'change'
  54. },
  55. inject: {
  56. configProvider: { 'default': function _default() {
  57. return ConfigConsumerProps;
  58. } }
  59. },
  60. provide: function provide() {
  61. return {
  62. savePopupRef: this.savePopupRef
  63. };
  64. },
  65. mounted: function mounted() {
  66. var _this = this;
  67. var autoFocus = this.autoFocus,
  68. disabled = this.disabled,
  69. value = this.value,
  70. defaultValue = this.defaultValue,
  71. valueFormat = this.valueFormat;
  72. checkValidate('DatePicker', defaultValue, 'defaultValue', valueFormat);
  73. checkValidate('DatePicker', value, 'value', valueFormat);
  74. if (autoFocus && !disabled) {
  75. this.$nextTick(function () {
  76. _this.focus();
  77. });
  78. }
  79. },
  80. watch: {
  81. value: function value(val) {
  82. checkValidate('DatePicker', val, 'value', this.valueFormat);
  83. }
  84. },
  85. methods: {
  86. getDefaultLocale: function getDefaultLocale() {
  87. var result = _extends({}, enUS, this.locale);
  88. result.lang = _extends({}, result.lang, (this.locale || {}).lang);
  89. return result;
  90. },
  91. savePopupRef: function savePopupRef(ref) {
  92. this.popupRef = ref;
  93. },
  94. handleOpenChange: function handleOpenChange(open) {
  95. this.$emit('openChange', open);
  96. },
  97. handleFocus: function handleFocus(e) {
  98. this.$emit('focus', e);
  99. },
  100. handleBlur: function handleBlur(e) {
  101. this.$emit('blur', e);
  102. },
  103. handleMouseEnter: function handleMouseEnter(e) {
  104. this.$emit('mouseenter', e);
  105. },
  106. handleMouseLeave: function handleMouseLeave(e) {
  107. this.$emit('mouseleave', e);
  108. },
  109. handleChange: function handleChange(date, dateString) {
  110. this.$emit('change', this.valueFormat ? momentToString(date, this.valueFormat) : date, dateString);
  111. },
  112. handleOk: function handleOk(val) {
  113. this.$emit('ok', this.valueFormat ? momentToString(val, this.valueFormat) : val);
  114. },
  115. handleCalendarChange: function handleCalendarChange(date, dateString) {
  116. this.$emit('calendarChange', this.valueFormat ? momentToString(date, this.valueFormat) : date, dateString);
  117. },
  118. focus: function focus() {
  119. this.$refs.picker.focus();
  120. },
  121. blur: function blur() {
  122. this.$refs.picker.blur();
  123. },
  124. transformValue: function transformValue(props) {
  125. if ('value' in props) {
  126. props.value = stringToMoment(props.value, this.valueFormat);
  127. }
  128. if ('defaultValue' in props) {
  129. props.defaultValue = stringToMoment(props.defaultValue, this.valueFormat);
  130. }
  131. if ('defaultPickerValue' in props) {
  132. props.defaultPickerValue = stringToMoment(props.defaultPickerValue, this.valueFormat);
  133. }
  134. },
  135. renderPicker: function renderPicker(locale, localeCode) {
  136. var _classNames2,
  137. _this2 = this;
  138. var h = this.$createElement;
  139. var props = getOptionProps(this);
  140. this.transformValue(props);
  141. var customizePrefixCls = props.prefixCls,
  142. customizeInputPrefixCls = props.inputPrefixCls,
  143. getCalendarContainer = props.getCalendarContainer,
  144. size = props.size,
  145. showTime = props.showTime,
  146. disabled = props.disabled,
  147. format = props.format;
  148. var mergedPickerType = showTime ? pickerType + 'Time' : pickerType;
  149. var mergedFormat = format || locale[LOCALE_FORMAT_MAPPING[mergedPickerType]] || DEFAULT_FORMAT[mergedPickerType];
  150. var _configProvider = this.configProvider,
  151. getPrefixCls = _configProvider.getPrefixCls,
  152. getContextPopupContainer = _configProvider.getPopupContainer;
  153. var getPopupContainer = getCalendarContainer || getContextPopupContainer;
  154. var prefixCls = getPrefixCls('calendar', customizePrefixCls);
  155. var inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
  156. var pickerClass = classNames(prefixCls + '-picker', _defineProperty({}, prefixCls + '-picker-' + size, !!size));
  157. var pickerInputClass = classNames(prefixCls + '-picker-input', inputPrefixCls, (_classNames2 = {}, _defineProperty(_classNames2, inputPrefixCls + '-lg', size === 'large'), _defineProperty(_classNames2, inputPrefixCls + '-sm', size === 'small'), _defineProperty(_classNames2, inputPrefixCls + '-disabled', disabled), _classNames2));
  158. var timeFormat = showTime && showTime.format || 'HH:mm:ss';
  159. var vcTimePickerProps = _extends({}, generateShowHourMinuteSecond(timeFormat), {
  160. format: timeFormat,
  161. use12Hours: showTime && showTime.use12Hours
  162. });
  163. var columns = getColumns(vcTimePickerProps);
  164. var timePickerCls = prefixCls + '-time-picker-column-' + columns;
  165. var timePickerPanelProps = {
  166. props: _extends({}, vcTimePickerProps, showTime, {
  167. prefixCls: prefixCls + '-time-picker',
  168. placeholder: locale.timePickerLocale.placeholder,
  169. transitionName: 'slide-up'
  170. }),
  171. 'class': timePickerCls,
  172. on: {
  173. esc: function esc() {}
  174. }
  175. };
  176. var timePicker = showTime ? h(TimePickerPanel, timePickerPanelProps) : null;
  177. var pickerProps = {
  178. props: _extends({}, props, {
  179. getCalendarContainer: getPopupContainer,
  180. format: mergedFormat,
  181. pickerClass: pickerClass,
  182. pickerInputClass: pickerInputClass,
  183. locale: locale,
  184. localeCode: localeCode,
  185. timePicker: timePicker
  186. }),
  187. on: _extends({}, getListeners(this), {
  188. openChange: this.handleOpenChange,
  189. focus: this.handleFocus,
  190. blur: this.handleBlur,
  191. mouseenter: this.handleMouseEnter,
  192. mouseleave: this.handleMouseLeave,
  193. change: this.handleChange,
  194. ok: this.handleOk,
  195. calendarChange: this.handleCalendarChange
  196. }),
  197. ref: 'picker',
  198. scopedSlots: this.$scopedSlots || {}
  199. };
  200. return h(
  201. Picker,
  202. pickerProps,
  203. [this.$slots && Object.keys(this.$slots).map(function (key) {
  204. return h(
  205. 'template',
  206. { slot: key, key: key },
  207. [_this2.$slots[key]]
  208. );
  209. })]
  210. );
  211. }
  212. },
  213. render: function render() {
  214. var h = arguments[0];
  215. return h(LocaleReceiver, {
  216. attrs: {
  217. componentName: 'DatePicker',
  218. defaultLocale: this.getDefaultLocale
  219. },
  220. scopedSlots: { 'default': this.renderPicker }
  221. });
  222. }
  223. };
  224. }