react-swipeable-button
Version:
A component to create swipeable button in react
106 lines • 4.36 kB
JavaScript
import React, { Component } from "react";
import "./SwipeableButton.css";
export default class SwipeableButton extends Component {
constructor(props) {
super(props);
this.sliderLeft = 0;
this.isDragging = false;
this.startX = 0;
this.containerWidth = 0;
this.sliderRef = React.createRef();
this.containerRef = React.createRef();
this.onDrag = (e) => {
if (this.state.unlocked) {
return;
}
if (this.isDragging) {
const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
this.sliderLeft = Math.min(Math.max(0, clientX - this.startX), this.containerWidth);
this.updateSliderStyle();
}
};
this.updateSliderStyle = () => {
if (this.state.unlocked)
return;
if (this.sliderRef.current) {
this.sliderRef.current.style.left = `${this.sliderLeft + 50}px`;
}
};
this.stopDrag = () => {
if (this.state.unlocked)
return;
if (this.isDragging) {
this.isDragging = false;
if (this.sliderLeft > this.containerWidth * 0.9) {
this.sliderLeft = this.containerWidth;
if (this.props.onSuccess) {
this.props.onSuccess();
this.onSuccess();
}
}
else {
this.sliderLeft = 0;
if (this.props.onFailure) {
this.props.onFailure();
}
}
this.updateSliderStyle();
}
};
this.startDrag = (e) => {
if (this.state.unlocked)
return;
this.isDragging = true;
this.startX = "touches" in e ? e.touches[0].clientX : e.clientX;
};
this.onSuccess = () => {
if (this.containerRef.current) {
this.containerRef.current.style.width = `${this.containerRef.current.clientWidth}px`;
}
this.setState({
unlocked: true,
});
};
this.getText = () => {
return this.state.unlocked
? this.props.text_unlocked || "UNLOCKED"
: this.props.text || "SLIDE";
};
this.reset = () => {
if (this.state.unlocked)
return;
this.setState({ unlocked: false }, () => {
this.sliderLeft = 0;
this.updateSliderStyle();
});
};
this.state = {
unlocked: false,
};
}
componentDidMount() {
if (this.containerRef.current) {
this.containerWidth = this.containerRef.current.clientWidth - 50;
}
document.addEventListener("mousemove", this.onDrag);
document.addEventListener("mouseup", this.stopDrag);
document.addEventListener("touchmove", this.onDrag);
document.addEventListener("touchend", this.stopDrag);
}
componentWillUnmount() {
document.removeEventListener("mousemove", this.onDrag);
document.removeEventListener("mouseup", this.stopDrag);
document.removeEventListener("touchmove", this.onDrag);
document.removeEventListener("touchend", this.stopDrag);
}
render() {
return (React.createElement("div", { className: "ReactSwipeButton" },
React.createElement("div", { className: `rsbContainer ${this.state.unlocked ? "rsbContainerUnlocked" : ""}`, ref: this.containerRef },
React.createElement("div", { className: "rsbcSlider", ref: this.sliderRef, onMouseDown: this.startDrag, style: { background: this.props.color }, onTouchStart: this.startDrag },
React.createElement("span", { className: "rsbcSliderText" }, this.getText()),
React.createElement("span", { className: "rsbcSliderArrow" }),
React.createElement("span", { className: "rsbcSliderCircle", style: { background: this.props.color } })),
React.createElement("div", { className: "rsbcText" }, this.getText()))));
}
}
//# sourceMappingURL=SwipeableButton.js.map