TimeBody.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode } from "vue";
  3. import TimeUnitColumn from './TimeUnitColumn';
  4. import { leftPad } from '../../utils/miscUtil';
  5. import { setTime as utilSetTime } from '../../utils/timeUtil';
  6. import { cloneElement } from '../../../_util/vnode';
  7. import { onBeforeUpdate, ref, watchEffect, computed, defineComponent } from 'vue';
  8. function generateUnits(start, end, step, disabledUnits) {
  9. var units = [];
  10. for (var i = start; i <= end; i += step) {
  11. units.push({
  12. label: leftPad(i, 2),
  13. value: i,
  14. disabled: (disabledUnits || []).includes(i)
  15. });
  16. }
  17. return units;
  18. }
  19. var TimeBody = defineComponent({
  20. compatConfig: {
  21. MODE: 3
  22. },
  23. name: 'TimeBody',
  24. inheritAttrs: false,
  25. props: ['generateConfig', 'prefixCls', 'operationRef', 'activeColumnIndex', 'value', 'showHour', 'showMinute', 'showSecond', 'use12Hours', 'hourStep', 'minuteStep', 'secondStep', 'disabledHours', 'disabledMinutes', 'disabledSeconds', 'disabledTime', 'hideDisabledOptions', 'onSelect'],
  26. setup: function setup(props) {
  27. var originHour = computed(function () {
  28. return props.value ? props.generateConfig.getHour(props.value) : -1;
  29. });
  30. var isPM = computed(function () {
  31. if (props.use12Hours) {
  32. return originHour.value >= 12; // -1 means should display AM
  33. } else {
  34. return false;
  35. }
  36. });
  37. var hour = computed(function () {
  38. // Should additional logic to handle 12 hours
  39. if (props.use12Hours) {
  40. return originHour.value % 12;
  41. } else {
  42. return originHour.value;
  43. }
  44. });
  45. var minute = computed(function () {
  46. return props.value ? props.generateConfig.getMinute(props.value) : -1;
  47. });
  48. var second = computed(function () {
  49. return props.value ? props.generateConfig.getSecond(props.value) : -1;
  50. });
  51. var now = ref(props.generateConfig.getNow());
  52. var mergedDisabledHours = ref();
  53. var mergedDisabledMinutes = ref();
  54. var mergedDisabledSeconds = ref();
  55. onBeforeUpdate(function () {
  56. now.value = props.generateConfig.getNow();
  57. });
  58. watchEffect(function () {
  59. if (props.disabledTime) {
  60. var disabledConfig = props.disabledTime(now);
  61. var _ref = [disabledConfig.disabledHours, disabledConfig.disabledMinutes, disabledConfig.disabledSeconds];
  62. mergedDisabledHours.value = _ref[0];
  63. mergedDisabledMinutes.value = _ref[1];
  64. mergedDisabledSeconds.value = _ref[2];
  65. } else {
  66. var _ref2 = [props.disabledHours, props.disabledMinutes, props.disabledSeconds];
  67. mergedDisabledHours.value = _ref2[0];
  68. mergedDisabledMinutes.value = _ref2[1];
  69. mergedDisabledSeconds.value = _ref2[2];
  70. }
  71. });
  72. var setTime = function setTime(isNewPM, newHour, newMinute, newSecond) {
  73. var newDate = props.value || props.generateConfig.getNow();
  74. var mergedHour = Math.max(0, newHour);
  75. var mergedMinute = Math.max(0, newMinute);
  76. var mergedSecond = Math.max(0, newSecond);
  77. newDate = utilSetTime(props.generateConfig, newDate, !props.use12Hours || !isNewPM ? mergedHour : mergedHour + 12, mergedMinute, mergedSecond);
  78. return newDate;
  79. };
  80. // ========================= Unit =========================
  81. var rawHours = computed(function () {
  82. var _props$hourStep;
  83. return generateUnits(0, 23, (_props$hourStep = props.hourStep) !== null && _props$hourStep !== void 0 ? _props$hourStep : 1, mergedDisabledHours.value && mergedDisabledHours.value());
  84. });
  85. // const memorizedRawHours = useMemo(() => rawHours, rawHours, shouldUnitsUpdate);
  86. var AMPMDisabled = computed(function () {
  87. if (!props.use12Hours) {
  88. return [false, false];
  89. }
  90. var AMPMDisabled = [true, true];
  91. rawHours.value.forEach(function (_ref3) {
  92. var disabled = _ref3.disabled,
  93. hourValue = _ref3.value;
  94. if (disabled) return;
  95. if (hourValue >= 12) {
  96. AMPMDisabled[1] = false;
  97. } else {
  98. AMPMDisabled[0] = false;
  99. }
  100. });
  101. return AMPMDisabled;
  102. });
  103. var hours = computed(function () {
  104. if (!props.use12Hours) return rawHours.value;
  105. return rawHours.value.filter(isPM.value ? function (hourMeta) {
  106. return hourMeta.value >= 12;
  107. } : function (hourMeta) {
  108. return hourMeta.value < 12;
  109. }).map(function (hourMeta) {
  110. var hourValue = hourMeta.value % 12;
  111. var hourLabel = hourValue === 0 ? '12' : leftPad(hourValue, 2);
  112. return _objectSpread(_objectSpread({}, hourMeta), {}, {
  113. label: hourLabel,
  114. value: hourValue
  115. });
  116. });
  117. });
  118. var minutes = computed(function () {
  119. var _props$minuteStep;
  120. return generateUnits(0, 59, (_props$minuteStep = props.minuteStep) !== null && _props$minuteStep !== void 0 ? _props$minuteStep : 1, mergedDisabledMinutes.value && mergedDisabledMinutes.value(originHour.value));
  121. });
  122. var seconds = computed(function () {
  123. var _props$secondStep;
  124. return generateUnits(0, 59, (_props$secondStep = props.secondStep) !== null && _props$secondStep !== void 0 ? _props$secondStep : 1, mergedDisabledSeconds.value && mergedDisabledSeconds.value(originHour.value, minute));
  125. });
  126. return function () {
  127. var prefixCls = props.prefixCls,
  128. operationRef = props.operationRef,
  129. activeColumnIndex = props.activeColumnIndex,
  130. showHour = props.showHour,
  131. showMinute = props.showMinute,
  132. showSecond = props.showSecond,
  133. use12Hours = props.use12Hours,
  134. hideDisabledOptions = props.hideDisabledOptions,
  135. onSelect = props.onSelect;
  136. var columns = [];
  137. var contentPrefixCls = "".concat(prefixCls, "-content");
  138. var columnPrefixCls = "".concat(prefixCls, "-time-panel");
  139. // ====================== Operations ======================
  140. operationRef.value = {
  141. onUpDown: function onUpDown(diff) {
  142. var column = columns[activeColumnIndex];
  143. if (column) {
  144. var valueIndex = column.units.findIndex(function (unit) {
  145. return unit.value === column.value;
  146. });
  147. var unitLen = column.units.length;
  148. for (var i = 1; i < unitLen; i += 1) {
  149. var nextUnit = column.units[(valueIndex + diff * i + unitLen) % unitLen];
  150. if (nextUnit.disabled !== true) {
  151. column.onSelect(nextUnit.value);
  152. break;
  153. }
  154. }
  155. }
  156. }
  157. };
  158. // ======================== Render ========================
  159. function addColumnNode(condition, node, columnValue, units, onColumnSelect) {
  160. if (condition !== false) {
  161. columns.push({
  162. node: cloneElement(node, {
  163. prefixCls: columnPrefixCls,
  164. value: columnValue,
  165. active: activeColumnIndex === columns.length,
  166. onSelect: onColumnSelect,
  167. units: units,
  168. hideDisabledOptions: hideDisabledOptions
  169. }),
  170. onSelect: onColumnSelect,
  171. value: columnValue,
  172. units: units
  173. });
  174. }
  175. }
  176. // Hour
  177. addColumnNode(showHour, _createVNode(TimeUnitColumn, {
  178. "key": "hour"
  179. }, null), hour.value, hours.value, function (num) {
  180. onSelect(setTime(isPM.value, num, minute.value, second.value), 'mouse');
  181. });
  182. // Minute
  183. addColumnNode(showMinute, _createVNode(TimeUnitColumn, {
  184. "key": "minute"
  185. }, null), minute.value, minutes.value, function (num) {
  186. onSelect(setTime(isPM.value, hour.value, num, second.value), 'mouse');
  187. });
  188. // Second
  189. addColumnNode(showSecond, _createVNode(TimeUnitColumn, {
  190. "key": "second"
  191. }, null), second.value, seconds.value, function (num) {
  192. onSelect(setTime(isPM.value, hour.value, minute.value, num), 'mouse');
  193. });
  194. // 12 Hours
  195. var PMIndex = -1;
  196. if (typeof isPM.value === 'boolean') {
  197. PMIndex = isPM.value ? 1 : 0;
  198. }
  199. addColumnNode(use12Hours === true, _createVNode(TimeUnitColumn, {
  200. "key": "12hours"
  201. }, null), PMIndex, [{
  202. label: 'AM',
  203. value: 0,
  204. disabled: AMPMDisabled.value[0]
  205. }, {
  206. label: 'PM',
  207. value: 1,
  208. disabled: AMPMDisabled.value[1]
  209. }], function (num) {
  210. onSelect(setTime(!!num, hour.value, minute.value, second.value), 'mouse');
  211. });
  212. return _createVNode("div", {
  213. "class": contentPrefixCls
  214. }, [columns.map(function (_ref4) {
  215. var node = _ref4.node;
  216. return node;
  217. })]);
  218. };
  219. }
  220. });
  221. export default TimeBody;