react-sleek
Version:
React Sleek Component Library
207 lines (206 loc) • 7.65 kB
JavaScript
"use strict";
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 __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var typestyle_1 = require("typestyle");
var Colors_1 = require("../../Style/Colors");
var csx_1 = require("csx");
var Slider = /** @class */ (function (_super) {
__extends(Slider, _super);
function Slider(props) {
var _this = _super.call(this, props) || this;
_this.onTouchStart = function (event) {
event.preventDefault();
_this.moveData.active = true;
_this.moveData.start = _this.getPosition(event);
};
_this.onTouchMove = function (event) {
event.preventDefault();
if (_this.moveData.active === false) {
return;
}
_this.moveData.current = _this.getPosition(event);
_this.adjustValue(true);
};
_this.onTouchEnd = function (event) {
event.preventDefault();
if (_this.moveData.active === false) {
return;
}
_this.moveData.current = _this.getPosition(event);
_this.adjustValue(false);
_this.moveData.active = false;
};
_this.onMouseDown = function (event) {
event.preventDefault();
_this.moveData.active = true;
_this.moveData.start = _this.getPosition(event);
};
_this.onMouseMove = function (event) {
event.preventDefault();
if (_this.moveData.active === false) {
return;
}
_this.moveData.current = _this.getPosition(event);
_this.adjustValue(true);
};
_this.onMouseUp = function (event) {
event.preventDefault();
if (_this.moveData.active === false) {
return;
}
_this.moveData.current = _this.getPosition(event);
_this.adjustValue(false);
_this.moveData.active = false;
};
_this.onMouseCancel = function (event) {
_this.moveData = {
active: false,
start: 0,
current: 0,
};
_this.setState({
value: _this.state.preview,
});
};
_this.getPosition = function (event) {
if (event && event.clientX) {
return event.clientX;
}
if (event.touches || event.changedTouches) {
var touches = event.changedTouches.length ? event.changedTouches : event.touches;
return touches[0].clientX;
}
return 0;
};
_this.refSliderContainerCallback = function (element) {
setTimeout(function () {
if (element) {
var width = element.getBoundingClientRect().width;
_this.setState({
width: width,
});
}
}, 50);
};
_this.state = {
width: 0,
value: props.value,
preview: props.value,
};
_this.moveData = {
active: false,
start: 0,
current: 0,
};
return _this;
}
Slider.prototype.render = function () {
var percentage = (this.state.value / this.props.max) * 100;
var sliderBarStyle = typestyle_1.style({
backgroundColor: this.props.baseColor,
});
var sliderFillStyle = typestyle_1.style({
backgroundColor: this.props.tintColor,
width: csx_1.percent(percentage),
});
var leftPosition = ((this.state.preview !== this.state.value ? this.state.preview : this.state.value) / this.props.max) *
this.state.width;
var sliderStyle = typestyle_1.style({
backgroundColor: this.props.tintColor,
top: csx_1.px(0),
left: csx_1.px(leftPosition - 11),
});
return (React.createElement("div", { className: styles.sliderContainer, ref: this.refSliderContainerCallback, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd, onTouchCancel: this.onTouchEnd, onMouseDown: this.onMouseDown, onMouseMove: this.onMouseMove, onMouseUp: this.onMouseUp, onMouseLeave: this.onMouseCancel },
React.createElement("div", { className: typestyle_1.classes(styles.sliderBar, sliderBarStyle) },
React.createElement("div", { className: typestyle_1.classes(styles.sliderFill, sliderFillStyle) })),
this.state.width > 0 && React.createElement("div", { className: typestyle_1.classes(styles.slider, sliderStyle) })));
};
Slider.prototype.adjustValue = function (preview) {
var value = 0;
if (this.moveData.current > this.moveData.start) {
// swiped right
value = Math.round(this.moveData.current - this.moveData.start);
}
else if (this.moveData.current < this.moveData.start) {
// swiped left
value = Math.round(this.moveData.current - this.moveData.start);
}
else {
// didn't swipe
return;
}
// calculate value
var newLeft = value / this.state.width;
var newMoveValue = newLeft * this.props.max;
var newValue = preview ? this.state.value : this.state.value + newMoveValue;
var newPreview = this.state.value + newMoveValue;
if (newValue > this.props.max) {
newValue = this.props.max;
}
if (newValue < this.props.min) {
newValue = this.props.min;
}
if (newPreview > this.props.max) {
newPreview = this.props.max;
}
if (newPreview < this.props.min) {
newPreview = this.props.min;
}
this.setState({
value: newValue,
preview: newPreview,
});
};
Slider.defaultProps = {
title: '',
baseColor: Colors_1.default.LightGrey,
tintColor: Colors_1.default.Blue,
};
return Slider;
}(React.PureComponent));
exports.default = Slider;
var styles = {
sliderContainer: typestyle_1.style({
height: csx_1.px(22),
flex: 1,
display: 'flex',
width: csx_1.percent(100),
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
}),
sliderBar: typestyle_1.style({
userSelect: 'none',
flex: 1,
width: csx_1.percent(100),
borderRadius: csx_1.px(2),
height: csx_1.px(4),
}),
sliderFill: typestyle_1.style({
userSelect: 'none',
borderRadius: csx_1.px(2),
height: csx_1.px(4),
transition: 'all 200ms ease',
}),
slider: typestyle_1.style({
position: 'absolute',
userSelect: 'none',
borderRadius: csx_1.px(11),
height: csx_1.px(22),
width: csx_1.px(22),
boxShadow: '0 0 4px 4px rgba(0,0,0,0.05)',
}),
};