index.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. import equal from 'fast-deep-equal';
  2. import { sliderDefaultProps } from './props';
  3. import fmtEvent from '../_util/fmtEvent';
  4. import createValue from '../mixins/value';
  5. import '../_util/assert-component2';
  6. Component({
  7. props: sliderDefaultProps,
  8. mixins: [
  9. createValue({
  10. transformValue: function (val, extra, needUpdate, emit) {
  11. if (needUpdate === void 0) { needUpdate = true; }
  12. var value = this.formatValue(val);
  13. if (needUpdate) {
  14. this.setSliderStyleByValue(value);
  15. this.setTickList();
  16. }
  17. this.onChangeValue =
  18. typeof this.onChangeValue === 'undefined'
  19. ? this.getValue()
  20. : this.onChangeValue;
  21. if (emit &&
  22. this.props.onChange &&
  23. !this.isSliderValueEqual(this.onChangeValue, value)) {
  24. this.onChangeValue = value;
  25. this.props.onChange(value, fmtEvent(this.props));
  26. }
  27. return {
  28. value: value,
  29. needUpdate: needUpdate,
  30. };
  31. },
  32. }),
  33. ],
  34. data: {
  35. sliderLeft: 0,
  36. sliderWidth: 0,
  37. tickList: [],
  38. changingStart: false,
  39. changingEnd: false,
  40. },
  41. didUpdate: function (prevProps) {
  42. if (!equal(this.props.min, prevProps.min) ||
  43. !equal(this.props.max, prevProps.max) ||
  44. !equal(this.props.step, prevProps.step) ||
  45. !equal(this.props.range, prevProps.range) ||
  46. !equal(this.props.showTicks, prevProps.showTicks)) {
  47. this.update(this.props.value);
  48. }
  49. },
  50. methods: {
  51. onChangeValue: undefined,
  52. formatValue: function (val) {
  53. var value = this.fitSliderValue(val, this.props.min, this.props.max, this.props.step, this.props.range);
  54. value = this.getRoundedValue(value, this.props.step);
  55. return value;
  56. },
  57. getRoundedValue: function (value, step) {
  58. if (step === void 0) { step = 1; }
  59. if (value === undefined) {
  60. return 0;
  61. }
  62. if (typeof value === 'number') {
  63. return Math.round(value / step) * step;
  64. }
  65. return [
  66. Math.round(value[0] / step) * step,
  67. Math.round(value[1] / step) * step,
  68. ];
  69. },
  70. setSliderStyleByValue: function (roundedValue) {
  71. var _a, _b;
  72. var leftValue = 0;
  73. var rightValue = 0;
  74. var max = (_a = this.props.max) !== null && _a !== void 0 ? _a : sliderDefaultProps.max;
  75. var min = (_b = this.props.min) !== null && _b !== void 0 ? _b : sliderDefaultProps.min;
  76. if (roundedValue !== undefined) {
  77. if (typeof roundedValue === 'number') {
  78. leftValue = min;
  79. rightValue = roundedValue;
  80. }
  81. else {
  82. leftValue = roundedValue[0];
  83. rightValue = roundedValue[1];
  84. }
  85. }
  86. // FIX_ME when min and max is equal
  87. var width = ((rightValue - leftValue) / (max - min)) * 100;
  88. var left = ((leftValue - min) / (max - min)) * 100;
  89. this.setData({
  90. sliderLeft: left,
  91. sliderWidth: width,
  92. });
  93. },
  94. setTickList: function () {
  95. var _a = this.props, step = _a.step, min = _a.min, max = _a.max, showTicks = _a.showTicks;
  96. if (!showTicks) {
  97. return;
  98. }
  99. var tickList = [];
  100. var stepCount = (max - min) / step;
  101. for (var i = 0; i <= stepCount; i += 1) {
  102. tickList.push({
  103. left: i * (100 / stepCount),
  104. value: i * step + min,
  105. });
  106. }
  107. this.setData({
  108. tickList: tickList,
  109. });
  110. },
  111. onTouchChanged: function (e, type) {
  112. var _this = this;
  113. if (this.props.disabled) {
  114. return;
  115. }
  116. var changeMoving = function (params) {
  117. var newParams = {};
  118. for (var key in params) {
  119. if (params[key] !== _this.data[key]) {
  120. newParams[key] = params[key];
  121. }
  122. }
  123. if (Object.keys(newParams).length > 0) {
  124. _this.setData(newParams);
  125. }
  126. };
  127. if (e.currentTarget && e.changedTouches[0]) {
  128. // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  129. // @ts-ignore
  130. my.createSelectorQuery()
  131. .select("#".concat(e.currentTarget.id))
  132. .boundingClientRect()
  133. .exec(function (list) {
  134. var element = list[0];
  135. if (element) {
  136. var touch = e.changedTouches[0];
  137. var touchPosition = (touch.pageX - element.left) / element.width;
  138. var value = _this.props.min +
  139. touchPosition * (_this.props.max - _this.props.min);
  140. if (!_this.props.range) {
  141. _this.update(value, {}, !_this.isControlled(), true);
  142. changeMoving({ changingEnd: true });
  143. }
  144. else {
  145. var currentValue = _this.getValue();
  146. var leftValue = currentValue[0];
  147. var rightValue = currentValue[1];
  148. var leftDistance = Math.abs(leftValue - value);
  149. var rightDistance = Math.abs(rightValue - value);
  150. var isFarFromLeft = leftDistance > rightDistance;
  151. var farValue = isFarFromLeft ? leftValue : rightValue;
  152. _this.update([value, farValue], {}, !_this.isControlled(), 'onChange');
  153. if (isFarFromLeft) {
  154. changeMoving({ changingEnd: true });
  155. }
  156. else {
  157. changeMoving({ changingStart: true });
  158. }
  159. }
  160. }
  161. if (type === 'end') {
  162. changeMoving({ changingEnd: false, changingStart: false });
  163. if (_this.props.onAfterChange) {
  164. _this.props.onAfterChange(_this.getValue(), fmtEvent(_this.props, e));
  165. }
  166. }
  167. });
  168. }
  169. },
  170. cloneSliderValue: function (value) {
  171. if (typeof value === 'object') {
  172. return [value[0], value[1]];
  173. }
  174. return value;
  175. },
  176. isSliderValueEqual: function (value1, value2) {
  177. if (value1 === value2) {
  178. return true;
  179. }
  180. if (value1 === undefined || value2 === undefined) {
  181. return false;
  182. }
  183. if (typeof value1 === 'number' || typeof value2 == 'number') {
  184. return value1 === value2;
  185. }
  186. if (value1[0] === value2[0] && value1[1] === value2[1]) {
  187. return true;
  188. }
  189. return false;
  190. },
  191. fitSliderValue: function (value, min, max, step, isRange) {
  192. if (value === undefined) {
  193. if (isRange) {
  194. return [min, min];
  195. }
  196. else {
  197. return min !== null && min !== void 0 ? min : 0;
  198. }
  199. }
  200. if (typeof value === 'number') {
  201. if (value > max) {
  202. return max;
  203. }
  204. if (value < min) {
  205. return min;
  206. }
  207. return value;
  208. }
  209. var leftValue = Math.min(value[0], value[1]);
  210. var rightValue = Math.max(value[0], value[1]);
  211. return [
  212. Math.max(min, leftValue),
  213. Math.min(max, rightValue),
  214. ];
  215. },
  216. handleTrackTouchStart: function (e) {
  217. this.onTouchChanged(e, 'start');
  218. },
  219. handleTrackTouchMove: function (e) {
  220. this.onTouchChanged(e, 'move');
  221. },
  222. handleTrackTouchEnd: function (e) {
  223. this.onTouchChanged(e, 'end');
  224. },
  225. },
  226. });