react-swipeable-button
Version:
A component to create swipeable button in react
132 lines • 5.59 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
require("./SwipeableButton.css");
class SwipeableButton extends react_1.Component {
constructor(props) {
super(props);
this.sliderLeft = 0;
this.isDragging = false;
this.startX = 0;
this.containerWidth = 0;
this.sliderRef = react_1.default.createRef();
this.containerRef = react_1.default.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_1.default.createElement("div", { className: "ReactSwipeButton" },
react_1.default.createElement("div", { className: `rsbContainer ${this.state.unlocked ? "rsbContainerUnlocked" : ""}`, ref: this.containerRef },
react_1.default.createElement("div", { className: "rsbcSlider", ref: this.sliderRef, onMouseDown: this.startDrag, style: { background: this.props.color }, onTouchStart: this.startDrag },
react_1.default.createElement("span", { className: "rsbcSliderText" }, this.getText()),
react_1.default.createElement("span", { className: "rsbcSliderArrow" }),
react_1.default.createElement("span", { className: "rsbcSliderCircle", style: { background: this.props.color } })),
react_1.default.createElement("div", { className: "rsbcText" }, this.getText()))));
}
}
exports.default = SwipeableButton;
//# sourceMappingURL=SwipeableButton.js.map