choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
236 lines (198 loc) • 7.66 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _tslib = require("tslib");
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _mobxReact = require("mobx-react");
var _NumberField2 = require("../number-field/NumberField");
var _autobind = _interopRequireDefault(require("../_util/autobind"));
var _EventManager = _interopRequireDefault(require("../_util/EventManager"));
var _enum = require("../data-set/enum");
function _createSuper(Derived) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
return function () {
var Super = (0, _getPrototypeOf2["default"])(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return (0, _possibleConstructorReturn2["default"])(this, result);
};
}
var Range =
/*#__PURE__*/
function (_NumberField) {
(0, _inherits2["default"])(Range, _NumberField);
var _super = _createSuper(Range);
function Range() {
var _this;
(0, _classCallCheck2["default"])(this, Range);
_this = _super.apply(this, arguments);
_this.dragEvent = new _EventManager["default"](typeof window === 'undefined' ? undefined : document);
_this.type = 'range';
return _this;
}
(0, _createClass2["default"])(Range, [{
key: "getFieldType",
value: function getFieldType() {
return _enum.FieldType.number;
}
}, {
key: "getOmitPropsKeys",
value: function getOmitPropsKeys() {
return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Range.prototype), "getOmitPropsKeys", this).call(this).concat(['vertical']);
}
}, {
key: "getValue",
value: function getValue() {
return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Range.prototype), "getValue", this).call(this) || 0;
}
}, {
key: "getWrapperClassNames",
value: function getWrapperClassNames() {
var vertical = this.props.vertical,
prefixCls = this.prefixCls;
return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Range.prototype), "getWrapperClassNames", this).call(this, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-vertical"), vertical));
}
}, {
key: "renderWrapper",
value: function renderWrapper() {
return _react["default"].createElement("label", (0, _extends2["default"])({
key: "wrapper"
}, this.getWrapperProps()), _react["default"].createElement("input", (0, _extends2["default"])({}, this.getOtherProps(), {
value: this.getValue()
})), this.renderTrack(), this.renderFloatLabel());
}
}, {
key: "renderTrack",
value: function renderTrack() {
var percent = this.getPercent();
var vertical = this.props.vertical,
prefixCls = this.prefixCls;
return _react["default"].createElement("div", {
className: "".concat(prefixCls, "-track"),
onMouseDown: this.readOnly || this.disabled ? undefined : this.handleTrackClick
}, _react["default"].createElement("div", {
className: "".concat(prefixCls, "-draghandle"),
style: vertical ? {
bottom: percent
} : {
left: percent
}
}), _react["default"].createElement("div", {
className: "".concat(prefixCls, "-selection"),
style: vertical ? {
height: percent
} : {
width: percent
}
}));
}
}, {
key: "handleTrackClick",
value: function handleTrackClick(e) {
this.track = e.currentTarget;
this.handleDrag(e);
this.handleDragStart();
}
}, {
key: "handleDragStart",
value: function handleDragStart() {
this.dragEvent.addEventListener('mousemove', this.handleDrag).addEventListener('mouseup', this.handleDragEnd);
}
}, {
key: "handleDragEnd",
value: function handleDragEnd() {
this.dragEvent.removeEventListener('mousemove', this.handleDrag).removeEventListener('mouseup', this.handleDragEnd);
}
}, {
key: "handleDrag",
value: function handleDrag(e) {
var track = this.track;
var vertical = this.props.vertical;
var max = this.getProp('max');
var min = this.getProp('min');
var step = this.getProp('step');
var _track$getBoundingCli = track.getBoundingClientRect(),
bottom = _track$getBoundingCli.bottom,
left = _track$getBoundingCli.left;
var length = vertical ? bottom - e.clientY : e.clientX - left;
var totalLength = vertical ? track.clientHeight : track.clientWidth;
var oneStepLength = 1 / ((max - min) / step) * totalLength;
var value = min;
if (length <= 0) {
value = min;
} else if (length >= totalLength) {
value = max;
} else {
value = Math.round(length / oneStepLength) * step + min;
}
this.setValue(value);
}
}, {
key: "getPercent",
value: function getPercent() {
var value = this.getValue();
var max = this.getProp('max');
var min = this.getProp('min');
if (value <= min) {
return 0;
}
if (value >= max) {
return '100%';
}
return "".concat((value - min) / (max - min) * 100, "%");
}
}]);
return Range;
}(_NumberField2.NumberField);
Range.displayName = 'Range';
Range.propTypes = (0, _objectSpread2["default"])({
/**
* 是否垂直方向
* @default
* false
*/
vertical: _propTypes["default"].bool
}, _NumberField2.NumberField.propTypes);
Range.defaultProps = (0, _objectSpread2["default"])({}, _NumberField2.NumberField.defaultProps, {
suffixCls: 'range',
min: 0,
step: 1,
max: 100,
vertical: false
});
(0, _tslib.__decorate)([_autobind["default"]], Range.prototype, "handleTrackClick", null);
(0, _tslib.__decorate)([_autobind["default"]], Range.prototype, "handleDragStart", null);
(0, _tslib.__decorate)([_autobind["default"]], Range.prototype, "handleDragEnd", null);
(0, _tslib.__decorate)([_autobind["default"]], Range.prototype, "handleDrag", null);
Range = (0, _tslib.__decorate)([_mobxReact.observer], Range);
var _default = Range;
exports["default"] = _default;
//# sourceMappingURL=Range.js.map