TimeBody.js 9.0 KB

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