office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
198 lines (196 loc) • 9.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Label_1 = require("../../Label");
var stylesImport = require("./Slider.scss");
var styles = stylesImport;
var ValuePosition;
(function (ValuePosition) {
ValuePosition[ValuePosition["Previous"] = 0] = "Previous";
ValuePosition[ValuePosition["Next"] = 1] = "Next";
})(ValuePosition = exports.ValuePosition || (exports.ValuePosition = {}));
var Slider = (function (_super) {
tslib_1.__extends(Slider, _super);
function Slider(props) {
var _this = _super.call(this, props) || this;
_this._warnMutuallyExclusive({
'value': 'defaultValue'
});
_this._id = Utilities_1.getId('Slider');
var value = props.value || props.defaultValue || props.min;
_this.state = {
value: value,
renderedValue: value
};
return _this;
}
/**
* Invoked when a component is receiving new props. This method is not called for the initial render.
*/
Slider.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.value !== undefined) {
var value = Math.max(newProps.min, Math.min(newProps.max, newProps.value));
this.setState({
value: value,
renderedValue: value
});
}
};
Slider.prototype.render = function () {
var _a = this.props, ariaLabel = _a.ariaLabel, className = _a.className, disabled = _a.disabled, label = _a.label, max = _a.max, min = _a.min, showValue = _a.showValue, buttonProps = _a.buttonProps;
var _b = this.state, value = _b.value, renderedValue = _b.renderedValue;
var thumbOffsetPercent = (renderedValue - min) / (max - min) * 100;
var onMouseDownProp = disabled ? {} : { onMouseDown: this._onMouseDownOrTouchStart };
var onTouchStartProp = disabled ? {} : { onTouchStart: this._onMouseDownOrTouchStart };
var onKeyDownProp = disabled ? {} : { onKeyDown: this._onKeyDown };
return (React.createElement("div", { className: Utilities_1.css('ms-Slider', styles.root, className, (_c = {},
_c['ms-Slider-enabled ' + styles.rootIsEnabled] = !disabled,
_c['ms-Slider-disabled ' + styles.rootIsDisabled] = disabled,
_c)), ref: 'root' },
label && (React.createElement(Label_1.Label, tslib_1.__assign({ className: styles.titleLabel }, ariaLabel ? {} : { 'htmlFor': this._id }), label)),
React.createElement("div", { className: Utilities_1.css('ms-Slider-container', styles.container) },
React.createElement("button", tslib_1.__assign({ "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, onMouseDownProp, onTouchStartProp, onKeyDownProp, buttonProps, { className: Utilities_1.css('ms-Slider-slideBox', styles.slideBox, buttonProps.className, (_d = {
'ms-Slider-showValue': !!showValue
},
_d['ms-Slider-showTransitions ' + styles.showTransitions] = (renderedValue === value),
_d)), id: this._id, disabled: disabled, type: 'button', role: 'slider' }),
React.createElement("div", { ref: 'sliderLine', className: Utilities_1.css('ms-Slider-line', styles.line) },
React.createElement("span", tslib_1.__assign({ ref: 'thumb', className: Utilities_1.css('ms-Slider-thumb', styles.thumb) }, ariaLabel ? { 'aria-label': ariaLabel } : {}, { style: Utilities_1.getRTL() ?
{ 'right': thumbOffsetPercent + '%' } :
{ 'left': thumbOffsetPercent + '%' } })),
React.createElement("span", { className: Utilities_1.css('ms-Slider-active', styles.activeSection), style: { 'width': thumbOffsetPercent + '%' } }),
React.createElement("span", { className: Utilities_1.css('ms-Slider-inactive', styles.inactiveSection), style: { 'width': (100 - thumbOffsetPercent) + '%' } }))),
showValue && React.createElement(Label_1.Label, { className: Utilities_1.css('ms-Slider-value', styles.valueLabel) }, value))));
var _c, _d;
};
Slider.prototype.focus = function () {
if (this.refs.thumb) {
this.refs.thumb.focus();
}
};
Object.defineProperty(Slider.prototype, "value", {
get: function () {
return this.state.value;
},
enumerable: true,
configurable: true
});
Slider.prototype._onMouseDownOrTouchStart = function (event) {
if (event.type === 'mousedown') {
this._events.on(window, 'mousemove', this._onMouseMoveOrTouchMove, true);
this._events.on(window, 'mouseup', this._onMouseUpOrTouchEnd, true);
}
else if (event.type === 'touchstart') {
this._events.on(window, 'touchmove', this._onMouseMoveOrTouchMove, true);
this._events.on(window, 'touchend', this._onMouseUpOrTouchEnd, true);
}
this._onMouseMoveOrTouchMove(event, true);
};
Slider.prototype._onMouseMoveOrTouchMove = function (event, suppressEventCancelation) {
var _a = this.props, max = _a.max, min = _a.min, step = _a.step;
var steps = (max - min) / step;
var sliderPositionRect = this.refs.sliderLine.getBoundingClientRect();
var sliderLength = sliderPositionRect.width;
var stepLength = sliderLength / steps;
var currentSteps;
if (event.type === 'mousedown' || event.type === 'mousemove') {
currentSteps = Utilities_1.getRTL() ?
(sliderPositionRect.right - event.clientX) / stepLength :
(event.clientX - sliderPositionRect.left) / stepLength;
}
else if (event.type === 'touchstart' || event.type === 'touchmove') {
currentSteps = Utilities_1.getRTL() ?
(sliderPositionRect.right - event.touches[0].clientX) / stepLength :
(event.touches[0].clientX - sliderPositionRect.left) / stepLength;
}
var currentValue;
var renderedValue;
// The value shouldn't be bigger than max or be smaller than min.
if (currentSteps > Math.floor(steps)) {
renderedValue = currentValue = max;
}
else if (currentSteps < 0) {
renderedValue = currentValue = min;
}
else {
renderedValue = min + step * currentSteps;
currentValue = min + step * Math.round(currentSteps);
}
this._updateValue(currentValue, renderedValue);
if (!suppressEventCancelation) {
event.preventDefault();
event.stopPropagation();
}
};
Slider.prototype._updateValue = function (value, renderedValue) {
var _this = this;
var valueChanged = value !== this.state.value;
this.setState({
value: value,
renderedValue: renderedValue
}, function () {
if (valueChanged && _this.props.onChange) {
_this.props.onChange(_this.state.value);
}
});
};
Slider.prototype._onMouseUpOrTouchEnd = function () {
// Synchronize the renderedValue to the actual value.
this.setState({
renderedValue: this.state.value
});
this._events.off();
};
Slider.prototype._onKeyDown = function (event) {
var value = this.state.value;
var _a = this.props, max = _a.max, min = _a.min, step = _a.step;
var diff = 0;
switch (event.which) {
case Utilities_1.getRTLSafeKeyCode(37 /* left */):
case 40 /* down */:
diff = -step;
break;
case Utilities_1.getRTLSafeKeyCode(39 /* right */):
case 38 /* up */:
diff = step;
break;
case 36 /* home */:
value = min;
break;
case 35 /* end */:
value = max;
break;
default:
return;
}
var newValue = Math.min(max, Math.max(min, value + diff));
this._updateValue(newValue, newValue);
event.preventDefault();
event.stopPropagation();
};
return Slider;
}(Utilities_1.BaseComponent));
Slider.defaultProps = {
step: 1,
min: 0,
max: 10,
showValue: true,
disabled: false,
buttonProps: {}
};
tslib_1.__decorate([
Utilities_1.autobind
], Slider.prototype, "_onMouseDownOrTouchStart", null);
tslib_1.__decorate([
Utilities_1.autobind
], Slider.prototype, "_onMouseMoveOrTouchMove", null);
tslib_1.__decorate([
Utilities_1.autobind
], Slider.prototype, "_onMouseUpOrTouchEnd", null);
tslib_1.__decorate([
Utilities_1.autobind
], Slider.prototype, "_onKeyDown", null);
exports.Slider = Slider;
//# sourceMappingURL=Slider.js.map