announcekit-react
Version:
Use AnnounceKit widgets in your React App
176 lines (175 loc) • 7.96 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (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 });
var React = __importStar(require("react"));
var react_1 = require("react");
var use_deep_compare_effect_1 = __importDefault(require("use-deep-compare-effect"));
function globalAnnouncekit() {
var _a;
var win = window;
if (!win.announcekit) {
win.announcekit = win.announcekit || {
queue: [],
push: function (x) {
win.announcekit.queue.push(x);
},
on: function (n, x) {
win.announcekit.queue.push([n, x]);
},
off: function (name, fn) {
win.announcekit.on("init", function () {
win.announcekit.off(name, fn);
});
},
};
var scripttag = document.createElement("script");
scripttag["async"] = true;
scripttag["src"] = "https://cdn.announcekit.app/widget-v2.js";
var scr = document.getElementsByTagName("script")[0];
(_a = scr === null || scr === void 0 ? void 0 : scr.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(scripttag, scr);
}
return win.announcekit;
}
function AnnounceKit(props, ref) {
var _a;
var elementRef = (0, react_1.useRef)(null);
var widgetRef = (0, react_1.useRef)(null);
var widgetHandlers = (0, react_1.useRef)([]);
(0, react_1.useImperativeHandle)(ref, function () { return ({
withWidget: function (fn) {
return new Promise(function (res) {
if (widgetRef.current) {
return res(fn(widgetRef.current));
}
else {
widgetHandlers.current.push(function (widget) {
res(fn(widget));
});
}
});
},
open: function () {
this.withWidget(function (widget) { return widget.open(); });
},
close: function () {
this.withWidget(function (widget) { return widget.close(); });
},
instance: function () {
return this.withWidget(function (widget) { return widget; });
},
unread: function () {
return this.withWidget(function (widget) { return widget.state.ui.unreadCount; });
},
}); });
var onWidgetOpen = props.onWidgetOpen, onWidgetClose = props.onWidgetClose, onWidgetResize = props.onWidgetResize, onWidgetUnread = props.onWidgetUnread;
// Wire event handlers
(0, react_1.useEffect)(function () {
if (typeof window === "undefined")
return;
var announcekit = globalAnnouncekit();
var wrapCheck = function (handler) { return function (event) {
return event.widget === widgetRef.current ? handler === null || handler === void 0 ? void 0 : handler(event) : null;
}; };
var openHandler = wrapCheck(onWidgetOpen);
var closeHandler = wrapCheck(onWidgetClose);
var resizeHandler = wrapCheck(onWidgetResize);
var unreadHandler = wrapCheck(onWidgetUnread);
announcekit.on("widget-open", openHandler);
announcekit.on("widget-close", closeHandler);
announcekit.on("widget-resize", resizeHandler);
announcekit.on("widget-unread", unreadHandler);
return function () {
announcekit.off("widget-open", openHandler);
announcekit.off("widget-close", closeHandler);
announcekit.off("widget-resize", resizeHandler);
announcekit.off("widget-unread", unreadHandler);
};
}, [onWidgetOpen, onWidgetClose, onWidgetResize, onWidgetUnread]);
var customConfig = props.customConfig, widget = props.widget, floatWidget = props.floatWidget, embedWidget = props.embedWidget, _b = props.boosters, boosters = _b === void 0 ? true : _b, widgetStyle = props.widgetStyle, lang = props.lang, labels = props.labels, user_token = props.user_token, name = props.name, user = props.user, data = props.data;
var _c = React.useState(window.location.href), loc = _c[0], setLoc = _c[1];
(0, react_1.useEffect)(function () {
if (!props.trackLocationChanges) {
return;
}
var timer = setInterval(function () {
if (loc !== window.location.href) {
setLoc(window.location.href);
}
}, 250);
return function () { return clearInterval(timer); };
}, [props.trackLocationChanges, loc]);
// Push new widget config
(0, use_deep_compare_effect_1.default)(function () {
var _a;
if (typeof window === "undefined")
return;
var announcekit = globalAnnouncekit();
var widgetSymbol = Math.random().toString(36).substring(10);
(_a = widgetRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
widgetRef.current = null;
announcekit.push(__assign(__assign({}, customConfig), { selector: elementRef.current, version: 2, framework: "react", framework_version: "2.0.0", react_symbol: widgetSymbol, line: {
style: floatWidget ? {} : __assign({}, widgetStyle),
}, badge: {
style: floatWidget ? {} : __assign({}, widgetStyle),
}, float: {
style: __assign({}, widgetStyle),
}, onInit: function (w) {
var _a;
if (w.conf.react_symbol !== widgetSymbol) {
return w.destroy();
}
widgetHandlers.current.forEach(function (x) { return x(w); });
widgetHandlers.current = [];
(_a = widgetRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
widgetRef.current = w;
}, boosters: boosters, widget: widget, lang: lang, labels: labels, user_token: user_token, embed: !!embedWidget, name: name, user: user, data: data }));
return function () {
var _a;
(_a = widgetRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
widgetRef.current = null;
};
}, [
{ user: user, data: data, lang: lang, labels: labels, user_token: user_token },
customConfig,
widget,
name,
floatWidget,
embedWidget,
boosters,
loc,
]);
return (React.createElement("div", { ref: elementRef, style: { display: "inline" }, className: (_a = props.className) !== null && _a !== void 0 ? _a : "" }, props.children));
}
exports.default = (0, react_1.forwardRef)(AnnounceKit);