bnstooltips 2.0.0 → 2.0.2

package/build/Utilities/Models.d.ts

@@ -20,11 +20,17 @@ export declare enum ServerRegion {
     Korea = "Korea",
     KoreaTest = "KoreaTest"
 }
+export declare enum TooltipType {
+    Item = 0,
+    Skill = 1,
+    Npc = 2
+}
 export declare abstract class TooltipSettingsBase {
     constructor(offline?: boolean);
     debug?: boolean;
     fullHeight?: boolean;
     offline?: boolean;
+    type: TooltipType;
 }
 export declare abstract class TooltipWithNetworkSettings extends TooltipSettingsBase {
     constructor(region?: ServerRegion, client?: ItemDownloadClient, offline?: boolean);

package/build/index.es.js

@@ -5613,57 +5613,6 @@ var TooltipWrapperSettings = /** @class */ (function () {
 var css_248z$3 = ".tippy-box {\n  max-width: none !important;\n  background-color: transparent !important;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n  .tippy-box:hover {\n    box-shadow: black 0px 20px 60px 0px !important; }\n\n.tippy-content {\n  padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff0084 !important; }\n";
 styleInject(css_248z$3);
 
-var ServerRegion;
-(function (ServerRegion) {
-    ServerRegion["EUNA"] = "EUNA";
-    ServerRegion["Korea"] = "Korea";
-    ServerRegion["KoreaTest"] = "KoreaTest";
-})(ServerRegion || (ServerRegion = {}));
-var TooltipSettingsBase = /** @class */ (function () {
-    function TooltipSettingsBase(offline) {
-        if (offline === void 0) { offline = false; }
-        this.debug = false;
-        this.fullHeight = false;
-        this.offline = offline;
-    }
-    return TooltipSettingsBase;
-}());
-var TooltipWithNetworkSettings = /** @class */ (function (_super) {
-    __extends(TooltipWithNetworkSettings, _super);
-    function TooltipWithNetworkSettings(region, client, offline) {
-        if (offline === void 0) { offline = false; }
-        var _this = this;
-        var l_offline = offline;
-        if (region == null)
-            l_offline = true;
-        _this = _super.call(this, l_offline) || this;
-        _this.region = region;
-        _this.client = client;
-        return _this;
-    }
-    return TooltipWithNetworkSettings;
-}(TooltipSettingsBase));
-
-var ItemTooltipSettings = /** @class */ (function (_super) {
-    __extends(ItemTooltipSettings, _super);
-    function ItemTooltipSettings(data, region, client, offline) {
-        var _this = _super.call(this, region, client, offline) || this;
-        _this.data = data;
-        return _this;
-    }
-    return ItemTooltipSettings;
-}(TooltipWithNetworkSettings));
-
-var SkillTooltipSettings = /** @class */ (function (_super) {
-    __extends(SkillTooltipSettings, _super);
-    function SkillTooltipSettings(data) {
-        var _this = _super.call(this) || this;
-        _this.data = data;
-        return _this;
-    }
-    return SkillTooltipSettings;
-}(TooltipSettingsBase));
-
 var css_248z$2 = ".SkillTooltip_skillIconContainer {\n  width: 60px;\n  height: 60px;\n  padding: 0;\n  float: left;\n  position: relative; }\n\n.SkillTooltip_skillIcon {\n  width: 60px;\n  height: 60px; }\n\n.SkillTooltip_buttonIcon {\n  position: absolute;\n  right: 1px;\n  bottom: 1px;\n  height: 18px;\n  opacity: 0.9; }\n\n.SkillTooltip_buttonIconMouse {\n  background-color: rgba(0, 0, 0, 0.8); }\n\n.SkillTooltip_mainText {\n  font-weight: 500; }\n\n.SkillTooltip_smallText {\n  font-size: 12px; }\n\n.SkillTooltip_subTextMargin {\n  margin-bottom: 0.3rem; }\n\n.SkillTooltip_boundaryContainer {\n  display: flex;\n  width: 100%;\n  margin-bottom: 0.5rem;\n  line-height: 17px; }\n\n.SkillTooltip_boundary {\n  flex: 1;\n  flex-basis: 0px;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  color: black;\n  margin: 0.15rem; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryHead {\n  border-radius: 3px 0 0 0; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryHead {\n  border-radius: 0 3px 0 0; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryBody {\n  border-radius: 0 0 0 3px; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryBody {\n  border-radius: 0 0 3px 0; }\n\n.SkillTooltip_boundaryHead {\n  color: white;\n  font-weight: 500;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  padding: 0.3rem;\n  text-align: center;\n  flex: 1;\n  min-height: 26px;\n  background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBody {\n  color: white;\n  padding: 0.5rem 0.3rem;\n  margin-top: 0.15rem;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 40px;\n  flex: 2;\n  background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBodyModifier {\n  min-height: 33px !important; }\n\n.SkillTooltip_boundaryHasIcon {\n  min-height: 50px !important; }\n\n.SkillTooltip_conditionRow {\n  display: flex;\n  align-items: center;\n  font-size: 12px; }\n\n.SkillTooltip_conditionRow:not(:last-of-type) {\n  margin-bottom: 0.1rem; }\n\n.SkillTooltip_conditionIcon {\n  width: 20px;\n  height: 20px;\n  margin-right: 0.33rem; }\n\n.SkillTooltip_conditionIconSmall {\n  width: 12px;\n  height: 12px;\n  margin-right: 0.22rem; }\n\n.tooltipArg {\n  color: #46bee1;\n  font-weight: 600; }\n\n.target-360 {\n  background-image: url(\"./360.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 60%;\n  background-size: auto 64px; }\n\n.target-front-180 {\n  background-image: url(\"./180.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 70%;\n  background-size: auto 64px; }\n\n.laser {\n  background-image: url(\"./laser.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n  background-size: auto 64px; }\n";
 styleInject(css_248z$2);
 
@@ -5942,18 +5891,6 @@ function AddIds(subInfoGroups, skill) {
     });
 }
 
-var NpcTooltipSettings = /** @class */ (function (_super) {
-    __extends(NpcTooltipSettings, _super);
-    function NpcTooltipSettings(npc, region, grade, client, offline) {
-        if (grade === void 0) { grade = 4; }
-        var _this = _super.call(this, region, client, offline) || this;
-        _this.npc = npc;
-        _this.grade = grade;
-        return _this;
-    }
-    return NpcTooltipSettings;
-}(TooltipWithNetworkSettings));
-
 var css_248z$1 = ".NpcTooltip_toggleBarContainer {\n  display: flex; }\n\n.NpcTooltip_toggleButton {\n  border: none;\n  padding: 0.33rem;\n  margin: 0 0.1rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.1);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .NpcTooltip_toggleButton:hover {\n    background-color: rgba(255, 255, 255, 0.2);\n    opacity: 1; }\n  .NpcTooltip_toggleButton-active {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    color: #fff;\n    opacity: 1; }\n  .NpcTooltip_toggleButton img {\n    width: 32px;\n    height: 32px; }\n\n.NpcTooltip_storeEntry {\n  display: flex;\n  align-items: stretch;\n  background-color: rgba(233, 233, 233, 0.1);\n  padding: 0.33rem;\n  font-size: 14px; }\n  .NpcTooltip_storeEntry:not(:last-child) {\n    margin-bottom: 0.2rem; }\n\n.NpcTooltip_storeEntryItemNameLimit {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center; }\n\n.NpcTooltip_storeEntryItemLimit {\n  font-size: 12px; }\n\n.NpcTooltip_storeEntryItemName {\n  flex: 1;\n  display: flex;\n  align-items: center; }\n\n.NpcTooltip_storeEntryItemIconName {\n  display: flex;\n  align-items: center; }\n  .NpcTooltip_storeEntryItemIconName img {\n    width: 48px;\n    height: 48px;\n    margin-right: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntriesContainer {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  align-items: flex-end;\n  justify-content: center;\n  padding-left: 2rem; }\n\n.NpcTooltip_itemBuyPriceEntries {\n  display: flex; }\n  .NpcTooltip_itemBuyPriceEntries-moneyMargin {\n    margin-bottom: 0.2rem; }\n\n.NpcTooltip_itemBuyPriceEntry:not(:first-child) {\n  margin-left: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntryContainer {\n  position: relative;\n  height: 32px; }\n  .NpcTooltip_itemBuyPriceEntryContainer img {\n    width: 32px;\n    height: 32px; }\n  .NpcTooltip_itemBuyPriceEntryContainer-shadow {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-shadow: inset 0 0 2px 0px #000000; }\n\n.NpcTooltip_itemBuyPriceEntryCount {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  color: #ffffff;\n  background-color: rgba(0, 0, 0, 0.4);\n  width: 32px;\n  line-height: 12px;\n  text-align: center; }\n\n.NpcTooltip_moneyContainer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end; }\n  .NpcTooltip_moneyContainer > span {\n    display: flex;\n    align-items: center; }\n    .NpcTooltip_moneyContainer > span:not(:first-child) {\n      margin-left: 0.1rem; }\n    .NpcTooltip_moneyContainer > span > img {\n      width: 16px;\n      height: 16px; }\n";
 styleInject(css_248z$1);
 
@@ -5968,6 +5905,54 @@ function StoreToggleBar(_a) {
     return (React.createElement("div", { className: "NpcTooltip_toggleBarContainer" }, stores.map(function (store, i) { return (React.createElement(StoreToggle, { key: i, store: store, isActive: activeTab === i, setActive: function () { return setActiveTab(i); } })); })));
 }
 
+var ServerRegion;
+(function (ServerRegion) {
+    ServerRegion["EUNA"] = "EUNA";
+    ServerRegion["Korea"] = "Korea";
+    ServerRegion["KoreaTest"] = "KoreaTest";
+})(ServerRegion || (ServerRegion = {}));
+var TooltipType;
+(function (TooltipType) {
+    TooltipType[TooltipType["Item"] = 0] = "Item";
+    TooltipType[TooltipType["Skill"] = 1] = "Skill";
+    TooltipType[TooltipType["Npc"] = 2] = "Npc";
+})(TooltipType || (TooltipType = {}));
+var TooltipSettingsBase = /** @class */ (function () {
+    function TooltipSettingsBase(offline) {
+        if (offline === void 0) { offline = false; }
+        this.debug = false;
+        this.fullHeight = false;
+        this.offline = offline;
+    }
+    return TooltipSettingsBase;
+}());
+var TooltipWithNetworkSettings = /** @class */ (function (_super) {
+    __extends(TooltipWithNetworkSettings, _super);
+    function TooltipWithNetworkSettings(region, client, offline) {
+        if (offline === void 0) { offline = false; }
+        var _this = this;
+        var l_offline = offline;
+        if (region == null)
+            l_offline = true;
+        _this = _super.call(this, l_offline) || this;
+        _this.region = region;
+        _this.client = client;
+        return _this;
+    }
+    return TooltipWithNetworkSettings;
+}(TooltipSettingsBase));
+
+var ItemTooltipSettings = /** @class */ (function (_super) {
+    __extends(ItemTooltipSettings, _super);
+    function ItemTooltipSettings(data, region, client, offline) {
+        var _this = _super.call(this, region, client, offline) || this;
+        _this.data = data;
+        _this.type = TooltipType.Item;
+        return _this;
+    }
+    return ItemTooltipSettings;
+}(TooltipWithNetworkSettings));
+
 var BuyLimitReset;
 (function (BuyLimitReset) {
     BuyLimitReset[BuyLimitReset["Day"] = 0] = "Day";
@@ -6168,7 +6153,6 @@ function AddStores(subInfoGroups, activeTab, client, Stores) {
 }
 
 function TooltipWrapper(_a) {
-    var _b;
     var settings = _a.settings, tooltipSettings = _a.tooltipSettings, children = _a.children, jobstyleOverride = _a.jobstyleOverride;
     if (settings == undefined) {
         settings = new TooltipWrapperSettings();
@@ -6176,7 +6160,7 @@ function TooltipWrapper(_a) {
     if (settings == null || tooltipSettings == null)
         return null;
     var spanRef = useRef(null);
-    var _c = useState(null), childRef = _c[0], setChildRef = _c[1];
+    var _b = useState(null), childRef = _b[0], setChildRef = _b[1];
     /**
      * Mount the temporary span element.
      * retrieve and store the target element's reference.
@@ -6187,23 +6171,35 @@ function TooltipWrapper(_a) {
         }
         return function () { return setChildRef(null); };
     }, []);
-    var _d = useState(true); _d[0]; var setIsOffline = _d[1];
-    var grade = 4;
-    var content = null;
-    if (tooltipSettings instanceof ItemTooltipSettings) {
-        content = (React.createElement(ItemTooltip, { jobstyleOverride: jobstyleOverride, settings: tooltipSettings }));
-        grade = tooltipSettings.data.grade;
-    }
-    if (tooltipSettings instanceof SkillTooltipSettings) {
-        content = React.createElement(SkillTooltip, { settings: tooltipSettings });
-    }
-    if (tooltipSettings instanceof NpcTooltipSettings) {
-        content = React.createElement(NpcTooltip, { settings: tooltipSettings });
-        grade = (_b = tooltipSettings.grade) !== null && _b !== void 0 ? _b : 4;
-    }
+    var _c = useState(true), isOffline = _c[0], setIsOffline = _c[1];
+    var _d = useState(4), grade = _d[0], setGrade = _d[1];
+    var _e = useState(null), content = _e[0], setContent = _e[1];
+    useEffect(function () {
+        var _a;
+        if (tooltipSettings.type == TooltipType.Item) {
+            setContent(React.createElement(ItemTooltip, { jobstyleOverride: jobstyleOverride, settings: tooltipSettings }));
+            setGrade(tooltipSettings.data.grade);
+        }
+        else if (tooltipSettings.type == TooltipType.Skill) {
+            setContent(React.createElement(SkillTooltip, { settings: tooltipSettings }));
+            setGrade(4);
+        }
+        else if (tooltipSettings.type == TooltipType.Npc) {
+            setContent(React.createElement(NpcTooltip, { settings: tooltipSettings }));
+            setGrade((_a = tooltipSettings.grade) !== null && _a !== void 0 ? _a : 4);
+        }
+    }, [tooltipSettings]);
+    useEffect(function () {
+        if (content != null)
+            setContent(function (prev) {
+                var newSettings = JSON.parse(JSON.stringify(tooltipSettings));
+                newSettings.offline = isOffline;
+                return React.cloneElement(prev, { tooltipSettings: newSettings });
+            });
+    }, [isOffline]);
     return (React.createElement(React.Fragment, null,
         children,
-        childRef ? (React.createElement(Tippy, { arrow: settings.showArrow, trigger: settings.trigger, plugins: [followCursor], followCursor: settings.followCursor && !settings.interactive, appendTo: document.body, onMount: function () { return setIsOffline(tooltipSettings.offline); }, placement: settings.placement, animation: "fade", interactive: settings.interactive, content: content, theme: "grade" + grade, reference: childRef })) : (React.createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
+        childRef && content ? (React.createElement(Tippy, { arrow: settings.showArrow, trigger: settings.trigger, plugins: [followCursor], followCursor: settings.followCursor && !settings.interactive, appendTo: document.body, onMount: function () { return setIsOffline(tooltipSettings.offline); }, placement: settings.placement, animation: "fade", interactive: settings.interactive, content: content, theme: "grade" + grade, reference: childRef })) : (React.createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
 }
 
 function ItemIconNameDiv(_a) {
@@ -6688,5 +6684,29 @@ function JsonArrayToJsxArray(stringArray) {
     return jsxArray;
 }
 
+var NpcTooltipSettings = /** @class */ (function (_super) {
+    __extends(NpcTooltipSettings, _super);
+    function NpcTooltipSettings(npc, region, grade, client, offline) {
+        if (grade === void 0) { grade = 4; }
+        var _this = _super.call(this, region, client, offline) || this;
+        _this.npc = npc;
+        _this.grade = grade;
+        _this.type = TooltipType.Npc;
+        return _this;
+    }
+    return NpcTooltipSettings;
+}(TooltipWithNetworkSettings));
+
+var SkillTooltipSettings = /** @class */ (function (_super) {
+    __extends(SkillTooltipSettings, _super);
+    function SkillTooltipSettings(data) {
+        var _this = _super.call(this) || this;
+        _this.data = data;
+        _this.type = TooltipType.Skill;
+        return _this;
+    }
+    return SkillTooltipSettings;
+}(TooltipSettingsBase));
+
 export { GetCooldownString, ItemTooltip, ItemTooltipSettings, JsonTooltip, NpcTooltip, NpcTooltipSettings, ServerRegion, SkillTooltip, SkillTooltipSettings, TooltipBase, TooltipWrapper, TooltipWrapperSettings };
 //# sourceMappingURL=index.es.js.map