index.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  3. import * as React from 'react';
  4. import useTimeInfo from "../../../hooks/useTimeInfo";
  5. import { formatValue } from "../../../utils/dateUtil";
  6. import { PickerHackContext, usePanelContext } from "../../context";
  7. import TimeColumn from "./TimeColumn";
  8. function isAM(hour) {
  9. return hour < 12;
  10. }
  11. export default function TimePanelBody(props) {
  12. var showHour = props.showHour,
  13. showMinute = props.showMinute,
  14. showSecond = props.showSecond,
  15. showMillisecond = props.showMillisecond,
  16. showMeridiem = props.use12Hours,
  17. changeOnScroll = props.changeOnScroll;
  18. var _usePanelContext = usePanelContext(),
  19. prefixCls = _usePanelContext.prefixCls,
  20. values = _usePanelContext.values,
  21. generateConfig = _usePanelContext.generateConfig,
  22. locale = _usePanelContext.locale,
  23. onSelect = _usePanelContext.onSelect,
  24. _usePanelContext$onHo = _usePanelContext.onHover,
  25. onHover = _usePanelContext$onHo === void 0 ? function () {} : _usePanelContext$onHo,
  26. pickerValue = _usePanelContext.pickerValue;
  27. var value = (values === null || values === void 0 ? void 0 : values[0]) || null;
  28. var _React$useContext = React.useContext(PickerHackContext),
  29. onCellDblClick = _React$useContext.onCellDblClick;
  30. // ========================== Info ==========================
  31. var _useTimeInfo = useTimeInfo(generateConfig, props, value),
  32. _useTimeInfo2 = _slicedToArray(_useTimeInfo, 5),
  33. getValidTime = _useTimeInfo2[0],
  34. rowHourUnits = _useTimeInfo2[1],
  35. getMinuteUnits = _useTimeInfo2[2],
  36. getSecondUnits = _useTimeInfo2[3],
  37. getMillisecondUnits = _useTimeInfo2[4];
  38. // ========================= Value ==========================
  39. // PickerValue will tell which one to align on the top
  40. var getUnitValue = function getUnitValue(func) {
  41. var valueUnitVal = value && generateConfig[func](value);
  42. var pickerUnitValue = pickerValue && generateConfig[func](pickerValue);
  43. return [valueUnitVal, pickerUnitValue];
  44. };
  45. var _getUnitValue = getUnitValue('getHour'),
  46. _getUnitValue2 = _slicedToArray(_getUnitValue, 2),
  47. hour = _getUnitValue2[0],
  48. pickerHour = _getUnitValue2[1];
  49. var _getUnitValue3 = getUnitValue('getMinute'),
  50. _getUnitValue4 = _slicedToArray(_getUnitValue3, 2),
  51. minute = _getUnitValue4[0],
  52. pickerMinute = _getUnitValue4[1];
  53. var _getUnitValue5 = getUnitValue('getSecond'),
  54. _getUnitValue6 = _slicedToArray(_getUnitValue5, 2),
  55. second = _getUnitValue6[0],
  56. pickerSecond = _getUnitValue6[1];
  57. var _getUnitValue7 = getUnitValue('getMillisecond'),
  58. _getUnitValue8 = _slicedToArray(_getUnitValue7, 2),
  59. millisecond = _getUnitValue8[0],
  60. pickerMillisecond = _getUnitValue8[1];
  61. var meridiem = hour === null ? null : isAM(hour) ? 'am' : 'pm';
  62. // ========================= Column =========================
  63. // Hours
  64. var hourUnits = React.useMemo(function () {
  65. if (!showMeridiem) {
  66. return rowHourUnits;
  67. }
  68. return isAM(hour) ? rowHourUnits.filter(function (h) {
  69. return isAM(h.value);
  70. }) : rowHourUnits.filter(function (h) {
  71. return !isAM(h.value);
  72. });
  73. }, [hour, rowHourUnits, showMeridiem]);
  74. // >>> Pick Fallback
  75. var getEnabled = function getEnabled(units, val) {
  76. var _enabledUnits$;
  77. var enabledUnits = units.filter(function (unit) {
  78. return !unit.disabled;
  79. });
  80. return val !== null && val !== void 0 ? val : // Fallback to enabled value
  81. enabledUnits === null || enabledUnits === void 0 || (_enabledUnits$ = enabledUnits[0]) === null || _enabledUnits$ === void 0 ? void 0 : _enabledUnits$.value;
  82. };
  83. // >>> Minutes
  84. var validHour = getEnabled(rowHourUnits, hour);
  85. var minuteUnits = React.useMemo(function () {
  86. return getMinuteUnits(validHour);
  87. }, [getMinuteUnits, validHour]);
  88. // >>> Seconds
  89. var validMinute = getEnabled(minuteUnits, minute);
  90. var secondUnits = React.useMemo(function () {
  91. return getSecondUnits(validHour, validMinute);
  92. }, [getSecondUnits, validHour, validMinute]);
  93. // >>> Milliseconds
  94. var validSecond = getEnabled(secondUnits, second);
  95. var millisecondUnits = React.useMemo(function () {
  96. return getMillisecondUnits(validHour, validMinute, validSecond);
  97. }, [getMillisecondUnits, validHour, validMinute, validSecond]);
  98. var validMillisecond = getEnabled(millisecondUnits, millisecond);
  99. // Meridiem
  100. var meridiemUnits = React.useMemo(function () {
  101. if (!showMeridiem) {
  102. return [];
  103. }
  104. var base = generateConfig.getNow();
  105. var amDate = generateConfig.setHour(base, 6);
  106. var pmDate = generateConfig.setHour(base, 18);
  107. var formatMeridiem = function formatMeridiem(date, defaultLabel) {
  108. var cellMeridiemFormat = locale.cellMeridiemFormat;
  109. return cellMeridiemFormat ? formatValue(date, {
  110. generateConfig: generateConfig,
  111. locale: locale,
  112. format: cellMeridiemFormat
  113. }) : defaultLabel;
  114. };
  115. return [{
  116. label: formatMeridiem(amDate, 'AM'),
  117. value: 'am',
  118. disabled: rowHourUnits.every(function (h) {
  119. return h.disabled || !isAM(h.value);
  120. })
  121. }, {
  122. label: formatMeridiem(pmDate, 'PM'),
  123. value: 'pm',
  124. disabled: rowHourUnits.every(function (h) {
  125. return h.disabled || isAM(h.value);
  126. })
  127. }];
  128. }, [rowHourUnits, showMeridiem, generateConfig, locale]);
  129. // ========================= Change =========================
  130. /**
  131. * Check if time is validate or will match to validate one
  132. */
  133. var triggerChange = function triggerChange(nextDate) {
  134. var validateDate = getValidTime(nextDate);
  135. onSelect(validateDate);
  136. };
  137. // ========================= Column =========================
  138. // Create a template date for the trigger change event
  139. var triggerDateTmpl = React.useMemo(function () {
  140. var tmpl = value || pickerValue || generateConfig.getNow();
  141. var isNotNull = function isNotNull(num) {
  142. return num !== null && num !== undefined;
  143. };
  144. if (isNotNull(hour)) {
  145. tmpl = generateConfig.setHour(tmpl, hour);
  146. tmpl = generateConfig.setMinute(tmpl, minute);
  147. tmpl = generateConfig.setSecond(tmpl, second);
  148. tmpl = generateConfig.setMillisecond(tmpl, millisecond);
  149. } else if (isNotNull(pickerHour)) {
  150. tmpl = generateConfig.setHour(tmpl, pickerHour);
  151. tmpl = generateConfig.setMinute(tmpl, pickerMinute);
  152. tmpl = generateConfig.setSecond(tmpl, pickerSecond);
  153. tmpl = generateConfig.setMillisecond(tmpl, pickerMillisecond);
  154. } else if (isNotNull(validHour)) {
  155. tmpl = generateConfig.setHour(tmpl, validHour);
  156. tmpl = generateConfig.setMinute(tmpl, validMinute);
  157. tmpl = generateConfig.setSecond(tmpl, validSecond);
  158. tmpl = generateConfig.setMillisecond(tmpl, validMillisecond);
  159. }
  160. return tmpl;
  161. }, [value, pickerValue, hour, minute, second, millisecond, validHour, validMinute, validSecond, validMillisecond, pickerHour, pickerMinute, pickerSecond, pickerMillisecond, generateConfig]);
  162. // ===================== Columns Change =====================
  163. var fillColumnValue = function fillColumnValue(val, func) {
  164. if (val === null) {
  165. return null;
  166. }
  167. return generateConfig[func](triggerDateTmpl, val);
  168. };
  169. var getNextHourTime = function getNextHourTime(val) {
  170. return fillColumnValue(val, 'setHour');
  171. };
  172. var getNextMinuteTime = function getNextMinuteTime(val) {
  173. return fillColumnValue(val, 'setMinute');
  174. };
  175. var getNextSecondTime = function getNextSecondTime(val) {
  176. return fillColumnValue(val, 'setSecond');
  177. };
  178. var getNextMillisecondTime = function getNextMillisecondTime(val) {
  179. return fillColumnValue(val, 'setMillisecond');
  180. };
  181. var getMeridiemTime = function getMeridiemTime(val) {
  182. if (val === null) {
  183. return null;
  184. }
  185. if (val === 'am' && !isAM(hour)) {
  186. return generateConfig.setHour(triggerDateTmpl, hour - 12);
  187. } else if (val === 'pm' && isAM(hour)) {
  188. return generateConfig.setHour(triggerDateTmpl, hour + 12);
  189. }
  190. return triggerDateTmpl;
  191. };
  192. var onHourChange = function onHourChange(val) {
  193. triggerChange(getNextHourTime(val));
  194. };
  195. var onMinuteChange = function onMinuteChange(val) {
  196. triggerChange(getNextMinuteTime(val));
  197. };
  198. var onSecondChange = function onSecondChange(val) {
  199. triggerChange(getNextSecondTime(val));
  200. };
  201. var onMillisecondChange = function onMillisecondChange(val) {
  202. triggerChange(getNextMillisecondTime(val));
  203. };
  204. var onMeridiemChange = function onMeridiemChange(val) {
  205. triggerChange(getMeridiemTime(val));
  206. };
  207. // ====================== Column Hover ======================
  208. var onHourHover = function onHourHover(val) {
  209. onHover(getNextHourTime(val));
  210. };
  211. var onMinuteHover = function onMinuteHover(val) {
  212. onHover(getNextMinuteTime(val));
  213. };
  214. var onSecondHover = function onSecondHover(val) {
  215. onHover(getNextSecondTime(val));
  216. };
  217. var onMillisecondHover = function onMillisecondHover(val) {
  218. onHover(getNextMillisecondTime(val));
  219. };
  220. var onMeridiemHover = function onMeridiemHover(val) {
  221. onHover(getMeridiemTime(val));
  222. };
  223. // ========================= Render =========================
  224. var sharedColumnProps = {
  225. onDblClick: onCellDblClick,
  226. changeOnScroll: changeOnScroll
  227. };
  228. return /*#__PURE__*/React.createElement("div", {
  229. className: "".concat(prefixCls, "-content")
  230. }, showHour && /*#__PURE__*/React.createElement(TimeColumn, _extends({
  231. units: hourUnits,
  232. value: hour,
  233. optionalValue: pickerHour,
  234. type: "hour",
  235. onChange: onHourChange,
  236. onHover: onHourHover
  237. }, sharedColumnProps)), showMinute && /*#__PURE__*/React.createElement(TimeColumn, _extends({
  238. units: minuteUnits,
  239. value: minute,
  240. optionalValue: pickerMinute,
  241. type: "minute",
  242. onChange: onMinuteChange,
  243. onHover: onMinuteHover
  244. }, sharedColumnProps)), showSecond && /*#__PURE__*/React.createElement(TimeColumn, _extends({
  245. units: secondUnits,
  246. value: second,
  247. optionalValue: pickerSecond,
  248. type: "second",
  249. onChange: onSecondChange,
  250. onHover: onSecondHover
  251. }, sharedColumnProps)), showMillisecond && /*#__PURE__*/React.createElement(TimeColumn, _extends({
  252. units: millisecondUnits,
  253. value: millisecond,
  254. optionalValue: pickerMillisecond,
  255. type: "millisecond",
  256. onChange: onMillisecondChange,
  257. onHover: onMillisecondHover
  258. }, sharedColumnProps)), showMeridiem && /*#__PURE__*/React.createElement(TimeColumn, _extends({
  259. units: meridiemUnits,
  260. value: meridiem,
  261. type: "meridiem",
  262. onChange: onMeridiemChange,
  263. onHover: onMeridiemHover
  264. }, sharedColumnProps)));
  265. }