feat: palace mutagen

package.json

@@ -1,6 +1,6 @@
 {
  "name": "react-iztro",
- "version": "1.1.0",
+ "version": "1.2.0",
  "description": "基于iztro实现的react紫微斗数星盘组件。A react component used to generate an astrolabe of ziweidoushu based on iztro.",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
@@ -67,8 +67,8 @@
  },
  "dependencies": {
  "classnames": "^2.3.2",
- "iztro": "^2.0.3",
- "iztro-hook": "^1.2.2",
+ "iztro": "^2.0.5",
+ "iztro-hook": "^1.2.3",
  "lunar-lite": "^0.0.3"
  },
  "resolutions": {

src/Izpalace/Izpalace.tsx

@@ -14,6 +14,8 @@ export const Izpalace = ({
  horoscope,
  activeHeavenlyStem,
  toggleActiveHeavenlyStem,
+ hoverHeavenlyStem,
+ setHoverHeavenlyStem,
  showDecadalScope = false,
  showYearlyScope = false,
  showMonthlyScope = false,
@@ -145,6 +147,7 @@ export const Izpalace = ({
  <Izstar
  key={star.name}
  activeHeavenlyStem={activeHeavenlyStem}
+ hoverHeavenlyStem={hoverHeavenlyStem}
  palaceHeavenlyStem={kot<HeavenlyStemKey>(
  palace.heavenlyStem,
  "Heavenly"
@@ -159,6 +162,7 @@ export const Izpalace = ({
  <Izstar
  key={star.name}
  activeHeavenlyStem={activeHeavenlyStem}
+ hoverHeavenlyStem={hoverHeavenlyStem}
  palaceHeavenlyStem={kot<HeavenlyStemKey>(
  palace.heavenlyStem,
  "Heavenly"
@@ -287,6 +291,12 @@ export const Izpalace = ({
  kot<HeavenlyStemKey>(palace.heavenlyStem, "Heavenly")
  )
  }
+ onMouseEnter={() =>
+ setHoverHeavenlyStem?.(
+ kot<HeavenlyStemKey>(palace.heavenlyStem, "Heavenly")
+ )
+ }
+ onMouseLeave={() => setHoverHeavenlyStem?.(undefined)}
  >
  <span
  className={classNames({

src/Izpalace/Izpalace.type.ts

@@ -13,6 +13,8 @@ export type IzpalaceProps = {
  showDailyScope?: boolean;
  showHourlyScope?: boolean;
  activeHeavenlyStem?: HeavenlyStemKey;
+ hoverHeavenlyStem?: HeavenlyStemKey;
+ setHoverHeavenlyStem?: (heavenlyStem?: HeavenlyStemKey) => void;
  toggleActiveHeavenlyStem?: (heavenlyStem: HeavenlyStemKey) => void;
  toggleScope?: (scope: Scope) => void;
  onFocused?: (index?: number) => void;

src/Izstar/Izstar.tsx

@@ -8,6 +8,7 @@ import { getMutagensByHeavenlyStem } from "iztro/lib/utils";
 export const Izstar = ({
  horoscopeMutagens,
  activeHeavenlyStem,
+ hoverHeavenlyStem,
  palaceHeavenlyStem,
  ...star
 }: IzstarProps) => {
@@ -26,8 +27,23 @@ export const Izstar = ({
  return `iztro-star-mutagen-${index}`;
  }, [activeHeavenlyStem, star.name]);
 
+ const hoverMutagenStyle = useMemo(() => {
+ if (!hoverHeavenlyStem) {
+ return "";
+ }
+
+ const mutagens = getMutagensByHeavenlyStem(t(hoverHeavenlyStem));
+ const index = mutagens.indexOf(star.name);
+
+ if (index < 0) {
+ return "";
+ }
+
+ return `iztro-star-hover-mutagen-${index}`;
+ }, [hoverHeavenlyStem, star.name]);
+
  const selfMutagenStyle = useMemo(() => {
- if (!palaceHeavenlyStem) {
+ if (!palaceHeavenlyStem || activeHeavenlyStem || hoverHeavenlyStem) {
  return undefined;
  }
 
@@ -39,14 +55,20 @@ export const Izstar = ({
  }
 
  return `iztro-star-self-mutagen-${index}`;
- }, [palaceHeavenlyStem]);
+ }, [palaceHeavenlyStem, activeHeavenlyStem, hoverHeavenlyStem]);
 
  return (
  <div className={classNames("iztro-star", `iztro-star-${star.type}`)}>
  <span
- className={classNames(mutagenStyle, selfMutagenStyle, {
- "iztro-star-self-mutagen": !!selfMutagenStyle,
- })}
+ className={classNames(
+ "star-with-mutagen",
+ mutagenStyle,
+ selfMutagenStyle,
+ hoverMutagenStyle,
+ {
+ "iztro-star-self-mutagen": !!selfMutagenStyle,
+ }
+ )}
  >
  {star.name}
  </span>

src/Izstar/Izstar.type.ts

@@ -11,5 +11,6 @@ export type HoroscopeMutagen = {
 export type IzstarProps = {
  palaceHeavenlyStem?: HeavenlyStemKey;
  activeHeavenlyStem?: HeavenlyStemKey;
+ hoverHeavenlyStem?: HeavenlyStemKey;
  horoscopeMutagens?: HoroscopeMutagen[];
 } & FunctionalStar;

src/Iztrolabe/Iztrolabe.css

@@ -23,16 +23,26 @@
  padding: 0 2px;
 }
 
-.iztro-star-self-mutagen {
+.star-with-mutagen {
  position: relative;
 }
 
-.iztro-star-self-mutagen::before {
- border-radius: 4px 0 0 4px;
+.star-with-mutagen::before {
  bottom: 0;
  content: " ";
  left: -4px;
  position: absolute;
  top: 0;
  width: 4px;
+ transition: all 0.25s ease-in-out;
+}
+
+.star-with-mutagen::after {
+ content: " ";
+ position: absolute;
+ left: 0;
+ bottom: -4px;
+ right: 0;
+ height: 4px;
+ transition: all 0.25s ease-in-out;
 }

src/Iztrolabe/Iztrolabe.tsx

@@ -12,6 +12,7 @@ import { HeavenlyStemKey } from "iztro/lib/i18n";
 export const Iztrolabe: React.FC<IztrolabeProps> = (props) => {
  const [activeHeavenlyStem, setActiveHeavenlyStem] =
  useState<HeavenlyStemKey>();
+ const [hoverHeavenlyStem, setHoverHeavenlyStem] = useState<HeavenlyStemKey>();
  const [focusedIndex, setFocusedIndex] = useState<number>();
  const [showDecadal, setShowDecadal] = useState(false);
  const [showYearly, setShowYearly] = useState(false);
@@ -124,6 +125,8 @@ export const Iztrolabe: React.FC<IztrolabeProps> = (props) => {
  toggleScope={toggleShowScope}
  activeHeavenlyStem={activeHeavenlyStem}
  toggleActiveHeavenlyStem={toggleActiveHeavenlyStem}
+ hoverHeavenlyStem={hoverHeavenlyStem}
+ setHoverHeavenlyStem={setHoverHeavenlyStem}
  {...palace}
  />
  );

src/theme/default.css

@@ -180,6 +180,19 @@
  background-color: var(--iztro-color-focus);
 }
 
+.iztro-star-hover-mutagen-0::after {
+ background-color: var(--iztro-color-awesome);
+}
+.iztro-star-hover-mutagen-1::after {
+ background-color: var(--iztro-color-quan);
+}
+.iztro-star-hover-mutagen-2::after {
+ background-color: var(--iztro-color-nice);
+}
+.iztro-star-hover-mutagen-3::after {
+ background-color: var(--iztro-color-focus);
+}
+
 .iztro-palace-name-body {
  font-size: var(--iztro-star-font-size-small);
  font-weight: normal;

yarn.lock

@@ -5761,17 +5761,17 @@ istanbul-reports@^3.1.4:
  html-escaper "^2.0.0"
  istanbul-lib-report "^3.0.0"
 
-iztro-hook@^1.2.2:
- version "1.2.2"
- resolved "https://registry.npmjs.org/iztro-hook/-/iztro-hook-1.2.2.tgz#671fc2c8f204f8394f118ec7b32b10cf27fb1fc4"
- integrity sha512-BQoYxgjQHSDJaM49tkPnRJSRQvXqVsnEp0mWpFqjJLgpb92ii4QXLzaeRZYuRY0Izff9qwM9UwSzA2kLnifMaA==
+iztro-hook@^1.2.3:
+ version "1.2.3"
+ resolved "https://registry.npmjs.org/iztro-hook/-/iztro-hook-1.2.3.tgz#94d1b5d5647dfa87c6967e9cbd8ef9f348a09e1b"
+ integrity sha512-IqwxH5C84l16K5Dh9GQb95pFuO9asTrHOyL/dYZUH89SiUd6Iw3pCcwWFzG54MJTFEaLhdAKmjlafu0vSeo9EA==
  dependencies:
- iztro "2.0.3"
+ iztro "2.0.5"
 
-[email protected].3, iztro@^2.0.3:
- version "2.0.3"
- resolved "https://registry.npmjs.org/iztro/-/iztro-2.0.3.tgz#74e2264c5b39360603d3692d6ed02a05ca64dbfa"
- integrity sha512-Jqg+wqitzqSiiKmzcfeywxGd0Oq/JAIM0cLzxzdzkkCoJt05M9JminFNfnzsYhXdJ5uqDRDkIhgprobQL9N4Rw==
+[email protected].5, iztro@^2.0.5:
+ version "2.0.5"
+ resolved "https://registry.npmjs.org/iztro/-/iztro-2.0.5.tgz#3a5895d0152c882c3d93013b4b2df03fac74053d"
+ integrity sha512-0scYrMZs0zZZmRXYTeqwHLZIqjuyZHC9OfVgGLf7AoGGatxOGPESJi/UQyNGGVvIR2BOBJ/TZjzOM0233C0FbA==
  dependencies:
  dayjs "^1.11.10"
  i18next "^23.5.1"