react-decode-animation
Version:
Decode effect typing animation for React
92 lines • 4.28 kB
JavaScript
;
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;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const CharacterList_1 = require("../CharacterList");
const useDecodeAnimation_1 = __importDefault(require("../hooks/useDecodeAnimation"));
const useOnScreen_1 = __importDefault(require("../hooks/useOnScreen"));
const DecodeAnimationCharacter_1 = require("./DecodeAnimationCharacter");
/**
* Decode effect typing animation for React
*/
const DecodeAnimation = (0, react_1.forwardRef)((_a, ref) => {
var { autoplay = false, interval = 100 } = _a, props = __rest(_a, ["autoplay", "interval"]);
const [isRendered, setRendered] = (0, react_1.useState)(false);
const [isAutoplayed, setAutoplayed] = (0, react_1.useState)(false);
const spanRef = (0, react_1.useRef)(null);
const isOnScreen = (0, useOnScreen_1.default)(spanRef);
const { text, currentIndex, state, play, pause, reset } = (0, useDecodeAnimation_1.default)({
value: props.text,
interval,
onFinish: props.onFinish,
});
const placeholders = Array.apply({}, Array(props.text.length));
const characterList = new CharacterList_1.CharacterList(props.allowedCharacters, props.customCharacters);
(0, react_1.useImperativeHandle)(ref, () => ({ play, pause, reset }), []);
(0, react_1.useEffect)(() => {
setRendered(true);
}, []);
(0, react_1.useEffect)(() => {
if (autoplay && !isAutoplayed) {
console.log("play");
play();
}
setAutoplayed(true);
}, [isOnScreen]);
(0, react_1.useEffect)(() => {
switch (props.state) {
case "Playing":
play();
break;
case "Paused":
pause();
break;
case "Reset":
reset();
break;
}
}, [props.state]);
return (react_1.default.createElement("span", { ref: spanRef, className: props.className, style: props.style }, isRendered ? (react_1.default.createElement(react_1.default.Fragment, null,
text,
placeholders.map((_, index) => {
return (index >= currentIndex && (react_1.default.createElement(DecodeAnimationCharacter_1.DecodeAnimationCharacter, { key: index, isPlaying: state === "Playing", loopString: characterList.shuffle(), options: props.characterOptions })));
}))) : (props.text.split("").map(() => "-"))));
});
exports.default = DecodeAnimation;
//# sourceMappingURL=DecodeAnimation.js.map