123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- 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);
- }
- },
- });
|