ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
247 lines (246 loc) • 10.4 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { Component } from 'react';
import { ToFixed, HasValue } from 'basic-helper';
import classnames from 'classnames';
import InputNumber from '../form-control/input-number';
/**
* 拖动的选择控件
*
* @export
* @class Ranger
* @extends {Component}
*/
var Ranger = /** @class */ (function (_super) {
__extends(Ranger, _super);
function Ranger(props) {
var _a;
var _this = _super.call(this, props) || this;
_this.handleWidth = 20;
_this.movingHandle = function (e) {
if (!_this.state.draping)
return;
var dragOriginX = _this.drapElemInfo.dragOriginX;
var touches = e.changedTouches || e;
var offsetX = touches[0] ? touches[0].pageX : touches.pageX;
var moveOffset = _this.isRevert ? dragOriginX - offsetX : offsetX - dragOriginX;
var currOffsetPer = Math.round(moveOffset / _this.rangerBodyWidth * 100 + _this.originalOffsetPercent);
if (currOffsetPer < 0)
currOffsetPer = 0;
if (currOffsetPer > 100)
currOffsetPer = 100;
_this.changeValue(_this.percentToVal(currOffsetPer));
};
_this.dragEnd = function () {
if (!_this.state.draping)
return;
var endX = _this.drapElemInfo.dragOriginX + _this.offsetPercent;
_this.drapElemInfo = __assign(__assign({}, _this.drapElemInfo), { dragOriginX: endX });
_this.mouseMoved();
_this.setEndPosition(_this.offsetPercent);
_this.setState({
draping: false
});
};
_this.isControl = props.hasOwnProperty('value');
var defaultValue = props.defaultValue || 0;
var range = props.range;
var min = range[0], max = range[1];
var isRevert = min > max;
if (isRevert)
_a = [min, max], max = _a[0], min = _a[1];
_this.isRevert = isRevert;
_this.max = max;
_this.min = min;
var defaultPosition = _this.valToPercent(defaultValue);
_this.originalOffsetPercent = defaultPosition;
_this.offsetPercent = defaultPosition;
_this.state = {
stateValue: defaultValue,
draping: false
};
_this.value = defaultValue;
_this.drapElemInfo = {
dragOriginX: 0,
elemOrigonX: 0
};
return _this;
}
Ranger.prototype.shouldUpdateComponent = function (nextState, nextProps) {
var isChange = this.isControl
? JSON.stringify(this.props) !== JSON.stringify(nextProps)
: JSON.stringify(this.state) !== JSON.stringify(nextState);
return isChange;
};
Ranger.prototype.componentDidMount = function () {
var _this = this;
setTimeout(function () {
_this.initData();
}, 50);
};
Ranger.prototype.initData = function () {
var _a = this, min = _a.min, max = _a.max;
this.drapElemInfo.dragElem = this.handle;
this.rangerBodyWidth = this.rangerContainer.offsetWidth;
this.preUnitPixel = this.rangerBodyWidth / (max - min);
};
Ranger.prototype.handleMouseDown = function (e) {
// e.preventDefault();
// e.stopPropagation();
var touches = e.changedTouches || e;
this.dragOriginX = touches[0] ? touches[0].pageX : touches.pageX;
this.drapElemInfo = __assign(__assign({}, this.drapElemInfo), { dragOriginX: this.dragOriginX });
this.setState({
draping: true
});
this.mouseMoving();
};
Ranger.prototype.mouseMoving = function () {
document.addEventListener('mousemove', this.movingHandle, false);
document.addEventListener('mouseup', this.dragEnd, false);
document.addEventListener('touchmove', this.movingHandle, false);
document.addEventListener('touchend', this.dragEnd, false);
};
Ranger.prototype.mouseMoved = function () {
document.removeEventListener('mousemove', this.movingHandle, false);
document.removeEventListener('mouseup', this.dragEnd, false);
document.removeEventListener('touchmove', this.movingHandle, false);
document.removeEventListener('touchend', this.dragEnd, false);
};
Ranger.prototype.percentToVal = function (percent) {
if (percent - 1 < -1)
return null;
var _a = this.props.basicUnit, basicUnit = _a === void 0 ? 1 : _a;
var _b = this, min = _b.min, max = _b.max;
var nextVal = Math.floor(percent * (max - min) / 100 + min) || 0;
if ((nextVal % basicUnit) === 0) {
return nextVal;
}
return null;
};
Ranger.prototype.valToPercent = function (val) {
if (val - 1 < -1)
return null;
var _a = this, min = _a.min, max = _a.max;
var _precent = +(ToFixed((val - min) * 100 / (max - min), 0)) || 0;
return _precent;
};
Ranger.prototype.setEndPosition = function (offsetPercent) {
this.originalOffsetPercent = offsetPercent;
// this.setState({
// originalOffsetPercent: offsetPercent
// });
};
Ranger.prototype.changeValue = function (_val, emitChangeEvent) {
if (emitChangeEvent === void 0) { emitChangeEvent = true; }
var val = _val;
if (!HasValue(val) || val - 1 < -1)
return;
var _a = this.props, disabled = _a.disabled, onChange = _a.onChange;
var stateValue = this.valueFilter();
if (disabled)
return;
var _b = this, min = _b.min, max = _b.max;
if (val < min)
val = min;
if (val > max)
val = max;
if (stateValue !== val) {
this.offsetPercent = this.valToPercent(val) || 0;
this.value = val;
if (emitChangeEvent)
onChange(val);
!this.isControl && this.setState({
stateValue: val
});
}
};
Ranger.prototype.plusAndLess = function (mark) {
var _a = this.props.basicUnit, basicUnit = _a === void 0 ? 1 : _a;
var stateValue = this.valueFilter();
var each = +basicUnit;
if (mark === '-')
each = -each;
if (this.isRevert)
each = -each;
var _val = stateValue + each;
this.changeValue(_val, true);
this.setEndPosition(this.valToPercent(_val));
};
Ranger.prototype.valueFilter = function () {
return this.isControl ? this.props.value || 0 : this.state.stateValue || 0;
};
Ranger.prototype.render = function () {
var _this = this;
var stateValue = this.valueFilter();
var _a = this.props, disabled = _a.disabled, precent = _a.precent, _b = _a.range, range = _b === void 0 ? [] : _b, withInput = _a.withInput, basicUnit = _a.basicUnit;
var draping = this.state.draping;
var handleStyle = this.isRevert ? {
marginRight: -this.handleWidth / 2,
right: this.offsetPercent + "%"
} : {
marginLeft: -this.handleWidth / 2,
left: this.offsetPercent + "%"
};
var _value = precent ? (stateValue / 10).toFixed(1) : stateValue.toFixed(0);
var classes = classnames('__ranger', disabled && 'disabled', draping && 'draping', withInput && 'with-input');
return (React.createElement("div", { className: classes },
React.createElement("div", { className: "disabled-mask" }),
React.createElement("div", { className: "ranger", onTouchStart: function (e) { return _this.handleMouseDown(e); }, onMouseDown: function (e) { return _this.handleMouseDown(e); } },
React.createElement("div", { className: "all-process", ref: function (c) {
if (c)
_this.rangerContainer = c;
} },
React.createElement("div", { className: "active-process", style: {
width: this.offsetPercent + "%"
} }),
React.createElement("div", { className: "handle", ref: function (h) {
if (h) {
_this.handle = h;
_this.handleWidth = h.offsetWidth;
}
}, style: handleStyle },
React.createElement("div", { className: "hide-value" },
React.createElement("span", { className: "text" },
_value,
precent ? '%' : ''),
React.createElement("span", { className: "caret" }))))),
withInput ? (React.createElement(InputNumber, { value: +stateValue, key: stateValue, inputable: false, precent: precent, numRange: [0, range[1]], unit: basicUnit, onChange: function (val) {
var compare = val - stateValue;
if (compare === 0)
return;
_this.plusAndLess(val - stateValue > 0 ? '+' : '-');
} })) : null));
};
Ranger.defaultProps = {
basicUnit: 1,
disabled: false,
precent: false,
withInput: true,
range: [0, 10]
};
return Ranger;
}(Component));
export default Ranger;