@twreporter/react-typescript-components 0.1.0-beta.10

package/lib/header/index.d.ts

@@ -0,0 +1,25 @@
+import "../index-H3peA2d_.js";
+import { Theme } from "../theme-BDGfJ8n-.js";
+import { ReleaseBranch } from "../release-branch-CsBbhuYE.js";
+import { FC } from "react";
+
+//#region src/header/context/index.d.ts
+
+type HamburgerContextType = {
+  toggleHamburger: () => void;
+  closeHamburgerMenu: () => void;
+  isHamburgerMenuOpen: boolean;
+};
+//#endregion
+//#region src/header/index.d.ts
+type HeaderProps = {
+  releaseBranch: ReleaseBranch;
+  isLinkExternal: boolean;
+  theme: Theme;
+  pathname: string;
+  referrerPath: string;
+  hamburgerContext: HamburgerContextType;
+};
+declare const Header: FC<HeaderProps>;
+export = Header;
+//# sourceMappingURL=index.d.ts.map

package/lib/header/index.js

@@ -0,0 +1,465 @@
+const require_chunk = require('../chunk-BxBTb9qk.js');
+require('../constants-BmxSMOOn.js');
+require('../constants-K2ObjToq.js');
+require('../paragraph-CJvb0_cM.js');
+const require_theme = require('../theme-DDBlIbeS.js');
+const require_button = require('../button-DFLYlJJW.js');
+const require_external_links = require('../external-links-SfJjb48j.js');
+const require_internal_links = require('../internal-links-CBkMU8cY.js');
+const require_release_branch = require('../release-branch-CRZV4Ivz.js');
+const require_external_link = require('../external-link-CEDvlQYo.js');
+const require_internal_link = require('../internal-link-CqTu3Yi5.js');
+require('../customized-link-CK7Xlgdt.js');
+require('../constants-DRyQ6AuU.js');
+const require_divider = require('../divider-b3Shh7FV.js');
+const require_context = require('../context-Bvr0Qj2x.js');
+require('../constants-DF_II8Fz.js');
+const require_icons = require('../icons-DF-7dKxN.js');
+const require_constants$4 = require('../constants-2TRY2zTK.js');
+require('../dropdown-menu-CCtPuYyJ.js');
+const require_tab_bar = require('../tab-bar-ZRrpziiN.js');
+const require_hamburger_menu = require('../hamburger-menu-Bd_wmcAB.js');
+const require_logo = require('../logo-D4M-1sGD.js');
+require('../theme-BPB1kPtQ.js');
+require('../constants-Bz-ufaJ2.js');
+let react = require("react");
+react = require_chunk.__toESM(react);
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+let react_transition_group = require("react-transition-group");
+react_transition_group = require_chunk.__toESM(react_transition_group);
+let lodash_map = require("lodash/map");
+lodash_map = require_chunk.__toESM(lodash_map);
+
+//#region src/header/constants/animation.ts
+const ANIMATION = {
+	step1Duration: "duration-[200ms]",
+	step2Delay: "delay-[150ms]",
+	step2Duration: "duration-[50ms]",
+	step3Delay: "delay-[150ms]",
+	step3Duration: "duration-[200ms]"
+};
+
+//#endregion
+//#region src/header/components/top-row/icons.tsx
+const Icons = ({ releaseBranch = require_release_branch.RELEASE_BRANCH.master, theme = require_theme.THEME.normal }) => {
+	const { isLinkExternal } = (0, react.useContext)(require_context.HeaderContext);
+	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "ml-[24px] flex flex-row gap-[16px]",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
+				iconComponent: require_icons.Search(releaseBranch),
+				theme
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+				to: require_internal_links.INTERNAL_LINKS.myReading.index,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
+					iconComponent: require_icons.KidStar(releaseBranch),
+					theme
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+				to: require_internal_links.INTERNAL_LINKS.account.index,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
+					iconComponent: require_icons.Member(releaseBranch),
+					theme
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/header/utils/theme.ts
+const selectLogoType = (theme) => {
+	switch (theme) {
+		case require_theme.THEME.photography:
+		case require_theme.THEME.transparent: return require_constants$4.LOGO_TYPE.white;
+		default: return require_constants$4.LOGO_TYPE.default;
+	}
+};
+const selectHeaderTheme = (theme) => {
+	switch (theme) {
+		case require_theme.THEME.photography: return {
+			bgColor: "bg-photo-dark",
+			topRowBgColor: "bg-photo-dark"
+		};
+		case require_theme.THEME.transparent: return {
+			bgColor: "bg-opacity-black-02",
+			topRowBgColor: "bg-transparent"
+		};
+		case require_theme.THEME.index: return {
+			bgColor: "bg-gray-white",
+			topRowBgColor: "bg-gray-white"
+		};
+		default: return {
+			bgColor: "bg-gray-100",
+			topRowBgColor: "bg-gray-100"
+		};
+	}
+};
+const selectSloganTheme = (theme) => {
+	switch (theme) {
+		case require_theme.THEME.photography:
+		case require_theme.THEME.transparent: return "text-gray-white";
+		default: return "text-gray-800";
+	}
+};
+
+//#endregion
+//#region src/header/components/top-row/index.tsx
+const TopRow = ({ topRowBgColor, logoType }) => {
+	const { toUseNarrow, releaseBranch, theme, isLinkExternal } = (0, react.useContext)(require_context.HeaderContext);
+	const { toggleHamburger } = (0, react.useContext)(require_context.HamburgerContext);
+	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)(`flex items-center justify-between ${require_tab_bar.ZIndex.topRow} px-[16px] ${topRowBgColor}`, toUseNarrow ? "py-[16px]" : "py-[24px]"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, clsx.default)(toUseNarrow ? "opacity-100" : "opacity-0", `transition-opacity ${ANIMATION.step3Duration}`, toUseNarrow ? "delay-350" : "delay-0"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
+						iconComponent: require_icons.Hamburger(releaseBranch),
+						theme,
+						onClick: toggleHamburger
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, clsx.default)(`flex items-center mr-[16px] transition-all ${ANIMATION.step3Duration}`, toUseNarrow ? "ml-[24px]" : "ml-0", toUseNarrow ? "translate-x-0" : "-translate-x-[24px]", toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+						to: require_internal_links.INTERNAL_LINKS.home,
+						className: (0, clsx.default)(`transition-height ${ANIMATION.step3Duration}`, toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_logo.logo_header_default, {
+							type: logoType,
+							releaseBranch,
+							className: (0, clsx.default)(toUseNarrow ? "h-[24px]" : "h-[32px]")
+						})
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, clsx.default)(`transition-opacity ${ANIMATION.step3Duration}`, "flex items-center font-serif font-normal text-[14px]", toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0", toUseNarrow ? "pointer-events-none" : "pointer-events-auto", toUseNarrow ? "opacity-0" : "opacity-100", selectSloganTheme(theme)),
+					children: "深度 × 開放 × 非營利"
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, clsx.default)("flex items-center gap-[16px]", `transition-opacity ${ANIMATION.step3Duration}`, toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0", toUseNarrow ? "pointer-events-none" : "pointer-events-auto", toUseNarrow ? "opacity-0" : "opacity-100"),
+				children: require_hamburger_menu.HEADER_ACTION_LINKS.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+					to: link.to,
+					target: link.target,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.pill_button_default, {
+						text: link.label,
+						theme,
+						type: link.type
+					})
+				}, link.label))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icons, {
+				releaseBranch,
+				theme
+			})]
+		})]
+	});
+};
+var top_row_default = TopRow;
+
+//#endregion
+//#region src/header/components/channels/constants/index.ts
+const CHANNELS = [
+	{
+		label: "最新",
+		to: require_internal_links.INTERNAL_LINKS.latest,
+		target: "_self"
+	},
+	{
+		label: "深度專題",
+		to: require_internal_links.INTERNAL_LINKS.topics,
+		target: "_self"
+	},
+	{
+		label: "國際兩岸",
+		to: require_internal_links.INTERNAL_LINKS.categories.world,
+		target: "_self"
+	},
+	{
+		label: "人權司法",
+		to: require_internal_links.INTERNAL_LINKS.categories.humanRights,
+		target: "_self"
+	},
+	{
+		label: "政治社會",
+		to: require_internal_links.INTERNAL_LINKS.categories.politicsAndSociety,
+		target: "_self"
+	},
+	{
+		label: "醫療健康",
+		to: require_internal_links.INTERNAL_LINKS.categories.health,
+		target: "_self"
+	},
+	{
+		label: "環境永續",
+		to: require_internal_links.INTERNAL_LINKS.categories.environment,
+		target: "_self"
+	},
+	{
+		label: "經濟產業",
+		to: require_internal_links.INTERNAL_LINKS.categories.econ,
+		target: "_self"
+	},
+	{
+		label: "文化生活",
+		to: require_internal_links.INTERNAL_LINKS.categories.culture,
+		target: "_self"
+	},
+	{
+		label: "教育校園",
+		to: require_internal_links.INTERNAL_LINKS.categories.education,
+		target: "_self"
+	}
+];
+
+//#endregion
+//#region src/header/components/channels/index.tsx
+const _ = { map: lodash_map.default };
+const ChannelItem = ({ link = {
+	href: "",
+	target: "_self"
+}, label = "" }) => {
+	const { theme, isLinkExternal } = (0, react.useContext)(require_context.HeaderContext);
+	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("flex items-center", "[&>a]:no-underline"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+			to: link.href,
+			target: link.target,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.text_button_default, {
+				text: label,
+				size: require_button.text_button_default.Size.l,
+				theme,
+				style: require_button.text_button_default.Style.dark
+			})
+		})
+	});
+};
+const Channel = () => {
+	const { releaseBranch, theme } = (0, react.useContext)(require_context.HeaderContext);
+	const { toggleHamburger } = (0, react.useContext)(require_context.HamburgerContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col items-center",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-between w-full px-[16px] py-[8px]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
+				iconComponent: require_icons.Hamburger(releaseBranch),
+				theme,
+				onClick: toggleHamburger
+			}), _.map(CHANNELS, (channel) => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelItem, {
+					label: channel.label,
+					link: {
+						href: channel.to,
+						target: channel.target
+					}
+				}, `channel-${channel.label}`);
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_divider.divider_default, {})]
+	});
+};
+var channels_default = Channel;
+
+//#endregion
+//#region src/header/components/desktop-and-above.tsx
+const DesktopAndAbove = ({ topRowBgColor, logoType }) => {
+	const { toUseNarrow } = (0, react.useContext)(require_context.HeaderContext);
+	const channelRef = (0, react.useRef)(null);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "hidden desktop:flex desktop:flex-col",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(top_row_default, {
+				topRowBgColor,
+				logoType
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, clsx.default)(`transition-opacity ${ANIMATION.step2Duration}`, toUseNarrow ? "opacity-0" : "opacity-100", toUseNarrow ? "delay-0" : `${ANIMATION.step2Delay}`),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_divider.divider_default, { direction: require_divider.divider_default.Direction.horizontal })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${require_tab_bar.ZIndex.channel}`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.CSSTransition, {
+					in: !toUseNarrow,
+					nodeRef: channelRef,
+					classNames: {
+						enter: `opacity-0 -translate-y-full`,
+						enterActive: `transition-all ease-linear ${ANIMATION.step1Duration} ${ANIMATION.step2Delay} opacity-100 translate-y-0`,
+						exit: `opacity-100 translate-y-0`,
+						exitActive: `transition-all ease-linear ${ANIMATION.step1Duration} -translate-y-full`
+					},
+					timeout: {
+						appear: 0,
+						enter: 350,
+						exit: 200
+					},
+					unmountOnExit: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						ref: channelRef,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(channels_default, {})
+					})
+				})
+			})
+		]
+	});
+};
+var desktop_and_above_default = DesktopAndAbove;
+
+//#endregion
+//#region src/header/components/tablet-and-below.tsx
+const TabletAndBelow = ({ topRowBgColor, logoType }) => {
+	const { isLinkExternal } = (0, react.useContext)(require_context.HeaderContext);
+	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)(`flex items-center justify-between ${require_tab_bar.ZIndex.topRow} py-[16px] ${topRowBgColor}`, "desktop:hidden"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+			to: require_internal_links.INTERNAL_LINKS.home,
+			className: "flex items-center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_logo.logo_header_default, {
+				type: logoType,
+				className: "h-[21px]"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-row items-center gap-[16px]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+				to: require_external_links.EXTERNAL_LINKS.monthlyDonation,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.pill_button_default, {
+					text: "贊助",
+					theme: require_button.pill_button_default.Theme.normal,
+					type: require_button.pill_button_default.Type.primary,
+					style: require_button.pill_button_default.Style.brand
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+				to: require_internal_links.INTERNAL_LINKS.account.index,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.text_button_default, {
+					text: "登入",
+					theme: require_button.text_button_default.Theme.normal,
+					style: require_button.text_button_default.Style.dark,
+					size: require_button.text_button_default.Size.s
+				})
+			})]
+		})]
+	});
+};
+var tablet_and_below_default = TabletAndBelow;
+
+//#endregion
+//#region src/header/index.tsx
+const HIDE_HEADER_THRESHOLD = 8;
+const TRANSFORM_HEADER_THRESHOLD = 40;
+const TRANSFORM_TIMEOUT = 800;
+const Header = ({ releaseBranch, isLinkExternal, theme, pathname, referrerPath, hamburgerContext }) => {
+	const isAuthed = false;
+	const { bgColor, topRowBgColor } = selectHeaderTheme(theme);
+	const logoType = selectLogoType(theme);
+	const { isHamburgerMenuOpen } = hamburgerContext;
+	const [toUseNarrow, setToUseNarrow] = (0, react.useState)(false);
+	const [hideHeader, setHideHeader] = (0, react.useState)(false);
+	const lastKnownPageYOffset = (0, react.useRef)(0);
+	const ticking = (0, react.useRef)(false);
+	const currentY = (0, react.useRef)(0);
+	const readyY = (0, react.useRef)(0);
+	const isTransforming = (0, react.useRef)(false);
+	const transformTimer = (0, react.useRef)(null);
+	const getScrollState = (0, react.useCallback)((scrollTop, scrollDirection) => {
+		const isCurrentNarrow = toUseNarrow;
+		const nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD;
+		const scrollState = {
+			toUseNarrow,
+			hideHeader
+		};
+		if (isTransforming.current) return scrollState;
+		if (scrollDirection === "up") {
+			readyY.current = scrollTop;
+			scrollState.hideHeader = false;
+		}
+		if (scrollDirection === "down") {
+			if (isCurrentNarrow && scrollTop - readyY.current > HIDE_HEADER_THRESHOLD) scrollState.hideHeader = true;
+		}
+		if (isCurrentNarrow) scrollState.toUseNarrow = scrollDirection === "down" ? true : nextToUseNarrow;
+		else scrollState.toUseNarrow = scrollDirection === "up" ? false : nextToUseNarrow;
+		if (isCurrentNarrow !== scrollState.toUseNarrow) {
+			if (!transformTimer.current) {
+				isTransforming.current = true;
+				transformTimer.current = setTimeout(() => {
+					isTransforming.current = false;
+					readyY.current = currentY.current;
+					transformTimer.current = null;
+				}, TRANSFORM_TIMEOUT);
+			}
+		}
+		return scrollState;
+	}, [toUseNarrow, hideHeader]);
+	const updateScrollState = (0, react.useCallback)((currentScrollTop) => {
+		const scrollDirection = currentScrollTop > currentY.current ? "down" : "up";
+		currentY.current = currentScrollTop;
+		const updateState = getScrollState(currentScrollTop, scrollDirection);
+		setToUseNarrow(() => updateState.toUseNarrow);
+		setHideHeader(() => updateState.hideHeader);
+	}, [getScrollState]);
+	const handleScroll = (0, react.useCallback)(() => {
+		lastKnownPageYOffset.current = window.pageYOffset;
+		if (!ticking.current) {
+			window.requestAnimationFrame(() => {
+				updateScrollState(lastKnownPageYOffset.current);
+				ticking.current = false;
+			});
+			ticking.current = true;
+		}
+	}, [updateScrollState]);
+	(0, react.useEffect)(() => {
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return () => {
+			window.removeEventListener("scroll", handleScroll);
+		};
+	}, [handleScroll]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_context.HeaderContext, {
+		value: {
+			releaseBranch,
+			isLinkExternal,
+			isAuthed,
+			theme,
+			pathname,
+			referrerPath,
+			toUseNarrow,
+			hideHeader
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_context.HamburgerContext, {
+			value: hamburgerContext,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+					className: (0, clsx.default)(`w-full top-0 transition-transform duration-300 ${bgColor}`, theme === require_theme.THEME.transparent ? "fixed" : "sticky", hideHeader ? "ease-in" : "ease-out", hideHeader ? "-translate-y-full" : "translate-y-0"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: (0, clsx.default)(`flex flex-col mx-auto px-[24px] ${require_tab_bar.ZIndex.header}`, "tablet:px-[32px]", "desktop:px-[48px]", "hd:w-[1280px] hd:px-0"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(desktop_and_above_default, {
+							topRowBgColor,
+							logoType
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(tablet_and_below_default, {
+							topRowBgColor,
+							logoType
+						})]
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, clsx.default)(`fixed top-0 left-0 ${require_tab_bar.ZIndex.hamburger} transition-transform duration-300 ease-in-out`, isHamburgerMenuOpen ? "translate-x-0 opacity-100" : "-translate-x-full opacity-100", "tablet:-left-[320px]", isHamburgerMenuOpen ? "tablet:translate-x-[320px] tablet:opacity-100" : "tablet:-translate-x-[320px] tablet:opacity-100", "desktop:-left-[280px]", isHamburgerMenuOpen ? "desktop:translate-x-[280px] desktop:opacity-100" : "desktop:-translate-x-[280px] desktop:opacity-100"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hamburger_menu.hamburger_menu_default, {})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tab_bar.tab_bar_default, {})
+			]
+		})
+	});
+};
+var header_default = Header;
+
+//#endregion
+module.exports = header_default;
+//# sourceMappingURL=index.js.map

package/lib/header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Icons: FC<{\n  releaseBranch?: ReleaseBranch\n  theme?: Theme\n}>","RELEASE_BRANCH","THEME","HeaderContext","ExternalLink","InternalLink","IconButton","Search","INTERNAL_LINKS","KidStar","Member","THEME","LOGO_TYPE","TopRow: FC<TopRowProps>","HeaderContext","HamburgerContext","ExternalLink","InternalLink","ZIndex","IconButton","Hamburger","INTERNAL_LINKS","LogoHeader","HEADER_ACTION_LINKS","PillButton","CHANNELS: ChannelType[]","INTERNAL_LINKS","ChannelItem: FC<ChannelItemProps>","HeaderContext","ExternalLink","InternalLink","TextButton","HamburgerContext","IconButton","Hamburger","Divider","DesktopAndAbove: FC<DesktopAndAboveProps>","HeaderContext","TopRow","Divider","ZIndex","CSSTransition","Channel","TabletAndBelow: FC<TabletAndBelowProps>","HeaderContext","ExternalLink","InternalLink","ZIndex","INTERNAL_LINKS","LogoHeader","EXTERNAL_LINKS","PillButton","TextButton","Header: FC<HeaderProps>","HeaderContext","HamburgerContext","THEME","ZIndex","DesktopAndAbove","TabletAndBelow","HamburgerMenu","TabBar"],"sources":["../../src/header/constants/animation.ts","../../src/header/components/top-row/icons.tsx","../../src/header/utils/theme.ts","../../src/header/components/top-row/index.tsx","../../src/header/components/channels/constants/index.ts","../../src/header/components/channels/index.tsx","../../src/header/components/desktop-and-above.tsx","../../src/header/components/tablet-and-below.tsx","../../src/header/index.tsx"],"sourcesContent":["export const ANIMATION = {\n  step1Duration: 'duration-[200ms]',\n  step2Delay: 'delay-[150ms]',\n  step2Duration: 'duration-[50ms]',\n  step3Delay: 'delay-[150ms]',\n  step3Duration: 'duration-[200ms]',\n} as const\n","import { useContext, type FC } from 'react'\n// context\nimport { HeaderContext } from '../../context'\n// constants\nimport { THEME, type Theme } from '../../../constants/theme'\nimport {\n  RELEASE_BRANCH,\n  type ReleaseBranch,\n} from '../../../constants/release-branch'\nimport { INTERNAL_LINKS } from '../../../constants/internal-links'\n// icons\nimport { Search, KidStar, Member } from '../../../icons'\n// button\nimport { IconButton } from '../../../button'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\n\nexport const Icons: FC<{\n  releaseBranch?: ReleaseBranch\n  theme?: Theme\n}> = ({ releaseBranch = RELEASE_BRANCH.master, theme = THEME.normal }) => {\n  const { isLinkExternal } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div className=\"ml-[24px] flex flex-row gap-[16px]\">\n      <IconButton iconComponent={Search(releaseBranch)} theme={theme} />\n      <LinkComponent to={INTERNAL_LINKS.myReading.index}>\n        <IconButton iconComponent={KidStar(releaseBranch)} theme={theme} />\n      </LinkComponent>\n      <LinkComponent to={INTERNAL_LINKS.account.index}>\n        <IconButton iconComponent={Member(releaseBranch)} theme={theme} />\n      </LinkComponent>\n    </div>\n  )\n}\n","import { THEME, type Theme } from '../../constants/theme'\nimport { LOGO_TYPE } from '../../logo/constants'\n\nexport const selectLogoType = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n    case THEME.transparent:\n      return LOGO_TYPE.white\n    default:\n      return LOGO_TYPE.default\n  }\n}\n\nexport const selectHeaderTheme = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n      return {\n        bgColor: 'bg-photo-dark',\n        topRowBgColor: 'bg-photo-dark',\n      }\n    case THEME.transparent:\n      return {\n        bgColor: 'bg-opacity-black-02',\n        topRowBgColor: 'bg-transparent',\n      }\n    case THEME.index:\n      return {\n        bgColor: 'bg-gray-white',\n        topRowBgColor: 'bg-gray-white',\n      }\n    default:\n      return {\n        bgColor: 'bg-gray-100',\n        topRowBgColor: 'bg-gray-100',\n      }\n  }\n}\n\nexport const selectSloganTheme = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n    case THEME.transparent:\n      return 'text-gray-white'\n    default:\n      return 'text-gray-800'\n  }\n}\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../../context'\n// constants\nimport { ZIndex } from '../../constants/z-index'\nimport { ANIMATION } from '../../constants/animation'\nimport { HEADER_ACTION_LINKS } from '../../constants/action-links'\nimport { INTERNAL_LINKS } from '../../../constants/internal-links'\n// logo\nimport { LogoHeader } from '../../../logo'\nimport type { LogoType } from '../../../logo/constants'\n// buton\nimport { IconButton, PillButton } from '../../../button'\n// components\nimport { Icons } from './icons'\nimport { Hamburger } from '../../../icons'\n// utils\nimport { selectSloganTheme } from '../../utils/theme'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\n\ntype TopRowProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst TopRow: FC<TopRowProps> = ({ topRowBgColor, logoType }) => {\n  const { toUseNarrow, releaseBranch, theme, isLinkExternal } =\n    useContext(HeaderContext)\n  const { toggleHamburger } = useContext(HamburgerContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div\n      className={clsx(\n        `flex items-center justify-between ${ZIndex.topRow} px-[16px] ${topRowBgColor}`,\n        toUseNarrow ? 'py-[16px]' : 'py-[24px]'\n      )}\n    >\n      {/* left group */}\n      <div className=\"flex items-center\">\n        <div\n          className={clsx(\n            toUseNarrow ? 'opacity-100' : 'opacity-0',\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            toUseNarrow ? 'delay-350' : 'delay-0'\n          )}\n        >\n          <IconButton\n            iconComponent={Hamburger(releaseBranch)}\n            theme={theme}\n            onClick={toggleHamburger}\n          />\n        </div>\n        {/* Logo */}\n        <div\n          className={clsx(\n            `flex items-center mr-[16px] transition-all ${ANIMATION.step3Duration}`,\n            toUseNarrow ? 'ml-[24px]' : 'ml-0',\n            toUseNarrow ? 'translate-x-0' : '-translate-x-[24px]',\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0'\n          )}\n        >\n          <LinkComponent\n            to={INTERNAL_LINKS.home}\n            className={clsx(\n              `transition-height ${ANIMATION.step3Duration}`,\n              toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0'\n            )}\n          >\n            <LogoHeader\n              type={logoType}\n              releaseBranch={releaseBranch}\n              className={clsx(toUseNarrow ? 'h-[24px]' : 'h-[32px]')}\n            />\n          </LinkComponent>\n        </div>\n        <div\n          className={clsx(\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            'flex items-center font-serif font-normal text-[14px]',\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n            toUseNarrow ? 'pointer-events-none' : 'pointer-events-auto',\n            toUseNarrow ? 'opacity-0' : 'opacity-100',\n            selectSloganTheme(theme)\n          )}\n        >\n          深度 × 開放 × 非營利\n        </div>\n      </div>\n      {/* right group */}\n      <div className=\"flex items-center\">\n        <div\n          className={clsx(\n            'flex items-center gap-[16px]',\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n            toUseNarrow ? 'pointer-events-none' : 'pointer-events-auto',\n            toUseNarrow ? 'opacity-0' : 'opacity-100'\n          )}\n        >\n          {HEADER_ACTION_LINKS.map((link) => (\n            <LinkComponent to={link.to} target={link.target} key={link.label}>\n              <PillButton text={link.label} theme={theme} type={link.type} />\n            </LinkComponent>\n          ))}\n        </div>\n        {/* icons */}\n        <Icons releaseBranch={releaseBranch} theme={theme} />\n      </div>\n    </div>\n  )\n}\n\nexport default TopRow\n","import { INTERNAL_LINKS } from '../../../../constants/internal-links'\nimport type { LinkTarget } from '../../../../customized-link/type'\n\ntype ChannelType = {\n  label: string\n  to: string\n  target: LinkTarget\n}\nexport const CHANNELS: ChannelType[] = [\n  {\n    label: '最新',\n    to: INTERNAL_LINKS.latest,\n    target: '_self',\n  },\n  {\n    label: '深度專題',\n    to: INTERNAL_LINKS.topics,\n    target: '_self',\n  },\n  {\n    label: '國際兩岸',\n    to: INTERNAL_LINKS.categories.world,\n    target: '_self',\n  },\n  {\n    label: '人權司法',\n    to: INTERNAL_LINKS.categories.humanRights,\n    target: '_self',\n  },\n  {\n    label: '政治社會',\n    to: INTERNAL_LINKS.categories.politicsAndSociety,\n    target: '_self',\n  },\n  {\n    label: '醫療健康',\n    to: INTERNAL_LINKS.categories.health,\n    target: '_self',\n  },\n  {\n    label: '環境永續',\n    to: INTERNAL_LINKS.categories.environment,\n    target: '_self',\n  },\n  {\n    label: '經濟產業',\n    to: INTERNAL_LINKS.categories.econ,\n    target: '_self',\n  },\n  {\n    label: '文化生活',\n    to: INTERNAL_LINKS.categories.culture,\n    target: '_self',\n  },\n  {\n    label: '教育校園',\n    to: INTERNAL_LINKS.categories.education,\n    target: '_self',\n  },\n]\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../../context'\n// components\nimport { IconButton, TextButton } from '../../../button'\nimport { Hamburger } from '../../../icons'\nimport Divider from '../../../divider'\n// constants\nimport { CHANNELS } from './constants'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\nimport type { LinkTarget } from '../../../customized-link/type'\n// lodash\nimport map from 'lodash/map'\nconst _ = {\n  map,\n}\ntype ChannelItemProps = {\n  link: {\n    href: string\n    target: LinkTarget\n  }\n  label: string\n}\nconst ChannelItem: FC<ChannelItemProps> = ({\n  link = { href: '', target: '_self' },\n  label = '',\n}) => {\n  const { theme, isLinkExternal } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div className={clsx('flex items-center', '[&>a]:no-underline')}>\n      <LinkComponent to={link.href} target={link.target}>\n        <TextButton\n          text={label}\n          size={TextButton.Size.l}\n          theme={theme}\n          style={TextButton.Style.dark}\n        />\n      </LinkComponent>\n    </div>\n  )\n}\n\nconst Channel = () => {\n  const { releaseBranch, theme } = useContext(HeaderContext)\n  const { toggleHamburger } = useContext(HamburgerContext)\n  return (\n    <div className=\"flex flex-col items-center\">\n      <div className=\"flex items-center justify-between w-full px-[16px] py-[8px]\">\n        <IconButton\n          iconComponent={Hamburger(releaseBranch)}\n          theme={theme}\n          onClick={toggleHamburger}\n        />\n        {_.map(CHANNELS, (channel) => {\n          return (\n            <ChannelItem\n              key={`channel-${channel.label}`}\n              label={channel.label}\n              link={{\n                href: channel.to,\n                target: channel.target,\n              }}\n            />\n          )\n        })}\n      </div>\n      <Divider />\n    </div>\n  )\n}\n\nexport default Channel\n","import { useContext, useRef, type FC } from 'react'\nimport clsx from 'clsx'\nimport { CSSTransition } from 'react-transition-group'\n// context\nimport { HeaderContext } from '../context'\n// constants\nimport { ZIndex } from '../constants/z-index'\nimport { ANIMATION } from '../constants/animation'\n// compontents\nimport TopRow from './top-row'\nimport Channel from './channels'\nimport Divider from '../../divider'\n// type\nimport type { LogoType } from '../../logo/constants'\ntype DesktopAndAboveProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst DesktopAndAbove: FC<DesktopAndAboveProps> = ({\n  topRowBgColor,\n  logoType,\n}) => {\n  const { toUseNarrow } = useContext(HeaderContext)\n  const channelRef = useRef<HTMLDivElement>(null)\n  return (\n    <div className=\"hidden desktop:flex desktop:flex-col\">\n      <TopRow topRowBgColor={topRowBgColor} logoType={logoType} />\n      {/* divider */}\n      <div\n        className={clsx(\n          `transition-opacity ${ANIMATION.step2Duration}`,\n          toUseNarrow ? 'opacity-0' : 'opacity-100',\n          toUseNarrow ? 'delay-0' : `${ANIMATION.step2Delay}`\n        )}\n      >\n        <Divider direction={Divider.Direction.horizontal} />\n      </div>\n      {/* channels */}\n      <div className={`${ZIndex.channel}`}>\n        <CSSTransition\n          in={!toUseNarrow}\n          nodeRef={channelRef}\n          classNames={{\n            enter: `opacity-0 -translate-y-full`,\n            enterActive: `transition-all ease-linear ${ANIMATION.step1Duration} ${ANIMATION.step2Delay} opacity-100 translate-y-0`,\n            exit: `opacity-100 translate-y-0`,\n            exitActive: `transition-all ease-linear ${ANIMATION.step1Duration} -translate-y-full`,\n          }}\n          timeout={{ appear: 0, enter: 350, exit: 200 }}\n          unmountOnExit\n        >\n          <div ref={channelRef}>\n            <Channel />\n          </div>\n        </CSSTransition>\n      </div>\n    </div>\n  )\n}\n\nexport default DesktopAndAbove\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../context'\n// constants\nimport { ZIndex } from '../constants/z-index'\nimport { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\n// logo\nimport { LogoHeader } from '../../logo'\nimport type { LogoType } from '../../logo/constants'\n// link\nimport { ExternalLink, InternalLink } from '../../customized-link'\n// button\nimport { PillButton, TextButton } from '../../button'\n\ntype TabletAndBelowProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst TabletAndBelow: FC<TabletAndBelowProps> = ({\n  topRowBgColor,\n  logoType,\n}) => {\n  const { isLinkExternal } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div\n      className={clsx(\n        `flex items-center justify-between ${ZIndex.topRow} py-[16px] ${topRowBgColor}`,\n        'desktop:hidden'\n      )}\n    >\n      {/* logo */}\n      <LinkComponent to={INTERNAL_LINKS.home} className=\"flex items-center\">\n        <LogoHeader type={logoType} className=\"h-[21px]\" />\n      </LinkComponent>\n      {/* actions */}\n      <div className=\"flex flex-row items-center gap-[16px]\">\n        <LinkComponent to={EXTERNAL_LINKS.monthlyDonation}>\n          <PillButton\n            text=\"贊助\"\n            theme={PillButton.Theme.normal}\n            type={PillButton.Type.primary}\n            style={PillButton.Style.brand}\n          />\n        </LinkComponent>\n        <LinkComponent to={INTERNAL_LINKS.account.index}>\n          <TextButton\n            text=\"登入\"\n            theme={TextButton.Theme.normal}\n            style={TextButton.Style.dark}\n            size={TextButton.Size.s}\n          />\n        </LinkComponent>\n      </div>\n    </div>\n  )\n}\n\nexport default TabletAndBelow\n","import { useRef, useState, useCallback, useEffect, type FC } from 'react'\nimport clsx from 'clsx'\n\n// constants\nimport { THEME, type Theme } from '../constants/theme'\nimport type { ReleaseBranch } from '../constants/release-branch'\nimport { ZIndex } from './constants/z-index'\n// components\nimport DesktopAndAbove from './components/desktop-and-above'\nimport TabletAndBelow from './components/tablet-and-below'\n// context\nimport {\n  HeaderContext,\n  HamburgerContext,\n  type HamburgerContextType,\n} from './context'\n// utils\nimport { selectHeaderTheme, selectLogoType } from './utils/theme'\n// hamburger menu\nimport HamburgerMenu from '../hamburger-menu'\n// tab bar\nimport TabBar from '../tab-bar'\n\nconst HIDE_HEADER_THRESHOLD = 8\nconst TRANSFORM_HEADER_THRESHOLD = 40\nconst TRANSFORM_TIMEOUT = 800\n\ntype HeaderProps = {\n  releaseBranch: ReleaseBranch\n  isLinkExternal: boolean\n  theme: Theme\n  pathname: string\n  referrerPath: string\n  hamburgerContext: HamburgerContextType\n}\nconst Header: FC<HeaderProps> = ({\n  releaseBranch,\n  isLinkExternal,\n  theme,\n  pathname,\n  referrerPath,\n  hamburgerContext,\n}) => {\n  const isAuthed = false\n\n  const { bgColor, topRowBgColor } = selectHeaderTheme(theme)\n  const logoType = selectLogoType(theme)\n\n  const { isHamburgerMenuOpen } = hamburgerContext\n\n  const [toUseNarrow, setToUseNarrow] = useState(false)\n  const [hideHeader, setHideHeader] = useState(false)\n\n  // TODO: get isAuthed from redux\n  // const isAuthed = useSelector(state => _.get(state, 'auth.isAuthed', false))\n\n  const lastKnownPageYOffset = useRef(0)\n  const ticking = useRef(false)\n  const currentY = useRef(0)\n  const readyY = useRef(0)\n  const isTransforming = useRef(false)\n  const transformTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  const getScrollState = useCallback(\n    (scrollTop: number, scrollDirection: 'up' | 'down') => {\n      const isCurrentNarrow = toUseNarrow\n      const nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD\n      const scrollState = { toUseNarrow, hideHeader }\n\n      if (isTransforming.current) {\n        return scrollState\n      }\n\n      if (scrollDirection === 'up') {\n        readyY.current = scrollTop\n        scrollState.hideHeader = false\n      }\n\n      if (scrollDirection === 'down') {\n        if (\n          isCurrentNarrow &&\n          scrollTop - readyY.current > HIDE_HEADER_THRESHOLD\n        ) {\n          scrollState.hideHeader = true\n        }\n      }\n\n      if (isCurrentNarrow) {\n        scrollState.toUseNarrow =\n          scrollDirection === 'down' ? true : nextToUseNarrow\n      } else {\n        scrollState.toUseNarrow =\n          scrollDirection === 'up' ? false : nextToUseNarrow\n      }\n\n      if (isCurrentNarrow !== scrollState.toUseNarrow) {\n        if (!transformTimer.current) {\n          isTransforming.current = true\n          transformTimer.current = setTimeout(() => {\n            isTransforming.current = false\n            readyY.current = currentY.current\n            transformTimer.current = null\n          }, TRANSFORM_TIMEOUT)\n        }\n      }\n\n      return scrollState\n    },\n    [toUseNarrow, hideHeader]\n  )\n\n  const updateScrollState = useCallback(\n    (currentScrollTop: number) => {\n      const scrollDirection =\n        currentScrollTop > currentY.current ? 'down' : 'up'\n      currentY.current = currentScrollTop\n      const updateState = getScrollState(currentScrollTop, scrollDirection)\n      setToUseNarrow(() => updateState.toUseNarrow)\n      setHideHeader(() => updateState.hideHeader)\n    },\n    [getScrollState]\n  )\n\n  const handleScroll = useCallback(() => {\n    lastKnownPageYOffset.current = window.pageYOffset\n    if (!ticking.current) {\n      window.requestAnimationFrame(() => {\n        updateScrollState(lastKnownPageYOffset.current)\n        ticking.current = false\n      })\n      ticking.current = true\n    }\n  }, [updateScrollState])\n\n  useEffect(() => {\n    window.addEventListener('scroll', handleScroll, { passive: true })\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [handleScroll])\n\n  return (\n    <HeaderContext\n      value={{\n        releaseBranch,\n        isLinkExternal,\n        isAuthed,\n        theme,\n        pathname,\n        referrerPath,\n        toUseNarrow,\n        hideHeader,\n      }}\n    >\n      <HamburgerContext value={hamburgerContext}>\n        <header\n          className={clsx(\n            `w-full top-0 transition-transform duration-300 ${bgColor}`,\n            theme === THEME.transparent ? 'fixed' : 'sticky',\n            hideHeader ? 'ease-in' : 'ease-out',\n            hideHeader ? '-translate-y-full' : 'translate-y-0'\n          )}\n        >\n          <div\n            className={clsx(\n              `flex flex-col mx-auto px-[24px] ${ZIndex.header}`,\n              'tablet:px-[32px]',\n              'desktop:px-[48px]',\n              'hd:w-[1280px] hd:px-0'\n            )}\n          >\n            <DesktopAndAbove\n              topRowBgColor={topRowBgColor}\n              logoType={logoType}\n            />\n            <TabletAndBelow topRowBgColor={topRowBgColor} logoType={logoType} />\n          </div>\n        </header>\n        <div\n          className={clsx(\n            `fixed top-0 left-0 ${ZIndex.hamburger} transition-transform duration-300 ease-in-out`,\n            isHamburgerMenuOpen\n              ? 'translate-x-0 opacity-100'\n              : '-translate-x-full opacity-100',\n            'tablet:-left-[320px]',\n            isHamburgerMenuOpen\n              ? 'tablet:translate-x-[320px] tablet:opacity-100'\n              : 'tablet:-translate-x-[320px] tablet:opacity-100',\n            'desktop:-left-[280px]',\n            isHamburgerMenuOpen\n              ? 'desktop:translate-x-[280px] desktop:opacity-100'\n              : 'desktop:-translate-x-[280px] desktop:opacity-100'\n          )}\n        >\n          <HamburgerMenu />\n        </div>\n        <TabBar />\n      </HamburgerContext>\n    </HeaderContext>\n  )\n}\n\nexport default Header\n"],"mappings":"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"}