react-iztro - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

lib/Izpalace/Izpalace.d.ts

 import React from "react";
 import { IzpalaceProps } from "./Izpalace.type";
 import "./Izpalace.css";
-export declare const Izpalace: ({ index, focusedIndex, onFocused, horoscope, ...palace }: IzpalaceProps) => React.JSX.Element;
+export declare const Izpalace: ({ index, focusedIndex, onFocused, horoscope, showDecadalScope, showYearlyScope, showMonthlyScope, showDailyScope, showHourlyScope, toggleScope, ...palace }: IzpalaceProps) => React.JSX.Element;

lib/Izpalace/Izpalace.js

@@ -60,25 +60,37 @@ "use strict";
     var _b, _c, _d, _e;
-    var index = _a.index, focusedIndex = _a.focusedIndex, onFocused = _a.onFocused, horoscope = _a.horoscope, palace = __rest(_a, ["index", "focusedIndex", "onFocused", "horoscope"]);
+    var index = _a.index, focusedIndex = _a.focusedIndex, onFocused = _a.onFocused, horoscope = _a.horoscope, showDecadalScope = _a.showDecadalScope, showYearlyScope = _a.showYearlyScope, showMonthlyScope = _a.showMonthlyScope, showDailyScope = _a.showDailyScope, showHourlyScope = _a.showHourlyScope, toggleScope = _a.toggleScope, palace = __rest(_a, ["index", "focusedIndex", "onFocused", "horoscope", "showDecadalScope", "showYearlyScope", "showMonthlyScope", "showDailyScope", "showHourlyScope", "toggleScope"]);
     var horoscopeNames = (0, react_1.useMemo)(function () {
         var horoscopeNames = [];
         if ((horoscope === null || horoscope === void 0 ? void 0 : horoscope.decadal.index) === index) {
-            horoscopeNames.push("".concat(horoscope.decadal.name, "(").concat(horoscope.decadal.heavenlyStem, ")"));
+            horoscopeNames.push(__assign(__assign({}, horoscope.decadal), { scope: "decadal", show: showDecadalScope }));
         }
         if ((horoscope === null || horoscope === void 0 ? void 0 : horoscope.yearly.index) === index) {
-            horoscopeNames.push("".concat(horoscope.yearly.name, "(").concat(horoscope.yearly.heavenlyStem, ")"));
+            horoscopeNames.push(__assign(__assign({}, horoscope.yearly), { scope: "yearly", show: showYearlyScope }));
         }
         if ((horoscope === null || horoscope === void 0 ? void 0 : horoscope.monthly.index) === index) {
-            horoscopeNames.push("".concat(horoscope.monthly.name, "(").concat(horoscope.monthly.heavenlyStem, ")"));
+            horoscopeNames.push(__assign(__assign({}, horoscope.monthly), { scope: "monthly", show: showMonthlyScope }));
         }
         if ((horoscope === null || horoscope === void 0 ? void 0 : horoscope.daily.index) === index) {
-            horoscopeNames.push("".concat(horoscope.daily.name, "(").concat(horoscope.daily.heavenlyStem, ")"));
+            horoscopeNames.push(__assign(__assign({}, horoscope.daily), { scope: "daily", show: showDailyScope }));
         }
         if ((horoscope === null || horoscope === void 0 ? void 0 : horoscope.hourly.index) === index) {
-            horoscopeNames.push("".concat(horoscope.hourly.name, "(").concat(horoscope.hourly.heavenlyStem, ")"));
+            horoscopeNames.push(__assign(__assign({}, horoscope.hourly), { scope: "hourly", show: showHourlyScope }));
         }
         if ((horoscope === null || horoscope === void 0 ? void 0 : horoscope.age.index) === index) {
-            horoscopeNames.push(horoscope.age.name);
+            horoscopeNames.push({
+                name: horoscope.age.name,
+                heavenlyStem: null,
+                scope: "age",
+                show: false,
+            });
         }
         return horoscopeNames;
-    }, [horoscope]);
+    }, [
+        horoscope,
+        showDecadalScope,
+        showYearlyScope,
+        showMonthlyScope,
+        showDailyScope,
+        showHourlyScope,
+    ]);
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)("iztro-palace", {
@@ -90,3 +102,3 @@ "focused-palace": focusedIndex === index,
                     index === (0, utils_1.fixIndex)(focusedIndex - 4)),
-        }), style: { gridArea: "g".concat(index) }, onMouseEnter: function () { return onFocused === null || onFocused === void 0 ? void 0 : onFocused(index); } },
+        }), style: { gridArea: "g".concat(index) }, onMouseEnter: function () { return onFocused === null || onFocused === void 0 ? void 0 : onFocused(index); }, onMouseLeave: function () { return onFocused === null || onFocused === void 0 ? void 0 : onFocused(undefined); } },
         react_1.default.createElement("div", { className: (0, classnames_1.default)("iztro-palace-major") }, palace.majorStars.map(function (star) { return (react_1.default.createElement(Izstar_1.Izstar, __assign({ key: star.name }, star))); })),
