117 lines
3.9 KiB
JavaScript
117 lines
3.9 KiB
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;
|
|
};
|
|
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 tsparticles_engine_1 = require("tsparticles-engine");
|
|
const react_2 = __importDefault(require("fast-deep-equal/react"));
|
|
const defaultId = "tsparticles";
|
|
class Particles extends react_1.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
init: false,
|
|
library: undefined,
|
|
};
|
|
}
|
|
destroy() {
|
|
if (!this.state.library) {
|
|
return;
|
|
}
|
|
this.state.library.destroy();
|
|
this.setState({
|
|
library: undefined,
|
|
});
|
|
}
|
|
shouldComponentUpdate(nextProps) {
|
|
return !(0, react_2.default)(nextProps, this.props);
|
|
}
|
|
componentDidUpdate() {
|
|
this.refresh();
|
|
}
|
|
forceUpdate() {
|
|
this.refresh().then(() => {
|
|
super.forceUpdate();
|
|
});
|
|
}
|
|
componentDidMount() {
|
|
(async () => {
|
|
if (this.props.init) {
|
|
await this.props.init(tsparticles_engine_1.tsParticles);
|
|
}
|
|
this.setState({
|
|
init: true,
|
|
}, async () => {
|
|
await this.loadParticles();
|
|
});
|
|
})();
|
|
}
|
|
componentWillUnmount() {
|
|
this.destroy();
|
|
}
|
|
render() {
|
|
const { width, height, className, canvasClassName, id } = this.props;
|
|
return (react_1.default.createElement("div", { className: className, id: id },
|
|
react_1.default.createElement("canvas", { className: canvasClassName, style: Object.assign(Object.assign({}, this.props.style), { width,
|
|
height }) })));
|
|
}
|
|
async refresh() {
|
|
this.destroy();
|
|
await this.loadParticles();
|
|
}
|
|
async loadParticles() {
|
|
var _a, _b, _c;
|
|
if (!this.state.init) {
|
|
return;
|
|
}
|
|
const cb = async (container) => {
|
|
if (this.props.container) {
|
|
this.props.container.current = container;
|
|
}
|
|
this.setState({
|
|
library: container,
|
|
});
|
|
if (this.props.loaded) {
|
|
await this.props.loaded(container);
|
|
}
|
|
};
|
|
const id = (_b = (_a = this.props.id) !== null && _a !== void 0 ? _a : Particles.defaultProps.id) !== null && _b !== void 0 ? _b : defaultId, container = this.props.url
|
|
? await tsparticles_engine_1.tsParticles.loadJSON(id, this.props.url)
|
|
: await tsparticles_engine_1.tsParticles.load(id, (_c = this.props.params) !== null && _c !== void 0 ? _c : this.props.options);
|
|
await cb(container);
|
|
}
|
|
}
|
|
exports.default = Particles;
|
|
Particles.defaultProps = {
|
|
width: "100%",
|
|
height: "100%",
|
|
options: {},
|
|
style: {},
|
|
url: undefined,
|
|
id: defaultId,
|
|
};
|