271 lines
10 KiB
JavaScript
271 lines
10 KiB
JavaScript
import { __awaiter, __generator } from "tslib";
|
|
import { Component, triggerEvent, getValueFromProps } from '../_util/simply';
|
|
import equal from 'fast-deep-equal';
|
|
import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
|
|
import { sliderDefaultProps } from './props';
|
|
import createValue from '../mixins/value';
|
|
Component(sliderDefaultProps, {
|
|
getInstance: function () {
|
|
if (this.$id) {
|
|
return my;
|
|
}
|
|
return this;
|
|
},
|
|
formatValue: function (val) {
|
|
var _a = getValueFromProps(this, [
|
|
'min',
|
|
'max',
|
|
'step',
|
|
'range',
|
|
]), min = _a[0], max = _a[1], step = _a[2], range = _a[3];
|
|
var value = this.fitSliderValue(val, min, max, step, range);
|
|
value = this.getRoundedValue(value, step);
|
|
return value;
|
|
},
|
|
getRoundedValue: function (value, step) {
|
|
if (step === void 0) { step = 1; }
|
|
if (value === undefined) {
|
|
return 0;
|
|
}
|
|
if (typeof value === 'number') {
|
|
return Math.round(value / step) * step;
|
|
}
|
|
return [
|
|
Math.round(value[0] / step) * step,
|
|
Math.round(value[1] / step) * step,
|
|
];
|
|
},
|
|
setSliderStyleByValue: function (roundedValue) {
|
|
var leftValue = 0;
|
|
var rightValue = 0;
|
|
var _a = getValueFromProps(this, [
|
|
'min',
|
|
'max',
|
|
]), minFromProps = _a[0], maxFromProps = _a[1];
|
|
var max = maxFromProps !== null && maxFromProps !== void 0 ? maxFromProps : sliderDefaultProps.max;
|
|
var min = minFromProps !== null && minFromProps !== void 0 ? minFromProps : sliderDefaultProps.min;
|
|
if (roundedValue !== undefined) {
|
|
if (typeof roundedValue === 'number') {
|
|
leftValue = min;
|
|
rightValue = roundedValue;
|
|
}
|
|
else {
|
|
leftValue = roundedValue[0];
|
|
rightValue = roundedValue[1];
|
|
}
|
|
}
|
|
// FIX_ME when min and max is equal
|
|
var width = ((rightValue - leftValue) / (max - min)) * 100;
|
|
var left = ((leftValue - min) / (max - min)) * 100;
|
|
this.setData({
|
|
sliderLeft: left,
|
|
sliderWidth: width,
|
|
});
|
|
},
|
|
setTickList: function () {
|
|
var _a = getValueFromProps(this, [
|
|
'step',
|
|
'min',
|
|
'max',
|
|
'showTicks',
|
|
]), step = _a[0], min = _a[1], max = _a[2], showTicks = _a[3];
|
|
if (!showTicks) {
|
|
return;
|
|
}
|
|
var tickList = [];
|
|
var stepCount = (max - min) / step;
|
|
for (var i = 0; i <= stepCount; i += 1) {
|
|
tickList.push({
|
|
left: i * (100 / stepCount),
|
|
value: i * step + min,
|
|
});
|
|
}
|
|
this.setData({
|
|
tickList: tickList,
|
|
});
|
|
},
|
|
onTouchChanged: function (e, type) {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var changeMoving, rect, _a, min, max, range, touchPosition, value, currentValue, leftValue, rightValue, leftDistance, rightDistance, isFarFromLeft, farValue;
|
|
var _this = this;
|
|
return __generator(this, function (_b) {
|
|
switch (_b.label) {
|
|
case 0:
|
|
if (getValueFromProps(this, 'disabled')) {
|
|
return [2 /*return*/];
|
|
}
|
|
changeMoving = function (params) {
|
|
var newParams = {};
|
|
for (var key in params) {
|
|
if (params[key] !== _this.data[key]) {
|
|
newParams[key] = params[key];
|
|
}
|
|
}
|
|
if (Object.keys(newParams).length > 0) {
|
|
_this.setData(newParams);
|
|
}
|
|
};
|
|
return [4 /*yield*/, this.getRect(e)];
|
|
case 1:
|
|
rect = _b.sent();
|
|
if (!rect)
|
|
return [2 /*return*/];
|
|
_a = getValueFromProps(this, [
|
|
'min',
|
|
'max',
|
|
'range',
|
|
]), min = _a[0], max = _a[1], range = _a[2];
|
|
touchPosition = (rect.touch.pageX - rect.element.left) / rect.element.width;
|
|
value = min + touchPosition * (max - min);
|
|
if (!range) {
|
|
this.update(value, {}, !this.isControlled(), true);
|
|
changeMoving({ changingEnd: true });
|
|
}
|
|
else {
|
|
currentValue = this.getValue();
|
|
leftValue = currentValue[0];
|
|
rightValue = currentValue[1];
|
|
leftDistance = Math.abs(leftValue - value);
|
|
rightDistance = Math.abs(rightValue - value);
|
|
isFarFromLeft = leftDistance > rightDistance;
|
|
farValue = isFarFromLeft ? leftValue : rightValue;
|
|
this.update([value, farValue], {}, !this.isControlled(), 'onChange');
|
|
if (isFarFromLeft) {
|
|
changeMoving({ changingEnd: true });
|
|
}
|
|
else {
|
|
changeMoving({ changingStart: true });
|
|
}
|
|
}
|
|
if (type === 'end') {
|
|
changeMoving({ changingEnd: false, changingStart: false });
|
|
triggerEvent(this, 'afterChange', this.getValue(), e);
|
|
}
|
|
return [2 /*return*/];
|
|
}
|
|
});
|
|
});
|
|
},
|
|
getRect: function (e) {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var element, touch;
|
|
return __generator(this, function (_a) {
|
|
switch (_a.label) {
|
|
case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), "#ant-slider-id-".concat(this.$id || ''))];
|
|
case 1:
|
|
element = _a.sent();
|
|
touch = e.changedTouches[0];
|
|
if (element) {
|
|
return [2 /*return*/, {
|
|
touch: {
|
|
pageX: touch.pageX,
|
|
},
|
|
element: {
|
|
left: element.left,
|
|
width: element.width,
|
|
},
|
|
}];
|
|
}
|
|
return [2 /*return*/];
|
|
}
|
|
});
|
|
});
|
|
},
|
|
cloneSliderValue: function (value) {
|
|
if (typeof value === 'object') {
|
|
return [value[0], value[1]];
|
|
}
|
|
return value;
|
|
},
|
|
isSliderValueEqual: function (value1, value2) {
|
|
if (value1 === value2) {
|
|
return true;
|
|
}
|
|
if (value1 === undefined || value2 === undefined) {
|
|
return false;
|
|
}
|
|
if (typeof value1 === 'number' || typeof value2 == 'number') {
|
|
return value1 === value2;
|
|
}
|
|
if (value1[0] === value2[0] && value1[1] === value2[1]) {
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
fitSliderValue: function (value, min, max, step, isRange) {
|
|
if (value === undefined || value === null) {
|
|
if (isRange) {
|
|
return [min, min];
|
|
}
|
|
else {
|
|
return min !== null && min !== void 0 ? min : 0;
|
|
}
|
|
}
|
|
if (typeof value === 'number') {
|
|
if (value > max) {
|
|
return max;
|
|
}
|
|
if (value < min) {
|
|
return min;
|
|
}
|
|
return value;
|
|
}
|
|
var leftValue = Math.min(value[0], value[1]);
|
|
var rightValue = Math.max(value[0], value[1]);
|
|
return [
|
|
Math.max(min, leftValue),
|
|
Math.min(max, rightValue),
|
|
];
|
|
},
|
|
handleTrackTouchStart: function (e) {
|
|
this.onTouchChanged(e, 'start');
|
|
},
|
|
handleTrackTouchMove: function (e) {
|
|
this.onTouchChanged(e, 'move');
|
|
},
|
|
handleTrackTouchEnd: function (e) {
|
|
this.onTouchChanged(e, 'end');
|
|
},
|
|
}, {
|
|
sliderLeft: 0,
|
|
sliderWidth: 0,
|
|
tickList: [],
|
|
changingStart: false,
|
|
changingEnd: false,
|
|
}, [
|
|
createValue({
|
|
transformValue: function (val, extra, needUpdate, emit) {
|
|
if (needUpdate === void 0) { needUpdate = true; }
|
|
var value = this.formatValue(val);
|
|
if (needUpdate) {
|
|
this.setSliderStyleByValue(value);
|
|
this.setTickList();
|
|
}
|
|
this.onChangeValue =
|
|
typeof this.onChangeValue === 'undefined'
|
|
? this.getValue()
|
|
: this.onChangeValue;
|
|
if (emit && !this.isSliderValueEqual(this.onChangeValue, value)) {
|
|
this.onChangeValue = value;
|
|
triggerEvent(this, 'change', value);
|
|
}
|
|
return {
|
|
value: value,
|
|
needUpdate: needUpdate,
|
|
};
|
|
},
|
|
}),
|
|
], {
|
|
onChangeValue: undefined,
|
|
didUpdate: function (prevProps) {
|
|
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];
|
|
if (!equal(min, prevProps.min) ||
|
|
!equal(max, prevProps.max) ||
|
|
!equal(step, prevProps.step) ||
|
|
!equal(range, prevProps.range) ||
|
|
!equal(showTicks, prevProps.showTicks)) {
|
|
this.update(value);
|
|
}
|
|
},
|
|
});
|