@@ -102,3 +114,10 @@ react_1.default.createElement("div", { className: (0, classnames_1.default)("iztro-palace-minor") }, palace.minorStars.map(function (star) { return (react_1.default.createElement(Izstar_1.Izstar, __assign({ key: star.name }, star))); })),
                 ((_e = horoscope === null || horoscope === void 0 ? void 0 : horoscope.yearly) === null || _e === void 0 ? void 0 : _e.stars[index].map(function (star) { return (react_1.default.createElement(Izstar_1.Izstar, __assign({ key: star.name }, star))); })))),
-        react_1.default.createElement("div", { className: (0, classnames_1.default)("iztro-palace-fate") }, horoscopeNames === null || horoscopeNames === void 0 ? void 0 : horoscopeNames.map(function (item) { return (react_1.default.createElement("span", { key: item }, item)); })),
+        react_1.default.createElement("div", { className: (0, classnames_1.default)("iztro-palace-fate") }, horoscopeNames === null || horoscopeNames === void 0 ? void 0 : horoscopeNames.map(function (item) {
+            var _a;
+            return (react_1.default.createElement("span", { key: item.name, className: (0, classnames_1.default)((_a = {},
+                    _a["iztro-palace-".concat(item.scope, "-active")] = item.show,
+                    _a)), onClick: item.scope ? function () { return toggleScope === null || toggleScope === void 0 ? void 0 : toggleScope(item.scope); } : undefined },
+                item.name,
+                item.heavenlyStem && "(".concat(item.heavenlyStem, ")")));
+        })),
         react_1.default.createElement("div", { className: (0, classnames_1.default)("iztro-palace-footer") },
@@ -117,3 +136,9 @@ react_1.default.createElement("div", null,
                     react_1.default.createElement("div", { className: (0, classnames_1.default)("iztro-palace-scope-age") }, palace.ages.join(" ")),
-                    react_1.default.createElement("div", { className: (0, classnames_1.default)("iztro-palace-scope-decadal") }, palace.decadal.range.join(" - ")))),
+                    react_1.default.createElement("div", { className: (0, classnames_1.default)("iztro-palace-scope-decadal") }, palace.decadal.range.join(" - "))),
+                react_1.default.createElement("div", { className: (0, classnames_1.default)("iztro-palace-dynamic-name") },
+                    showDecadalScope && (react_1.default.createElement("span", { className: "iztro-palace-dynamic-name-decadal" }, horoscope === null || horoscope === void 0 ? void 0 : horoscope.decadal.palaceNames[index])),
+                    showYearlyScope && (react_1.default.createElement("span", { className: "iztro-palace-dynamic-name-yearly" }, horoscope === null || horoscope === void 0 ? void 0 : horoscope.yearly.palaceNames[index])),
+                    showMonthlyScope && (react_1.default.createElement("span", { className: "iztro-palace-dynamic-name-monthly" }, horoscope === null || horoscope === void 0 ? void 0 : horoscope.monthly.palaceNames[index])),
+                    showDailyScope && (react_1.default.createElement("span", { className: "iztro-palace-dynamic-name-daily" }, horoscope === null || horoscope === void 0 ? void 0 : horoscope.daily.palaceNames[index])),
+                    showHourlyScope && (react_1.default.createElement("span", { className: "iztro-palace-dynamic-name-hourly" }, horoscope === null || horoscope === void 0 ? void 0 : horoscope.hourly.palaceNames[index])))),
             react_1.default.createElement("div", null,
@@ -120,0 +145,0 @@ react_1.default.createElement("div", { className: (0, classnames_1.default)("iztro-palace-rgt24") },

lib/Izpalace/Izpalace.type.d.ts

 import { IFunctionalPalace } from "iztro/lib/astro/FunctionalPalace";
-import { Horoscope } from "iztro/lib/data/types";
+import { Horoscope, Scope } from "iztro/lib/data/types";
 export type IzpalaceProps = {
@@ -7,3 +7,9 @@ index: number;
     horoscope?: Horoscope;
-    onFocused?: (index: number) => void;
+    showDecadalScope?: boolean;
+    showYearlyScope?: boolean;
+    showMonthlyScope?: boolean;
+    showDailyScope?: boolean;
+    showHourlyScope?: boolean;
+    toggleScope?: (scope: Scope) => void;
+    onFocused?: (index?: number) => void;
 } & IFunctionalPalace;

lib/IzpalaceCenter/IzpalaceCenter.d.ts

 import React from "react";
 import FunctionalAstrolabe from "iztro/lib/astro/FunctionalAstrolabe";
 import "./IzpalaceCenter.css";
+import { Scope } from "iztro/lib/data/types";
 type IzpalaceCenterProps = {
     astrolabe?: FunctionalAstrolabe;
+    arrowIndex?: number;
+    arrowScope?: Scope;
 };
-export declare const IzpalaceCenter: ({ astrolabe }: IzpalaceCenterProps) => React.JSX.Element;
+export declare const IzpalaceCenter: ({ astrolabe, arrowIndex, arrowScope, }: IzpalaceCenterProps) => React.JSX.Element;
 export {};

lib/IzpalaceCenter/IzpalaceCenter.js

@@ -48,3 +48,3 @@ "use strict";
 var IzpalaceCenter = function (_a) {
-    var astrolabe = _a.astrolabe;
+    var astrolabe = _a.astrolabe, arrowIndex = _a.arrowIndex, arrowScope = _a.arrowScope;
     var records = (0, react_1.useMemo)(function () { return [
@@ -93,3 +93,3 @@ {
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)("iztro-center-palace") },
-        (astrolabe === null || astrolabe === void 0 ? void 0 : astrolabe.earthlyBranchOfSoulPalace) && (react_1.default.createElement(Line_1.Line, { soulIndex: (0, utils_1.fixEarthlyBranchIndex)(astrolabe.earthlyBranchOfSoulPalace) })),
+        (astrolabe === null || astrolabe === void 0 ? void 0 : astrolabe.earthlyBranchOfSoulPalace) && (react_1.default.createElement(Line_1.Line, { scope: arrowScope, index: arrowIndex !== null && arrowIndex !== void 0 ? arrowIndex : (0, utils_1.fixEarthlyBranchIndex)(astrolabe.earthlyBranchOfSoulPalace) })),
         react_1.default.createElement("ul", null, records.map(function (rec, idx) { return (react_1.default.createElement(Item_1.Item, __assign({ key: idx }, rec))); })),
@@ -96,0 +96,0 @@ react_1.default.createElement("a", { className: "iztro-copyright", href: "https://github.com/sylarlong/iztro", target: "_blank" },

lib/IzpalaceCenter/Line.d.ts

 import React from "react";
+import { Scope } from "iztro/lib/data/types";
 type LineProps = {
-    soulIndex: number;
+    index: number;
+    scope?: Scope;
 };
-export declare const Line: ({ soulIndex }: LineProps) => React.JSX.Element;
+export declare const Line: ({ index, scope }: LineProps) => React.JSX.Element;
 export {};

lib/IzpalaceCenter/Line.js

@@ -30,6 +30,15 @@ "use strict";
 var Line = function (_a) {
-    var soulIndex = _a.soulIndex;
+    var index = _a.index, scope = _a.scope;
     var line = (0, react_1.useRef)(null);
+    var strokeColor = (0, react_1.useMemo)(function () {
+        if (scope) {
+            var element = document.getElementsByClassName("iztro-astrolabe-theme-default")[0];
+            var computedStyle = getComputedStyle(element);
+            // 获取CSS中定义的变量的值
+            return computedStyle.getPropertyValue("--iztro-color-".concat(scope));
+        }
+        return "rgba(245,0,0)";
+    }, [scope]);
     (0, react_1.useEffect)(function () {
-        var idx = soulIndex;
+        var idx = index;
         var canvasDom = line.current;
@@ -64,4 +73,5 @@ if (!canvasDom || idx < 0) {
         canvasCtx.clearRect(0, 0, canvasDom.width, canvasDom.height);
-        canvasCtx.strokeStyle = "rgba(245,0,0,0.3)";
+        canvasCtx.strokeStyle = strokeColor;
         canvasCtx.lineWidth = 1;
+        canvasCtx.globalAlpha = 0.5;
         var dgIdx = (0, utils_1.fixIndex)(idx + 6);
@@ -77,4 +87,4 @@ var q4Idx = (0, utils_1.fixIndex)(idx + 4);
         canvasCtx.stroke();
-    }, [soulIndex]);
-    return (react_1.default.createElement("canvas", { id: "palace-line", style: {
+    }, [index, strokeColor]);
+    return (react_1.default.createElement("canvas", { id: "palace-line", className: scope, style: {
             position: "absolute",
@@ -81,0 +91,0 @@ width: "100%",

lib/Iztrolabe/Iztrolabe.js

@@ -50,3 +50,8 @@ "use strict";
     var _a = (0, react_1.useState)(), focusedIndex = _a[0], setFocusedIndex = _a[1];
-    var _b = (0, iztro_hook_1.useIztro)({
+    var _b = (0, react_1.useState)(false), showDecadal = _b[0], setShowDecadal = _b[1];
+    var _c = (0, react_1.useState)(false), showYearly = _c[0], setShowYearly = _c[1];
+    var _d = (0, react_1.useState)(false), showMonthly = _d[0], setShowMonthly = _d[1];
+    var _e = (0, react_1.useState)(false), showDaily = _e[0], setShowDaily = _e[1];
+    var _f = (0, react_1.useState)(false), showHourly = _f[0], setShowShowHourly = _f[1];
+    var _g = (0, iztro_hook_1.useIztro)({
         birthday: props.birthday,
@@ -59,9 +64,60 @@ birthTime: props.birthTime,
         lang: props.lang,
-    }), astrolabe = _b.astrolabe, horoscope = _b.horoscope;
+    }), astrolabe = _g.astrolabe, horoscope = _g.horoscope;
+    var toggleShowScope = function (scope) {
+        switch (scope) {
+            case "decadal":
+                setShowDecadal(!showDecadal);
+                break;
+            case "yearly":
+                setShowYearly(!showYearly);
+                break;
+            case "monthly":
+                setShowMonthly(!showMonthly);
+                break;
+            case "daily":
+                setShowDaily(!showDaily);
+                break;
+            case "hourly":
+                setShowShowHourly(!showHourly);
+                break;
+        }
+    };
+    var dynamic = (0, react_1.useMemo)(function () {
+        if (showHourly) {
+            return {
+                arrowIndex: horoscope === null || horoscope === void 0 ? void 0 : horoscope.hourly.index,
+                arrowScope: "hourly",
+            };
+        }
+        if (showDaily) {
+            return {
+                arrowIndex: horoscope === null || horoscope === void 0 ? void 0 : horoscope.daily.index,
+                arrowScope: "daily",
+            };
+        }
+        if (showMonthly) {
+            return {
+                arrowIndex: horoscope === null || horoscope === void 0 ? void 0 : horoscope.monthly.index,
+                arrowScope: "monthly",
+            };
+        }
+        if (showYearly) {
+            return {
+                arrowIndex: horoscope === null || horoscope === void 0 ? void 0 : horoscope.yearly.index,
+                arrowScope: "yearly",
+            };
+        }
+        if (showDecadal) {
+            return {
+                arrowIndex: horoscope === null || horoscope === void 0 ? void 0 : horoscope.decadal.index,
+                arrowScope: "decadal",
+            };
+        }
+    }, [showDecadal, showYearly, showMonthly, showDaily, showHourly]);
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)("iztro-astrolabe", "iztro-astrolabe-theme-default") }, astrolabe === null || astrolabe === void 0 ? void 0 :
         astrolabe.palaces.map(function (palace, index) {
-            return (react_1.default.createElement(Izpalace_1.Izpalace, __assign({ key: palace.earthlyBranch, index: index, focusedIndex: focusedIndex, onFocused: setFocusedIndex, horoscope: horoscope }, palace)));
+            return (react_1.default.createElement(Izpalace_1.Izpalace, __assign({ key: palace.earthlyBranch, index: index, focusedIndex: focusedIndex, onFocused: setFocusedIndex, horoscope: horoscope, showDecadalScope: showDecadal, showYearlyScope: showYearly, showMonthlyScope: showMonthly, showDailyScope: showDaily, showHourlyScope: showHourly, toggleScope: toggleShowScope }, palace)));
         }),
-        react_1.default.createElement(IzpalaceCenter_1.IzpalaceCenter, { astrolabe: astrolabe })));
+        react_1.default.createElement(IzpalaceCenter_1.IzpalaceCenter, __assign({ astrolabe: astrolabe }, dynamic))));
 };
 exports.Iztrolabe = Iztrolabe;

package.json

 {
   "name": "react-iztro",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "基于iztro实现的react紫微斗数星盘组件。A react component used to generate an astrolabe of ziweidoushu based on iztro.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

46663

18.76%

Lines of code

972

17.96%

No dependency changes