choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
396 lines (333 loc) • 14.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = createSlider;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _noop = _interopRequireDefault(require("lodash/noop"));
var _addEventListener = _interopRequireDefault(require("../../../_util/addEventListener"));
var _warning = _interopRequireDefault(require("../../../_util/warning"));
var _Steps = _interopRequireDefault(require("./Steps"));
var _Marks = _interopRequireDefault(require("./Marks"));
var _Handle = _interopRequireDefault(require("../Handle"));
var utils = _interopRequireWildcard(require("../utils"));
var _excluded = ["index"];
function createSlider(Component) {
var _class;
return _class = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(ComponentEnhancer, _Component);
var _super = (0, _createSuper2["default"])(ComponentEnhancer);
function ComponentEnhancer(props) {
var _this;
(0, _classCallCheck2["default"])(this, ComponentEnhancer);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseDown", function (e) {
if (e.button !== 0) {
return;
}
var isVertical = _this.props.vertical;
var position = utils.getMousePosition(isVertical, e);
if (!utils.isEventFromHandle(e, _this.handlesRefs)) {
_this.dragOffset = 0;
} else {
var handlePosition = utils.getHandleCenterPosition(isVertical, e.target);
_this.dragOffset = position - handlePosition;
position = handlePosition;
}
_this.removeDocumentEvents();
_this.onStart(position);
_this.addDocumentMouseEvents();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTouchStart", function (e) {
if (utils.isNotTouchEvent(e)) return;
var isVertical = _this.props.vertical;
var position = utils.getTouchPosition(isVertical, e);
if (!utils.isEventFromHandle(e, _this.handlesRefs)) {
_this.dragOffset = 0;
} else {
var handlePosition = utils.getHandleCenterPosition(isVertical, e.target);
_this.dragOffset = position - handlePosition;
position = handlePosition;
}
_this.onStart(position);
_this.addDocumentTouchEvents();
utils.pauseEvent(e);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFocus", function (e) {
var _this$props = _this.props,
onFocus = _this$props.onFocus,
vertical = _this$props.vertical;
if (utils.isEventFromHandle(e, _this.handlesRefs)) {
var handlePosition = utils.getHandleCenterPosition(vertical, e.target);
_this.dragOffset = 0;
_this.onStart(handlePosition);
utils.pauseEvent(e);
if (onFocus) {
onFocus(e);
}
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function (e) {
var onBlur = _this.props.onBlur;
_this.onEnd(e);
if (onBlur) {
onBlur(e);
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseUp", function () {
if (_this.handlesRefs[_this.prevMovedHandleIndex]) {
_this.handlesRefs[_this.prevMovedHandleIndex].clickFocus();
}
_this.draggedFlag = true;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseMove", function (e) {
_this.draggedFlag = true;
if (!_this.sliderRef) {
_this.onEnd();
return;
}
var position = utils.getMousePosition(_this.props.vertical, e);
_this.onMove(e, position - _this.dragOffset);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTouchMove", function (e) {
if (utils.isNotTouchEvent(e) || !_this.sliderRef) {
_this.onEnd();
return;
}
var position = utils.getTouchPosition(_this.props.vertical, e);
_this.onMove(e, position - _this.dragOffset);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onKeyDown", function (e) {
if (_this.sliderRef && utils.isEventFromHandle(e, _this.handlesRefs)) {
_this.onKeyboard(e);
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "saveSlider", function (slider) {
_this.sliderRef = slider;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClickMarkLabel", function (e, value) {
e.stopPropagation();
_this.onChange({
value: value
});
});
if (process.env.NODE_ENV !== 'production') {
var step = props.step,
max = props.max,
min = props.min;
(0, _warning["default"])(step && Math.floor(step) === step ? (max - min) % step === 0 : true, 'Slider[max] - Slider[min] (%s) should be a multiple of Slider[step] (%s)', max - min, step);
}
_this.handlesRefs = {};
_this.draggedFlag = false;
return _this;
}
(0, _createClass2["default"])(ComponentEnhancer, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
if ((0, _get2["default"])((0, _getPrototypeOf2["default"])(ComponentEnhancer.prototype), "componentWillUnmount", this)) (0, _get2["default"])((0, _getPrototypeOf2["default"])(ComponentEnhancer.prototype), "componentWillUnmount", this).call(this);
this.removeDocumentEvents();
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
// Snapshot testing cannot handle refs, so be sure to null-check this.
this.document = this.sliderRef && this.sliderRef.ownerDocument;
}
}, {
key: "addDocumentTouchEvents",
value: function addDocumentTouchEvents() {
// just work for Chrome iOS Safari and Android Browser
this.onTouchMoveListener = (0, _addEventListener["default"])(this.document, 'touchmove', this.onTouchMove);
this.onTouchUpListener = (0, _addEventListener["default"])(this.document, 'touchend', this.onEnd);
}
}, {
key: "addDocumentMouseEvents",
value: function addDocumentMouseEvents() {
this.onMouseMoveListener = (0, _addEventListener["default"])(this.document, 'mousemove', this.onMouseMove);
this.onMouseUpListener = (0, _addEventListener["default"])(this.document, 'mouseup', this.onEnd);
}
}, {
key: "removeDocumentEvents",
value: function removeDocumentEvents() {
if (this.draggedFlag) {
/* eslint-disable no-unused-expressions */
this.onTouchMoveListener && this.onTouchMoveListener.remove();
this.onTouchUpListener && this.onTouchUpListener.remove();
this.onMouseMoveListener && this.onMouseMoveListener.remove();
this.onMouseUpListener && this.onMouseUpListener.remove();
/* eslint-enable no-unused-expressions */
this.draggedFlag = false;
}
}
}, {
key: "focus",
value: function focus() {
if (!this.props.disabled) {
this.handlesRefs[0].focus();
}
}
}, {
key: "blur",
value: function blur() {
if (!this.props.disabled) {
this.handlesRefs[0].blur();
}
}
}, {
key: "getSliderStart",
value: function getSliderStart() {
var slider = this.sliderRef;
var rect = slider.getBoundingClientRect();
return this.props.vertical ? rect.top : rect.left;
}
}, {
key: "getSliderLength",
value: function getSliderLength() {
var slider = this.sliderRef;
if (!slider) {
return 0;
}
var coords = slider.getBoundingClientRect();
return this.props.vertical ? coords.height : coords.width;
}
}, {
key: "calcValue",
value: function calcValue(offset) {
var _this$props2 = this.props,
vertical = _this$props2.vertical,
min = _this$props2.min,
max = _this$props2.max;
var ratio = Math.abs(Math.max(offset, 0) / this.getSliderLength());
var value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min;
return value;
}
}, {
key: "calcValueByPos",
value: function calcValueByPos(position) {
var pixelOffset = position - this.getSliderStart();
var nextValue = this.trimAlignValue(this.calcValue(pixelOffset));
return nextValue;
}
}, {
key: "calcOffset",
value: function calcOffset(value) {
var _this$props3 = this.props,
min = _this$props3.min,
max = _this$props3.max;
var ratio = (value - min) / (max - min);
return ratio * 100;
}
}, {
key: "saveHandle",
value: function saveHandle(index, handle) {
this.handlesRefs[index] = handle;
}
}, {
key: "render",
value: function render() {
var _classNames;
var _this$props4 = this.props,
prefixCls = _this$props4.prefixCls,
className = _this$props4.className,
marks = _this$props4.marks,
dots = _this$props4.dots,
step = _this$props4.step,
included = _this$props4.included,
disabled = _this$props4.disabled,
vertical = _this$props4.vertical,
min = _this$props4.min,
max = _this$props4.max,
children = _this$props4.children,
maximumTrackStyle = _this$props4.maximumTrackStyle,
style = _this$props4.style,
railStyle = _this$props4.railStyle,
dotStyle = _this$props4.dotStyle,
activeDotStyle = _this$props4.activeDotStyle;
var _get$call = (0, _get2["default"])((0, _getPrototypeOf2["default"])(ComponentEnhancer.prototype), "render", this).call(this),
tracks = _get$call.tracks,
handles = _get$call.handles;
var sliderClassName = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-with-marks"), Object.keys(marks).length), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-vertical"), vertical), (0, _defineProperty2["default"])(_classNames, className, className), _classNames));
return /*#__PURE__*/_react["default"].createElement("div", {
ref: this.saveSlider,
className: sliderClassName,
onTouchStart: disabled ? _noop["default"] : this.onTouchStart,
onMouseDown: disabled ? _noop["default"] : this.onMouseDown,
onMouseUp: disabled ? _noop["default"] : this.onMouseUp,
onKeyDown: disabled ? _noop["default"] : this.onKeyDown,
onFocus: disabled ? _noop["default"] : this.onFocus,
onBlur: disabled ? _noop["default"] : this.onBlur,
style: style
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefixCls, "-rail"),
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, maximumTrackStyle), railStyle)
}), tracks, /*#__PURE__*/_react["default"].createElement(_Steps["default"], {
prefixCls: prefixCls,
vertical: vertical,
marks: marks,
dots: dots,
step: step,
included: included,
lowerBound: this.getLowerBound(),
upperBound: this.getUpperBound(),
max: max,
min: min,
dotStyle: dotStyle,
activeDotStyle: activeDotStyle
}), handles, /*#__PURE__*/_react["default"].createElement(_Marks["default"], {
className: "".concat(prefixCls, "-mark"),
onClickLabel: disabled ? _noop["default"] : this.onClickMarkLabel,
vertical: vertical,
marks: marks,
included: included,
lowerBound: this.getLowerBound(),
upperBound: this.getUpperBound(),
max: max,
min: min
}), children);
}
}]);
return ComponentEnhancer;
}(Component), (0, _defineProperty2["default"])(_class, "displayName", "ComponentEnhancer(".concat(Component.displayName, ")")), (0, _defineProperty2["default"])(_class, "defaultProps", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, Component.defaultProps), {}, {
prefixCls: 'rc-slider',
className: '',
min: 0,
max: 100,
step: 1,
marks: {},
handle: function handle(_ref) {
var index = _ref.index,
restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
delete restProps.dragging;
return /*#__PURE__*/_react["default"].createElement(_Handle["default"], (0, _extends2["default"])({}, restProps, {
key: index
}));
},
onBeforeChange: _noop["default"],
onChange: _noop["default"],
onAfterChange: _noop["default"],
included: true,
disabled: false,
dots: false,
vertical: false,
trackStyle: [{}],
handleStyle: [{}],
railStyle: {},
dotStyle: {},
activeDotStyle: {}
})), _class;
}
//# sourceMappingURL=createSlider.js.map