RangePicker.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
  6. var _defineProperty3 = _interopRequireDefault(_defineProperty2);
  7. var _extends2 = require('babel-runtime/helpers/extends');
  8. var _extends3 = _interopRequireDefault(_extends2);
  9. var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
  10. var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
  11. var _moment = require('moment');
  12. var moment = _interopRequireWildcard(_moment);
  13. var _RangeCalendar = require('../vc-calendar/src/RangeCalendar');
  14. var _RangeCalendar2 = _interopRequireDefault(_RangeCalendar);
  15. var _Picker = require('../vc-calendar/src/Picker');
  16. var _Picker2 = _interopRequireDefault(_Picker);
  17. var _classnames = require('classnames');
  18. var _classnames2 = _interopRequireDefault(_classnames);
  19. var _shallowequal = require('shallowequal');
  20. var _shallowequal2 = _interopRequireDefault(_shallowequal);
  21. var _icon = require('../icon');
  22. var _icon2 = _interopRequireDefault(_icon);
  23. var _tag = require('../tag');
  24. var _tag2 = _interopRequireDefault(_tag);
  25. var _configConsumerProps = require('../config-provider/configConsumerProps');
  26. var _interopDefault = require('../_util/interopDefault');
  27. var _interopDefault2 = _interopRequireDefault(_interopDefault);
  28. var _interface = require('./interface');
  29. var _propsUtil = require('../_util/props-util');
  30. var _BaseMixin = require('../_util/BaseMixin');
  31. var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
  32. var _utils = require('./utils');
  33. var _InputIcon = require('./InputIcon');
  34. var _InputIcon2 = _interopRequireDefault(_InputIcon);
  35. 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; } }
  36. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  37. function noop() {}
  38. function getShowDateFromValue(value, mode) {
  39. var _value = (0, _slicedToArray3['default'])(value, 2),
  40. start = _value[0],
  41. end = _value[1];
  42. // value could be an empty array, then we should not reset showDate
  43. if (!start && !end) {
  44. return;
  45. }
  46. if (mode && mode[0] === 'month') {
  47. return [start, end];
  48. }
  49. var newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end;
  50. return [start, newEnd];
  51. }
  52. function pickerValueAdapter(value) {
  53. if (!value) {
  54. return;
  55. }
  56. if (Array.isArray(value)) {
  57. return value;
  58. }
  59. return [value, value.clone().add(1, 'month')];
  60. }
  61. function isEmptyArray(arr) {
  62. if (Array.isArray(arr)) {
  63. return arr.length === 0 || arr.every(function (i) {
  64. return !i;
  65. });
  66. }
  67. return false;
  68. }
  69. function fixLocale(value, localeCode) {
  70. if (!localeCode) {
  71. return;
  72. }
  73. if (!value || value.length === 0) {
  74. return;
  75. }
  76. var _value2 = (0, _slicedToArray3['default'])(value, 2),
  77. start = _value2[0],
  78. end = _value2[1];
  79. if (start) {
  80. start.locale(localeCode);
  81. }
  82. if (end) {
  83. end.locale(localeCode);
  84. }
  85. }
  86. exports['default'] = {
  87. name: 'ARangePicker',
  88. mixins: [_BaseMixin2['default']],
  89. model: {
  90. prop: 'value',
  91. event: 'change'
  92. },
  93. props: (0, _propsUtil.initDefaultProps)((0, _interface.RangePickerProps)(), {
  94. allowClear: true,
  95. showToday: false,
  96. separator: '~'
  97. }),
  98. inject: {
  99. configProvider: { 'default': function _default() {
  100. return _configConsumerProps.ConfigConsumerProps;
  101. } }
  102. },
  103. data: function data() {
  104. var value = this.value || this.defaultValue || [];
  105. var _value3 = (0, _slicedToArray3['default'])(value, 2),
  106. start = _value3[0],
  107. end = _value3[1];
  108. if (start && !(0, _interopDefault2['default'])(moment).isMoment(start) || end && !(0, _interopDefault2['default'])(moment).isMoment(end)) {
  109. throw new Error('The value/defaultValue of RangePicker must be a moment object array after `antd@2.0`, ' + 'see: https://u.ant.design/date-picker-value');
  110. }
  111. var pickerValue = !value || isEmptyArray(value) ? this.defaultPickerValue : value;
  112. return {
  113. sValue: value,
  114. sShowDate: pickerValueAdapter(pickerValue || (0, _interopDefault2['default'])(moment)()),
  115. sOpen: this.open,
  116. sHoverValue: []
  117. };
  118. },
  119. watch: {
  120. value: function value(val) {
  121. var value = val || [];
  122. var state = { sValue: value };
  123. if (!(0, _shallowequal2['default'])(val, this.sValue)) {
  124. state = (0, _extends3['default'])({}, state, {
  125. sShowDate: getShowDateFromValue(value, this.mode) || this.sShowDate
  126. });
  127. }
  128. this.setState(state);
  129. },
  130. open: function open(val) {
  131. var state = { sOpen: val };
  132. this.setState(state);
  133. },
  134. sOpen: function sOpen(val, oldVal) {
  135. var _this = this;
  136. this.$nextTick(function () {
  137. if (!(0, _propsUtil.hasProp)(_this, 'open') && oldVal && !val) {
  138. _this.focus();
  139. }
  140. });
  141. }
  142. },
  143. methods: {
  144. setValue: function setValue(value, hidePanel) {
  145. this.handleChange(value);
  146. if ((hidePanel || !this.showTime) && !(0, _propsUtil.hasProp)(this, 'open')) {
  147. this.setState({ sOpen: false });
  148. }
  149. },
  150. clearSelection: function clearSelection(e) {
  151. e.preventDefault();
  152. e.stopPropagation();
  153. this.setState({ sValue: [] });
  154. this.handleChange([]);
  155. },
  156. clearHoverValue: function clearHoverValue() {
  157. this.setState({ sHoverValue: [] });
  158. },
  159. handleChange: function handleChange(value) {
  160. if (!(0, _propsUtil.hasProp)(this, 'value')) {
  161. this.setState(function (_ref) {
  162. var sShowDate = _ref.sShowDate;
  163. return {
  164. sValue: value,
  165. sShowDate: getShowDateFromValue(value) || sShowDate
  166. };
  167. });
  168. }
  169. if (value[0] && value[1] && value[0].diff(value[1]) > 0) {
  170. value[1] = undefined;
  171. }
  172. var _value4 = (0, _slicedToArray3['default'])(value, 2),
  173. start = _value4[0],
  174. end = _value4[1];
  175. this.$emit('change', value, [(0, _utils.formatDate)(start, this.format), (0, _utils.formatDate)(end, this.format)]);
  176. },
  177. handleOpenChange: function handleOpenChange(open) {
  178. if (!(0, _propsUtil.hasProp)(this, 'open')) {
  179. this.setState({ sOpen: open });
  180. }
  181. if (open === false) {
  182. this.clearHoverValue();
  183. }
  184. this.$emit('openChange', open);
  185. },
  186. handleShowDateChange: function handleShowDateChange(showDate) {
  187. this.setState({ sShowDate: showDate });
  188. },
  189. handleHoverChange: function handleHoverChange(hoverValue) {
  190. this.setState({ sHoverValue: hoverValue });
  191. },
  192. handleRangeMouseLeave: function handleRangeMouseLeave() {
  193. if (this.sOpen) {
  194. this.clearHoverValue();
  195. }
  196. },
  197. handleCalendarInputSelect: function handleCalendarInputSelect(value) {
  198. var _value5 = (0, _slicedToArray3['default'])(value, 1),
  199. start = _value5[0];
  200. if (!start) {
  201. return;
  202. }
  203. this.setState(function (_ref2) {
  204. var sShowDate = _ref2.sShowDate;
  205. return {
  206. sValue: value,
  207. sShowDate: getShowDateFromValue(value) || sShowDate
  208. };
  209. });
  210. },
  211. handleRangeClick: function handleRangeClick(value) {
  212. if (typeof value === 'function') {
  213. value = value();
  214. }
  215. this.setValue(value, true);
  216. this.$emit('ok', value);
  217. this.$emit('openChange', false);
  218. },
  219. onMouseEnter: function onMouseEnter(e) {
  220. this.$emit('mouseenter', e);
  221. },
  222. onMouseLeave: function onMouseLeave(e) {
  223. this.$emit('mouseleave', e);
  224. },
  225. focus: function focus() {
  226. this.$refs.picker.focus();
  227. },
  228. blur: function blur() {
  229. this.$refs.picker.blur();
  230. },
  231. renderFooter: function renderFooter() {
  232. var _this2 = this;
  233. var h = this.$createElement;
  234. var ranges = this.ranges,
  235. $scopedSlots = this.$scopedSlots,
  236. $slots = this.$slots;
  237. var prefixCls = this._prefixCls,
  238. tagPrefixCls = this._tagPrefixCls;
  239. var renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter;
  240. if (!ranges && !renderExtraFooter) {
  241. return null;
  242. }
  243. var customFooter = renderExtraFooter ? h(
  244. 'div',
  245. { 'class': prefixCls + '-footer-extra', key: 'extra' },
  246. [typeof renderExtraFooter === 'function' ? renderExtraFooter() : renderExtraFooter]
  247. ) : null;
  248. var operations = ranges && Object.keys(ranges).map(function (range) {
  249. var value = ranges[range];
  250. var hoverValue = typeof value === 'function' ? value.call(_this2) : value;
  251. return h(
  252. _tag2['default'],
  253. {
  254. key: range,
  255. attrs: { prefixCls: tagPrefixCls,
  256. color: 'blue'
  257. },
  258. on: {
  259. 'click': function click() {
  260. return _this2.handleRangeClick(value);
  261. },
  262. 'mouseenter': function mouseenter() {
  263. return _this2.setState({ sHoverValue: hoverValue });
  264. },
  265. 'mouseleave': _this2.handleRangeMouseLeave
  266. }
  267. },
  268. [range]
  269. );
  270. });
  271. var rangeNode = operations && operations.length > 0 ? h(
  272. 'div',
  273. { 'class': prefixCls + '-footer-extra ' + prefixCls + '-range-quick-selector', key: 'range' },
  274. [operations]
  275. ) : null;
  276. return [rangeNode, customFooter];
  277. }
  278. },
  279. render: function render() {
  280. var _classNames,
  281. _this3 = this;
  282. var h = arguments[0];
  283. var props = (0, _propsUtil.getOptionProps)(this);
  284. var suffixIcon = (0, _propsUtil.getComponentFromProp)(this, 'suffixIcon');
  285. suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
  286. var value = this.sValue,
  287. showDate = this.sShowDate,
  288. hoverValue = this.sHoverValue,
  289. open = this.sOpen,
  290. $scopedSlots = this.$scopedSlots;
  291. var listeners = (0, _propsUtil.getListeners)(this);
  292. var _listeners$calendarCh = listeners.calendarChange,
  293. calendarChange = _listeners$calendarCh === undefined ? noop : _listeners$calendarCh,
  294. _listeners$ok = listeners.ok,
  295. ok = _listeners$ok === undefined ? noop : _listeners$ok,
  296. _listeners$focus = listeners.focus,
  297. focus = _listeners$focus === undefined ? noop : _listeners$focus,
  298. _listeners$blur = listeners.blur,
  299. blur = _listeners$blur === undefined ? noop : _listeners$blur,
  300. _listeners$panelChang = listeners.panelChange,
  301. panelChange = _listeners$panelChang === undefined ? noop : _listeners$panelChang;
  302. var customizePrefixCls = props.prefixCls,
  303. customizeTagPrefixCls = props.tagPrefixCls,
  304. popupStyle = props.popupStyle,
  305. disabledDate = props.disabledDate,
  306. disabledTime = props.disabledTime,
  307. showTime = props.showTime,
  308. showToday = props.showToday,
  309. ranges = props.ranges,
  310. locale = props.locale,
  311. localeCode = props.localeCode,
  312. format = props.format,
  313. separator = props.separator,
  314. inputReadOnly = props.inputReadOnly;
  315. var getPrefixCls = this.configProvider.getPrefixCls;
  316. var prefixCls = getPrefixCls('calendar', customizePrefixCls);
  317. var tagPrefixCls = getPrefixCls('tag', customizeTagPrefixCls);
  318. this._prefixCls = prefixCls;
  319. this._tagPrefixCls = tagPrefixCls;
  320. var dateRender = props.dateRender || $scopedSlots.dateRender;
  321. fixLocale(value, localeCode);
  322. fixLocale(showDate, localeCode);
  323. var calendarClassName = (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-time', showTime), (0, _defineProperty3['default'])(_classNames, prefixCls + '-range-with-ranges', ranges), _classNames));
  324. // 需要选择时间时,点击 ok 时才触发 onChange
  325. var pickerChangeHandler = {
  326. on: {
  327. change: this.handleChange
  328. }
  329. };
  330. var calendarProps = {
  331. on: {
  332. ok: this.handleChange
  333. },
  334. props: {}
  335. };
  336. if (props.timePicker) {
  337. pickerChangeHandler.on.change = function (changedValue) {
  338. return _this3.handleChange(changedValue);
  339. };
  340. } else {
  341. calendarProps = { on: {}, props: {} };
  342. }
  343. if ('mode' in props) {
  344. calendarProps.props.mode = props.mode;
  345. }
  346. var startPlaceholder = Array.isArray(props.placeholder) ? props.placeholder[0] : locale.lang.rangePlaceholder[0];
  347. var endPlaceholder = Array.isArray(props.placeholder) ? props.placeholder[1] : locale.lang.rangePlaceholder[1];
  348. var rangeCalendarProps = (0, _propsUtil.mergeProps)(calendarProps, {
  349. props: {
  350. separator: separator,
  351. format: format,
  352. prefixCls: prefixCls,
  353. renderFooter: this.renderFooter,
  354. timePicker: props.timePicker,
  355. disabledDate: disabledDate,
  356. disabledTime: disabledTime,
  357. dateInputPlaceholder: [startPlaceholder, endPlaceholder],
  358. locale: locale.lang,
  359. dateRender: dateRender,
  360. value: showDate,
  361. hoverValue: hoverValue,
  362. showToday: showToday,
  363. inputReadOnly: inputReadOnly
  364. },
  365. on: {
  366. change: calendarChange,
  367. ok: ok,
  368. valueChange: this.handleShowDateChange,
  369. hoverChange: this.handleHoverChange,
  370. panelChange: panelChange,
  371. inputSelect: this.handleCalendarInputSelect
  372. },
  373. 'class': calendarClassName,
  374. scopedSlots: $scopedSlots
  375. });
  376. var calendar = h(_RangeCalendar2['default'], rangeCalendarProps);
  377. // default width for showTime
  378. var pickerStyle = {};
  379. if (props.showTime) {
  380. pickerStyle.width = '350px';
  381. }
  382. var _value6 = (0, _slicedToArray3['default'])(value, 2),
  383. startValue = _value6[0],
  384. endValue = _value6[1];
  385. var clearIcon = !props.disabled && props.allowClear && value && (startValue || endValue) ? h(_icon2['default'], {
  386. attrs: {
  387. type: 'close-circle',
  388. theme: 'filled'
  389. },
  390. 'class': prefixCls + '-picker-clear',
  391. on: {
  392. 'click': this.clearSelection
  393. }
  394. }) : null;
  395. var inputIcon = h(_InputIcon2['default'], {
  396. attrs: { suffixIcon: suffixIcon, prefixCls: prefixCls }
  397. });
  398. var input = function input(_ref3) {
  399. var inputValue = _ref3.value;
  400. var _inputValue = (0, _slicedToArray3['default'])(inputValue, 2),
  401. start = _inputValue[0],
  402. end = _inputValue[1];
  403. return h(
  404. 'span',
  405. { 'class': props.pickerInputClass },
  406. [h('input', {
  407. attrs: {
  408. disabled: props.disabled,
  409. readOnly: true,
  410. placeholder: startPlaceholder,
  411. tabIndex: -1
  412. },
  413. domProps: {
  414. 'value': (0, _utils.formatDate)(start, props.format)
  415. },
  416. 'class': prefixCls + '-range-picker-input' }), h(
  417. 'span',
  418. { 'class': prefixCls + '-range-picker-separator' },
  419. [' ', separator, ' ']
  420. ), h('input', {
  421. attrs: {
  422. disabled: props.disabled,
  423. readOnly: true,
  424. placeholder: endPlaceholder,
  425. tabIndex: -1
  426. },
  427. domProps: {
  428. 'value': (0, _utils.formatDate)(end, props.format)
  429. },
  430. 'class': prefixCls + '-range-picker-input' }), clearIcon, inputIcon]
  431. );
  432. };
  433. var vcDatePickerProps = (0, _propsUtil.mergeProps)({
  434. props: props,
  435. on: listeners
  436. }, pickerChangeHandler, {
  437. props: {
  438. calendar: calendar,
  439. value: value,
  440. open: open,
  441. prefixCls: prefixCls + '-picker-container'
  442. },
  443. on: {
  444. openChange: this.handleOpenChange
  445. },
  446. style: popupStyle,
  447. scopedSlots: (0, _extends3['default'])({ 'default': input }, $scopedSlots)
  448. });
  449. return h(
  450. 'span',
  451. {
  452. ref: 'picker',
  453. 'class': props.pickerClass,
  454. style: pickerStyle,
  455. attrs: { tabIndex: props.disabled ? -1 : 0
  456. },
  457. on: {
  458. 'focus': focus,
  459. 'blur': blur,
  460. 'mouseenter': this.onMouseEnter,
  461. 'mouseleave': this.onMouseLeave
  462. }
  463. },
  464. [h(_Picker2['default'], vcDatePickerProps)]
  465. );
  466. }
  467. };