Merge pull request #67 from hocgin/v4.0.39

feat: v4.0.39 彩蛋

src/Eggs/components/Eggs/index.tsx

@@ -1,79 +1,23 @@
-import React, { Component } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { Utils, Snow } from '@hocgin/ui';
+import { useMount, useUpdateEffect, useDocumentVisibility } from 'ahooks';
 
 const failure: string = 'http://cdn.hocgin.top/file/failure.ico';
 const favicon: string = 'http://cdn.hocgin.top/file/favicon.ico';
 
-interface EggsProps {
+const Index: React.FC<{
   children?: string;
   csl?: boolean;
   doc?: boolean;
-}
-
-interface EggsState {}
-
-class Index extends Component<EggsProps, EggsState> {
-  static defaultProps = {
-    csl: true,
-    doc: true,
-  };
-  c: any;
-  u: any;
-
-  constructor(props: any, context: any) {
-    super(props, context);
-    this.egg1();
-    this.egg2();
-  }
-
-  componentDidMount() {
-    this.u = document.title;
-    this.getOrCreateIcon();
-    window?.addEventListener('visibilitychange', this.onChangeTitle);
+}> = ({ csl = true, doc = true, children }, ref) => {
+  if (Utils.Lang.isServer()) {
+    return <></>;
   }
-
-  componentWillUnmount() {
-    window?.removeEventListener('visibilitychange', this.onChangeTitle);
-  }
-
-  render() {
-    let { children } = this.props;
-    return <>{children}</>;
-  }
-
-  onChangeTitle = () => {
-    const { doc } = this.props;
-    if (doc) {
-      let link = this.getOrCreateIcon();
-      if (document.hidden) {
-        link.href = failure;
-        document.title = '崩溃啦！';
-        clearTimeout(this.c);
-      } else {
-        link.href = favicon;
-        document.title = '又好了！' + this.u;
-        this.c = setTimeout(() => {
-          document.title = this.u;
-        }, 2e3);
-      }
-    }
-  };
-
-  getOrCreateIcon = () => {
-    let link: any = document.querySelector("link[rel*='icon']");
-    if (link === null) {
-      link = document.createElement('link');
-      link.type = 'image/x-icon';
-      link.rel = 'shortcut icon';
-      link.href = favicon;
-      document.getElementsByTagName('head')[0].appendChild(link);
-    }
-    return link;
-  };
-
-  /**
-   * 动态添加注释
-   */
-  egg1 = () => {
+  let documentVisibility = useDocumentVisibility();
+  let [title, setTitle] = useState('');
+  useMount(() => {
+    setTitle(document?.title);
+    // ====> 文字彩蛋
     let hours = [
       '🕐',
       '🕑',
@@ -115,19 +59,52 @@ class Index extends Component<EggsProps, EggsState> {
     }`;
     let commentEl = document.createComment(text);
     document.insertBefore(commentEl, document.documentElement);
-  };
-
-  egg2 = () => {
-    let { csl } = this.props;
 
+    // ====> 图标彩蛋
     if (csl) {
       console.log(
         '\n %c HOCGIN %c https://hocg.in \n\n',
         'color: #fff; background: #030307; padding:5px 0;',
         'background: #fadfa3; padding:5px 0;',
       );
     }
+  });
+  useUpdateEffect(() => {
+    if (!doc) {
+      return;
+    }
+    let flag;
+    let link = getIcon();
+    if (documentVisibility === 'hidden') {
+      link.href = failure;
+      document.title = '崩溃啦！';
+      clearTimeout(flag);
+    } else {
+      link.href = favicon;
+      document.title = `又好了！${title}`;
+      flag = setTimeout(() => (document.title = title), 2e3);
+    }
+  }, [documentVisibility]);
+
+  let getIcon = () => {
+    let link: any = document.querySelector("link[rel*='icon']");
+    if (link === null) {
+      link = document.createElement('link');
+      link.type = 'image/x-icon';
+      link.rel = 'shortcut icon';
+      link.href = favicon;
+      document.getElementsByTagName('head')[0].appendChild(link);
+    }
+    return link;
   };
-}
+
+  // 12、1 月，雪花特效
+  let isShowSnow = [12, 1].includes(new Date().getMonth() + 1);
+  return (
+    <>
+      <Snow isShow={isShowSnow}>{children}</Snow>
+    </>
+  );
+};
 
 export default Index;