gitalk-react 1.0.0-beta.8 → 1.1.0

package/lib/components/meta.tsx

@@ -1,129 +0,0 @@
-import React, { useCallback, useContext, useState } from "react";
-
-import ArrowDown from "../assets/arrow-down.svg?raw";
-import { HOMEPAGE, VERSION } from "../constants";
-import I18nContext from "../contexts/I18nContext";
-import type { GitalkProps, Issue, User } from "../interfaces";
-import { hasClassInParent } from "../utils/dom";
-import Action from "./action";
-import Svg from "./svg";
-
-interface MetaProps {
-  issue?: Issue;
-  user?: User;
-  commentsCount: number;
-  pagerDirection: GitalkProps["pagerDirection"];
-  onPagerDirectionChange: (
-    direction: NonNullable<GitalkProps["pagerDirection"]>,
-  ) => void;
-  onLogin: () => void;
-  onLogout: () => void;
-}
-
-const Meta: React.FC<MetaProps> = (props) => {
-  const {
-    issue,
-    user,
-    commentsCount,
-    pagerDirection,
-    onPagerDirectionChange,
-    onLogin,
-    onLogout,
-  } = props;
-
-  const { polyglot } = useContext(I18nContext);
-
-  const [showPopup, setShowPopup] = useState<boolean>(false);
-
-  const hidePopup = useCallback((e: MouseEvent) => {
-    const target = e.target as HTMLElement;
-    if (target && hasClassInParent(target, "gt-user", "gt-popup")) {
-      return;
-    }
-    document.removeEventListener("click", hidePopup);
-    setShowPopup(false);
-  }, []);
-
-  const onShowOrHidePopup: React.MouseEventHandler<HTMLDivElement> = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    setShowPopup((visible) => {
-      if (visible) {
-        document.removeEventListener("click", hidePopup);
-      } else {
-        document.addEventListener("click", hidePopup);
-      }
-      return !visible;
-    });
-  };
-
-  return (
-    <div className="gt-meta" key="meta">
-      <span
-        className="gt-counts"
-        dangerouslySetInnerHTML={{
-          __html: polyglot.t("counts", {
-            counts: `<a class="gt-link gt-link-counts" href="${issue?.html_url}" target="_blank" rel="noopener noreferrer">${commentsCount}</a>`,
-            smart_count: commentsCount,
-          }),
-        }}
-      />
-      {showPopup && (
-        <div className="gt-popup">
-          {user
-            ? [
-                <Action
-                  key="sort-asc"
-                  className={`gt-action-sortasc${pagerDirection === "first" ? " is--active" : ""}`}
-                  onClick={() => onPagerDirectionChange("first")}
-                  text={polyglot.t("sort-asc")}
-                />,
-                <Action
-                  key="sort-desc"
-                  className={`gt-action-sortdesc${pagerDirection === "last" ? " is--active" : ""}`}
-                  onClick={() => onPagerDirectionChange("last")}
-                  text={polyglot.t("sort-desc")}
-                />,
-              ]
-            : null}
-          {user ? (
-            <Action
-              className="gt-action-logout"
-              onClick={onLogout}
-              text={polyglot.t("logout")}
-            />
-          ) : (
-            <a className="gt-action gt-action-login" onClick={onLogin}>
-              {polyglot.t("login-with-github")}
-            </a>
-          )}
-          <div className="gt-copyright">
-            <a
-              className="gt-link gt-link-project"
-              href={HOMEPAGE}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              GitalkR
-            </a>
-            <span className="gt-version">{VERSION}</span>
-          </div>
-        </div>
-      )}
-      <div className="gt-user">
-        <div
-          className={`gt-user-inner${showPopup ? " is--poping" : ""}`}
-          onClick={onShowOrHidePopup}
-        >
-          <span className="gt-user-name">
-            {user?.login ?? polyglot.t("anonymous")}
-          </span>
-          <Svg className="gt-ico-arrdown" icon={ArrowDown} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Meta;

package/lib/components/svg.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-
-export interface SVGProps
-  extends React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLSpanElement>,
-    HTMLSpanElement
-  > {
-  icon: string;
-  text?: string;
-}
-
-const Svg: React.FC<SVGProps> = ({
-  icon,
-  text,
-  className = "",
-  ...restProps
-}) => (
-  <span className={`gt-ico ${className}`} {...restProps}>
-    <span
-      className="gt-svg"
-      dangerouslySetInnerHTML={{
-        __html: icon,
-      }}
-    />
-    {text && <span className="gt-ico-text">{text}</span>}
-  </span>
-);
-
-export default Svg;

package/lib/constants/index.ts

@@ -1,57 +0,0 @@
-import {
-  de,
-  enUS,
-  es,
-  faIR,
-  fr,
-  ja,
-  ko,
-  type Locale,
-  pl,
-  ru,
-  zhCN,
-  zhTW,
-} from "date-fns/locale";
-
-import packageJson from "../../package.json";
-import { type Lang } from "../i18n";
-import type { GitalkProps } from "../interfaces";
-
-export const VERSION = packageJson.version;
-export const HOMEPAGE = packageJson.homepage;
-
-export const DEFAULT_LANG: Lang = "en";
-export const DEFAULT_LABELS = ["Gitalk"];
-export const DEFAULT_FLIP_MOVE_OPTIONS: GitalkProps["flipMoveOptions"] = {
-  staggerDelayBy: 150,
-  appearAnimation: "accordionVertical",
-  enterAnimation: "accordionVertical",
-  leaveAnimation: "accordionVertical",
-};
-export const DEFAULT_PROXY =
-  "https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token";
-export const DEFAULT_AVATAR =
-  "https://cdn.jsdelivr.net/npm/gitalk@1/src/assets/icon/github.svg";
-export const DEFAULT_USER: GitalkProps["defaultUser"] = {
-  avatar_url: "//avatars1.githubusercontent.com/u/29697133?s=50",
-  login: "null",
-  html_url: "",
-};
-
-export const ACCESS_TOKEN_KEY = "GT_ACCESS_TOKEN";
-export const STORED_COMMENTS_KEY = "GT_COMMENT";
-
-export const DATE_FNS_LOCALE_MAP: Record<Lang, Locale> = {
-  zh: zhCN,
-  "zh-CN": zhCN,
-  "zh-TW": zhTW,
-  en: enUS,
-  "es-ES": es,
-  fr,
-  ru,
-  de,
-  pl,
-  ko,
-  fa: faIR,
-  ja,
-};

package/lib/contexts/I18nContext.ts

@@ -1,20 +0,0 @@
-import { type Locale } from "date-fns";
-import type Polyglot from "node-polyglot";
-import { createContext } from "react";
-
-import { DATE_FNS_LOCALE_MAP, DEFAULT_LANG } from "../constants";
-import i18n, { type Lang } from "../i18n";
-
-export interface I18nContextValue {
-  language: Lang;
-  polyglot: Polyglot;
-  dateFnsLocaleMap: Record<string, Locale>;
-}
-
-export const I18nContext = createContext<I18nContextValue>({
-  language: DEFAULT_LANG,
-  polyglot: i18n(DEFAULT_LANG),
-  dateFnsLocaleMap: DATE_FNS_LOCALE_MAP,
-});
-
-export default I18nContext;