index.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. import { Component, triggerEvent, triggerEventOnly, triggerEventValues, getValueFromProps, } from '../_util/simply';
  2. import { resolveEventValue, resolveEventValues } from '../_util/platform';
  3. import { DatePickerDefaultProps } from './props';
  4. import dayjs from 'dayjs';
  5. import equal from 'fast-deep-equal';
  6. import { getRangeData, getDateByValue, getValueByDate, getValidValue, } from './util';
  7. import mixinValue from '../mixins/value';
  8. Component(DatePickerDefaultProps, {
  9. // visible受控判断
  10. isVisibleControlled: function () {
  11. return 'visible' in getValueFromProps(this);
  12. },
  13. // 当前选中的picker值,处理无cValue时的情况,优先取当前时间,不在时间范围内取开始时间
  14. getCurrentValueWithCValue: function (currentProps) {
  15. var realValue = this.getValue();
  16. var min = currentProps.min, max = currentProps.max, precision = currentProps.precision;
  17. if (realValue) {
  18. return getValueByDate(realValue, precision);
  19. }
  20. else {
  21. var now = new Date();
  22. if (!(min && dayjs(now).isBefore(dayjs(min), precision)) &&
  23. !(max && dayjs(now).isAfter(dayjs(max), precision))) {
  24. return getValueByDate(now, precision);
  25. }
  26. else {
  27. return getValueByDate(this.getMin(min).toDate(), precision);
  28. }
  29. }
  30. },
  31. getMin: function (min) {
  32. return min ? dayjs(min) : dayjs().subtract(10, 'year');
  33. },
  34. getMax: function (max) {
  35. return max ? dayjs(max) : dayjs().add(10, 'year');
  36. },
  37. /**
  38. * didUpdate、弹窗打开触发
  39. */
  40. setCurrentValue: function (currentProps) {
  41. var _this = this;
  42. var currentValue = this.getCurrentValueWithCValue(currentProps);
  43. var newColumns = this.generateData(currentValue, currentProps);
  44. if (!equal(newColumns, this.data.columns)) {
  45. this.setData({
  46. columns: newColumns,
  47. }, function () {
  48. _this.setData({
  49. currentValue: currentValue,
  50. formattedValueText: _this.onFormat(),
  51. });
  52. });
  53. }
  54. },
  55. // 生成选项数据,didmound、picker change、打开弹窗触发
  56. generateData: function (currentValue, currentProps) {
  57. var precision = currentProps.precision, propsMin = currentProps.min, propsMax = currentProps.max;
  58. var min = this.getMin(propsMin);
  59. var max = this.getMax(propsMax);
  60. if (max < min) {
  61. return [];
  62. }
  63. var currentPickerDay = dayjs();
  64. if (currentValue.length > 0) {
  65. currentPickerDay = dayjs(getDateByValue(currentValue));
  66. }
  67. if (currentPickerDay < min || currentPickerDay > max) {
  68. currentPickerDay = min;
  69. }
  70. var newColumns = getRangeData(precision, min, max, currentPickerDay, this.onFormatLabel.bind(this));
  71. return newColumns;
  72. },
  73. onFormatLabel: function (type, value) {
  74. var onFormatLabel = getValueFromProps(this, 'onFormatLabel');
  75. var formatValueByProps = onFormatLabel && onFormatLabel(type, value);
  76. if (formatValueByProps !== undefined && formatValueByProps !== null) {
  77. return String(formatValueByProps);
  78. }
  79. return this.defaultFormatLabel(type, value);
  80. },
  81. defaultFormatLabel: function (type, value) {
  82. var suffixMap = {
  83. year: '年',
  84. month: '月',
  85. day: '日',
  86. hour: '时',
  87. minute: '分',
  88. second: '秒',
  89. };
  90. return "".concat(value).concat(suffixMap[type]);
  91. },
  92. onChange: function (selectedIdx) {
  93. var _this = this;
  94. var _a = getValueFromProps(this, [
  95. 'min',
  96. 'max',
  97. 'format',
  98. 'precision',
  99. ]), pmin = _a[0], pmax = _a[1], format = _a[2], precision = _a[3];
  100. var selectedIndex = resolveEventValues(getValidValue(selectedIdx))[0];
  101. var date = getDateByValue(selectedIndex);
  102. var min = this.getMin(pmin);
  103. var max = this.getMax(pmax);
  104. if (dayjs(date).isBefore(min)) {
  105. date = min.toDate();
  106. selectedIndex = getValueByDate(date, precision);
  107. }
  108. if (dayjs(date).isAfter(max)) {
  109. date = max.toDate();
  110. selectedIndex = getValueByDate(date, precision);
  111. }
  112. var newColumns = this.generateData(selectedIndex, getValueFromProps(this));
  113. if (!equal(newColumns, this.data.columns)) {
  114. this.setData({
  115. columns: newColumns,
  116. }, function () {
  117. _this.setData({ currentValue: selectedIndex });
  118. var date = getDateByValue(selectedIndex);
  119. triggerEventValues(_this, 'pickerChange', [
  120. date,
  121. dayjs(date).format(format),
  122. ]);
  123. });
  124. }
  125. else {
  126. this.setData({ currentValue: selectedIndex });
  127. var date_1 = getDateByValue(selectedIndex);
  128. triggerEventValues(this, 'pickerChange', [
  129. date_1,
  130. dayjs(date_1).format(format),
  131. ]);
  132. }
  133. },
  134. onCancel: function (e) {
  135. triggerEventOnly(this, 'cancel', e);
  136. },
  137. onOk: function () {
  138. var currentValue = this.data.currentValue;
  139. var format = getValueFromProps(this, 'format');
  140. var date = getDateByValue(currentValue);
  141. if (!this.isControlled()) {
  142. this.update(date);
  143. }
  144. triggerEventValues(this, 'ok', [date, dayjs(date).format(format)]);
  145. },
  146. defaultFormat: function (value, valueStr) {
  147. var format = getValueFromProps(this, 'format');
  148. if (format && valueStr) {
  149. return valueStr;
  150. }
  151. return '';
  152. },
  153. onFormat: function () {
  154. var _a = getValueFromProps(this, [
  155. 'format',
  156. 'onFormat',
  157. ]), format = _a[0], onFormat = _a[1];
  158. var realValue = this.getValue();
  159. var formatValueByProps = onFormat &&
  160. onFormat(realValue, realValue ? dayjs(realValue).format(format) : null);
  161. if (formatValueByProps !== undefined && formatValueByProps !== null) {
  162. return formatValueByProps;
  163. }
  164. return this.defaultFormat(realValue, realValue ? dayjs(realValue).format(format) : null);
  165. },
  166. onVisibleChange: function (visible) {
  167. this.pickerVisible = visible;
  168. if (!this.isVisibleControlled() && visible) {
  169. this.setCurrentValue(getValueFromProps(this));
  170. }
  171. triggerEvent(this, 'visibleChange', resolveEventValue(visible));
  172. },
  173. }, {
  174. currentValue: [],
  175. formattedValueText: '',
  176. columns: [],
  177. forceUpdate: 0,
  178. visible: null,
  179. }, [
  180. mixinValue({
  181. transformValue: function (value) {
  182. return {
  183. value: value ? dayjs(value).toDate() : undefined,
  184. needUpdate: true,
  185. };
  186. },
  187. }),
  188. ], {
  189. pickerVisible: false,
  190. onInit: function () {
  191. this.pickerVisible = false;
  192. var _a = getValueFromProps(this, [
  193. 'visible',
  194. 'defaultVisible',
  195. ]), visible = _a[0], defaultVisible = _a[1];
  196. this.setData({
  197. visible: this.isVisibleControlled() ? visible : defaultVisible,
  198. formattedValueText: this.onFormat(),
  199. });
  200. },
  201. didUpdate: function (prevProps, prevData) {
  202. var currentProps = getValueFromProps(this);
  203. var visible = getValueFromProps(this, 'visible');
  204. if (this.isVisibleControlled() && !equal(prevProps.visible, visible)) {
  205. this.pickerVisible = visible;
  206. this.setData({ visible: visible });
  207. if (this.pickerVisible) {
  208. this.setCurrentValue(currentProps);
  209. }
  210. }
  211. if (!this.isEqualValue(prevData)) {
  212. this.setData({
  213. forceUpdate: this.data.forceUpdate + 1,
  214. formattedValueText: this.onFormat(),
  215. });
  216. // 展开状态才更新picker的数据,否则下次triggerVisible触发
  217. if (this.pickerVisible) {
  218. this.setCurrentValue(currentProps);
  219. }
  220. }
  221. },
  222. });