mui-extended/dist/animations/TextTypingAnimation.js

Extended UI Components built on Material UI

import { __awaiter, __extends, __generator } from "tslib";
import { isEqualWith } from "lodash";
import { Component } from "react";
var TextTypingAnimation = /** @class */ (function (_super) {
    __extends(TextTypingAnimation, _super);
    function TextTypingAnimation(props) {
        var _this = _super.call(this, props) || this;
        _this.stopCurrentLoop = true;
        _this.state = {
            text: props.reverse ? props.children : "",
            originalText: _this.props.children
        };
        _this.wait = _this.wait.bind(_this);
        _this.startTyping = _this.startTyping.bind(_this);
        _this.typeNext = _this.typeNext.bind(_this);
        return _this;
    }
    TextTypingAnimation.prototype.componentDidMount = function () {
        this.stopCurrentLoop = false;
        this.currentLoop = this.startTyping();
    };
    TextTypingAnimation.prototype.componentWillUnmount = function () {
        this.stopCurrentLoop = true;
    };
    TextTypingAnimation.prototype.componentDidUpdate = function (prevProps) {
        var _this = this;
        if (!isEqualWith(this.props, prevProps, function (value, other, key) {
            if (key == "onComplete") {
                return true;
            }
        })) {
            this.stopCurrentLoop = true;
            this.currentLoop.then(function () {
                _this.setState({
                    text: _this.props.reverse ? _this.props.children : "",
                    originalText: _this.props.children
                });
                _this.stopCurrentLoop = false;
                _this.currentLoop = _this.startTyping();
            });
        }
    };
    TextTypingAnimation.prototype.render = function () {
        return this.state.text;
    };
    TextTypingAnimation.prototype.wait = function (ms) {
        var _this = this;
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                if (!_this.stopCurrentLoop) {
                    resolve();
                }
                else {
                    reject();
                }
            }, ms);
        });
    };
    TextTypingAnimation.prototype.startTyping = 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.typeNext()];
                    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*/];
                }
            });
        });
    };
    TextTypingAnimation.prototype.typeNext = function () {
        return __awaiter(this, void 0, void 0, function () {
            var completed, nextText, nextText;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        completed = false;
                        if (!this.props.reverse) return [3 /*break*/, 4];
                        nextText = this.state.text == ""
                            ? this.state.originalText
                            : this.state.originalText.substring(0, this.state.text.length - 1);
                        this.setState({ text: nextText });
                        if (!(nextText.length > 0)) return [3 /*break*/, 2];
                        return [4 /*yield*/, this.wait(this.props.speed || 200)];
                    case 1:
                        _a.sent();
                        return [3 /*break*/, 3];
                    case 2:
                        completed = true;
                        _a.label = 3;
                    case 3: return [3 /*break*/, 7];
                    case 4:
                        nextText = this.state.text == this.state.originalText
                            ? ""
                            : this.state.originalText.substring(0, this.state.text.length + 1);
                        this.setState({ text: nextText });
                        if (!(nextText.length < this.state.originalText.length)) return [3 /*break*/, 6];
                        return [4 /*yield*/, this.wait(this.props.speed || 200)];
                    case 5:
                        _a.sent();
                        return [3 /*break*/, 7];
                    case 6:
                        completed = true;
                        _a.label = 7;
                    case 7:
                        if (!completed) return [3 /*break*/, 10];
                        if (!this.props.repeat) return [3 /*break*/, 9];
                        return [4 /*yield*/, this.wait(this.props.repeatInterval || 2000)];
                    case 8:
                        _a.sent();
                        return [3 /*break*/, 10];
                    case 9:
                        if (this.props.onComplete) {
                            this.props.onComplete();
                        }
                        throw new Error("Repeatation not allowed");
                    case 10: return [2 /*return*/];
                }
            });
        });
    };
    return TextTypingAnimation;
}(Component));
export { TextTypingAnimation };