index.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. import { __awaiter, __generator } from "tslib";
  2. import { Component, triggerEvent, triggerEventOnly, triggerEventValues, getValueFromProps, } from '../_util/simply';
  3. import equal from 'fast-deep-equal';
  4. import { PickerDefaultProps } from './props';
  5. import { getMatchedItemByValue, getMatchedItemByIndex, getStrictMatchedItemByValue, } from './utils';
  6. import mixinValue from '../mixins/value';
  7. Component(PickerDefaultProps, {
  8. // visible受控判断
  9. isVisibleControlled: function () {
  10. return 'visible' in getValueFromProps(this);
  11. },
  12. initData: function () {
  13. var _this = this;
  14. var _a = getValueFromProps(this, [
  15. 'options',
  16. 'visible',
  17. 'defaultVisible',
  18. ]), options = _a[0], visible = _a[1], defaultVisible = _a[2];
  19. var columns = this.getterColumns(options);
  20. this.setData({
  21. columns: columns,
  22. }, function () {
  23. var formatValue = _this.getterFormatText();
  24. var selectedIndex = _this.getterSelectedIndex();
  25. _this.setData({
  26. formatValue: formatValue,
  27. selectedIndex: selectedIndex,
  28. visible: _this.isVisibleControlled() ? visible : defaultVisible,
  29. });
  30. });
  31. },
  32. getterColumns: function (options) {
  33. var columns = [];
  34. if (options.length > 0) {
  35. if (options.every(function (item) { return Array.isArray(item); })) {
  36. this.single = false;
  37. columns = options.slice();
  38. }
  39. else {
  40. this.single = true;
  41. columns = [options];
  42. }
  43. }
  44. return columns;
  45. },
  46. defaultFormat: function (value, column) {
  47. if (Array.isArray(column)) {
  48. return column
  49. .filter(function (c) { return c !== undefined; })
  50. .map(function (c) {
  51. if (typeof c === 'object') {
  52. return c.label;
  53. }
  54. return c;
  55. })
  56. .join('-');
  57. }
  58. return (column && column.label) || column || '';
  59. },
  60. getterFormatText: function () {
  61. var _a = getValueFromProps(this, [
  62. 'onFormat',
  63. 'formattedValueText',
  64. ]), onFormat = _a[0], formattedValueText = _a[1];
  65. if (typeof formattedValueText === 'string') {
  66. return formattedValueText;
  67. }
  68. var columns = this.data.columns;
  69. var realValue = this.getValue();
  70. var matchedColumn = getStrictMatchedItemByValue(columns, realValue, this.single).matchedColumn;
  71. var formatValueByProps = onFormat && onFormat(realValue, matchedColumn);
  72. if (formatValueByProps !== undefined && formatValueByProps !== null) {
  73. return formatValueByProps;
  74. }
  75. return this.defaultFormat(realValue, matchedColumn);
  76. },
  77. getterSelectedIndex: function () {
  78. var selectedIndex = [];
  79. var columns = this.data.columns;
  80. var realValue = this.getValue();
  81. var value = realValue || [];
  82. if (this.single) {
  83. value = [realValue];
  84. }
  85. var _loop_1 = function (i) {
  86. var column = columns[i];
  87. var compareValue = value[i];
  88. if (compareValue === undefined || compareValue === null) {
  89. selectedIndex[i] = 0;
  90. }
  91. var index = column.findIndex(function (c) {
  92. return c === compareValue || c.value === compareValue;
  93. });
  94. if (index === -1) {
  95. index = 0;
  96. }
  97. selectedIndex[i] = index;
  98. };
  99. for (var i = 0; i < columns.length; i++) {
  100. _loop_1(i);
  101. }
  102. return selectedIndex;
  103. },
  104. onOpen: function () {
  105. var disabled = getValueFromProps(this, 'disabled');
  106. if (!disabled) {
  107. this.tempSelectedIndex = null;
  108. var selectedIndex = this.getterSelectedIndex();
  109. this.setData({
  110. selectedIndex: selectedIndex,
  111. });
  112. this.triggerPicker(true);
  113. }
  114. },
  115. triggerPicker: function (visible) {
  116. this.setData({
  117. visible: visible,
  118. });
  119. triggerEvent(this, 'visibleChange', visible);
  120. },
  121. onMaskDismiss: function () {
  122. var maskClosable = getValueFromProps(this, 'maskClosable');
  123. if (!maskClosable) {
  124. return;
  125. }
  126. this.triggerPicker(false);
  127. triggerEventOnly(this, 'cancel', { detail: { type: 'mask' } });
  128. },
  129. onCancel: function () {
  130. this.triggerPicker(false);
  131. triggerEventOnly(this, 'cancel', { detail: { type: 'cancel' } });
  132. },
  133. onChange: function (e) {
  134. var selectedIndex = e.detail.value;
  135. this.tempSelectedIndex = selectedIndex;
  136. this.isChangingPickerView = true;
  137. var _a = getMatchedItemByIndex(this.data.columns, this.tempSelectedIndex, this.single), matchedColumn = _a.matchedColumn, matchedValues = _a.matchedValues;
  138. this.setData({
  139. selectedIndex: selectedIndex,
  140. });
  141. triggerEventValues(this, 'change', [matchedValues, matchedColumn], e);
  142. },
  143. onOk: function () {
  144. return __awaiter(this, void 0, void 0, function () {
  145. var result, matchedColumn, matchedValues;
  146. return __generator(this, function (_a) {
  147. if (this.tempSelectedIndex) {
  148. result = getMatchedItemByIndex(this.data.columns, this.tempSelectedIndex, this.single);
  149. }
  150. else {
  151. result = getMatchedItemByValue(this.data.columns, this.getValue(), this.single);
  152. }
  153. matchedColumn = result.matchedColumn, matchedValues = result.matchedValues;
  154. this.triggerPicker(false);
  155. if (!this.isControlled()) {
  156. this.update(matchedValues);
  157. }
  158. triggerEventValues(this, 'ok', [matchedValues, matchedColumn]);
  159. return [2 /*return*/];
  160. });
  161. });
  162. },
  163. }, {
  164. formatValue: '',
  165. columns: [],
  166. visible: false,
  167. selectedIndex: [],
  168. }, [
  169. mixinValue({
  170. transformValue: function (value) {
  171. return {
  172. needUpdate: true,
  173. value: value === undefined ? [] : value,
  174. };
  175. },
  176. }),
  177. ], {
  178. tempSelectedIndex: null,
  179. single: false,
  180. isChangingPickerView: false,
  181. onInit: function () {
  182. this.initData();
  183. },
  184. didUpdate: function (prevProps) {
  185. var _this = this;
  186. var options = getValueFromProps(this, 'options');
  187. if (!equal(options, prevProps.options)) {
  188. var newColums = this.getterColumns(options);
  189. this.setData({
  190. columns: newColums,
  191. }, function () {
  192. // 如果是在滚动过程中columns发生变化,以onChange里抛出的selectedIndex为准
  193. if (!_this.isChangingPickerView) {
  194. _this.tempSelectedIndex = null;
  195. var selectedIndex = _this.getterSelectedIndex();
  196. _this.setData({
  197. selectedIndex: selectedIndex,
  198. });
  199. }
  200. });
  201. }
  202. var value = getValueFromProps(this, 'value');
  203. if (!equal(prevProps.value, value)) {
  204. var selectedIndex = this.getterSelectedIndex();
  205. this.tempSelectedIndex = null;
  206. this.setData({
  207. selectedIndex: selectedIndex,
  208. });
  209. }
  210. var visible = getValueFromProps(this, 'visible');
  211. if (!equal(prevProps.visible, visible)) {
  212. this.setData({ visible: visible });
  213. }
  214. var formatValue = this.getterFormatText();
  215. var formattedValueText = getValueFromProps(this, 'formattedValueText');
  216. if (formatValue !== this.data.formatValue ||
  217. prevProps.formattedValueText !== formattedValueText) {
  218. this.setData({
  219. formatValue: formatValue,
  220. });
  221. }
  222. this.isChangingPickerView = false;
  223. },
  224. });