PickerPanel.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import _typeof from "@babel/runtime/helpers/esm/typeof";
  4. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  5. import { createVNode as _createVNode } from "vue";
  6. import TimePanel from './panels/TimePanel';
  7. import DatetimePanel from './panels/DatetimePanel';
  8. import DatePanel from './panels/DatePanel';
  9. import WeekPanel from './panels/WeekPanel';
  10. import MonthPanel from './panels/MonthPanel';
  11. import QuarterPanel from './panels/QuarterPanel';
  12. import YearPanel from './panels/YearPanel';
  13. import DecadePanel from './panels/DecadePanel';
  14. import { isEqual } from './utils/dateUtil';
  15. import { useInjectPanel, useProvidePanel } from './PanelContext';
  16. import { PickerModeMap } from './utils/uiUtil';
  17. import { useInjectRange } from './RangeContext';
  18. import getExtraFooter from './utils/getExtraFooter';
  19. import getRanges from './utils/getRanges';
  20. import { getLowerBoundTime, setDateTime, setTime } from './utils/timeUtil';
  21. import { computed, createVNode, defineComponent, ref, toRef, watch, watchEffect } from 'vue';
  22. import useMergedState from '../_util/hooks/useMergedState';
  23. import { warning } from '../vc-util/warning';
  24. import KeyCode from '../_util/KeyCode';
  25. import classNames from '../_util/classNames';
  26. function PickerPanel() {
  27. return defineComponent({
  28. name: 'PickerPanel',
  29. inheritAttrs: false,
  30. props: {
  31. prefixCls: String,
  32. locale: Object,
  33. generateConfig: Object,
  34. value: Object,
  35. defaultValue: Object,
  36. pickerValue: Object,
  37. defaultPickerValue: Object,
  38. disabledDate: Function,
  39. mode: String,
  40. picker: {
  41. type: String,
  42. default: 'date'
  43. },
  44. tabindex: {
  45. type: [Number, String],
  46. default: 0
  47. },
  48. showNow: {
  49. type: Boolean,
  50. default: undefined
  51. },
  52. showTime: [Boolean, Object],
  53. showToday: Boolean,
  54. renderExtraFooter: Function,
  55. dateRender: Function,
  56. hideHeader: {
  57. type: Boolean,
  58. default: undefined
  59. },
  60. onSelect: Function,
  61. onChange: Function,
  62. onPanelChange: Function,
  63. onMousedown: Function,
  64. onPickerValueChange: Function,
  65. onOk: Function,
  66. components: Object,
  67. direction: String,
  68. hourStep: {
  69. type: Number,
  70. default: 1
  71. },
  72. minuteStep: {
  73. type: Number,
  74. default: 1
  75. },
  76. secondStep: {
  77. type: Number,
  78. default: 1
  79. }
  80. },
  81. setup: function setup(props, _ref) {
  82. var attrs = _ref.attrs;
  83. var needConfirmButton = computed(function () {
  84. return props.picker === 'date' && !!props.showTime || props.picker === 'time';
  85. });
  86. var isHourStepValid = computed(function () {
  87. return 24 % props.hourStep === 0;
  88. });
  89. var isMinuteStepValid = computed(function () {
  90. return 60 % props.minuteStep === 0;
  91. });
  92. var isSecondStepValid = computed(function () {
  93. return 60 % props.secondStep === 0;
  94. });
  95. if (process.env.NODE_ENV !== 'production') {
  96. watchEffect(function () {
  97. var generateConfig = props.generateConfig,
  98. value = props.value,
  99. _props$hourStep = props.hourStep,
  100. hourStep = _props$hourStep === void 0 ? 1 : _props$hourStep,
  101. _props$minuteStep = props.minuteStep,
  102. minuteStep = _props$minuteStep === void 0 ? 1 : _props$minuteStep,
  103. _props$secondStep = props.secondStep,
  104. secondStep = _props$secondStep === void 0 ? 1 : _props$secondStep;
  105. warning(!value || generateConfig.isValidate(value), 'Invalidate date pass to `value`.');
  106. warning(!value || generateConfig.isValidate(value), 'Invalidate date pass to `defaultValue`.');
  107. warning(isHourStepValid.value, "`hourStep` ".concat(hourStep, " is invalid. It should be a factor of 24."));
  108. warning(isMinuteStepValid.value, "`minuteStep` ".concat(minuteStep, " is invalid. It should be a factor of 60."));
  109. warning(isSecondStepValid.value, "`secondStep` ".concat(secondStep, " is invalid. It should be a factor of 60."));
  110. });
  111. }
  112. var panelContext = useInjectPanel();
  113. var operationRef = panelContext.operationRef,
  114. panelDivRef = panelContext.panelRef,
  115. onContextSelect = panelContext.onSelect,
  116. hideRanges = panelContext.hideRanges,
  117. defaultOpenValue = panelContext.defaultOpenValue;
  118. var _useInjectRange = useInjectRange(),
  119. inRange = _useInjectRange.inRange,
  120. panelPosition = _useInjectRange.panelPosition,
  121. rangedValue = _useInjectRange.rangedValue,
  122. hoverRangedValue = _useInjectRange.hoverRangedValue;
  123. var panelRef = ref({});
  124. // Value
  125. var _useMergedState = useMergedState(null, {
  126. value: toRef(props, 'value'),
  127. defaultValue: props.defaultValue,
  128. postState: function postState(val) {
  129. if (!val && defaultOpenValue !== null && defaultOpenValue !== void 0 && defaultOpenValue.value && props.picker === 'time') {
  130. return defaultOpenValue.value;
  131. }
  132. return val;
  133. }
  134. }),
  135. _useMergedState2 = _slicedToArray(_useMergedState, 2),
  136. mergedValue = _useMergedState2[0],
  137. setInnerValue = _useMergedState2[1];
  138. // View date control
  139. var _useMergedState3 = useMergedState(null, {
  140. value: toRef(props, 'pickerValue'),
  141. defaultValue: props.defaultPickerValue || mergedValue.value,
  142. postState: function postState(date) {
  143. var generateConfig = props.generateConfig,
  144. showTime = props.showTime,
  145. defaultValue = props.defaultValue;
  146. var now = generateConfig.getNow();
  147. if (!date) return now;
  148. // When value is null and set showTime
  149. if (!mergedValue.value && props.showTime) {
  150. if (_typeof(showTime) === 'object') {
  151. return setDateTime(generateConfig, Array.isArray(date) ? date[0] : date, showTime.defaultValue || now);
  152. }
  153. if (defaultValue) {
  154. return setDateTime(generateConfig, Array.isArray(date) ? date[0] : date, defaultValue);
  155. }
  156. return setDateTime(generateConfig, Array.isArray(date) ? date[0] : date, now);
  157. }
  158. return date;
  159. }
  160. }),
  161. _useMergedState4 = _slicedToArray(_useMergedState3, 2),
  162. viewDate = _useMergedState4[0],
  163. setInnerViewDate = _useMergedState4[1];
  164. var setViewDate = function setViewDate(date) {
  165. setInnerViewDate(date);
  166. if (props.onPickerValueChange) {
  167. props.onPickerValueChange(date);
  168. }
  169. };
  170. // Panel control
  171. var getInternalNextMode = function getInternalNextMode(nextMode) {
  172. var getNextMode = PickerModeMap[props.picker];
  173. if (getNextMode) {
  174. return getNextMode(nextMode);
  175. }
  176. return nextMode;
  177. };
  178. // Save panel is changed from which panel
  179. var _useMergedState5 = useMergedState(function () {
  180. if (props.picker === 'time') {
  181. return 'time';
  182. }
  183. return getInternalNextMode('date');
  184. }, {
  185. value: toRef(props, 'mode')
  186. }),
  187. _useMergedState6 = _slicedToArray(_useMergedState5, 2),
  188. mergedMode = _useMergedState6[0],
  189. setInnerMode = _useMergedState6[1];
  190. watch(function () {
  191. return props.picker;
  192. }, function () {
  193. setInnerMode(props.picker);
  194. });
  195. var sourceMode = ref(mergedMode.value);
  196. var setSourceMode = function setSourceMode(val) {
  197. sourceMode.value = val;
  198. };
  199. var onInternalPanelChange = function onInternalPanelChange(newMode, viewValue) {
  200. var onPanelChange = props.onPanelChange,
  201. generateConfig = props.generateConfig;
  202. var nextMode = getInternalNextMode(newMode || mergedMode.value);
  203. setSourceMode(mergedMode.value);
  204. setInnerMode(nextMode);
  205. if (onPanelChange && (mergedMode.value !== nextMode || isEqual(generateConfig, viewDate.value, viewDate.value))) {
  206. onPanelChange(viewValue, nextMode);
  207. }
  208. };
  209. var triggerSelect = function triggerSelect(date, type) {
  210. var forceTriggerSelect = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  211. var picker = props.picker,
  212. generateConfig = props.generateConfig,
  213. onSelect = props.onSelect,
  214. onChange = props.onChange,
  215. disabledDate = props.disabledDate;
  216. if (mergedMode.value === picker || forceTriggerSelect) {
  217. setInnerValue(date);
  218. if (onSelect) {
  219. onSelect(date);
  220. }
  221. if (onContextSelect) {
  222. onContextSelect(date, type);
  223. }
  224. if (onChange && !isEqual(generateConfig, date, mergedValue.value) && !(disabledDate !== null && disabledDate !== void 0 && disabledDate(date))) {
  225. onChange(date);
  226. }
  227. }
  228. };
  229. // ========================= Interactive ==========================
  230. var onInternalKeydown = function onInternalKeydown(e) {
  231. if (panelRef.value && panelRef.value.onKeydown) {
  232. if ([KeyCode.LEFT, KeyCode.RIGHT, KeyCode.UP, KeyCode.DOWN, KeyCode.PAGE_UP, KeyCode.PAGE_DOWN, KeyCode.ENTER].includes(e.which)) {
  233. e.preventDefault();
  234. }
  235. return panelRef.value.onKeydown(e);
  236. }
  237. /* istanbul ignore next */
  238. /* eslint-disable no-lone-blocks */
  239. {
  240. warning(false, 'Panel not correct handle keyDown event. Please help to fire issue about this.');
  241. return false;
  242. }
  243. /* eslint-enable no-lone-blocks */
  244. };
  245. var onInternalBlur = function onInternalBlur(e) {
  246. if (panelRef.value && panelRef.value.onBlur) {
  247. panelRef.value.onBlur(e);
  248. }
  249. };
  250. var onNow = function onNow() {
  251. var generateConfig = props.generateConfig,
  252. hourStep = props.hourStep,
  253. minuteStep = props.minuteStep,
  254. secondStep = props.secondStep;
  255. var now = generateConfig.getNow();
  256. var lowerBoundTime = getLowerBoundTime(generateConfig.getHour(now), generateConfig.getMinute(now), generateConfig.getSecond(now), isHourStepValid.value ? hourStep : 1, isMinuteStepValid.value ? minuteStep : 1, isSecondStepValid.value ? secondStep : 1);
  257. var adjustedNow = setTime(generateConfig, now, lowerBoundTime[0],
  258. // hour
  259. lowerBoundTime[1],
  260. // minute
  261. lowerBoundTime[2]);
  262. triggerSelect(adjustedNow, 'submit');
  263. };
  264. var classString = computed(function () {
  265. var _classNames;
  266. var prefixCls = props.prefixCls,
  267. direction = props.direction;
  268. return classNames("".concat(prefixCls, "-panel"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-panel-has-range"), rangedValue && rangedValue.value && rangedValue.value[0] && rangedValue.value[1]), _defineProperty(_classNames, "".concat(prefixCls, "-panel-has-range-hover"), hoverRangedValue && hoverRangedValue.value && hoverRangedValue.value[0] && hoverRangedValue.value[1]), _defineProperty(_classNames, "".concat(prefixCls, "-panel-rtl"), direction === 'rtl'), _classNames));
  269. });
  270. useProvidePanel(_objectSpread(_objectSpread({}, panelContext), {}, {
  271. mode: mergedMode,
  272. hideHeader: computed(function () {
  273. var _panelContext$hideHea;
  274. return props.hideHeader !== undefined ? props.hideHeader : (_panelContext$hideHea = panelContext.hideHeader) === null || _panelContext$hideHea === void 0 ? void 0 : _panelContext$hideHea.value;
  275. }),
  276. hidePrevBtn: computed(function () {
  277. return inRange.value && panelPosition.value === 'right';
  278. }),
  279. hideNextBtn: computed(function () {
  280. return inRange.value && panelPosition.value === 'left';
  281. })
  282. }));
  283. watch(function () {
  284. return props.value;
  285. }, function () {
  286. if (props.value) {
  287. setInnerViewDate(props.value);
  288. }
  289. });
  290. return function () {
  291. var _props$prefixCls = props.prefixCls,
  292. prefixCls = _props$prefixCls === void 0 ? 'ant-picker' : _props$prefixCls,
  293. locale = props.locale,
  294. generateConfig = props.generateConfig,
  295. disabledDate = props.disabledDate,
  296. _props$picker = props.picker,
  297. picker = _props$picker === void 0 ? 'date' : _props$picker,
  298. _props$tabindex = props.tabindex,
  299. tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
  300. showNow = props.showNow,
  301. showTime = props.showTime,
  302. showToday = props.showToday,
  303. renderExtraFooter = props.renderExtraFooter,
  304. onMousedown = props.onMousedown,
  305. _onOk = props.onOk,
  306. components = props.components;
  307. if (operationRef && panelPosition.value !== 'right') {
  308. operationRef.value = {
  309. onKeydown: onInternalKeydown,
  310. onClose: function onClose() {
  311. if (panelRef.value && panelRef.value.onClose) {
  312. panelRef.value.onClose();
  313. }
  314. }
  315. };
  316. }
  317. // ============================ Panels ============================
  318. var panelNode;
  319. var pickerProps = _objectSpread(_objectSpread(_objectSpread({}, attrs), props), {}, {
  320. operationRef: panelRef,
  321. prefixCls: prefixCls,
  322. viewDate: viewDate.value,
  323. value: mergedValue.value,
  324. onViewDateChange: setViewDate,
  325. sourceMode: sourceMode.value,
  326. onPanelChange: onInternalPanelChange,
  327. disabledDate: disabledDate
  328. });
  329. delete pickerProps.onChange;
  330. delete pickerProps.onSelect;
  331. switch (mergedMode.value) {
  332. case 'decade':
  333. panelNode = _createVNode(DecadePanel, _objectSpread(_objectSpread({}, pickerProps), {}, {
  334. "onSelect": function onSelect(date, type) {
  335. setViewDate(date);
  336. triggerSelect(date, type);
  337. }
  338. }), null);
  339. break;
  340. case 'year':
  341. panelNode = _createVNode(YearPanel, _objectSpread(_objectSpread({}, pickerProps), {}, {
  342. "onSelect": function onSelect(date, type) {
  343. setViewDate(date);
  344. triggerSelect(date, type);
  345. }
  346. }), null);
  347. break;
  348. case 'month':
  349. panelNode = _createVNode(MonthPanel, _objectSpread(_objectSpread({}, pickerProps), {}, {
  350. "onSelect": function onSelect(date, type) {
  351. setViewDate(date);
  352. triggerSelect(date, type);
  353. }
  354. }), null);
  355. break;
  356. case 'quarter':
  357. panelNode = _createVNode(QuarterPanel, _objectSpread(_objectSpread({}, pickerProps), {}, {
  358. "onSelect": function onSelect(date, type) {
  359. setViewDate(date);
  360. triggerSelect(date, type);
  361. }
  362. }), null);
  363. break;
  364. case 'week':
  365. panelNode = _createVNode(WeekPanel, _objectSpread(_objectSpread({}, pickerProps), {}, {
  366. "onSelect": function onSelect(date, type) {
  367. setViewDate(date);
  368. triggerSelect(date, type);
  369. }
  370. }), null);
  371. break;
  372. case 'time':
  373. delete pickerProps.showTime;
  374. panelNode = _createVNode(TimePanel, _objectSpread(_objectSpread(_objectSpread({}, pickerProps), _typeof(showTime) === 'object' ? showTime : null), {}, {
  375. "onSelect": function onSelect(date, type) {
  376. setViewDate(date);
  377. triggerSelect(date, type);
  378. }
  379. }), null);
  380. break;
  381. default:
  382. if (showTime) {
  383. panelNode = _createVNode(DatetimePanel, _objectSpread(_objectSpread({}, pickerProps), {}, {
  384. "onSelect": function onSelect(date, type) {
  385. setViewDate(date);
  386. triggerSelect(date, type);
  387. }
  388. }), null);
  389. } else {
  390. panelNode = _createVNode(DatePanel, _objectSpread(_objectSpread({}, pickerProps), {}, {
  391. "onSelect": function onSelect(date, type) {
  392. setViewDate(date);
  393. triggerSelect(date, type);
  394. }
  395. }), null);
  396. }
  397. }
  398. // ============================ Footer ============================
  399. var extraFooter;
  400. var rangesNode;
  401. if (!(hideRanges !== null && hideRanges !== void 0 && hideRanges.value)) {
  402. extraFooter = getExtraFooter(prefixCls, mergedMode.value, renderExtraFooter);
  403. rangesNode = getRanges({
  404. prefixCls: prefixCls,
  405. components: components,
  406. needConfirmButton: needConfirmButton.value,
  407. okDisabled: !mergedValue.value || disabledDate && disabledDate(mergedValue.value),
  408. locale: locale,
  409. showNow: showNow,
  410. onNow: needConfirmButton.value && onNow,
  411. onOk: function onOk() {
  412. if (mergedValue.value) {
  413. triggerSelect(mergedValue.value, 'submit', true);
  414. if (_onOk) {
  415. _onOk(mergedValue.value);
  416. }
  417. }
  418. }
  419. });
  420. }
  421. var todayNode;
  422. if (showToday && mergedMode.value === 'date' && picker === 'date' && !showTime) {
  423. var now = generateConfig.getNow();
  424. var todayCls = "".concat(prefixCls, "-today-btn");
  425. var disabled = disabledDate && disabledDate(now);
  426. todayNode = _createVNode("a", {
  427. "class": classNames(todayCls, disabled && "".concat(todayCls, "-disabled")),
  428. "aria-disabled": disabled,
  429. "onClick": function onClick() {
  430. if (!disabled) {
  431. triggerSelect(now, 'mouse', true);
  432. }
  433. }
  434. }, [locale.today]);
  435. }
  436. return _createVNode("div", {
  437. "tabindex": tabindex,
  438. "class": classNames(classString.value, attrs.class),
  439. "style": attrs.style,
  440. "onKeydown": onInternalKeydown,
  441. "onBlur": onInternalBlur,
  442. "onMousedown": onMousedown,
  443. "ref": panelDivRef
  444. }, [panelNode, extraFooter || rangesNode || todayNode ? _createVNode("div", {
  445. "class": "".concat(prefixCls, "-footer")
  446. }, [extraFooter, rangesNode, todayNode]) : null]);
  447. };
  448. }
  449. });
  450. }
  451. var InterPickerPanel = PickerPanel();
  452. export default (function (props) {
  453. return createVNode(InterPickerPanel, props);
  454. });