index.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. import { Component, triggerEvent, triggerEventValues, triggerEventOnly, getValueFromProps, } from '../../_util/simply';
  2. import { resolveEventValue, resolveEventValues } from '../../_util/platform';
  3. import { DateRangePickerDefaultProps } from './props';
  4. import dayjs from 'dayjs';
  5. import equal from 'fast-deep-equal';
  6. import { getRangeData, getDateByValue, getValueByDate, getValidValue, } from '../util';
  7. import computed from '../../mixins/computed';
  8. import mixinValue from '../../mixins/value';
  9. Component(DateRangePickerDefaultProps, {
  10. // visible受控判断
  11. isVisibleControlled: function () {
  12. return 'visible' in getValueFromProps(this);
  13. },
  14. computed: function () {
  15. var _a = this.data, currentStartDate = _a.currentStartDate, currentEndDate = _a.currentEndDate, pickerType = _a.pickerType;
  16. var format = getValueFromProps(this, 'format');
  17. if (pickerType)
  18. return {
  19. currentStartValueStr: currentStartDate
  20. ? dayjs(currentStartDate).format(format)
  21. : '',
  22. currentEndValueStr: currentEndDate
  23. ? dayjs(currentEndDate).format(format)
  24. : '',
  25. };
  26. },
  27. getMin: function (min) {
  28. return min ? dayjs(min) : dayjs().subtract(10, 'year');
  29. },
  30. getMax: function (max) {
  31. return max ? dayjs(max) : dayjs().add(10, 'year');
  32. },
  33. // didUpdate、弹窗打开、切换pickerType触发
  34. setCurrentValue: function (currentProps) {
  35. var _this = this;
  36. var pickerVisible = this.pickerVisible; // 隐藏状态下从CValue触发,展开状态使用当前数据
  37. var precision = currentProps.precision;
  38. var _a = this.data, pickerType = _a.pickerType, columns = _a.columns;
  39. var realValue = this.getValue();
  40. var _b = this.data, currentStartDate = _b.currentStartDate, currentEndDate = _b.currentEndDate;
  41. var currentStartDateByCValue = (realValue === null || realValue === void 0 ? void 0 : realValue[0]) || null;
  42. var currentEndDateByCValue = (realValue === null || realValue === void 0 ? void 0 : realValue[1]) || null;
  43. // 展开状态,说明在切换pickerType
  44. if (pickerVisible) {
  45. if (pickerType === 'start') {
  46. if (!currentStartDate) {
  47. currentStartDate = currentEndDate;
  48. }
  49. }
  50. else {
  51. // pickerType=end start已存在
  52. // 结束时间默认选中开始
  53. if (!currentEndDate) {
  54. currentEndDate = currentStartDate;
  55. }
  56. }
  57. }
  58. else {
  59. // 否则是在从cValue初始化
  60. currentStartDate = currentStartDateByCValue;
  61. currentEndDate = currentEndDateByCValue;
  62. // 开始默认取优先取当前时间,不在时间范围内取开始时间
  63. if (!currentStartDate) {
  64. var min = this.getMin(currentProps.min).toDate();
  65. var max = currentProps.max;
  66. currentStartDate = new Date();
  67. if ((min && dayjs(currentStartDate).isBefore(min, precision)) ||
  68. (max && dayjs(currentStartDate).isAfter(max, precision)) ||
  69. (currentEndDateByCValue &&
  70. currentStartDate > currentEndDateByCValue)) {
  71. currentStartDate = min;
  72. }
  73. }
  74. }
  75. var currentValue = getValueByDate(pickerType === 'start' ? currentStartDate : currentEndDate, precision);
  76. var newColumns = this.generateData(currentValue, currentProps);
  77. if (!equal(newColumns, columns)) {
  78. this.setData({ columns: newColumns }, function () {
  79. _this.setData({
  80. currentStartDate: currentStartDate,
  81. currentEndDate: currentEndDate,
  82. currentValue: currentValue,
  83. formattedValueText: _this.onFormat(),
  84. });
  85. });
  86. }
  87. else {
  88. this.setData({
  89. currentStartDate: currentStartDate,
  90. currentEndDate: currentEndDate,
  91. currentValue: currentValue,
  92. formattedValueText: this.onFormat(),
  93. });
  94. }
  95. },
  96. /**
  97. * 生成选项数据,didmound、picker change、打开弹窗、切换picker type触发
  98. */
  99. generateData: function (currentValue, currentProps) {
  100. var precision = currentProps.precision, propsMin = currentProps.min, propsMax = currentProps.max;
  101. var min = this.getMin(propsMin);
  102. var max = this.getMax(propsMax);
  103. if (max < min) {
  104. return [];
  105. }
  106. var currentPickerDay = dayjs();
  107. if (currentValue.length > 0) {
  108. currentPickerDay = dayjs(getDateByValue(currentValue));
  109. }
  110. if (currentPickerDay < min || currentPickerDay > max) {
  111. currentPickerDay = min;
  112. }
  113. var newColumns = getRangeData(precision, min, max, currentPickerDay, this.onFormatLabel.bind(this));
  114. return newColumns;
  115. },
  116. onChange: function (selectedIdx) {
  117. var _this = this;
  118. var selectedIndex = resolveEventValues(getValidValue(selectedIdx))[0];
  119. var _a = getValueFromProps(this, [
  120. 'format',
  121. 'precision',
  122. 'max',
  123. 'min',
  124. ]), format = _a[0], precision = _a[1], pmax = _a[2], pmin = _a[3];
  125. var date = getDateByValue(selectedIndex);
  126. var min = this.getMin(pmin);
  127. var max = this.getMax(pmax);
  128. if (dayjs(date).isBefore(min)) {
  129. date = min.toDate();
  130. selectedIndex = getValueByDate(date, precision);
  131. }
  132. if (dayjs(date).isAfter(max)) {
  133. date = max.toDate();
  134. selectedIndex = getValueByDate(date, precision);
  135. }
  136. var _b = this.data, pickerType = _b.pickerType, columns = _b.columns, currentEndDate = _b.currentEndDate, currentStartDate = _b.currentStartDate;
  137. var newData = {
  138. currentValue: selectedIndex,
  139. formattedValueText: this.onFormat(),
  140. };
  141. if (pickerType === 'start') {
  142. newData.currentStartDate = date;
  143. if (currentEndDate && dayjs(date).isAfter(currentEndDate)) {
  144. newData.currentEndDate = null;
  145. }
  146. }
  147. else {
  148. newData.currentEndDate = date;
  149. if (currentStartDate && dayjs(date).isBefore(currentStartDate)) {
  150. newData.currentStartDate = null;
  151. }
  152. }
  153. var newColumns = this.generateData(selectedIndex, getValueFromProps(this));
  154. if (!equal(newColumns, columns)) {
  155. this.setData({
  156. columns: newColumns,
  157. }, function () {
  158. _this.setData(newData);
  159. triggerEventValues(_this, 'pickerChange', [
  160. pickerType,
  161. date,
  162. dayjs(date).format(format),
  163. ]);
  164. });
  165. }
  166. else {
  167. this.setData(newData);
  168. triggerEventValues(this, 'pickerChange', [
  169. pickerType,
  170. date,
  171. dayjs(date).format(format),
  172. ]);
  173. }
  174. },
  175. onCancel: function (e) {
  176. triggerEventOnly(this, 'cancel', e);
  177. },
  178. onOk: function () {
  179. var format = getValueFromProps(this, 'format');
  180. var _a = this.data, currentStartDate = _a.currentStartDate, currentEndDate = _a.currentEndDate;
  181. var realValue = [currentStartDate, currentEndDate];
  182. if (!this.isControlled()) {
  183. this.update(realValue);
  184. }
  185. triggerEventValues(this, 'ok', [
  186. realValue,
  187. realValue.map(function (v) { return dayjs(v).format(format); }),
  188. ]);
  189. },
  190. onFormatLabel: function (type, value) {
  191. var onFormatLabel = getValueFromProps(this, 'onFormatLabel');
  192. var formatValueByProps = onFormatLabel && onFormatLabel(type, value);
  193. if (formatValueByProps !== undefined && formatValueByProps !== null) {
  194. return String(formatValueByProps);
  195. }
  196. return this.defaultFormatLabel(type, value);
  197. },
  198. defaultFormatLabel: function (type, value) {
  199. var suffixMap = {
  200. year: '年',
  201. month: '月',
  202. day: '日',
  203. hour: '时',
  204. minute: '分',
  205. second: '秒',
  206. };
  207. return "".concat(value).concat(suffixMap[type]);
  208. },
  209. defaultFormat: function (date, valueStrs) {
  210. var _a = getValueFromProps(this, [
  211. 'format',
  212. 'splitCharacter',
  213. ]), format = _a[0], splitCharacter = _a[1];
  214. if (format && valueStrs && valueStrs[0] && valueStrs[1]) {
  215. return valueStrs.join("".concat(splitCharacter));
  216. }
  217. return '';
  218. },
  219. onFormat: function () {
  220. var _a = getValueFromProps(this, [
  221. 'onFormat',
  222. 'format',
  223. ]), onFormat = _a[0], format = _a[1];
  224. var realValue = this.getValue();
  225. var formatValueByProps = onFormat &&
  226. onFormat(realValue, realValue
  227. ? realValue.map(function (v) { return (v ? dayjs(v).format(format) : null); })
  228. : null);
  229. if (formatValueByProps !== undefined && formatValueByProps !== null) {
  230. return formatValueByProps;
  231. }
  232. return this.defaultFormat(realValue, realValue
  233. ? realValue.map(function (v) { return (v ? dayjs(v).format(format) : null); })
  234. : null);
  235. },
  236. /**
  237. * 显示/隐藏切换
  238. * @param visible
  239. */
  240. onVisibleChange: function (visible) {
  241. if (!this.isVisibleControlled() && visible) {
  242. this.setData({ pickerType: 'start' });
  243. this.setCurrentValue(getValueFromProps(this));
  244. this.pickerVisible = visible;
  245. }
  246. triggerEvent(this, 'visibleChange', resolveEventValue(visible));
  247. },
  248. onChangeCurrentPickerType: function (e) {
  249. var type = e.currentTarget.dataset.type;
  250. var pickerType = this.data.pickerType;
  251. if (type !== pickerType) {
  252. this.setData({
  253. pickerType: type,
  254. });
  255. this.setCurrentValue(getValueFromProps(this));
  256. }
  257. },
  258. }, {
  259. currentValue: [],
  260. columns: [],
  261. pickerType: 'start',
  262. currentStartDate: null,
  263. currentEndDate: null,
  264. forceUpdate: 0,
  265. formattedValueText: '',
  266. }, [
  267. mixinValue({
  268. transformValue: function (value) {
  269. return {
  270. value: value && value[0] && value[1]
  271. ? [dayjs(value[0]).toDate(), dayjs(value[1]).toDate()]
  272. : undefined,
  273. needUpdate: true,
  274. };
  275. },
  276. }),
  277. computed(),
  278. ], {
  279. pickerVisible: false,
  280. didMount: function () {
  281. this.pickerVisible = false;
  282. var _a = getValueFromProps(this, [
  283. 'visible',
  284. 'defaultVisible',
  285. ]), visible = _a[0], defaultVisible = _a[1];
  286. this.setData({
  287. visible: this.isVisibleControlled() ? visible : defaultVisible,
  288. formattedValueText: this.onFormat(),
  289. });
  290. },
  291. didUpdate: function (prevProps, prevData) {
  292. var currentProps = getValueFromProps(this);
  293. var visible = getValueFromProps(this, 'visible');
  294. if (this.isVisibleControlled() && !equal(prevProps.visible, visible)) {
  295. this.setData({ visible: visible });
  296. this.setCurrentValue(currentProps);
  297. this.pickerVisible = visible;
  298. }
  299. if (!this.isEqualValue(prevData)) {
  300. this.setData({
  301. forceUpdate: this.data.forceUpdate + 1,
  302. formattedValueText: this.onFormat(),
  303. });
  304. if (this.pickerVisible) {
  305. // 展开状态才更新picker的数据,否则下次triggerVisible触发
  306. this.setCurrentValue(currentProps);
  307. }
  308. }
  309. },
  310. });