WeekPicker.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _extends2 = require('babel-runtime/helpers/extends');
  6. var _extends3 = _interopRequireDefault(_extends2);
  7. var _moment = require('moment');
  8. var moment = _interopRequireWildcard(_moment);
  9. var _vcCalendar = require('../vc-calendar');
  10. var _vcCalendar2 = _interopRequireDefault(_vcCalendar);
  11. var _Picker = require('../vc-calendar/src/Picker');
  12. var _Picker2 = _interopRequireDefault(_Picker);
  13. var _icon = require('../icon');
  14. var _icon2 = _interopRequireDefault(_icon);
  15. var _configConsumerProps = require('../config-provider/configConsumerProps');
  16. var _propsUtil = require('../_util/props-util');
  17. var _BaseMixin = require('../_util/BaseMixin');
  18. var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
  19. var _interface = require('./interface');
  20. var _interopDefault = require('../_util/interopDefault');
  21. var _interopDefault2 = _interopRequireDefault(_interopDefault);
  22. var _InputIcon = require('./InputIcon');
  23. var _InputIcon2 = _interopRequireDefault(_InputIcon);
  24. function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
  25. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  26. function formatValue(value, format) {
  27. return value && value.format(format) || '';
  28. }
  29. function noop() {}
  30. exports['default'] = {
  31. // static defaultProps = {
  32. // format: 'YYYY-wo',
  33. // allowClear: true,
  34. // };
  35. // private input: any;
  36. name: 'AWeekPicker',
  37. mixins: [_BaseMixin2['default']],
  38. model: {
  39. prop: 'value',
  40. event: 'change'
  41. },
  42. props: (0, _propsUtil.initDefaultProps)((0, _interface.WeekPickerProps)(), {
  43. format: 'gggg-wo',
  44. allowClear: true
  45. }),
  46. inject: {
  47. configProvider: { 'default': function _default() {
  48. return _configConsumerProps.ConfigConsumerProps;
  49. } }
  50. },
  51. data: function data() {
  52. var value = this.value || this.defaultValue;
  53. if (value && !(0, _interopDefault2['default'])(moment).isMoment(value)) {
  54. throw new Error('The value/defaultValue of WeekPicker or MonthPicker must be ' + 'a moment object');
  55. }
  56. return {
  57. _value: value,
  58. _open: this.open
  59. };
  60. },
  61. watch: {
  62. value: function value(val) {
  63. var state = { _value: val };
  64. this.setState(state);
  65. this.prevState = (0, _extends3['default'])({}, this.$data, state);
  66. },
  67. open: function open(val) {
  68. var state = { _open: val };
  69. this.setState(state);
  70. this.prevState = (0, _extends3['default'])({}, this.$data, state);
  71. },
  72. _open: function _open(val, oldVal) {
  73. var _this = this;
  74. this.$nextTick(function () {
  75. if (!(0, _propsUtil.hasProp)(_this, 'open') && oldVal && !val) {
  76. _this.focus();
  77. }
  78. });
  79. }
  80. },
  81. mounted: function mounted() {
  82. this.prevState = (0, _extends3['default'])({}, this.$data);
  83. },
  84. updated: function updated() {
  85. var _this2 = this;
  86. this.$nextTick(function () {
  87. if (!(0, _propsUtil.hasProp)(_this2, 'open') && _this2.prevState._open && !_this2._open) {
  88. _this2.focus();
  89. }
  90. });
  91. },
  92. methods: {
  93. weekDateRender: function weekDateRender(current) {
  94. var h = this.$createElement;
  95. var selectedValue = this.$data._value;
  96. var prefixCls = this._prefixCls,
  97. $scopedSlots = this.$scopedSlots;
  98. var dateRender = this.dateRender || $scopedSlots.dateRender;
  99. var dateNode = dateRender ? dateRender(current) : current.date();
  100. if (selectedValue && current.year() === selectedValue.year() && current.week() === selectedValue.week()) {
  101. return h(
  102. 'div',
  103. { 'class': prefixCls + '-selected-day' },
  104. [h(
  105. 'div',
  106. { 'class': prefixCls + '-date' },
  107. [dateNode]
  108. )]
  109. );
  110. }
  111. return h(
  112. 'div',
  113. { 'class': prefixCls + '-date' },
  114. [dateNode]
  115. );
  116. },
  117. handleChange: function handleChange(value) {
  118. if (!(0, _propsUtil.hasProp)(this, 'value')) {
  119. this.setState({ _value: value });
  120. }
  121. this.$emit('change', value, formatValue(value, this.format));
  122. },
  123. handleOpenChange: function handleOpenChange(open) {
  124. if (!(0, _propsUtil.hasProp)(this, 'open')) {
  125. this.setState({ _open: open });
  126. }
  127. this.$emit('openChange', open);
  128. },
  129. clearSelection: function clearSelection(e) {
  130. e.preventDefault();
  131. e.stopPropagation();
  132. this.handleChange(null);
  133. },
  134. focus: function focus() {
  135. this.$refs.input.focus();
  136. },
  137. blur: function blur() {
  138. this.$refs.input.blur();
  139. },
  140. renderFooter: function renderFooter() {
  141. var h = this.$createElement;
  142. var prefixCls = this._prefixCls,
  143. $scopedSlots = this.$scopedSlots;
  144. var renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter;
  145. return renderExtraFooter ? h(
  146. 'div',
  147. { 'class': prefixCls + '-footer-extra' },
  148. [renderExtraFooter.apply(undefined, arguments)]
  149. ) : null;
  150. }
  151. },
  152. render: function render() {
  153. var h = arguments[0];
  154. var props = (0, _propsUtil.getOptionProps)(this);
  155. var suffixIcon = (0, _propsUtil.getComponentFromProp)(this, 'suffixIcon');
  156. suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
  157. var customizePrefixCls = this.prefixCls,
  158. disabled = this.disabled,
  159. pickerClass = this.pickerClass,
  160. popupStyle = this.popupStyle,
  161. pickerInputClass = this.pickerInputClass,
  162. format = this.format,
  163. allowClear = this.allowClear,
  164. locale = this.locale,
  165. localeCode = this.localeCode,
  166. disabledDate = this.disabledDate,
  167. defaultPickerValue = this.defaultPickerValue,
  168. $data = this.$data,
  169. $scopedSlots = this.$scopedSlots;
  170. var listeners = (0, _propsUtil.getListeners)(this);
  171. var getPrefixCls = this.configProvider.getPrefixCls;
  172. var prefixCls = getPrefixCls('calendar', customizePrefixCls);
  173. this._prefixCls = prefixCls;
  174. var pickerValue = $data._value,
  175. open = $data._open;
  176. var _listeners$focus = listeners.focus,
  177. focus = _listeners$focus === undefined ? noop : _listeners$focus,
  178. _listeners$blur = listeners.blur,
  179. blur = _listeners$blur === undefined ? noop : _listeners$blur;
  180. if (pickerValue && localeCode) {
  181. pickerValue.locale(localeCode);
  182. }
  183. var placeholder = (0, _propsUtil.hasProp)(this, 'placeholder') ? this.placeholder : locale.lang.placeholder;
  184. var weekDateRender = this.dateRender || $scopedSlots.dateRender || this.weekDateRender;
  185. var calendar = h(_vcCalendar2['default'], {
  186. attrs: {
  187. showWeekNumber: true,
  188. dateRender: weekDateRender,
  189. prefixCls: prefixCls,
  190. format: format,
  191. locale: locale.lang,
  192. showDateInput: false,
  193. showToday: false,
  194. disabledDate: disabledDate,
  195. renderFooter: this.renderFooter,
  196. defaultValue: defaultPickerValue
  197. }
  198. });
  199. var clearIcon = !disabled && allowClear && $data._value ? h(_icon2['default'], {
  200. attrs: {
  201. type: 'close-circle',
  202. theme: 'filled'
  203. },
  204. 'class': prefixCls + '-picker-clear',
  205. on: {
  206. 'click': this.clearSelection
  207. }
  208. }) : null;
  209. var inputIcon = h(_InputIcon2['default'], {
  210. attrs: { suffixIcon: suffixIcon, prefixCls: prefixCls }
  211. });
  212. var input = function input(_ref) {
  213. var value = _ref.value;
  214. return h(
  215. 'span',
  216. { style: { display: 'inline-block', width: '100%' } },
  217. [h('input', {
  218. ref: 'input',
  219. attrs: { disabled: disabled,
  220. readOnly: true,
  221. placeholder: placeholder
  222. },
  223. domProps: {
  224. 'value': value && value.format(format) || ''
  225. },
  226. 'class': pickerInputClass,
  227. on: {
  228. 'focus': focus,
  229. 'blur': blur
  230. }
  231. }), clearIcon, inputIcon]
  232. );
  233. };
  234. var vcDatePickerProps = {
  235. props: (0, _extends3['default'])({}, props, {
  236. calendar: calendar,
  237. prefixCls: prefixCls + '-picker-container',
  238. value: pickerValue,
  239. open: open
  240. }),
  241. on: (0, _extends3['default'])({}, listeners, {
  242. change: this.handleChange,
  243. openChange: this.handleOpenChange
  244. }),
  245. style: popupStyle,
  246. scopedSlots: (0, _extends3['default'])({ 'default': input }, $scopedSlots)
  247. };
  248. return h(
  249. 'span',
  250. { 'class': pickerClass },
  251. [h(_Picker2['default'], vcDatePickerProps)]
  252. );
  253. }
  254. };