npm - @twreporter/react-typescript-components - Versions diffs - 0.1.0-beta.10 → 0.1.0-beta.12 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (76) hide show

package/lib/hamburger-menu-BxO_YWHd.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hamburger-menu-BxO_YWHd.mjs","names":["SocialMedias: SocialMediaType[]","HEADER_ACTION_LINKS: ActionLink[]","HAMBURGER_MENU_ACION_LINKS: ActionLink[]","IconLink: FC<IconLinkProps>","ExternalLink","InternalLink","IconLink","IconLink: FC<IconLinkProps>","ExternalLink","InternalLink","SocialMedia: FC<SocialMediaProps>","IconButton","SocialMediaIcon","SocialMedia","HamburgerMenu: FC","ExternalLink","InternalLink","IconButton","LogoSymbol","LogoHeader","PillButton","TextButton","MenuButton","Divider","IconLink","LightLink","SocialMedia"],"sources":["../src/hamburger-menu/constants/channels.ts","../src/hamburger-menu/constants/social-media.ts","../src/header/constants/action-links.ts","../src/hamburger-menu/components/icon-link.tsx","../src/hamburger-menu/components/light-link.tsx","../src/hamburger-menu/components/social-media.tsx","../src/hamburger-menu/index.tsx"],"sourcesContent":["import { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\nimport type { LinkTarget } from '../../customized-link/type'\n\nexport const CHANNEL_TYPE = {\n link: 'link',\n divider: 'divider',\n dropdown: 'dropdown',\n iconLink: 'icon-link',\n lightLink: 'light-link',\n} as const\n\nexport const Channels = [\n {\n type: CHANNEL_TYPE.link,\n label: '最新',\n to: INTERNAL_LINKS.latest,\n target: '_self' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.divider,\n },\n {\n type: CHANNEL_TYPE.link,\n label: '深度專題',\n to: INTERNAL_LINKS.topics,\n target: '_self' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.dropdown,\n label: '議題',\n dropdownItems: [\n {\n label: '國際兩岸',\n to: INTERNAL_LINKS.categories.world,\n target: '_self' as LinkTarget,\n },\n {\n label: '人權司法',\n to: INTERNAL_LINKS.categories.humanRights,\n target: '_self' as LinkTarget,\n },\n {\n label: '政治社會',\n to: INTERNAL_LINKS.categories.politicsAndSociety,\n target: '_self' as LinkTarget,\n },\n {\n label: '醫療健康',\n to: INTERNAL_LINKS.categories.health,\n target: '_self' as LinkTarget,\n },\n {\n label: '環境永續',\n to: INTERNAL_LINKS.categories.environment,\n target: '_self' as LinkTarget,\n },\n {\n label: '經濟產業',\n to: INTERNAL_LINKS.categories.econ,\n target: '_self' as LinkTarget,\n },\n {\n label: '文化生活',\n to: INTERNAL_LINKS.categories.culture,\n target: '_self' as LinkTarget,\n },\n {\n label: '教育校園',\n to: INTERNAL_LINKS.categories.education,\n target: '_self' as LinkTarget,\n },\n ],\n },\n {\n type: CHANNEL_TYPE.dropdown,\n label: '評論',\n dropdownItems: [\n {\n label: '書摘與書評',\n to: INTERNAL_LINKS.categories.opinion.bookReview,\n target: '_self' as LinkTarget,\n },\n {\n label: '讀者投書',\n to: INTERNAL_LINKS.categories.opinion.letter,\n target: '_self' as LinkTarget,\n },\n {\n label: '全部',\n to: INTERNAL_LINKS.categories.opinion.index,\n target: '_self' as LinkTarget,\n },\n ],\n },\n {\n type: CHANNEL_TYPE.link,\n label: '人物故事',\n to: INTERNAL_LINKS.humanStory,\n target: '_self' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.divider,\n },\n {\n type: CHANNEL_TYPE.link,\n label: '影像',\n to: INTERNAL_LINKS.photography,\n target: '_self' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.dropdown,\n label: 'Podcast',\n dropdownItems: [\n {\n label: '關於報導者 Podcast',\n to: INTERNAL_LINKS.podcast.aboutPodcast,\n target: '_self' as LinkTarget,\n },\n {\n label: 'The Real Story',\n to: INTERNAL_LINKS.categories.podcast.theRealStory,\n target: '_self' as LinkTarget,\n },\n {\n label: 'On the Ground 路邊攤計劃',\n to: INTERNAL_LINKS.categories.podcast.onTheGround,\n target: '_self' as LinkTarget,\n },\n ],\n },\n {\n type: CHANNEL_TYPE.link,\n label: '少年報導者',\n to: EXTERNAL_LINKS.kidsReporter,\n target: '_blank' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.link,\n label: '報導者觀測站',\n to: EXTERNAL_LINKS.lawmaker,\n target: '_blank' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.link,\n label: '數位敘事',\n to: INTERNAL_LINKS.infographic,\n target: '_self' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.divider,\n },\n {\n type: CHANNEL_TYPE.iconLink,\n label: '個人專區',\n icon: 'member',\n to: INTERNAL_LINKS.account.index,\n target: '_self' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.iconLink,\n label: '我的閱讀',\n icon: 'kid_star',\n to: INTERNAL_LINKS.myReading.index,\n target: '_self' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.iconLink,\n label: '已收藏',\n icon: 'bookmark_basic',\n to: INTERNAL_LINKS.myReading.savedBookmarks,\n target: '_self' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.iconLink,\n label: '造訪紀錄',\n icon: 'history',\n to: INTERNAL_LINKS.myReading.browsingHistory,\n target: '_self' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.divider,\n },\n {\n type: CHANNEL_TYPE.lightLink,\n label: '基金會消息',\n to: INTERNAL_LINKS.categories.foundation.index,\n target: '_self' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.lightLink,\n label: '關於我們',\n to: INTERNAL_LINKS.about,\n target: '_blank' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.lightLink,\n label: '影響力報告',\n to: INTERNAL_LINKS.influenceReport,\n target: '_self' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.lightLink,\n label: '報導者開放實驗室',\n to: EXTERNAL_LINKS.openLab,\n target: '_blank' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.lightLink,\n label: '出版品與周邊',\n to: EXTERNAL_LINKS.publicationAndMerchandise,\n target: '_blank' as LinkTarget,\n },\n {\n type: CHANNEL_TYPE.divider,\n },\n]\n","import { MEDIA_TYPE, type MediaType } from '../../icons/constants'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\nimport type { LinkTarget } from '../../customized-link/type'\n\ntype SocialMediaType = {\n icon: MediaType\n link: string\n target: LinkTarget\n}\nexport const SocialMedias: SocialMediaType[] = [\n {\n icon: MEDIA_TYPE.facebook,\n link: EXTERNAL_LINKS.facebook,\n target: '_blank',\n },\n {\n icon: MEDIA_TYPE.instagram,\n link: EXTERNAL_LINKS.instagram,\n target: '_blank',\n },\n {\n icon: MEDIA_TYPE.threads,\n link: EXTERNAL_LINKS.threads,\n target: '_blank',\n },\n {\n icon: MEDIA_TYPE.youtube,\n link: EXTERNAL_LINKS.youtube,\n target: '_blank',\n },\n]\n","import { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\nimport type { LinkTarget } from '../../customized-link/type'\nimport { TYPE, type Type } from '../../button/constants'\n\ntype ActionLink = {\n label: string\n to: string\n target: LinkTarget\n type: Type\n}\n\nexport const HEADER_ACTION_LINKS: ActionLink[] = [\n {\n label: '電子報',\n to: INTERNAL_LINKS.account.emailSubscription,\n target: '_self' as LinkTarget,\n type: TYPE.secondary,\n },\n {\n label: '贊助',\n to: EXTERNAL_LINKS.monthlyDonation,\n target: '_blank',\n type: TYPE.primary,\n },\n]\n\nexport const HAMBURGER_MENU_ACION_LINKS: ActionLink[] = [\n {\n label: '訂閱電子報',\n to: INTERNAL_LINKS.account.emailSubscription,\n target: '_self',\n type: TYPE.secondary,\n },\n {\n label: '贊助我們',\n to: EXTERNAL_LINKS.monthlyDonation,\n target: '_blank',\n type: TYPE.primary,\n },\n]\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../../header/context'\n// theme\nimport { THEME } from '../../constants/theme'\n// utils\nimport { selectHamburgerFooterTheme } from '../utils/theme'\n// icon\nimport { Icon } from '../../icons'\n// text\nimport { P2 } from '../../text/paragraph'\n// link\nimport { ExternalLink, InternalLink } from '../../customized-link'\nimport type { LinkTarget } from '../../customized-link/type'\n\ntype IconLinkProps = {\n label: string\n icon: string\n to: string\n target: LinkTarget\n}\nconst IconLink: FC<IconLinkProps> = ({ label, icon, to, target }) => {\n const { theme, releaseBranch, isLinkExternal } = useContext(HeaderContext)\n const footerTheme = theme === THEME.transparent ? THEME.normal : theme\n const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n const {\n color,\n hoverColor,\n hoverBgColor,\n svgHoverBgColor,\n svgBgColor,\n activeColor,\n activeBgColor,\n svgActiveBgColor,\n } = selectHamburgerFooterTheme(footerTheme)\n return (\n <LinkComponent to={to} target={target}>\n <div\n className={clsx(\n 'py-[8px] px-[32px] flex items-center',\n '[&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:mr-[4px]',\n color,\n hoverColor,\n hoverBgColor,\n svgHoverBgColor,\n svgBgColor,\n activeColor,\n activeBgColor,\n svgActiveBgColor\n )}\n >\n <Icon filename={icon} releaseBranch={releaseBranch} />\n <P2 text={label} />\n </div>\n </LinkComponent>\n )\n}\n\nexport default IconLink\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../../header/context'\n// theme\nimport { THEME } from '../../constants/theme'\n// utils\nimport { selectHamburgerFooterTheme } from '../utils/theme'\n// text\nimport { P2 } from '../../text/paragraph'\n// link\nimport { ExternalLink, InternalLink } from '../../customized-link'\nimport type { LinkTarget } from '../../customized-link/type'\n\ntype IconLinkProps = {\n label: string\n to: string\n target: LinkTarget\n}\nconst IconLink: FC<IconLinkProps> = ({ label, to, target }) => {\n const { theme, isLinkExternal } = useContext(HeaderContext)\n const footerTheme = theme === THEME.transparent ? THEME.normal : theme\n const { color, hoverColor, hoverBgColor, activeColor, activeBgColor } =\n selectHamburgerFooterTheme(footerTheme)\n const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n return (\n <LinkComponent to={to} target={target}>\n <div\n className={clsx(\n 'py-[8px] px-[32px] flex items-center',\n '[&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:mr-[4px]',\n color,\n hoverColor,\n hoverBgColor,\n activeColor,\n activeBgColor\n )}\n >\n <P2 text={label} />\n </div>\n </LinkComponent>\n )\n}\n\nexport default IconLink\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../../header/context'\n// icon\nimport { SocialMedia as SocialMediaIcon } from '../../icons'\n// type\nimport type { MediaType } from '../../icons/constants'\n// theme\nimport { THEME } from '../../constants/theme'\n// button\nimport { IconButton } from '../../button'\n\ntype SocialMediaProps = {\n mediaType: MediaType\n}\nconst SocialMedia: FC<SocialMediaProps> = ({ mediaType }) => {\n const { theme, releaseBranch } = useContext(HeaderContext)\n const footerTheme = theme === THEME.transparent ? THEME.normal : theme\n const Icon = (\n <SocialMediaIcon mediaType={mediaType} releaseBranch={releaseBranch} />\n )\n return (\n <IconButton\n iconComponent={Icon}\n theme={footerTheme}\n className={clsx(\n '[&>svg]:h-[32px] [&>svg]:w-[32px]',\n '[&>svg]:tablet:h-[24px] [&>svg]:tablet:w-[24px]'\n )}\n />\n )\n}\n\nexport default SocialMedia\n","import { useContext, useState, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../header/context'\n// constants\nimport { THEME } from '../constants/theme'\nimport { Channels, CHANNEL_TYPE } from './constants/channels'\nimport { SocialMedias } from './constants/social-media'\nimport { HAMBURGER_MENU_ACION_LINKS } from '../header/constants/action-links'\nimport { INTERNAL_LINKS } from '../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../constants/external-links'\n// utils\nimport {\n selectHamburgerMenuTheme,\n selectHamburgerItemTheme,\n} from './utils/theme'\n// buttons\nimport { IconButton, MenuButton, PillButton, TextButton } from '../button'\n// icons\nimport { Cross } from '../icons'\n// logo\nimport { LogoSymbol, LogoHeader } from '../logo'\n// utils\nimport { selectLogoType } from './utils/theme'\n// divider\nimport Divider from '../divider'\n// components\nimport { DropdownMenu } from '../dropdown-menu'\nimport IconLink from './components/icon-link'\nimport LightLink from './components/light-link'\nimport SocialMedia from './components/social-media'\n// link\nimport { ExternalLink, InternalLink } from '../customized-link'\n\nconst HamburgerMenu: FC = () => {\n const { theme, releaseBranch, isLinkExternal } = useContext(HeaderContext)\n const { closeHamburgerMenu } = useContext(HamburgerContext)\n\n const menuTheme = theme === THEME.photography ? theme : THEME.normal\n const { bgColor, scrollBarColor } = selectHamburgerMenuTheme(menuTheme)\n const logoType = selectLogoType(menuTheme)\n const [activeKey, setActiveKey] = useState('')\n const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n\n return (\n <div\n className={clsx(\n 'w-screen h-screen overflow-scroll overscroll-contain',\n bgColor,\n // reserveHeightForIos15 is 48px\n `pb-[calc(48px+48px)]`,\n 'tablet:w-[320px] tablet:max-h-screen',\n 'desktop:w-[280px]',\n '[&::-webkit-scrollbar]:w-[4px]',\n '[&::-webkit-scrollbar]:bg-transparent',\n '[&::-webkit-scrollbar-thumb]:rounded-[2px]',\n scrollBarColor\n )}\n >\n {/* close icon */}\n <div\n className={clsx(\n 'hidden items-center justify-end pt-[24px] pr-[32px] pb-[16px]',\n 'tablet:flex'\n )}\n >\n <IconButton\n iconComponent={Cross(releaseBranch)}\n theme={menuTheme}\n onClick={closeHamburgerMenu}\n />\n </div>\n {/* logo */}\n <LinkComponent to={INTERNAL_LINKS.home}>\n <div\n className={clsx(\n 'hidden justify-center [&>img]:h-[24px] [&>img]:w-[24px]',\n 'tablet:flex'\n )}\n >\n <LogoSymbol type={logoType} releaseBranch={releaseBranch} />\n </div>\n </LinkComponent>\n {/* mobile hamburger header */}\n <div\n className={clsx(\n 'flex items-center justify-between px-[24px] py-[16px]',\n 'tablet:hidden'\n )}\n >\n <LinkComponent to={INTERNAL_LINKS.home}>\n <LogoHeader\n type={logoType}\n releaseBranch={releaseBranch}\n className=\"h-[21px]\"\n />\n </LinkComponent>\n <div className=\"flex 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 {/* search bar (visible on mobile and tablet) */}\n <div className=\"px-[32px] pt-[24px] pb-[8px] desktop:hidden\">\n <input\n type=\"text\"\n className={clsx(\n 'w-full h-[40px] rounded-[20px] px-[16px]',\n 'focus:outline-none'\n )}\n placeholder=\"搜尋\"\n />\n </div>\n {/* menu buttons */}\n <div className=\"flex flex-col pt-[16px]\">\n {Channels.map((channel, idx) => {\n if (channel.type === CHANNEL_TYPE.link) {\n const { color, hoverBgColor, activeBgColor } =\n selectHamburgerItemTheme(theme)\n return (\n <LinkComponent\n to={channel.to}\n target={channel.target}\n key={channel.label}\n >\n <MenuButton\n key={channel.label}\n text={channel.label}\n fontWeight={MenuButton.FontWeight.bold}\n color={color}\n p1ClassName={`${hoverBgColor} ${activeBgColor} pl-[32px] pr-[32px]`}\n />\n </LinkComponent>\n )\n }\n if (channel.type === CHANNEL_TYPE.divider) {\n return (\n <div className=\"py-[16px] px-[32px]\" key={`divider-${idx}`}>\n <Divider direction={Divider.Direction.horizontal} />\n </div>\n )\n }\n if (channel.type === CHANNEL_TYPE.dropdown) {\n const isActive = activeKey === channel.label\n const toggleFunc = (key: string) => {\n const nextActiveKey = activeKey === key ? '' : key\n setActiveKey(nextActiveKey)\n }\n return (\n <button\n onClick={() => toggleFunc(channel.label)}\n key={channel.label}\n type=\"button\"\n >\n <DropdownMenu\n text={channel.label}\n isActive={isActive}\n dropdownItems={channel.dropdownItems}\n />\n </button>\n )\n }\n if (channel.type === CHANNEL_TYPE.iconLink) {\n return (\n <IconLink\n label={channel.label}\n to={channel.to}\n target={channel.target}\n icon={channel.icon}\n key={channel.label}\n />\n )\n }\n if (channel.type === CHANNEL_TYPE.lightLink) {\n return (\n <LightLink\n label={channel.label}\n to={channel.to}\n target={channel.target}\n key={channel.label}\n />\n )\n }\n })}\n </div>\n {/* social media */}\n <div className=\"flex flex-row gap-[16px] justify-center\">\n {SocialMedias.map((socialMedia) => (\n <LinkComponent\n to={socialMedia.link}\n target={socialMedia.target}\n key={socialMedia.icon}\n >\n <SocialMedia mediaType={socialMedia.icon} />\n </LinkComponent>\n ))}\n </div>\n {/* action butoons */}\n <div\n className={clsx(\n 'hidden flex-col gap-[16px] px-[32px] pt-[40px] pb-[32px]',\n 'tablet:flex'\n )}\n >\n {HAMBURGER_MENU_ACION_LINKS.map((link) => (\n <LinkComponent to={link.to} target={link.target} key={link.label}>\n <PillButton\n text={link.label}\n theme={theme}\n type={link.type}\n className=\"w-full justify-center\"\n />\n </LinkComponent>\n ))}\n </div>\n </div>\n )\n}\n\nexport default HamburgerMenu\n"],"mappings":"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"}

package/lib/header/index.js CHANGED Viewed

@@ -3,8 +3,8 @@ 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_button = require('../button-CS2fz7hm.js');
+const require_external_links = require('../external-links-DCn-uTD-.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');
@@ -13,15 +13,15 @@ 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');
+require('../constants-BxxTZn8I.js');
+const require_icons = require('../icons-_Vt_HeKY.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('../dropdown-menu-DPQvVa7J.js');
+const require_hamburger_menu = require('../hamburger-menu-Bi0MDOgC.js');
+const require_logo = require('../logo-Dz8Mm84n.js');
+const require_tab_bar = require('../tab-bar-BmqqhoCY.js');
 require('../theme-BPB1kPtQ.js');
-require('../constants-Bz-ufaJ2.js');
+require('../constants-CBWeKJ-C.js');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let clsx = require("clsx");
@@ -121,7 +121,7 @@ const TopRow = ({ topRowBgColor, logoType }) => {
 			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"),
+					className: (0, clsx.default)(toUseNarrow ? "opacity-100" : "opacity-0", `transition-opacity ${ANIMATION.step3Duration}`, toUseNarrow ? "delay-[350ms]" : "delay-0"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
 						iconComponent: require_icons.Hamburger(releaseBranch),
 						theme,
@@ -132,11 +132,10 @@ const TopRow = ({ topRowBgColor, logoType }) => {
 					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]")
+							className: (0, clsx.default)(`transition-height ${ANIMATION.step3Duration}`, toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0", toUseNarrow ? "h-[24px]" : "h-[32px]")
 						})
 					})
 				}),

package/lib/header/index.js.map CHANGED Viewed

	@@ -1 +1 @@
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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"}
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-[350ms]' : '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 to={INTERNAL_LINKS.home}>\n <LogoHeader\n type={logoType}\n releaseBranch={releaseBranch}\n className={clsx(\n `transition-height ${ANIMATION.step3Duration}`,\n toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n toUseNarrow ? 'h-[24px]' : 'h-[32px]'\n )}\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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"}

package/lib/header/index.mjs CHANGED Viewed

@@ -3,8 +3,8 @@ import "../constants-oTHAnh6r.mjs";
 import "../constants-BWFuBApI.mjs";
 import "../paragraph-BWXQNQtX.mjs";
 import { THEME } from "../theme-BG6yZVj-.mjs";
-import { icon_button_default, pill_button_default, text_button_default } from "../button-DyUYGG90.mjs";
-import { EXTERNAL_LINKS } from "../external-links-2b4M_rcA.mjs";
+import { icon_button_default, pill_button_default, text_button_default } from "../button-KtEMUa_S.mjs";
+import { EXTERNAL_LINKS } from "../external-links-B-A17Osq.mjs";
 import { INTERNAL_LINKS } from "../internal-links-BF-974mA.mjs";
 import { RELEASE_BRANCH } from "../release-branch-DNCD1uH_.mjs";
 import { external_link_default } from "../external-link-Cx9S31Ye.mjs";
@@ -12,15 +12,15 @@ import "../customized-link-BkuKVCKQ.mjs";
 import "../constants-t0lkfgqP.mjs";
 import { divider_default } from "../divider-Bb3tebJO.mjs";
 import { HamburgerContext, HeaderContext } from "../context-BCesW3fW.mjs";
-import "../constants-CQscYQcW.mjs";
-import { Hamburger, KidStar, Member, Search } from "../icons-DguoV48M.mjs";
+import "../constants-CeM93YWF.mjs";
+import { Hamburger, KidStar, Member, Search } from "../icons-DJMi42DI.mjs";
 import { LOGO_TYPE } from "../constants-BqeEbkVD.mjs";
-import "../dropdown-menu-Cil4RtSK.mjs";
-import { ZIndex, tab_bar_default } from "../tab-bar-CBL2tDXk.mjs";
-import { HEADER_ACTION_LINKS, hamburger_menu_default } from "../hamburger-menu-BZ1hA7l5.mjs";
-import { logo_header_default } from "../logo-CC5oU9Qb.mjs";
+import "../dropdown-menu-CrEAe1Td.mjs";
+import { HEADER_ACTION_LINKS, hamburger_menu_default } from "../hamburger-menu-BxO_YWHd.mjs";
+import { logo_header_default } from "../logo-Caqpr_8x.mjs";
+import { ZIndex, tab_bar_default } from "../tab-bar-BbOB2CDM.mjs";
 import "../theme-BErS2Qs6.mjs";
-import "../constants-QF71lY6v.mjs";
+import "../constants-VHBN0pYQ.mjs";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -115,7 +115,7 @@ const TopRow = ({ topRowBgColor, logoType }) => {
 			className: "flex items-center",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: clsx(toUseNarrow ? "opacity-100" : "opacity-0", `transition-opacity ${ANIMATION.step3Duration}`, toUseNarrow ? "delay-350" : "delay-0"),
+					className: clsx(toUseNarrow ? "opacity-100" : "opacity-0", `transition-opacity ${ANIMATION.step3Duration}`, toUseNarrow ? "delay-[350ms]" : "delay-0"),
 					children: /* @__PURE__ */ jsx(icon_button_default, {
 						iconComponent: Hamburger(releaseBranch),
 						theme,
@@ -126,11 +126,10 @@ const TopRow = ({ topRowBgColor, logoType }) => {
 					className: clsx(`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__ */ jsx(LinkComponent, {
 						to: INTERNAL_LINKS.home,
-						className: clsx(`transition-height ${ANIMATION.step3Duration}`, toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0"),
 						children: /* @__PURE__ */ jsx(logo_header_default, {
 							type: logoType,
 							releaseBranch,
-							className: clsx(toUseNarrow ? "h-[24px]" : "h-[32px]")
+							className: clsx(`transition-height ${ANIMATION.step3Duration}`, toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0", toUseNarrow ? "h-[24px]" : "h-[32px]")
 						})
 					})
 				}),

package/lib/header/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["Icons: FC<{\n releaseBranch?: ReleaseBranch\n theme?: Theme\n}>","ExternalLink","InternalLink","IconButton","TopRow: FC<TopRowProps>","ExternalLink","InternalLink","IconButton","LogoHeader","PillButton","CHANNELS: ChannelType[]","ChannelItem: FC<ChannelItemProps>","ExternalLink","InternalLink","TextButton","IconButton","Divider","DesktopAndAbove: FC<DesktopAndAboveProps>","TopRow","Divider","Channel","TabletAndBelow: FC<TabletAndBelowProps>","ExternalLink","InternalLink","LogoHeader","PillButton","TextButton","Header: FC<HeaderProps>","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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"}
1	+ {"version":3,"file":"index.mjs","names":["Icons: FC<{\n releaseBranch?: ReleaseBranch\n theme?: Theme\n}>","ExternalLink","InternalLink","IconButton","TopRow: FC<TopRowProps>","ExternalLink","InternalLink","IconButton","LogoHeader","PillButton","CHANNELS: ChannelType[]","ChannelItem: FC<ChannelItemProps>","ExternalLink","InternalLink","TextButton","IconButton","Divider","DesktopAndAbove: FC<DesktopAndAboveProps>","TopRow","Divider","Channel","TabletAndBelow: FC<TabletAndBelowProps>","ExternalLink","InternalLink","LogoHeader","PillButton","TextButton","Header: FC<HeaderProps>","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-[350ms]' : '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 to={INTERNAL_LINKS.home}>\n <LogoHeader\n type={logoType}\n releaseBranch={releaseBranch}\n className={clsx(\n `transition-height ${ANIMATION.step3Duration}`,\n toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n toUseNarrow ? 'h-[24px]' : 'h-[32px]'\n )}\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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"}

package/lib/icons/constants.d.mts CHANGED Viewed

@@ -1,3 +1,3 @@
 import "../index-BmIgLA0K.mjs";
-import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-BswaTS-y.mjs";
+import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-C9Ev_zet.mjs";
 export { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType };

package/lib/icons/constants.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import "../index-H3peA2d_.js";
-import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-DQxcqnYL.js";
+import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-CBjyeHSl.js";
 export { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType };

package/lib/icons/constants.js CHANGED Viewed

@@ -1,4 +1,4 @@
-const require_constants = require('../constants-DF_II8Fz.js');
+const require_constants = require('../constants-BxxTZn8I.js');
 exports.ARROW_DIRECTION = require_constants.ARROW_DIRECTION;
 exports.ICON_TYPE = require_constants.ICON_TYPE;

package/lib/icons/constants.mjs CHANGED Viewed

@@ -1,3 +1,3 @@
-import { ARROW_DIRECTION, ICON_TYPE, MEDIA_TYPE } from "../constants-CQscYQcW.mjs";
+import { ARROW_DIRECTION, ICON_TYPE, MEDIA_TYPE } from "../constants-CeM93YWF.mjs";
 export { ARROW_DIRECTION, ICON_TYPE, MEDIA_TYPE };

package/lib/icons/index.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
 import "../index-BmIgLA0K.mjs";
 import { RELEASE_BRANCH, ReleaseBranch } from "../release-branch-DZwlCiWD.mjs";
-import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-BswaTS-y.mjs";
+import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-C9Ev_zet.mjs";
 import React from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";

package/lib/icons/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import "../index-H3peA2d_.js";
 import { RELEASE_BRANCH, ReleaseBranch } from "../release-branch-CsBbhuYE.js";
-import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-DQxcqnYL.js";
+import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-CBjyeHSl.js";
 import React from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";

package/lib/icons/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 require('../release-branch-CRZV4Ivz.js');
-require('../constants-DF_II8Fz.js');
-const require_icons = require('../icons-DF-7dKxN.js');
+require('../constants-BxxTZn8I.js');
+const require_icons = require('../icons-_Vt_HeKY.js');
 exports.Arrow = require_icons.Arrow;
 exports.Clock = require_icons.Clock;

package/lib/icons/index.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import "../release-branch-DNCD1uH_.mjs";
-import "../constants-CQscYQcW.mjs";
-import { Arrow, Clock, Cross, Hamburger, Home, Icon, KidStar, Member, Search, SocialMedia, Topic } from "../icons-DguoV48M.mjs";
+import "../constants-CeM93YWF.mjs";
+import { Arrow, Clock, Cross, Hamburger, Home, Icon, KidStar, Member, Search, SocialMedia, Topic } from "../icons-DJMi42DI.mjs";
 export { Arrow, Clock, Cross, Hamburger, Home, Icon, KidStar, Member, Search, SocialMedia, Topic };

package/lib/{icons-DguoV48M.mjs → icons-DJMi42DI.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { RELEASE_BRANCH } from "./release-branch-DNCD1uH_.mjs";
-import { ARROW_DIRECTION, ICON_TYPE, MEDIA_TYPE } from "./constants-CQscYQcW.mjs";
+import { ARROW_DIRECTION, ICON_TYPE, MEDIA_TYPE } from "./constants-CeM93YWF.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
@@ -57,4 +57,4 @@ SocialMedia.MediaType = MEDIA_TYPE;
 //#endregion
 export { Arrow, Clock, Cross, Hamburger, Home, Icon, KidStar, Member, Search, SocialMedia, Topic };
-//# sourceMappingURL=icons-DguoV48M.mjs.map
+//# sourceMappingURL=icons-DJMi42DI.mjs.map

package/lib/{icons-DguoV48M.mjs.map → icons-DJMi42DI.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icons-~~DguoV48M~~.mjs","names":["Icon: React.FC<IconProps> & {\n Type: typeof ICON_TYPE\n ReleaseBranch: typeof RELEASE_BRANCH\n}","Arrow: React.FC<{\n direction?: ArrowDirection\n releaseBranch: ReleaseBranch\n}> & {\n Direction: typeof ARROW_DIRECTION\n}","SocialMedia: React.FC<SocialMediaProps> & {\n Type: typeof ICON_TYPE\n MediaType: typeof MEDIA_TYPE\n}"],"sources":["../src/icons/index.tsx"],"sourcesContent":["import type React from 'react'\nimport clsx from 'clsx'\n\nimport { RELEASE_BRANCH, type ReleaseBranch } from '../constants/release-branch'\nimport {\n ICON_TYPE,\n type IconType,\n ARROW_DIRECTION,\n type ArrowDirection,\n MEDIA_TYPE,\n type MediaType,\n} from './constants'\n\nconst baseGCSDir = 'https://www.twreporter.org/assets/icon/'\n\ntype IconProps = {\n type?: IconType\n filename: string\n releaseBranch?: ReleaseBranch\n className?: string\n}\nexport const Icon: React.FC<IconProps> & {\n Type: typeof ICON_TYPE\n ReleaseBranch: typeof RELEASE_BRANCH\n} = ({\n type = ICON_TYPE.mask,\n filename,\n releaseBranch = RELEASE_BRANCH.master,\n className = '',\n}) => {\n const src = `${baseGCSDir}${releaseBranch}/${filename}.svg`\n\n if (type === ICON_TYPE.raw) {\n return (\n // biome-ignore lint/performance/noImgElement: use next image later\n <img\n src={src}\n alt={filename}\n className={clsx('h-[24px] w-[24px]', className)}\n />\n )\n }\n\n return (\n <svg\n className={clsx('h-[24px] w-[24px] bg-gray-black mask-cover', className)}\n // tailwindcss seems not support dynamic values in mask-image\n style={{ maskImage: `url(${src})`, WebkitMaskImage: `url(${src})` }}\n />\n )\n}\n\nIcon.Type = ICON_TYPE\nIcon.ReleaseBranch = RELEASE_BRANCH\n\nconst getIcon = (gcsFileName: string, releaseBranch: ReleaseBranch) => {\n return (\n <Icon\n filename={gcsFileName}\n releaseBranch={releaseBranch}\n type={ICON_TYPE.mask}\n />\n )\n}\n\nexport const Hamburger = (releaseBranch: ReleaseBranch) =>\n getIcon('hamburger', releaseBranch)\nexport const Search = (releaseBranch: ReleaseBranch) =>\n getIcon('search', releaseBranch)\nexport const KidStar = (releaseBranch: ReleaseBranch) =>\n getIcon('kid_star', releaseBranch)\nexport const Member = (releaseBranch: ReleaseBranch) =>\n getIcon('member', releaseBranch)\nexport const Cross = (releaseBranch: ReleaseBranch) =>\n getIcon('cross', releaseBranch)\nexport const Home = (releaseBranch: ReleaseBranch) =>\n getIcon('home', releaseBranch)\nexport const Topic = (releaseBranch: ReleaseBranch) =>\n getIcon('topic', releaseBranch)\nexport const Clock = (releaseBranch: ReleaseBranch) =>\n getIcon('clock', releaseBranch)\n\nexport const Arrow: React.FC<{\n direction?: ArrowDirection\n releaseBranch: ReleaseBranch\n}> & {\n Direction: typeof ARROW_DIRECTION\n} = ({ direction = ARROW_DIRECTION.right, releaseBranch }) => {\n const filename = `arrow_${direction}`\n return <Icon filename={filename} releaseBranch={releaseBranch} />\n}\nArrow.Direction = ARROW_DIRECTION\n\ntype SocialMediaProps = {\n type?: IconType\n mediaType: MediaType\n releaseBranch: ReleaseBranch\n}\nexport const SocialMedia: React.FC<SocialMediaProps> & {\n Type: typeof ICON_TYPE\n MediaType: typeof MEDIA_TYPE\n} = ({\n type = Icon.Type.mask,\n mediaType = MEDIA_TYPE.google,\n releaseBranch = Icon.ReleaseBranch.master,\n}) => {\n return <Icon filename={mediaType} type={type} releaseBranch={releaseBranch} />\n}\nSocialMedia.Type = ICON_TYPE\nSocialMedia.MediaType = MEDIA_TYPE\n"],"mappings":";;;;;;AAaA,MAAM,aAAa;AAQnB,MAAaA,QAGR,EACH,OAAO,UAAU,MACjB,UACA,gBAAgB,eAAe,QAC/B,YAAY,SACR;CACJ,MAAM,MAAM,GAAG,aAAa,cAAc,GAAG,SAAS;AAEtD,KAAI,SAAS,UAAU,IACrB,QAEE,oBAAC;EACM;EACL,KAAK;EACL,WAAW,KAAK,qBAAqB,UAAU;GAC/C;AAIN,QACE,oBAAC;EACC,WAAW,KAAK,8CAA8C,UAAU;EAExE,OAAO;GAAE,WAAW,OAAO,IAAI;GAAI,iBAAiB,OAAO,IAAI;GAAI;GACnE;;AAIN,KAAK,OAAO;AACZ,KAAK,gBAAgB;AAErB,MAAM,WAAW,aAAqB,kBAAiC;AACrE,QACE,oBAAC;EACC,UAAU;EACK;EACf,MAAM,UAAU;GAChB;;AAIN,MAAa,aAAa,kBACxB,QAAQ,aAAa,cAAc;AACrC,MAAa,UAAU,kBACrB,QAAQ,UAAU,cAAc;AAClC,MAAa,WAAW,kBACtB,QAAQ,YAAY,cAAc;AACpC,MAAa,UAAU,kBACrB,QAAQ,UAAU,cAAc;AAClC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AACjC,MAAa,QAAQ,kBACnB,QAAQ,QAAQ,cAAc;AAChC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AACjC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AAEjC,MAAaC,SAKR,EAAE,YAAY,gBAAgB,OAAO,oBAAoB;CAC5D,MAAM,WAAW,SAAS;AAC1B,QAAO,oBAAC;EAAe;EAAyB;GAAiB;;AAEnE,MAAM,YAAY;AAOlB,MAAaC,eAGR,EACH,OAAO,KAAK,KAAK,MACjB,YAAY,WAAW,QACvB,gBAAgB,KAAK,cAAc,aAC/B;AACJ,QAAO,oBAAC;EAAK,UAAU;EAAiB;EAAqB;GAAiB;;AAEhF,YAAY,OAAO;AACnB,YAAY,YAAY"}
1	+ {"version":3,"file":"icons-DJMi42DI.mjs","names":["Icon: React.FC<IconProps> & {\n Type: typeof ICON_TYPE\n ReleaseBranch: typeof RELEASE_BRANCH\n}","Arrow: React.FC<{\n direction?: ArrowDirection\n releaseBranch: ReleaseBranch\n}> & {\n Direction: typeof ARROW_DIRECTION\n}","SocialMedia: React.FC<SocialMediaProps> & {\n Type: typeof ICON_TYPE\n MediaType: typeof MEDIA_TYPE\n}"],"sources":["../src/icons/index.tsx"],"sourcesContent":["import type React from 'react'\nimport clsx from 'clsx'\n\nimport { RELEASE_BRANCH, type ReleaseBranch } from '../constants/release-branch'\nimport {\n ICON_TYPE,\n type IconType,\n ARROW_DIRECTION,\n type ArrowDirection,\n MEDIA_TYPE,\n type MediaType,\n} from './constants'\n\nconst baseGCSDir = 'https://www.twreporter.org/assets/icon/'\n\ntype IconProps = {\n type?: IconType\n filename: string\n releaseBranch?: ReleaseBranch\n className?: string\n}\nexport const Icon: React.FC<IconProps> & {\n Type: typeof ICON_TYPE\n ReleaseBranch: typeof RELEASE_BRANCH\n} = ({\n type = ICON_TYPE.mask,\n filename,\n releaseBranch = RELEASE_BRANCH.master,\n className = '',\n}) => {\n const src = `${baseGCSDir}${releaseBranch}/${filename}.svg`\n\n if (type === ICON_TYPE.raw) {\n return (\n // biome-ignore lint/performance/noImgElement: use next image later\n <img\n src={src}\n alt={filename}\n className={clsx('h-[24px] w-[24px]', className)}\n />\n )\n }\n\n return (\n <svg\n className={clsx('h-[24px] w-[24px] bg-gray-black mask-cover', className)}\n // tailwindcss seems not support dynamic values in mask-image\n style={{ maskImage: `url(${src})`, WebkitMaskImage: `url(${src})` }}\n />\n )\n}\n\nIcon.Type = ICON_TYPE\nIcon.ReleaseBranch = RELEASE_BRANCH\n\nconst getIcon = (gcsFileName: string, releaseBranch: ReleaseBranch) => {\n return (\n <Icon\n filename={gcsFileName}\n releaseBranch={releaseBranch}\n type={ICON_TYPE.mask}\n />\n )\n}\n\nexport const Hamburger = (releaseBranch: ReleaseBranch) =>\n getIcon('hamburger', releaseBranch)\nexport const Search = (releaseBranch: ReleaseBranch) =>\n getIcon('search', releaseBranch)\nexport const KidStar = (releaseBranch: ReleaseBranch) =>\n getIcon('kid_star', releaseBranch)\nexport const Member = (releaseBranch: ReleaseBranch) =>\n getIcon('member', releaseBranch)\nexport const Cross = (releaseBranch: ReleaseBranch) =>\n getIcon('cross', releaseBranch)\nexport const Home = (releaseBranch: ReleaseBranch) =>\n getIcon('home', releaseBranch)\nexport const Topic = (releaseBranch: ReleaseBranch) =>\n getIcon('topic', releaseBranch)\nexport const Clock = (releaseBranch: ReleaseBranch) =>\n getIcon('clock', releaseBranch)\n\nexport const Arrow: React.FC<{\n direction?: ArrowDirection\n releaseBranch: ReleaseBranch\n}> & {\n Direction: typeof ARROW_DIRECTION\n} = ({ direction = ARROW_DIRECTION.right, releaseBranch }) => {\n const filename = `arrow_${direction}`\n return <Icon filename={filename} releaseBranch={releaseBranch} />\n}\nArrow.Direction = ARROW_DIRECTION\n\ntype SocialMediaProps = {\n type?: IconType\n mediaType: MediaType\n releaseBranch: ReleaseBranch\n}\nexport const SocialMedia: React.FC<SocialMediaProps> & {\n Type: typeof ICON_TYPE\n MediaType: typeof MEDIA_TYPE\n} = ({\n type = Icon.Type.mask,\n mediaType = MEDIA_TYPE.google,\n releaseBranch = Icon.ReleaseBranch.master,\n}) => {\n return <Icon filename={mediaType} type={type} releaseBranch={releaseBranch} />\n}\nSocialMedia.Type = ICON_TYPE\nSocialMedia.MediaType = MEDIA_TYPE\n"],"mappings":";;;;;;AAaA,MAAM,aAAa;AAQnB,MAAaA,QAGR,EACH,OAAO,UAAU,MACjB,UACA,gBAAgB,eAAe,QAC/B,YAAY,SACR;CACJ,MAAM,MAAM,GAAG,aAAa,cAAc,GAAG,SAAS;AAEtD,KAAI,SAAS,UAAU,IACrB,QAEE,oBAAC;EACM;EACL,KAAK;EACL,WAAW,KAAK,qBAAqB,UAAU;GAC/C;AAIN,QACE,oBAAC;EACC,WAAW,KAAK,8CAA8C,UAAU;EAExE,OAAO;GAAE,WAAW,OAAO,IAAI;GAAI,iBAAiB,OAAO,IAAI;GAAI;GACnE;;AAIN,KAAK,OAAO;AACZ,KAAK,gBAAgB;AAErB,MAAM,WAAW,aAAqB,kBAAiC;AACrE,QACE,oBAAC;EACC,UAAU;EACK;EACf,MAAM,UAAU;GAChB;;AAIN,MAAa,aAAa,kBACxB,QAAQ,aAAa,cAAc;AACrC,MAAa,UAAU,kBACrB,QAAQ,UAAU,cAAc;AAClC,MAAa,WAAW,kBACtB,QAAQ,YAAY,cAAc;AACpC,MAAa,UAAU,kBACrB,QAAQ,UAAU,cAAc;AAClC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AACjC,MAAa,QAAQ,kBACnB,QAAQ,QAAQ,cAAc;AAChC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AACjC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AAEjC,MAAaC,SAKR,EAAE,YAAY,gBAAgB,OAAO,oBAAoB;CAC5D,MAAM,WAAW,SAAS;AAC1B,QAAO,oBAAC;EAAe;EAAyB;GAAiB;;AAEnE,MAAM,YAAY;AAOlB,MAAaC,eAGR,EACH,OAAO,KAAK,KAAK,MACjB,YAAY,WAAW,QACvB,gBAAgB,KAAK,cAAc,aAC/B;AACJ,QAAO,oBAAC;EAAK,UAAU;EAAiB;EAAqB;GAAiB;;AAEhF,YAAY,OAAO;AACnB,YAAY,YAAY"}