index.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. import { __awaiter, __generator } from "tslib";
  2. import { Component, triggerEvent, getValueFromProps } from '../_util/simply';
  3. import equal from 'fast-deep-equal';
  4. import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
  5. import { sliderDefaultProps } from './props';
  6. import createValue from '../mixins/value';
  7. Component(sliderDefaultProps, {
  8. getInstance: function () {
  9. if (this.$id) {
  10. return my;
  11. }
  12. return this;
  13. },
  14. formatValue: function (val) {
  15. var _a = getValueFromProps(this, [
  16. 'min',
  17. 'max',
  18. 'step',
  19. 'range',
  20. ]), min = _a[0], max = _a[1], step = _a[2], range = _a[3];
  21. var value = this.fitSliderValue(val, min, max, step, range);
  22. value = this.getRoundedValue(value, step);
  23. return value;
  24. },
  25. getRoundedValue: function (value, step) {
  26. if (step === void 0) { step = 1; }
  27. if (value === undefined) {
  28. return 0;
  29. }
  30. if (typeof value === 'number') {
  31. return Math.round(value / step) * step;
  32. }
  33. return [
  34. Math.round(value[0] / step) * step,
  35. Math.round(value[1] / step) * step,
  36. ];
  37. },
  38. setSliderStyleByValue: function (roundedValue) {
  39. var leftValue = 0;
  40. var rightValue = 0;
  41. var _a = getValueFromProps(this, [
  42. 'min',
  43. 'max',
  44. ]), minFromProps = _a[0], maxFromProps = _a[1];
  45. var max = maxFromProps !== null && maxFromProps !== void 0 ? maxFromProps : sliderDefaultProps.max;
  46. var min = minFromProps !== null && minFromProps !== void 0 ? minFromProps : sliderDefaultProps.min;
  47. if (roundedValue !== undefined) {
  48. if (typeof roundedValue === 'number') {
  49. leftValue = min;
  50. rightValue = roundedValue;
  51. }
  52. else {
  53. leftValue = roundedValue[0];
  54. rightValue = roundedValue[1];
  55. }
  56. }
  57. // FIX_ME when min and max is equal
  58. var width = ((rightValue - leftValue) / (max - min)) * 100;
  59. var left = ((leftValue - min) / (max - min)) * 100;
  60. this.setData({
  61. sliderLeft: left,
  62. sliderWidth: width,
  63. });
  64. },
  65. setTickList: function () {
  66. var _a = getValueFromProps(this, [
  67. 'step',
  68. 'min',
  69. 'max',
  70. 'showTicks',
  71. ]), step = _a[0], min = _a[1], max = _a[2], showTicks = _a[3];
  72. if (!showTicks) {
  73. return;
  74. }
  75. var tickList = [];
  76. var stepCount = (max - min) / step;
  77. for (var i = 0; i <= stepCount; i += 1) {
  78. tickList.push({
  79. left: i * (100 / stepCount),
  80. value: i * step + min,
  81. });
  82. }
  83. this.setData({
  84. tickList: tickList,
  85. });
  86. },
  87. onTouchChanged: function (e, type) {
  88. return __awaiter(this, void 0, void 0, function () {
  89. var changeMoving, rect, _a, min, max, range, touchPosition, value, currentValue, leftValue, rightValue, leftDistance, rightDistance, isFarFromLeft, farValue;
  90. var _this = this;
  91. return __generator(this, function (_b) {
  92. switch (_b.label) {
  93. case 0:
  94. if (getValueFromProps(this, 'disabled')) {
  95. return [2 /*return*/];
  96. }
  97. changeMoving = function (params) {
  98. var newParams = {};
  99. for (var key in params) {
  100. if (params[key] !== _this.data[key]) {
  101. newParams[key] = params[key];
  102. }
  103. }
  104. if (Object.keys(newParams).length > 0) {
  105. _this.setData(newParams);
  106. }
  107. };
  108. return [4 /*yield*/, this.getRect(e)];
  109. case 1:
  110. rect = _b.sent();
  111. if (!rect)
  112. return [2 /*return*/];
  113. _a = getValueFromProps(this, [
  114. 'min',
  115. 'max',
  116. 'range',
  117. ]), min = _a[0], max = _a[1], range = _a[2];
  118. touchPosition = (rect.touch.pageX - rect.element.left) / rect.element.width;
  119. value = min + touchPosition * (max - min);
  120. if (!range) {
  121. this.update(value, {}, !this.isControlled(), true);
  122. changeMoving({ changingEnd: true });
  123. }
  124. else {
  125. currentValue = this.getValue();
  126. leftValue = currentValue[0];
  127. rightValue = currentValue[1];
  128. leftDistance = Math.abs(leftValue - value);
  129. rightDistance = Math.abs(rightValue - value);
  130. isFarFromLeft = leftDistance > rightDistance;
  131. farValue = isFarFromLeft ? leftValue : rightValue;
  132. this.update([value, farValue], {}, !this.isControlled(), 'onChange');
  133. if (isFarFromLeft) {
  134. changeMoving({ changingEnd: true });
  135. }
  136. else {
  137. changeMoving({ changingStart: true });
  138. }
  139. }
  140. if (type === 'end') {
  141. changeMoving({ changingEnd: false, changingStart: false });
  142. triggerEvent(this, 'afterChange', this.getValue(), e);
  143. }
  144. return [2 /*return*/];
  145. }
  146. });
  147. });
  148. },
  149. getRect: function (e) {
  150. return __awaiter(this, void 0, void 0, function () {
  151. var element, touch;
  152. return __generator(this, function (_a) {
  153. switch (_a.label) {
  154. case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), "#ant-slider-id-".concat(this.$id || ''))];
  155. case 1:
  156. element = _a.sent();
  157. touch = e.changedTouches[0];
  158. if (element) {
  159. return [2 /*return*/, {
  160. touch: {
  161. pageX: touch.pageX,
  162. },
  163. element: {
  164. left: element.left,
  165. width: element.width,
  166. },
  167. }];
  168. }
  169. return [2 /*return*/];
  170. }
  171. });
  172. });
  173. },
  174. cloneSliderValue: function (value) {
  175. if (typeof value === 'object') {
  176. return [value[0], value[1]];
  177. }
  178. return value;
  179. },
  180. isSliderValueEqual: function (value1, value2) {
  181. if (value1 === value2) {
  182. return true;
  183. }
  184. if (value1 === undefined || value2 === undefined) {
  185. return false;
  186. }
  187. if (typeof value1 === 'number' || typeof value2 == 'number') {
  188. return value1 === value2;
  189. }
  190. if (value1[0] === value2[0] && value1[1] === value2[1]) {
  191. return true;
  192. }
  193. return false;
  194. },
  195. fitSliderValue: function (value, min, max, step, isRange) {
  196. if (value === undefined || value === null) {
  197. if (isRange) {
  198. return [min, min];
  199. }
  200. else {
  201. return min !== null && min !== void 0 ? min : 0;
  202. }
  203. }
  204. if (typeof value === 'number') {
  205. if (value > max) {
  206. return max;
  207. }
  208. if (value < min) {
  209. return min;
  210. }
  211. return value;
  212. }
  213. var leftValue = Math.min(value[0], value[1]);
  214. var rightValue = Math.max(value[0], value[1]);
  215. return [
  216. Math.max(min, leftValue),
  217. Math.min(max, rightValue),
  218. ];
  219. },
  220. handleTrackTouchStart: function (e) {
  221. this.onTouchChanged(e, 'start');
  222. },
  223. handleTrackTouchMove: function (e) {
  224. this.onTouchChanged(e, 'move');
  225. },
  226. handleTrackTouchEnd: function (e) {
  227. this.onTouchChanged(e, 'end');
  228. },
  229. }, {
  230. sliderLeft: 0,
  231. sliderWidth: 0,
  232. tickList: [],
  233. changingStart: false,
  234. changingEnd: false,
  235. }, [
  236. createValue({
  237. transformValue: function (val, extra, needUpdate, emit) {
  238. if (needUpdate === void 0) { needUpdate = true; }
  239. var value = this.formatValue(val);
  240. if (needUpdate) {
  241. this.setSliderStyleByValue(value);
  242. this.setTickList();
  243. }
  244. this.onChangeValue =
  245. typeof this.onChangeValue === 'undefined'
  246. ? this.getValue()
  247. : this.onChangeValue;
  248. if (emit && !this.isSliderValueEqual(this.onChangeValue, value)) {
  249. this.onChangeValue = value;
  250. triggerEvent(this, 'change', value);
  251. }
  252. return {
  253. value: value,
  254. needUpdate: needUpdate,
  255. };
  256. },
  257. }),
  258. ], {
  259. onChangeValue: undefined,
  260. didUpdate: function (prevProps) {
  261. var _a = getValueFromProps(this, ['min', 'max', 'step', 'range', 'showTicks', 'value']), min = _a[0], max = _a[1], step = _a[2], range = _a[3], showTicks = _a[4], value = _a[5];
  262. if (!equal(min, prevProps.min) ||
  263. !equal(max, prevProps.max) ||
  264. !equal(step, prevProps.step) ||
  265. !equal(range, prevProps.range) ||
  266. !equal(showTicks, prevProps.showTicks)) {
  267. this.update(value);
  268. }
  269. },
  270. });