calendar.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5. return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. import { SuperComponent, wxComponent } from '../common/src/index';
  8. import config from '../common/config';
  9. import props from './props';
  10. import TCalendar from '../common/shared/calendar/index';
  11. const { prefix } = config;
  12. const name = `${prefix}-calendar`;
  13. let Calendar = class Calendar extends SuperComponent {
  14. constructor() {
  15. super(...arguments);
  16. this.externalClasses = [`${prefix}-class`];
  17. this.options = {
  18. multipleSlots: true,
  19. styleIsolation: 'apply-shared',
  20. };
  21. this.properties = props;
  22. this.data = {
  23. prefix,
  24. classPrefix: name,
  25. months: [],
  26. scrollIntoView: '',
  27. innerConfirmBtn: { content: '确定' },
  28. };
  29. this.controlledProps = [
  30. {
  31. key: 'value',
  32. event: 'confirm',
  33. },
  34. {
  35. key: 'value',
  36. event: 'change',
  37. },
  38. ];
  39. this.lifetimes = {
  40. ready() {
  41. this.base = new TCalendar(this.properties);
  42. this.initialValue();
  43. this.setData({
  44. days: this.base.getDays(),
  45. });
  46. this.calcMonths();
  47. },
  48. };
  49. this.observers = {
  50. confirmBtn(v) {
  51. if (typeof v === 'string') {
  52. this.setData({ innerConfirmBtn: v === 'slot' ? 'slot' : { content: v } });
  53. }
  54. else if (typeof v === 'object') {
  55. this.setData({ innerConfirmBtn: v });
  56. }
  57. },
  58. 'firstDayOfWeek,minDate,maxDate'(firstDayOfWeek, minDate, maxDate) {
  59. if (this.base) {
  60. this.base.firstDayOfWeek = firstDayOfWeek;
  61. this.base.minDate = minDate;
  62. this.base.maxDate = maxDate;
  63. this.calcMonths();
  64. }
  65. },
  66. value(v) {
  67. if (this.base) {
  68. this.base.value = v;
  69. }
  70. },
  71. visible(v) {
  72. if (v) {
  73. this.scrollIntoView();
  74. if (this.base) {
  75. this.base.value = this.data.value;
  76. this.calcMonths();
  77. }
  78. }
  79. },
  80. };
  81. this.methods = {
  82. initialValue() {
  83. const { value, type, minDate } = this.data;
  84. if (!value) {
  85. const today = new Date();
  86. const now = minDate || new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
  87. const initialValue = type === 'single' ? now : [now];
  88. if (type === 'range') {
  89. initialValue[1] = now + 24 * 3600 * 1000;
  90. }
  91. this.setData({
  92. value: initialValue,
  93. });
  94. this.base.value = initialValue;
  95. }
  96. },
  97. scrollIntoView() {
  98. const { value } = this.data;
  99. if (!value)
  100. return;
  101. const date = new Date(Array.isArray(value) ? value[0] : value);
  102. if (date) {
  103. this.setData({
  104. scrollIntoView: `year_${date.getFullYear()}_month_${date.getMonth()}`,
  105. });
  106. }
  107. },
  108. calcMonths() {
  109. const months = this.base.getMonths();
  110. this.setData({
  111. months,
  112. });
  113. },
  114. close(trigger) {
  115. if (this.data.autoClose) {
  116. this.setData({ visible: false });
  117. }
  118. this.triggerEvent('close', { trigger });
  119. },
  120. onVisibleChange() {
  121. this.close('overlay');
  122. },
  123. handleClose() {
  124. this.close('close-btn');
  125. },
  126. handleSelect(e) {
  127. const { date, year, month } = e.currentTarget.dataset;
  128. if (date.type === 'disabled')
  129. return;
  130. const rawValue = this.base.select({ cellType: date.type, year, month, date: date.day });
  131. const value = this.toTime(rawValue);
  132. this.calcMonths();
  133. if (this.data.confirmBtn == null) {
  134. if (this.data.type === 'single' || rawValue.length === 2) {
  135. this.setData({ visible: false });
  136. this._trigger('change', { value });
  137. }
  138. }
  139. this.triggerEvent('select', { value });
  140. },
  141. onTplButtonTap() {
  142. const rawValue = this.base.getTrimValue();
  143. const value = this.toTime(rawValue);
  144. this.close('confirm-btn');
  145. this._trigger('confirm', { value });
  146. },
  147. toTime(val) {
  148. if (Array.isArray(val)) {
  149. return val.map((item) => item.getTime());
  150. }
  151. return val.getTime();
  152. },
  153. };
  154. }
  155. };
  156. Calendar = __decorate([
  157. wxComponent()
  158. ], Calendar);
  159. export default Calendar;