mui-extended
Version:
Extended UI Components built on Material UI
101 lines (100 loc) • 4.25 kB
JavaScript
import { __assign, __awaiter, __extends, __generator } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Box } from "@mui/material";
import { Component, createRef } from "react";
var MarqueeAnimation = /** @class */ (function (_super) {
__extends(MarqueeAnimation, _super);
function MarqueeAnimation(props) {
var _this = _super.call(this, props) || this;
_this.isComponentMounted = false;
_this.ref = createRef();
_this.state = { sx: {} };
_this.wait = _this.wait.bind(_this);
_this.resetMargin = _this.resetMargin.bind(_this);
_this.marquee = _this.marquee.bind(_this);
return _this;
}
MarqueeAnimation.prototype.componentDidMount = function () {
this.isComponentMounted = true;
this.marquee();
};
MarqueeAnimation.prototype.componentWillUnmount = function () {
this.isComponentMounted = false;
};
MarqueeAnimation.prototype.render = function () {
return (_jsx(Box, __assign({}, this.props, { overflow: "hidden", children: _jsx(Box, { whiteSpace: "nowrap", display: "inline", sx: __assign(__assign({}, this.state.sx), { "& > *": { display: "inline" } }), ref: this.ref, children: this.props.children }) })));
};
MarqueeAnimation.prototype.wait = function (ms) {
var _this = this;
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (_this.isComponentMounted) {
resolve();
}
else {
reject();
}
}, ms);
});
};
MarqueeAnimation.prototype.resetMargin = function () {
return __awaiter(this, void 0, void 0, function () {
var _a, _b;
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
this.setState({
sx: {
marginLeft: this.props.reverse
? "-" + ((_a = this.ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) + "px"
: "100%"
}
});
return [4 /*yield*/, this.wait(10)];
case 1:
_c.sent();
this.setState({
sx: {
transition: "margin-left ".concat(this.props.speed || 10000, "ms linear"),
marginLeft: this.props.reverse
? "100%"
: "-" + ((_b = this.ref.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) + "px"
}
});
return [4 /*yield*/, this.wait(this.props.speed || 10000)];
case 2:
_c.sent();
if (!this.props.repeat) {
throw new Error("No Repeat");
}
return [2 /*return*/];
}
});
});
};
MarqueeAnimation.prototype.marquee = function () {
return __awaiter(this, void 0, void 0, function () {
var e_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 4, , 5]);
_a.label = 1;
case 1:
if (!true) return [3 /*break*/, 3];
return [4 /*yield*/, this.resetMargin()];
case 2:
_a.sent();
return [3 /*break*/, 1];
case 3: return [3 /*break*/, 5];
case 4:
e_1 = _a.sent();
return [3 /*break*/, 5];
case 5: return [2 /*return*/];
}
});
});
};
return MarqueeAnimation;
}(Component));
export { MarqueeAnimation };