@anker-in/headless-ui 0.0.27-alpha.143 → 0.0.27-alpha.146
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.
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +2 -2
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +2 -2
- package/dist/cjs/components/container.js +1 -1
- package/dist/cjs/components/container.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +2 -2
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +2 -2
- package/dist/esm/components/container.js +1 -1
- package/dist/esm/components/container.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var j=Object.create;var f=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var J=(n,o)=>{for(var e in o)f(n,e,{get:o[e],enumerable:!0})},L=(n,o,e,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of O(o))!G.call(n,s)&&s!==e&&f(n,s,{get:()=>o[s],enumerable:!(i=q(o,s))||i.enumerable});return n};var K=(n,o,e)=>(e=n!=null?j(A(n)):{},L(o||!n||!n.__esModule?f(e,"default",{value:n,enumerable:!0}):e,n)),Q=n=>L(f({},"__esModule",{value:!0}),n);var X={};J(X,{default:()=>W});module.exports=Q(X);var t=require("react/jsx-runtime"),r=require("react"),T=require("lodash"),d=require("../../helpers/utils.js"),N=require("../../shared/Styles.js"),oe=require("../../components/picture.js"),P=K(require("../../components/button.js")),h=require("@payloadcms/richtext-lexical/html"),E=require("react-intersection-observer");const M=({defaultConverters:n})=>({...n,text:o=>{const{node:e}=o;return e.$&&e.$.color?`<span class="lexical-${e.$.color}">${e.text}</span>`:e.text}}),U=(0,r.forwardRef)(({className:n="",onBtnClick:o,data:{title:e,videoTitle:i,btnText:s,img:Z,video:R,theme:z,shape:B,...$}},I)=>{const{sticky:c}=$,[p,m]=(0,r.useState)(!1),[y,_]=(0,r.useState)(0),[C,S]=(0,r.useState)(0),a=(0,r.useRef)(null),V=(0,r.useRef)(null),l=(0,r.useRef)(null),{ref:D,inView:w}=(0,E.useInView)();(0,r.useImperativeHandle)(I,()=>l.current);const H=typeof e=="string"?e:e&&(0,h.convertLexicalToHTML)({data:e,converters:M}),b=typeof i=="string"?i:i&&(0,h.convertLexicalToHTML)({data:i,converters:M});(0,r.useEffect)(()=>{w&&!s?(a.current?.play(),m(!0)):(a.current?.pause(),m(!1))},[w]);const g=(0,T.debounce)(()=>{if(l.current){const x=l.current.getBoundingClientRect(),u=window.innerHeight,F=window.scrollY||window.pageYOffset,Y=x.bottom+F,k=document.documentElement.scrollHeight-Y;_(k>u?u:k)}if(l.current){const x=l.current.clientHeight,u=window.innerHeight;S(x+u)}},600);(0,r.useEffect)(()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)}),[]);const v="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return(0,t.jsxs)(t.Fragment,{children:[c&&(0,t.jsx)("div",{ref:l,className:(0,d.cn)("relative z-10 ",v),children:(0,t.jsx)("div",{children:(0,t.jsxs)("div",{ref:D,className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4",children:[H&&!p&&(0,t.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:H}}),b&&p&&(0,t.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),!p&&s&&(0,t.jsx)(P.default,{variant:"link",className:(0,d.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{p?(a.current&&a.current.pause(),m(!1)):(a.current&&a.current.play(),m(!0)),o&&o?.()},children:s})]})})}),(0,t.jsxs)("div",{style:c?{marginBottom:`-${y}px`,marginTop:`-${C}px`}:{},className:"relative",children:[(0,t.jsx)("div",{className:"sticky top-0 ",children:(0,t.jsx)("div",{className:(0,d.cn)("relative overflow-hidden",c?"h-screen w-screen":v,n,{"aiui-dark":z==="dark","rounded-box":B==="rounded"}),children:(0,t.jsx)("div",{children:(0,t.jsxs)("div",{ref:V,className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,t.jsx)("video",{ref:a,className:"size-full object-cover",src:R?.url,muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,t.jsx)("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})})}),(0,t.jsx)("div",{className:(0,d.cn)(c&&"relative box-content block",v),style:c?{height:`${y}px`}:{}})]})]})});var W=(0,N.withStyles)(U);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_picture", "import_button", "import_html", "import_react_intersection_observer", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div ref={titleRef} className={cn('relative z-10 ', aspect)}>\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-screen' : aspect, className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n <video\n ref={videoRef}\n className=\"size-full object-cover\"\n src={video?.url}\n muted\n loop\n playsInline\n webkit-playsinline\n x5-playsinline\n />\n <div className=\"absolute left-0 top-0 z-10 size-full\" />\n </div>\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n />\n </div>\n </>\n )\n }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_picture", "import_button", "import_html", "import_react_intersection_observer", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "bgRef", "titleRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "Button"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var K=Object.create;var c=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(r,s)=>{for(var t in s)c(r,t,{get:s[t],enumerable:!0})},P=(r,s,t,n)=>{if(s&&typeof s=="object"||typeof s=="function")for(let a of W(s))!Z.call(r,a)&&a!==t&&c(r,a,{get:()=>s[a],enumerable:!(n=U(s,a))||n.enumerable});return r};var i=(r,s,t)=>(t=r!=null?K(X(r)):{},P(s||!r||!r.__esModule?c(t,"default",{value:r,enumerable:!0}):t,r)),te=r=>P(c({},"__esModule",{value:!0}),r);var oe={};ee(oe,{default:()=>ae});module.exports=te(oe);var e=require("react/jsx-runtime"),o=i(require("react")),z=require("es-toolkit"),C=require("react-intersection-observer"),d=require("../../helpers/utils.js"),T=require("../../shared/Styles.js"),L=i(require("../Slogan/index.js")),l=require("../../components/gird.js"),$=require("../../components/container.js"),B=i(require("../BrandEquity/index.js")),Y=i(require("../MemberEquity/index.js")),q=i(require("../Spacer/index.js")),I=i(require("gsap")),v=require("@payloadcms/richtext-lexical/html"),b=require("react-responsive");const S=({defaultConverters:r})=>({...r,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),y=({children:r,spaceY:s})=>{const t=(0,b.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)($.Container,{spaceY:s,className:"!bg-transparent",children:(0,e.jsxs)(l.Grid,{children:[!t&&(0,e.jsx)(l.GridItem,{span:1}),(0,e.jsx)(l.GridItem,{span:t?12:10,children:r}),!t&&(0,e.jsx)(l.GridItem,{span:1})]})})},re=o.default.forwardRef(({children:r,id:s,components:t})=>{const n=(0,o.useRef)(null);return(0,e.jsxs)("div",{ref:n,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:r}),(0,e.jsx)(e.Fragment,{children:t?.map(a=>{switch(a.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(y,{spaceY:"none",children:(0,e.jsx)(B.default,{data:a,style:a?.style})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(y,{spaceY:"none",children:(0,e.jsx)(Y.default,{data:a,className:"w-full",style:a?.style})})});case"ipc-spacer":return(0,e.jsx)(q.default,{data:a,style:a?.style,className:"!bg-transparent"});default:return null}})})]})}),se=(0,o.forwardRef)(({className:r="",id:s,data:{title:t,videoTitle:n,mobVideo:a,mobImg:g,img:p,video:w,theme:h,shape:j,components:G}})=>{const x=(0,o.useRef)(null),m=(0,o.useRef)(null),{ref:F,inView:N}=(0,C.useInView)(),[M,V]=(0,o.useState)(!1),[O,Q]=(0,o.useState)(!1),_=typeof t=="string"?t:t&&(0,v.convertLexicalToHTML)({data:t,converters:S});typeof n=="string"||n&&(0,v.convertLexicalToHTML)({data:n,converters:S});const[k,A]=(0,o.useState)(0),R=(0,b.useMediaQuery)({query:"(max-width: 768px)"}),u=(0,z.debounce)(()=>{if(m.current){const f=m.current.getBoundingClientRect(),H=window.innerHeight,D=window.scrollY||window.pageYOffset,J=f.bottom+D,E=document.documentElement.scrollHeight-J;A(E>H?H:E)}},600);return(0,o.useEffect)(()=>{N&&!M&&(x.current?.play(),V(!0))},[N,M]),(0,o.useEffect)(()=>(u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}),[]),(0,o.useEffect)(()=>{const f=window.screen.height;I.default.timeline({scrollTrigger:{trigger:`#${s}`,start:"top top",end:`top+=${f*1.8}px bottom`,scrub:0}}).to(`.${s} .sticky-cover`,{opacity:1,duration:.4}).to(`#${s} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[k]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:s,className:(0,d.cn)("relative z-20 h-screen w-full",r,{"aiui-dark":h==="dark","rounded-box":j==="rounded"}),children:(0,e.jsx)("div",{ref:F,className:"media-content absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2",children:(0,e.jsx)(y,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)(L.default,{className:"sticky-title",data:{title:_||"",theme:h}})})})}),(0,e.jsxs)("div",{ref:m,style:{marginBottom:`-${k}px`},className:(0,d.cn)(s,"relative mt-[-200vh]"),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,d.cn)("media-cover","relative h-screen w-full","lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]"),children:[w?.url&&(0,e.jsx)("video",{ref:x,className:"size-full object-cover object-[82%]",src:R&&a?.url?a?.url:w?.url,muted:!0,playsInline:!0,onEnded:()=>{Q(!0)}}),p?.url&&O&&(0,e.jsx)("img",{src:R&&g?.url?g?.url:p?.url,alt:p?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]"}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})}),(0,e.jsx)("div",{className:"relative h-screen w-full"}),(0,e.jsx)(re,{components:G}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});var ae=(0,T.withStyles)(se);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className=\"!bg-transparent\">\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(({ className = '', id, data: { title, videoTitle, mobVideo, mobImg, img, video, theme, shape, components } }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [isPlaying, setIsPlaying] = useState(false)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n }, 600)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_es_toolkit", "import_react_intersection_observer", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_html", "import_react_responsive", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "SubBox", "React", "id", "components", "mediaPlayerStickyRef", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "className", "title", "videoTitle", "mobVideo", "mobImg", "img", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "isPlaying", "setIsPlaying", "title_html", "btb", "setbtb", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "height", "gsap", "Slogan"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className=\"!bg-transparent\">\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(({ className = '', id, data: { title, videoTitle, mobVideo, mobImg, img, video, theme, shape, components } }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n }, 600)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n const height = window.screen.height\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0,\n },\n })\n .to(`.${id} .sticky-cover`, {\n opacity: 1,\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }, [btb])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2\"\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div ref={boxRef} style={{ marginBottom: `-${btb}px` }} className={cn(id, 'relative mt-[-200vh]')}>\n <div className=\"sticky top-0 \">\n <div\n className={cn(\n 'media-cover',\n 'relative h-screen w-full',\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n )}\n >\n {video?.url && (\n <video\n ref={videoRef}\n className=\"size-full object-cover object-[82%]\"\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n muted\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )}\n {img?.url && isEntered && (\n <img\n src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n alt={img?.alt}\n className=\"z-1 absolute left-0 top-0 size-full object-cover object-[82%]\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n\n <div className=\"relative h-screen w-full\" />\n <SubBox components={components}></SubBox>\n <div className=\"relative h-screen w-full\" />\n </div>\n </>\n )\n})\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_es_toolkit", "import_react_intersection_observer", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_html", "import_react_responsive", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "SubBox", "React", "id", "components", "mediaPlayerStickyRef", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "className", "title", "videoTitle", "mobVideo", "mobImg", "img", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "title_html", "btb", "setbtb", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "height", "gsap", "Slogan"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var Q=Object.create;var v=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var tt=(t,e)=>{for(var o in e)v(t,o,{get:e[o],enumerable:!0})},$=(t,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of W(e))!Z.call(t,n)&&n!==o&&v(t,n,{get:()=>e[n],enumerable:!(s=V(e,n))||s.enumerable});return t};var et=(t,e,o)=>(o=t!=null?Q(X(t)):{},$(e||!t||!t.__esModule?v(o,"default",{value:t,enumerable:!0}):o,t)),rt=t=>$(v({},"__esModule",{value:!0}),t);var st={};tt(st,{componentName:()=>j,componentType:()=>z,default:()=>nt});module.exports=rt(st);var a=require("react/jsx-runtime"),r=et(require("react")),G=require("@gsap/react"),f=require("gsap"),N=require("gsap/dist/SplitText"),g=require("gsap/dist/ScrollTrigger"),p=require("../../helpers/utils.js"),b=require("../../components/index.js"),L=require("../../shared/Styles.js"),C=require("../../hooks/useExposure.js"),P=require("../AiuiProvider/index.js");const z="copy",j="brand_slogan";function ot(t=[],e=3){const o=[];for(let s=0;s<t.length;s+=e)o.push(t.slice(s,s+e));return o}const D=r.default.forwardRef(({data:t,className:e=""},o)=>{const{title:s,features:n=[],featureChunkSize:k=3}=t,[y,I]=r.default.useState(0),[F,w]=r.default.useState(!0),T=(0,r.useRef)(null),d=ot(n,k),E=d.length,u=n.length>k,U=u?[...d,d[0]]:d,S=40;(0,r.useImperativeHandle)(o,()=>T.current);const{trackingData:Y}=(0,P.useAiuiContext)(),{profileActivated:_}=Y;(0,C.useExposure)(T,{componentType:z,componentName:j,componentTitle:s,memberActiveStatus:_?"active":"not active"}),r.default.useEffect(()=>{if(!u)return;const l=setInterval(()=>{I(i=>i+1),w(!0)},3e3);return()=>clearInterval(l)},[E,u]),r.default.useEffect(()=>{if(u)if(y===E){const l=setTimeout(()=>{w(!1),I(0)},500);return()=>clearTimeout(l)}else w(!0)},[y,E,u]);const m=(0,r.useRef)(null),M=(0,r.useRef)(null),x=(0,r.useRef)(null);return(0,G.useGSAP)(()=>{if(f.gsap.registerPlugin(g.ScrollTrigger,N.SplitText),!m.current)return;x.current=new N.SplitText(m.current,{type:"words",wordsClass:"word"});const l=m.current?.clientHeight||100,i=x.current.words;return f.gsap.set(i,{opacity:0}),g.ScrollTrigger.create({trigger:m.current,start:"bottom bottom-=
|
|
1
|
+
"use strict";"use client";var Q=Object.create;var v=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var tt=(t,e)=>{for(var o in e)v(t,o,{get:e[o],enumerable:!0})},$=(t,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of W(e))!Z.call(t,n)&&n!==o&&v(t,n,{get:()=>e[n],enumerable:!(s=V(e,n))||s.enumerable});return t};var et=(t,e,o)=>(o=t!=null?Q(X(t)):{},$(e||!t||!t.__esModule?v(o,"default",{value:t,enumerable:!0}):o,t)),rt=t=>$(v({},"__esModule",{value:!0}),t);var st={};tt(st,{componentName:()=>j,componentType:()=>z,default:()=>nt});module.exports=rt(st);var a=require("react/jsx-runtime"),r=et(require("react")),G=require("@gsap/react"),f=require("gsap"),N=require("gsap/dist/SplitText"),g=require("gsap/dist/ScrollTrigger"),p=require("../../helpers/utils.js"),b=require("../../components/index.js"),L=require("../../shared/Styles.js"),C=require("../../hooks/useExposure.js"),P=require("../AiuiProvider/index.js");const z="copy",j="brand_slogan";function ot(t=[],e=3){const o=[];for(let s=0;s<t.length;s+=e)o.push(t.slice(s,s+e));return o}const D=r.default.forwardRef(({data:t,className:e=""},o)=>{const{title:s,features:n=[],featureChunkSize:k=3}=t,[y,I]=r.default.useState(0),[F,w]=r.default.useState(!0),T=(0,r.useRef)(null),d=ot(n,k),E=d.length,u=n.length>k,U=u?[...d,d[0]]:d,S=40;(0,r.useImperativeHandle)(o,()=>T.current);const{trackingData:Y}=(0,P.useAiuiContext)(),{profileActivated:_}=Y;(0,C.useExposure)(T,{componentType:z,componentName:j,componentTitle:s,memberActiveStatus:_?"active":"not active"}),r.default.useEffect(()=>{if(!u)return;const l=setInterval(()=>{I(i=>i+1),w(!0)},3e3);return()=>clearInterval(l)},[E,u]),r.default.useEffect(()=>{if(u)if(y===E){const l=setTimeout(()=>{w(!1),I(0)},500);return()=>clearTimeout(l)}else w(!0)},[y,E,u]);const m=(0,r.useRef)(null),M=(0,r.useRef)(null),x=(0,r.useRef)(null);return(0,G.useGSAP)(()=>{if(f.gsap.registerPlugin(g.ScrollTrigger,N.SplitText),!m.current)return;x.current=new N.SplitText(m.current,{type:"words",wordsClass:"word"});const l=m.current?.clientHeight||100,i=x.current.words;return f.gsap.set(i,{opacity:0}),g.ScrollTrigger.create({trigger:m.current,start:"bottom bottom-=4%",end:`bottom+=${l*1.5}px bottom-=4%`,scrub:!0,onUpdate:c=>{const h=c.progress,R=i.length,q=1/R,A=.5;i.forEach((B,J)=>{const K=J/R*(1-A),O=q*(1+A);let H=(h-K)/O;H=Math.max(0,Math.min(H,1)),f.gsap.set(B,{opacity:H})})}}),n&&n.length>0&&g.ScrollTrigger.create({trigger:M.current,start:`bottom+=${l*2}px bottom-=6%`,end:`bottom+=${l*2+100}px bottom-=6%`,onUpdate:c=>{f.gsap.set(M.current,{opacity:c.progress})}}),()=>{x.current&&x.current.revert(),g.ScrollTrigger.getAll().forEach(c=>c.kill())}},[]),(0,a.jsxs)("div",{ref:T,className:(0,p.cn)("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",e),children:[(0,a.jsx)(b.Heading,{ref:m,as:"h2",size:2,weight:"bold",align:"left",className:(0,p.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:s}),n&&n.length>0&&(0,a.jsx)("div",{className:(0,p.cn)("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${S}px]`),children:(0,a.jsx)("div",{className:(0,p.cn)(["flex flex-col",F?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${y*S}px)`},children:U.map((l,i)=>(0,a.jsx)("div",{className:(0,p.cn)("flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${S}px]`),children:l.map((c,h)=>(0,a.jsxs)(r.default.Fragment,{children:[h>0&&(0,a.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),(0,a.jsx)(b.Text,{size:3,align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:c.title})]},h))},i))})})]})});D.displayName="Slogan";var nt=(0,L.withStyles)(D);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n const { title, features = [], featureChunkSize = 3 } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const innerRef = useRef<HTMLDivElement>(null)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n })\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const featuresRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger, SplitText)\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=
|
|
5
|
-
"mappings": "0kBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,mBAAAE,EAAA,kBAAAC,EAAA,YAAAC,KAAA,eAAAC,GAAAL,IAkIM,IAAAM,EAAA,6BAjINC,EAAmD,qBACnDA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAA8B,qCAC9BC,EAA2B,kCAE3BC,EAA4B,sCAC5BC,EAA+B,oCAExB,MAAMZ,EAAgB,OAChBD,EAAgB,eAE7B,SAASc,GAAWC,EAA6B,CAAC,EAAGC,EAAe,EAAG,CACrE,MAAMC,EAAS,CAAC,EAChB,QAASC,EAAI,EAAGA,EAAIH,EAAM,OAAQG,GAAKF,EACrCC,EAAO,KAAKF,EAAM,MAAMG,EAAGA,EAAIF,CAAI,CAAC,EAEtC,OAAOC,CACT,CAEA,MAAME,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CAC9F,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,iBAAAC,EAAmB,CAAE,EAAIL,EACjD,CAACM,EAAYC,CAAa,EAAI,EAAAR,QAAM,SAAS,CAAC,EAC9C,CAACS,EAAiBC,CAAkB,EAAI,EAAAV,QAAM,SAAS,EAAI,EAC3DW,KAAW,UAAuB,IAAI,EACtCC,EAAiBlB,GAAWW,EAAUC,CAAgB,EACtDO,EAAcD,EAAe,OAC7BE,EAAeT,EAAS,OAASC,EACjCS,EAAgBD,EAAe,CAAC,GAAGF,EAAgBA,EAAe,CAAC,CAAC,EAAIA,EACxEI,EAAc,MAEpB,uBAAoBb,EAAK,IAAMQ,EAAS,OAAyB,EAEjE,KAAM,CAAE,aAAAM,CAAa,KAAI,kBAAe,EAClC,CAAE,iBAAAC,CAAiB,EAAID,KAC7B,eAAYN,EAAU,CACpB,cAAA9B,EACA,cAAAD,EACA,eAAgBwB,EAChB,mBAAoBc,EAAmB,SAAW,YACpD,CAAC,EAGD,EAAAlB,QAAM,UAAU,IAAM,CACpB,GAAI,CAACc,EAAc,OACnB,MAAMK,EAAQ,YAAY,IAAM,CAC9BX,EAAc,GAAK,EAAI,CAAC,EACxBE,EAAmB,EAAI,CACzB,EAAG,GAAI,EACP,MAAO,IAAM,cAAcS,CAAK,CAClC,EAAG,CAACN,EAAaC,CAAY,CAAC,EAG9B,EAAAd,QAAM,UAAU,IAAM,CACpB,GAAKc,EACL,GAAIP,IAAeM,EAAa,CAC9B,MAAMO,EAAS,WAAW,IAAM,CAC9BV,EAAmB,EAAK,EACxBF,EAAc,CAAC,CACjB,EAAG,GAAG,EACN,MAAO,IAAM,aAAaY,CAAM,CAClC,MACEV,EAAmB,EAAI,CAE3B,EAAG,CAACH,EAAYM,EAAaC,CAAY,CAAC,EAG1C,MAAMO,KAAW,UAA2B,IAAI,EAC1CC,KAAc,UAAuB,IAAI,EACzCC,KAAoB,UAAyB,IAAI,EACvD,oBAAQ,IAAM,CAEZ,GADA,OAAK,eAAe,gBAAe,WAAS,EACxC,CAACF,EAAS,QAAS,OACvBE,EAAkB,QAAU,IAAI,YAAUF,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAASH,EAAS,SAAS,cAAgB,IAE3CI,EAAQF,EAAkB,QAAQ,MACxC,cAAK,IAAIE,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,gBAAc,OAAO,CACnB,QAASJ,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWG,EAAS,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n const { title, features = [], featureChunkSize = 3 } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const innerRef = useRef<HTMLDivElement>(null)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n })\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const featuresRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger, SplitText)\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n\n if (features && features.length > 0) {\n ScrollTrigger.create({\n trigger: featuresRef.current,\n start: `bottom+=${height * 2}px bottom-=6%`,\n end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n onUpdate: (self: any) => {\n gsap.set(featuresRef.current, { opacity: self.progress })\n },\n })\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={innerRef}\n className={cn(\n 'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n )}\n html={title}\n />\n {features && features.length > 0 && (\n <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className={cn(\n 'flex w-full flex-row items-stretch gap-3 overflow-hidden',\n `tablet:h-[${groupHeight}px]`\n )}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n <Text\n size={3}\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n html={feature.title}\n />\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Slogan_exports", "__export", "componentName", "componentType", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_useExposure", "import_AiuiProvider", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "ref", "title", "features", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "trackingData", "profileActivated", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var A=Object.create;var l=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var D=(t,r)=>{for(var e in r)l(t,e,{get:r[e],enumerable:!0})},y=(t,r,e,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of N(r))!C.call(t,o)&&o!==e&&l(t,o,{get:()=>r[o],enumerable:!(s=L(r,o))||s.enumerable});return t};var G=(t,r,e)=>(e=t!=null?A(z(t)):{},y(r||!t||!t.__esModule?l(e,"default",{value:t,enumerable:!0}):e,t)),I=t=>y(l({},"__esModule",{value:!0}),t);var $={};D($,{default:()=>U});module.exports=I($);var d=require("react/jsx-runtime"),n=G(require("react")),b=require("@gsap/react"),a=require("gsap"),f=require("gsap/dist/SplitText"),c=require("gsap/dist/ScrollTrigger"),w=require("../../helpers/utils.js"),x=require("../../components/index.js"),v=require("../../shared/Styles.js");const T=n.default.forwardRef(({data:t,className:r})=>{const{title:e,theme:s}=t,o=(0,n.useRef)(null),i=(0,n.useRef)(null);return(0,b.useGSAP)(()=>{if(a.gsap.registerPlugin(f.SplitText,c.ScrollTrigger),!o.current)return;const H=o.current?.clientHeight||80;i.current=new f.SplitText(o.current,{type:"words",wordsClass:"word"});const m=i.current.words;return a.gsap.set(m,{opacity:0}),c.ScrollTrigger.create({trigger:o.current,start:"bottom bottom-=
|
|
1
|
+
"use strict";"use client";var A=Object.create;var l=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var D=(t,r)=>{for(var e in r)l(t,e,{get:r[e],enumerable:!0})},y=(t,r,e,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of N(r))!C.call(t,o)&&o!==e&&l(t,o,{get:()=>r[o],enumerable:!(s=L(r,o))||s.enumerable});return t};var G=(t,r,e)=>(e=t!=null?A(z(t)):{},y(r||!t||!t.__esModule?l(e,"default",{value:t,enumerable:!0}):e,t)),I=t=>y(l({},"__esModule",{value:!0}),t);var $={};D($,{default:()=>U});module.exports=I($);var d=require("react/jsx-runtime"),n=G(require("react")),b=require("@gsap/react"),a=require("gsap"),f=require("gsap/dist/SplitText"),c=require("gsap/dist/ScrollTrigger"),w=require("../../helpers/utils.js"),x=require("../../components/index.js"),v=require("../../shared/Styles.js");const T=n.default.forwardRef(({data:t,className:r})=>{const{title:e,theme:s}=t,o=(0,n.useRef)(null),i=(0,n.useRef)(null);return(0,b.useGSAP)(()=>{if(a.gsap.registerPlugin(f.SplitText,c.ScrollTrigger),!o.current)return;const H=o.current?.clientHeight||80;i.current=new f.SplitText(o.current,{type:"words",wordsClass:"word"});const m=i.current.words;return a.gsap.set(m,{opacity:0}),c.ScrollTrigger.create({trigger:o.current,start:"bottom bottom-=4%",end:`bottom+=${H*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:p=>{const S=p.progress,g=m.length,k=1/g,h=.5;m.forEach((E,M)=>{const P=M/g*(1-h),R=k*(1+h);let u=(S-P)/R;u=Math.max(0,Math.min(u,1)),a.gsap.set(E,{opacity:u})})}}),()=>{i.current&&i.current.revert(),c.ScrollTrigger.getAll().forEach(p=>p.kill())}},[]),e&&(0,d.jsx)("div",{className:(0,w.cn)("tablet:mb-[32px] mb-[24px] space-y-4",r,{"aiui-dark":s==="dark"}),children:(0,d.jsx)(x.Heading,{ref:o,as:"h1",size:4,html:e})})});T.displayName="Title";var U=(0,v.withStyles)(T);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n const { title, theme } = data\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqDQ,IAAAI,EAAA,6BApDRC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAG3B,MAAMC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACvD,oBAAQ,IAAM,CAEZ,GADA,OAAK,eAAe,YAAW,eAAa,EACxC,CAACD,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,cAAK,IAAIE,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,gBAAc,OAAO,CACnB,QAASH,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWE,EAAS,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n const { title, theme } = data\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n }\n }, [])\n\n return (\n title && (\n <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n <Heading ref={titleRef} as=\"h1\" size={4} html={title} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqDQ,IAAAI,EAAA,6BApDRC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAG3B,MAAMC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACvD,oBAAQ,IAAM,CAEZ,GADA,OAAK,eAAe,YAAW,eAAa,EACxC,CAACD,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,cAAK,IAAIE,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,gBAAc,OAAO,CACnB,QAASH,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWE,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9D,gBAAc,OAAO,EAAE,QAASa,GAA2BA,EAAE,KAAK,CAAC,CACrE,CACF,EAAG,CAAC,CAAC,EAGHhB,MACE,OAAC,OAAI,aAAW,MAAG,uCAAwCD,EAAW,CAAE,YAAaE,IAAU,MAAO,CAAC,EACrG,mBAAC,WAAQ,IAAKC,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDJ,EAAM,YAAc,QAEpB,IAAOV,KAAQ,cAAWU,CAAK",
|
|
6
6
|
"names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "Title", "React", "data", "className", "title", "theme", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var u=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var P=(e,o)=>{for(var t in o)c(e,t,{get:o[t],enumerable:!0})},x=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of S(o))!N.call(e,p)&&p!==t&&c(e,p,{get:()=>o[p],enumerable:!(a=g(o,p))||a.enumerable});return e};var v=(e,o,t)=>(t=e!=null?u(h(e)):{},x(o||!e||!e.__esModule?c(t,"default",{value:e,enumerable:!0}):t,e)),w=e=>x(c({},"__esModule",{value:!0}),e);var M={};P(M,{Container:()=>l});module.exports=w(M);var n=require("react/jsx-runtime"),r=v(require("react")),m=require("../helpers/utils.js"),f=require("@radix-ui/react-slot");const T=({children:e})=>(0,n.jsx)(n.Fragment,{children:e}),B=r.default.forwardRef(({...e},o)=>{const{asChild:t,children:a,className:p,spaceY:s="none",spaceTop:i="none",spaceBottom:d="none",...C}=e,y=t?f.Slot:"div",R={default:"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",none:""},b={default:"tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",none:""},k={default:"tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]",none:""};return(0,n.jsx)(y,{...C,ref:o,className:(0,m.cn)(p,"ipc_container","relative z-10 w-full"),children:(0,n.jsx)("div",{className:(0,m.cn)(p,"desktop:max-w-[1792px] lg-desktop:max-w-full mx-auto w-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",R?.[s]||s,b?.[i]||i,k?.[d]||d),children:a})})}),l=r.default.forwardRef(({...e},o)=>{const{children:t,mode:a="section"}=e,s={section:B,fragment:T}[a];return(0,n.jsx)(s,{...e,ref:o,children:t})});l.displayName="Container";
|
|
2
2
|
//# sourceMappingURL=container.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/container.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n asChild?: boolean\n children?: React.ReactNode\n className?: string\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const {\n asChild,\n children,\n className,\n spaceY = 'none',\n spaceTop = 'none',\n spaceBottom = 'none',\n ...containerProps\n } = props\n\n const Comp = asChild ? Slot : 'div'\n\n const spaceY_map: any = {\n default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n none: '',\n }\n\n const spaceTop_map: any = {\n default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n none: '',\n }\n\n const spaceBottom_map: any = {\n default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n none: '',\n }\n\n return (\n <Comp
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAiBS,IAAAI,EAAA,6BAjBTC,EAAkB,oBAClBC,EAAmB,+BACnBC,EAAqB,gCAcrB,MAAMC,EAAW,CAAC,CAAE,SAAAC,CAAS,OACpB,mBAAG,SAAAA,EAAS,EAGfC,EAAU,EAAAC,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAL,EACA,UAAAM,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIP,EAEEQ,EAAON,EAAU,OAAO,MAExBO,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,SACE,OAACH,EAAA,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n asChild?: boolean\n children?: React.ReactNode\n className?: string\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const {\n asChild,\n children,\n className,\n spaceY = 'none',\n spaceTop = 'none',\n spaceBottom = 'none',\n ...containerProps\n } = props\n\n const Comp = asChild ? Slot : 'div'\n\n const spaceY_map: any = {\n default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n none: '',\n }\n\n const spaceTop_map: any = {\n default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n none: '',\n }\n\n const spaceBottom_map: any = {\n default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n none: '',\n }\n\n return (\n <Comp {...containerProps} ref={forwardedRef} className={cn(className, 'ipc_container', 'relative z-10 w-full')}>\n <div\n className={cn(\n className,\n 'desktop:max-w-[1792px] lg-desktop:max-w-full mx-auto w-full',\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4',\n spaceY_map?.[spaceY] || spaceY,\n spaceTop_map?.[spaceTop] || spaceTop,\n spaceBottom_map?.[spaceBottom] || spaceBottom\n )}\n >\n {children}\n </div>\n </Comp>\n )\n})\n\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const { children, mode = 'section' } = props\n\n const componentsMap: {\n [P in Mode]: React.ComponentType<any> | string\n } = {\n section: Section,\n fragment: Fragment,\n }\n\n const Component = componentsMap![mode!]\n\n return (\n <Component {...props} ref={forwardedRef}>\n {children}\n </Component>\n )\n})\n\nContainer.displayName = 'Container'\n\nexport { Container }\nexport type { ContainerProps }\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAiBS,IAAAI,EAAA,6BAjBTC,EAAkB,oBAClBC,EAAmB,+BACnBC,EAAqB,gCAcrB,MAAMC,EAAW,CAAC,CAAE,SAAAC,CAAS,OACpB,mBAAG,SAAAA,EAAS,EAGfC,EAAU,EAAAC,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAL,EACA,UAAAM,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIP,EAEEQ,EAAON,EAAU,OAAO,MAExBO,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,SACE,OAACH,EAAA,CAAM,GAAGD,EAAgB,IAAKN,EAAc,aAAW,MAAGE,EAAW,gBAAiB,sBAAsB,EAC3G,mBAAC,OACC,aAAW,MACTA,EACA,8DACA,8EACAM,IAAaL,CAAM,GAAKA,EACxBM,IAAeL,CAAQ,GAAKA,EAC5BM,IAAkBL,CAAW,GAAKA,CACpC,EAEC,SAAAT,EACH,EACF,CAEJ,CAAC,EAEKP,EAAY,EAAAS,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,SAAAJ,EAAU,KAAAe,EAAO,SAAU,EAAIZ,EASjCa,EALF,CACF,QAASf,EACT,SAAUF,CACZ,EAEiCgB,CAAK,EAEtC,SACE,OAACC,EAAA,CAAW,GAAGb,EAAO,IAAKC,EACxB,SAAAJ,EACH,CAEJ,CAAC,EAEDP,EAAU,YAAc",
|
|
6
6
|
"names": ["container_exports", "__export", "Container", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_react_slot", "Fragment", "children", "Section", "React", "props", "forwardedRef", "asChild", "className", "spaceY", "spaceTop", "spaceBottom", "containerProps", "Comp", "spaceY_map", "spaceTop_map", "spaceBottom_map", "mode", "Component"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{Fragment as G,jsx as e,jsxs as p}from"react/jsx-runtime";import{useState as x,useRef as h,useEffect as L,forwardRef as D,useImperativeHandle as F}from"react";import{debounce as Y}from"lodash";import{cn as d}from"../../helpers/utils.js";import{withStyles as j}from"../../shared/Styles.js";import"../../components/picture.js";import q from"../../components/button.js";import{convertLexicalToHTML as M}from"@payloadcms/richtext-lexical/html";import{useInView as O}from"react-intersection-observer";const T=({defaultConverters:m})=>({...m,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),A=D(({className:m="",onBtnClick:s,data:{title:t,videoTitle:i,btnText:u,img:J,video:N,theme:P,shape:E,...R}},z)=>{const{sticky:r}=R,[a,l]=x(!1),[y,B]=x(0),[$,I]=x(0),n=h(null),_=h(null),o=h(null),{ref:C,inView:w}=O();F(z,()=>o.current);const H=typeof t=="string"?t:t&&M({data:t,converters:T}),b=typeof i=="string"?i:i&&M({data:i,converters:T});L(()=>{w&&!u?(n.current?.play(),l(!0)):(n.current?.pause(),l(!1))},[w]);const f=Y(()=>{if(o.current){const v=o.current.getBoundingClientRect(),c=window.innerHeight,S=window.scrollY||window.pageYOffset,V=v.bottom+S,k=document.documentElement.scrollHeight-V;B(k>c?c:k)}if(o.current){const v=o.current.clientHeight,c=window.innerHeight;I(v+c)}},600);L(()=>(f(),window.addEventListener("resize",f),()=>{window.removeEventListener("resize",f)}),[]);const g="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return p(G,{children:[r&&e("div",{ref:o,className:d("relative z-10 ",g),children:e("div",{children:p("div",{ref:C,className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4",children:[H&&!a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:H}}),b&&a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),!a&&u&&e(q,{variant:"link",className:d("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{a?(n.current&&n.current.pause(),l(!1)):(n.current&&n.current.play(),l(!0)),s&&s?.()},children:u})]})})}),p("div",{style:r?{marginBottom:`-${y}px`,marginTop:`-${$}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:e("div",{className:d("relative overflow-hidden",r?"h-screen w-screen":g,m,{"aiui-dark":P==="dark","rounded-box":E==="rounded"}),children:e("div",{children:p("div",{ref:_,className:"media-cover left-0 top-0 h-screen w-screen",children:[e("video",{ref:n,className:"size-full object-cover",src:N?.url,muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})})}),e("div",{className:d(r&&"relative box-content block",g),style:r?{height:`${y}px`}:{}})]})]})});var se=j(A);export{se as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div ref={titleRef} className={cn('relative z-10 ', aspect)}>\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-screen' : aspect, className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n <video\n ref={videoRef}\n className=\"size-full object-cover\"\n src={video?.url}\n muted\n loop\n playsInline\n webkit-playsinline\n x5-playsinline\n />\n <div className=\"absolute left-0 top-0 z-10 size-full\" />\n </div>\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n />\n </div>\n </>\n )\n }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "aAsFM,mBAAAA,EASY,OAAAC,EALJ,QAAAC,MAJR,oBArFN,OAAgB,YAAAC,EAAU,UAAAC,EAAQ,aAAAC,EAAW,cAAAC,EAAY,uBAAAC,MAA2B,QACpF,OAAS,YAAAC,MAAgB,SACzB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,MAAoB,8BACpB,OAAOC,MAAY,6BACnB,OAAS,wBAAAC,MAA4B,oCAGrC,OAAS,aAAAC,MAAiB,8BAG1B,MAAMC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAGjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,EAAkBZ,EACtB,CAAC,CAAE,UAAAa,EAAY,GAAI,WAAAC,EAAY,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,GAAGC,CAAK,CAAE,EAAGC,IAAQ,CAChH,KAAM,CAAE,OAAAC,CAAO,EAAIF,EACb,CAACG,EAAWC,CAAY,EAAI7B,EAAS,EAAK,EAC1C,CAAC8B,EAAKC,CAAM,EAAI/B,EAAS,CAAC,EAC1B,CAACgC,EAAaC,CAAc,EAAIjC,EAAS,CAAC,EAE1CkC,EAAWjC,EAAyB,IAAI,EACxCkC,EAAQlC,EAAyB,IAAI,EACrCmC,EAAWnC,EAAuB,IAAI,EAEtC,CAAE,IAAKoC,EAAW,OAAAC,CAAO,EAAI5B,EAAU,EAE7CN,EAAoBsB,EAAK,IAAMU,EAAS,OAAyB,EAEjE,MAAMG,EACJ,OAAOrB,GAAU,SAAWA,EAAQA,GAAST,EAAqB,CAAE,KAAMS,EAAO,WAAYP,CAAe,CAAC,EACzG6B,EACJ,OAAOrB,GAAe,SAClBA,EACAA,GAAcV,EAAqB,CAAE,KAAMU,EAAY,WAAYR,CAAe,CAAC,EAEzFT,EAAU,IAAM,CACVoC,GAAU,CAAClB,GACbc,EAAS,SAAS,KAAK,EACvBL,EAAa,EAAI,IAEjBK,EAAS,SAAS,MAAM,EACxBL,EAAa,EAAK,EAEtB,EAAG,CAACS,CAAM,CAAC,EAEX,MAAMG,EAAwBpC,EAAS,IAAM,CAC3C,GAAI+B,EAAS,QAAS,CACpB,MAAMM,EAAON,EAAS,QAAQ,sBAAsB,EAC9CO,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1Cd,EAAOe,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAIV,EAAS,QAAS,CACpB,MAAMJ,EAAcI,EAAS,QAAQ,aAC/BO,EAAe,OAAO,YAC5BV,EAAeD,EAAcW,CAAY,CAC3C,CACF,EAAG,GAAG,EAENzC,EAAU,KACRuC,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,EAEL,MAAMM,EACJ,6NACF,OACEhD,EAAAF,EAAA,CACG,UAAA8B,GACC7B,EAAC,OAAI,IAAKsC,EAAU,UAAW9B,EAAG,iBAAkByC,CAAM,EACxD,SAAAjD,EAAC,OACC,SAAAC,EAAC,OACC,IAAKsC,EACL,UAAU,6FAET,UAAAE,GAAc,CAACX,GACd9B,EAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQyC,CAAW,EAChD,EAEDC,GAAmBZ,GAClB9B,EAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQ0C,CAAgB,EACrD,EAED,CAACZ,GAAaR,GACbtB,EAACU,EAAA,CACC,QAAQ,OACR,UAAWF,EAAG,4DAA4D,EAC1E,QAAS,IAAM,CACTsB,GACEM,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBL,EAAa,EAAK,IAEdK,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBL,EAAa,EAAI,GAEnBZ,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EACF,EACF,EAEFrB,EAAC,OAAI,MAAO4B,EAAS,CAAE,aAAc,IAAIG,CAAG,KAAM,UAAW,IAAIE,CAAW,IAAK,EAAI,CAAC,EAAG,UAAU,WACjG,UAAAlC,EAAC,OAAI,UAAU,gBACb,SAAAA,EAAC,OACC,UAAWQ,EAAG,2BAA4BqB,EAAS,oBAAsBoB,EAAQ/B,EAAW,CAC1F,YAAaO,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,SAAA1B,EAAC,OACC,SAAAC,EAAC,OAAI,IAAKoC,EAAO,UAAU,6CACzB,UAAArC,EAAC,SACC,IAAKoC,EACL,UAAU,yBACV,IAAKZ,GAAO,IACZ,MAAK,GACL,KAAI,GACJ,YAAW,GACX,qBAAkB,GAClB,iBAAc,GAChB,EACAxB,EAAC,OAAI,UAAU,uCAAuC,GACxD,EACF,EACF,EACF,EACAA,EAAC,OACC,UAAWQ,EAAGqB,GAAU,6BAA8BoB,CAAM,EAC5D,MAAOpB,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC5C,GACF,GACF,CAEJ,CACF,EAEA,IAAOkB,GAAQzC,EAAWQ,CAAe",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withStyles", "Button", "convertLexicalToHTML", "useInView", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "bgRef", "titleRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "MediaPlayerBase_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as b,jsx as e,jsxs as n}from"react/jsx-runtime";import F,{useState as p,useRef as m,useEffect as u,forwardRef as V}from"react";import{debounce as O}from"es-toolkit";import{useInView as Q}from"react-intersection-observer";import{cn as f}from"../../helpers/utils.js";import{withStyles as _}from"../../shared/Styles.js";import A from"../Slogan/index.js";import{Grid as D,GridItem as y}from"../../components/gird.js";import{Container as J}from"../../components/container.js";import K from"../BrandEquity/index.js";import U from"../MemberEquity/index.js";import W from"../Spacer/index.js";import X from"gsap";import{convertLexicalToHTML as P}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as S}from"react-responsive";const z=({defaultConverters:a})=>({...a,text:r=>{const{node:t}=r;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),v=({children:a,spaceY:r})=>{const t=S({query:"(max-width: 768px)"});return e(J,{spaceY:r,className:"!bg-transparent",children:n(D,{children:[!t&&e(y,{span:1}),e(y,{span:t?12:10,children:a}),!t&&e(y,{span:1})]})})},Z=F.forwardRef(({children:a,id:r,components:t})=>{const o=m(null);return n("div",{ref:o,className:"relative z-10",children:[e(b,{children:a}),e(b,{children:t?.map(s=>{switch(s.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(v,{spaceY:"none",children:e(K,{data:s,style:s?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(v,{spaceY:"none",children:e(U,{data:s,className:"w-full",style:s?.style})})});case"ipc-spacer":return e(W,{data:s,style:s?.style,className:"!bg-transparent"});default:return null}})})]})}),ee=V(({className:a="",id:r,data:{title:t,videoTitle:o,mobVideo:s,mobImg:g,img:i,video:w,theme:h,shape:C,components:T}})=>{const x=m(null),l=m(null),{ref:L,inView:N}=Q(),[M,$]=p(!1),[B,Y]=p(!1),q=typeof t=="string"?t:t&&P({data:t,converters:z});typeof o=="string"||o&&P({data:o,converters:z});const[k,I]=p(0),R=S({query:"(max-width: 768px)"}),c=O(()=>{if(l.current){const d=l.current.getBoundingClientRect(),H=window.innerHeight,j=window.scrollY||window.pageYOffset,G=d.bottom+j,E=document.documentElement.scrollHeight-G;I(E>H?H:E)}},600);return u(()=>{N&&!M&&(x.current?.play(),$(!0))},[N,M]),u(()=>(c(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)}),[]),u(()=>{const d=window.screen.height;X.timeline({scrollTrigger:{trigger:`#${r}`,start:"top top",end:`top+=${d*1.8}px bottom`,scrub:0}}).to(`.${r} .sticky-cover`,{opacity:1,duration:.4}).to(`#${r} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[k]),n(b,{children:[e("div",{id:r,className:f("relative z-20 h-screen w-full",a,{"aiui-dark":h==="dark","rounded-box":C==="rounded"}),children:e("div",{ref:L,className:"media-content absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2",children:e(v,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(A,{className:"sticky-title",data:{title:q||"",theme:h}})})})}),n("div",{ref:l,style:{marginBottom:`-${k}px`},className:f(r,"relative mt-[-200vh]"),children:[e("div",{className:"sticky top-0 ",children:n("div",{className:f("media-cover","relative h-screen w-full","lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]"),children:[w?.url&&e("video",{ref:x,className:"size-full object-cover object-[82%]",src:R&&s?.url?s?.url:w?.url,muted:!0,playsInline:!0,onEnded:()=>{Y(!0)}}),i?.url&&B&&e("img",{src:R&&g?.url?g?.url:i?.url,alt:i?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})}),e("div",{className:"relative h-screen w-full"}),e(Z,{components:T}),e("div",{className:"relative h-screen w-full"})]})]})});var be=_(ee);export{be as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className=\"!bg-transparent\">\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(({ className = '', id, data: { title, videoTitle, mobVideo, mobImg, img, video, theme, shape, components } }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [isPlaying, setIsPlaying] = useState(false)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n }, 600)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }
|
|
5
|
-
"mappings": "aAsCM,OAuBA,YAAAA,EAtBgB,OAAAC,EADhB,QAAAC,MAAA,oBArCN,OAAOC,GAAS,YAAAC,EAAU,UAAAC,EAAQ,aAAAC,EAAW,cAAAC,MAAuC,QACpF,OAAS,YAAAC,MAAgB,aACzB,OAAS,aAAAC,MAAiB,8BAC1B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAY,qBACnB,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,aAAAC,MAAiB,gCAC1B,OAAOC,MAAiB,0BACxB,OAAOC,MAAkB,2BACzB,OAAOC,MAAY,qBACnB,OAAOC,MAAU,OAEjB,OAAS,wBAAAC,MAA4B,oCAIrC,OAAS,iBAAAC,MAAqB,mBAG9B,MAAMC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAGjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,EAAe,CAAC,CAAE,SAAAC,EAAU,OAAAC,CAAO,IAAsD,CAC7F,MAAMC,EAAWR,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAC9D,OACEpB,EAACc,EAAA,CAAU,OAAQa,EAAQ,UAAU,kBACnC,SAAA1B,EAACW,EAAA,CACE,WAACgB,GAAY5B,EAACa,EAAA,CAAS,KAAM,EAAG,EACjCb,EAACa,EAAA,CAAS,KAAMe,EAAW,GAAK,GAAK,SAAAF,EAAS,EAC7C,CAACE,GAAY5B,EAACa,EAAA,CAAS,KAAM,EAAG,GACnC,EACF,CAEJ,EAEMgB,EAAS3B,EAAM,WASnB,CAAC,CAAE,SAAAwB,EAAU,GAAAI,EAAI,WAAAC,CAAW,IAAM,CAClC,MAAMC,EAAuB5B,EAAuB,IAAI,EAExD,OACEH,EAAC,OAAI,IAAK+B,EAAsB,UAAU,gBACxC,UAAAhC,EAAAD,EAAA,CAAG,SAAA2B,EAAS,EACZ1B,EAAAD,EAAA,CACG,SAAAgC,GAAY,IAAKE,GAAuB,CACvC,OAAQA,EAAc,UAAW,CAC/B,IAAK,mBACH,OACEjC,EAAC,OAAI,UAAU,+BACb,SAAAA,EAACyB,EAAA,CAAa,OAAO,OACnB,SAAAzB,EAACe,EAAA,CAAY,KAAMkB,EAAe,MAAOA,GAAe,MAAO,EACjE,EACF,EAGJ,IAAK,oBACH,OACEjC,EAAC,OAAI,UAAU,sCACb,SAAAA,EAACyB,EAAA,CAAa,OAAO,OACnB,SAAAzB,EAACgB,EAAA,CAAa,KAAMiB,EAAe,UAAU,SAAS,MAAOA,GAAe,MAAO,EACrF,EACF,EAGJ,IAAK,aACH,OAAOjC,EAACiB,EAAA,CAAO,KAAMgB,EAAe,MAAOA,GAAe,MAAO,UAAU,kBAAkB,EAE/F,QACE,OAAO,IACX,CACF,CAAC,EACH,GACF,CAEJ,CAAC,EAEKC,
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "SubBox", "id", "components", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "mobVideo", "mobImg", "img", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "isPlaying", "setIsPlaying", "title_html", "btb", "setbtb", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "height", "MediaPlayerSticky_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className=\"!bg-transparent\">\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(({ className = '', id, data: { title, videoTitle, mobVideo, mobImg, img, video, theme, shape, components } }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n }, 600)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n const height = window.screen.height\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0,\n },\n })\n .to(`.${id} .sticky-cover`, {\n opacity: 1,\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }, [btb])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2\"\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div ref={boxRef} style={{ marginBottom: `-${btb}px` }} className={cn(id, 'relative mt-[-200vh]')}>\n <div className=\"sticky top-0 \">\n <div\n className={cn(\n 'media-cover',\n 'relative h-screen w-full',\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n )}\n >\n {video?.url && (\n <video\n ref={videoRef}\n className=\"size-full object-cover object-[82%]\"\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n muted\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )}\n {img?.url && isEntered && (\n <img\n src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n alt={img?.alt}\n className=\"z-1 absolute left-0 top-0 size-full object-cover object-[82%]\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n\n <div className=\"relative h-screen w-full\" />\n <SubBox components={components}></SubBox>\n <div className=\"relative h-screen w-full\" />\n </div>\n </>\n )\n})\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "SubBox", "id", "components", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "mobVideo", "mobImg", "img", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "title_html", "btb", "setbtb", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "height", "MediaPlayerSticky_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as a,jsxs as $}from"react/jsx-runtime";import s,{useImperativeHandle as Y,useRef as x}from"react";import{useGSAP as _}from"@gsap/react";import{gsap as h}from"gsap";import{SplitText as R}from"gsap/dist/SplitText";import{ScrollTrigger as v}from"gsap/dist/ScrollTrigger";import{cn as c}from"../../helpers/utils.js";import{Heading as q,Text as B}from"../../components/index.js";import{withStyles as J}from"../../shared/Styles.js";import{useExposure as K}from"../../hooks/useExposure.js";import{useAiuiContext as O}from"../AiuiProvider/index.js";const Q="copy",V="brand_slogan";function W(p=[],u=3){const m=[];for(let e=0;e<p.length;e+=u)m.push(p.slice(e,e+u));return m}const A=s.forwardRef(({data:p,className:u=""},m)=>{const{title:e,features:n=[],featureChunkSize:H=3}=p,[b,N]=s.useState(0),[D,y]=s.useState(!0),w=x(null),f=W(n,H),T=f.length,l=n.length>H,G=l?[...f,f[0]]:f,E=40;Y(m,()=>w.current);const{trackingData:L}=O(),{profileActivated:C}=L;K(w,{componentType:Q,componentName:V,componentTitle:e,memberActiveStatus:C?"active":"not active"}),s.useEffect(()=>{if(!l)return;const t=setInterval(()=>{N(r=>r+1),y(!0)},3e3);return()=>clearInterval(t)},[T,l]),s.useEffect(()=>{if(l)if(b===T){const t=setTimeout(()=>{y(!1),N(0)},500);return()=>clearTimeout(t)}else y(!0)},[b,T,l]);const i=x(null),k=x(null),g=x(null);return _(()=>{if(h.registerPlugin(v,R),!i.current)return;g.current=new R(i.current,{type:"words",wordsClass:"word"});const t=i.current?.clientHeight||100,r=g.current.words;return h.set(r,{opacity:0}),v.create({trigger:i.current,start:"bottom bottom-=
|
|
1
|
+
"use client";import{jsx as a,jsxs as $}from"react/jsx-runtime";import s,{useImperativeHandle as Y,useRef as x}from"react";import{useGSAP as _}from"@gsap/react";import{gsap as h}from"gsap";import{SplitText as R}from"gsap/dist/SplitText";import{ScrollTrigger as v}from"gsap/dist/ScrollTrigger";import{cn as c}from"../../helpers/utils.js";import{Heading as q,Text as B}from"../../components/index.js";import{withStyles as J}from"../../shared/Styles.js";import{useExposure as K}from"../../hooks/useExposure.js";import{useAiuiContext as O}from"../AiuiProvider/index.js";const Q="copy",V="brand_slogan";function W(p=[],u=3){const m=[];for(let e=0;e<p.length;e+=u)m.push(p.slice(e,e+u));return m}const A=s.forwardRef(({data:p,className:u=""},m)=>{const{title:e,features:n=[],featureChunkSize:H=3}=p,[b,N]=s.useState(0),[D,y]=s.useState(!0),w=x(null),f=W(n,H),T=f.length,l=n.length>H,G=l?[...f,f[0]]:f,E=40;Y(m,()=>w.current);const{trackingData:L}=O(),{profileActivated:C}=L;K(w,{componentType:Q,componentName:V,componentTitle:e,memberActiveStatus:C?"active":"not active"}),s.useEffect(()=>{if(!l)return;const t=setInterval(()=>{N(r=>r+1),y(!0)},3e3);return()=>clearInterval(t)},[T,l]),s.useEffect(()=>{if(l)if(b===T){const t=setTimeout(()=>{y(!1),N(0)},500);return()=>clearTimeout(t)}else y(!0)},[b,T,l]);const i=x(null),k=x(null),g=x(null);return _(()=>{if(h.registerPlugin(v,R),!i.current)return;g.current=new R(i.current,{type:"words",wordsClass:"word"});const t=i.current?.clientHeight||100,r=g.current.words;return h.set(r,{opacity:0}),v.create({trigger:i.current,start:"bottom bottom-=4%",end:`bottom+=${t*1.5}px bottom-=4%`,scrub:!0,onUpdate:o=>{const d=o.progress,I=r.length,P=1/I,M=.5;r.forEach((z,j)=>{const F=j/I*(1-M),U=P*(1+M);let S=(d-F)/U;S=Math.max(0,Math.min(S,1)),h.set(z,{opacity:S})})}}),n&&n.length>0&&v.create({trigger:k.current,start:`bottom+=${t*2}px bottom-=6%`,end:`bottom+=${t*2+100}px bottom-=6%`,onUpdate:o=>{h.set(k.current,{opacity:o.progress})}}),()=>{g.current&&g.current.revert(),v.getAll().forEach(o=>o.kill())}},[]),$("div",{ref:w,className:c("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",u),children:[a(q,{ref:i,as:"h2",size:2,weight:"bold",align:"left",className:c("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:e}),n&&n.length>0&&a("div",{className:c("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${E}px]`),children:a("div",{className:c(["flex flex-col",D?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${b*E}px)`},children:G.map((t,r)=>a("div",{className:c("flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${E}px]`),children:t.map((o,d)=>$(s.Fragment,{children:[d>0&&a("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),a(B,{size:3,align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:o.title})]},d))},r))})})]})});A.displayName="Slogan";var it=J(A);export{V as componentName,Q as componentType,it as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n const { title, features = [], featureChunkSize = 3 } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const innerRef = useRef<HTMLDivElement>(null)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n })\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const featuresRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger, SplitText)\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=
|
|
5
|
-
"mappings": "aAkIM,cAAAA,EA+BY,QAAAC,MA/BZ,oBAjIN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,MAAe,cACxB,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,kBAAAC,MAAsB,2BAExB,MAAMC,EAAgB,OAChBC,EAAgB,eAE7B,SAASC,EAAWC,EAA6B,CAAC,EAAGC,EAAe,EAAG,CACrE,MAAMC,EAAS,CAAC,EAChB,QAASC,EAAI,EAAGA,EAAIH,EAAM,OAAQG,GAAKF,EACrCC,EAAO,KAAKF,EAAM,MAAMG,EAAGA,EAAIF,CAAI,CAAC,EAEtC,OAAOC,CACT,CAEA,MAAME,EAASpB,EAAM,WAAwC,CAAC,CAAE,KAAAqB,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CAC9F,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,iBAAAC,EAAmB,CAAE,EAAIL,EACjD,CAACM,EAAYC,CAAa,EAAI5B,EAAM,SAAS,CAAC,EAC9C,CAAC6B,EAAiBC,CAAkB,EAAI9B,EAAM,SAAS,EAAI,EAC3D+B,EAAW7B,EAAuB,IAAI,EACtC8B,EAAiBjB,EAAWU,EAAUC,CAAgB,EACtDO,EAAcD,EAAe,OAC7BE,EAAeT,EAAS,OAASC,EACjCS,EAAgBD,EAAe,CAAC,GAAGF,EAAgBA,EAAe,CAAC,CAAC,EAAIA,EACxEI,EAAc,GAEpBnC,EAAoBsB,EAAK,IAAMQ,EAAS,OAAyB,EAEjE,KAAM,CAAE,aAAAM,CAAa,EAAIzB,EAAe,EAClC,CAAE,iBAAA0B,CAAiB,EAAID,EAC7B1B,EAAYoB,EAAU,CACpB,cAAAlB,EACA,cAAAC,EACA,eAAgBU,EAChB,mBAAoBc,EAAmB,SAAW,YACpD,CAAC,EAGDtC,EAAM,UAAU,IAAM,CACpB,GAAI,CAACkC,EAAc,OACnB,MAAMK,EAAQ,YAAY,IAAM,CAC9BX,EAAcT,GAAKA,EAAI,CAAC,EACxBW,EAAmB,EAAI,CACzB,EAAG,GAAI,EACP,MAAO,IAAM,cAAcS,CAAK,CAClC,EAAG,CAACN,EAAaC,CAAY,CAAC,EAG9BlC,EAAM,UAAU,IAAM,CACpB,GAAKkC,EACL,GAAIP,IAAeM,EAAa,CAC9B,MAAMO,EAAS,WAAW,IAAM,CAC9BV,EAAmB,EAAK,EACxBF,EAAc,CAAC,CACjB,EAAG,GAAG,EACN,MAAO,IAAM,aAAaY,CAAM,CAClC,MACEV,EAAmB,EAAI,CAE3B,EAAG,CAACH,EAAYM,EAAaC,CAAY,CAAC,EAG1C,MAAMO,EAAWvC,EAA2B,IAAI,EAC1CwC,EAAcxC,EAAuB,IAAI,EACzCyC,EAAoBzC,EAAyB,IAAI,EACvD,OAAAC,EAAQ,IAAM,CAEZ,GADAC,EAAK,eAAeE,EAAeD,CAAS,EACxC,CAACoC,EAAS,QAAS,OACvBE,EAAkB,QAAU,IAAItC,EAAUoC,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAASH,EAAS,SAAS,cAAgB,IAE3CI,EAAQF,EAAkB,QAAQ,MACxC,OAAAvC,EAAK,IAAIyC,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BvC,EAAc,OAAO,CACnB,QAASmC,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWG,EAAS,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n const { title, features = [], featureChunkSize = 3 } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const innerRef = useRef<HTMLDivElement>(null)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n })\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const featuresRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger, SplitText)\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n\n if (features && features.length > 0) {\n ScrollTrigger.create({\n trigger: featuresRef.current,\n start: `bottom+=${height * 2}px bottom-=6%`,\n end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n onUpdate: (self: any) => {\n gsap.set(featuresRef.current, { opacity: self.progress })\n },\n })\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={innerRef}\n className={cn(\n 'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n )}\n html={title}\n />\n {features && features.length > 0 && (\n <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className={cn(\n 'flex w-full flex-row items-stretch gap-3 overflow-hidden',\n `tablet:h-[${groupHeight}px]`\n )}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n <Text\n size={3}\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n html={feature.title}\n />\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "Text", "withStyles", "useExposure", "useAiuiContext", "componentType", "componentName", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "ref", "title", "features", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "trackingData", "profileActivated", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index", "Slogan_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as f}from"react/jsx-runtime";import S,{useRef as m}from"react";import{useGSAP as k}from"@gsap/react";import{gsap as s}from"gsap";import{SplitText as p}from"gsap/dist/SplitText";import{ScrollTrigger as i}from"gsap/dist/ScrollTrigger";import{cn as E}from"../../helpers/utils.js";import{Heading as M}from"../../components/index.js";import{withStyles as P}from"../../shared/Styles.js";const u=S.forwardRef(({data:d,className:g})=>{const{title:l,theme:h}=d,t=m(null),r=m(null);return k(()=>{if(s.registerPlugin(p,i),!t.current)return;const y=t.current?.clientHeight||80;r.current=new p(t.current,{type:"words",wordsClass:"word"});const e=r.current.words;return s.set(e,{opacity:0}),i.create({trigger:t.current,start:"bottom bottom-=
|
|
1
|
+
"use client";import{jsx as f}from"react/jsx-runtime";import S,{useRef as m}from"react";import{useGSAP as k}from"@gsap/react";import{gsap as s}from"gsap";import{SplitText as p}from"gsap/dist/SplitText";import{ScrollTrigger as i}from"gsap/dist/ScrollTrigger";import{cn as E}from"../../helpers/utils.js";import{Heading as M}from"../../components/index.js";import{withStyles as P}from"../../shared/Styles.js";const u=S.forwardRef(({data:d,className:g})=>{const{title:l,theme:h}=d,t=m(null),r=m(null);return k(()=>{if(s.registerPlugin(p,i),!t.current)return;const y=t.current?.clientHeight||80;r.current=new p(t.current,{type:"words",wordsClass:"word"});const e=r.current.words;return s.set(e,{opacity:0}),i.create({trigger:t.current,start:"bottom bottom-=4%",end:`bottom+=${y*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:o=>{const T=o.progress,a=e.length,b=1/a,c=.5;e.forEach((w,x)=>{const v=x/a*(1-c),H=b*(1+c);let n=(T-v)/H;n=Math.max(0,Math.min(n,1)),s.set(w,{opacity:n})})}}),()=>{r.current&&r.current.revert(),i.getAll().forEach(o=>o.kill())}},[]),l&&f("div",{className:E("tablet:mb-[32px] mb-[24px] space-y-4",g,{"aiui-dark":h==="dark"}),children:f(M,{ref:t,as:"h1",size:4,html:l})})});u.displayName="Title";var I=P(u);export{I as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n const { title, theme } = data\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=
|
|
5
|
-
"mappings": "aAqDQ,cAAAA,MAAA,oBApDR,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAAQT,EAAM,WAAuC,CAAC,CAAE,KAAAU,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,EAAWb,EAA2B,IAAI,EAC1Cc,EAAoBd,EAAyB,IAAI,EACvD,OAAAC,EAAQ,IAAM,CAEZ,GADAC,EAAK,eAAeC,EAAWC,CAAa,EACxC,CAACS,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAIX,EAAUU,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,OAAAZ,EAAK,IAAIc,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BZ,EAAc,OAAO,CACnB,QAASS,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWE,EAAS,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n const { title, theme } = data\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n }\n }, [])\n\n return (\n title && (\n <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n <Heading ref={titleRef} as=\"h1\" size={4} html={title} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
|
|
5
|
+
"mappings": "aAqDQ,cAAAA,MAAA,oBApDR,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAAQT,EAAM,WAAuC,CAAC,CAAE,KAAAU,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,EAAWb,EAA2B,IAAI,EAC1Cc,EAAoBd,EAAyB,IAAI,EACvD,OAAAC,EAAQ,IAAM,CAEZ,GADAC,EAAK,eAAeC,EAAWC,CAAa,EACxC,CAACS,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAIX,EAAUU,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,OAAAZ,EAAK,IAAIc,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BZ,EAAc,OAAO,CACnB,QAASS,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWE,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CxB,EAAK,IAAIoB,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9DV,EAAc,OAAO,EAAE,QAASuB,GAA2BA,EAAE,KAAK,CAAC,CACrE,CACF,EAAG,CAAC,CAAC,EAGHhB,GACEb,EAAC,OAAI,UAAWO,EAAG,uCAAwCK,EAAW,CAAE,YAAaE,IAAU,MAAO,CAAC,EACrG,SAAAd,EAACQ,EAAA,CAAQ,IAAKO,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDH,EAAM,YAAc,QAEpB,IAAOoB,EAAQrB,EAAWC,CAAK",
|
|
6
6
|
"names": ["jsx", "React", "useRef", "useGSAP", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withStyles", "Title", "data", "className", "title", "theme", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "Title_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as u,jsx as t}from"react/jsx-runtime";import m from"react";import{cn as l}from"../helpers/utils.js";import{Slot as R}from"@radix-ui/react-slot";const b=({children:e})=>t(u,{children:e}),k=m.forwardRef(({...e},p)=>{const{asChild:n,children:a,className:s,spaceY:o="none",spaceTop:c="none",spaceBottom:r="none",...d}=e,x=n?R:"div",f={default:"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",none:""},C={default:"tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",none:""},y={default:"tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]",none:""};return t(x,{...d,ref:p,className:l(s,"ipc_container","relative z-10 w-full"),children:t("div",{className:l(s,"desktop:max-w-[1792px] lg-desktop:max-w-full mx-auto w-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",f?.[o]||o,C?.[c]||c,y?.[r]||r),children:a})})}),i=m.forwardRef(({...e},p)=>{const{children:n,mode:a="section"}=e,o={section:k,fragment:b}[a];return t(o,{...e,ref:p,children:n})});i.displayName="Container";export{i as Container};
|
|
2
2
|
//# sourceMappingURL=container.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/container.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n asChild?: boolean\n children?: React.ReactNode\n className?: string\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const {\n asChild,\n children,\n className,\n spaceY = 'none',\n spaceTop = 'none',\n spaceBottom = 'none',\n ...containerProps\n } = props\n\n const Comp = asChild ? Slot : 'div'\n\n const spaceY_map: any = {\n default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n none: '',\n }\n\n const spaceTop_map: any = {\n default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n none: '',\n }\n\n const spaceBottom_map: any = {\n default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n none: '',\n }\n\n return (\n <Comp
|
|
5
|
-
"mappings": "AAiBS,mBAAAA,EAAA,OAAAC,MAAA,oBAjBT,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBAcrB,MAAMJ,EAAW,CAAC,CAAE,SAAAK,CAAS,IACpBJ,EAAAD,EAAA,CAAG,SAAAK,EAAS,EAGfC,EAAUJ,EAAM,WAA6C,CAAC,CAAE,GAAGK,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAJ,EACA,UAAAK,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIP,EAEEQ,EAAON,EAAUL,EAAO,MAExBY,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,OACEjB,EAACc,EAAA,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n asChild?: boolean\n children?: React.ReactNode\n className?: string\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const {\n asChild,\n children,\n className,\n spaceY = 'none',\n spaceTop = 'none',\n spaceBottom = 'none',\n ...containerProps\n } = props\n\n const Comp = asChild ? Slot : 'div'\n\n const spaceY_map: any = {\n default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n none: '',\n }\n\n const spaceTop_map: any = {\n default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n none: '',\n }\n\n const spaceBottom_map: any = {\n default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n none: '',\n }\n\n return (\n <Comp {...containerProps} ref={forwardedRef} className={cn(className, 'ipc_container', 'relative z-10 w-full')}>\n <div\n className={cn(\n className,\n 'desktop:max-w-[1792px] lg-desktop:max-w-full mx-auto w-full',\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4',\n spaceY_map?.[spaceY] || spaceY,\n spaceTop_map?.[spaceTop] || spaceTop,\n spaceBottom_map?.[spaceBottom] || spaceBottom\n )}\n >\n {children}\n </div>\n </Comp>\n )\n})\n\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const { children, mode = 'section' } = props\n\n const componentsMap: {\n [P in Mode]: React.ComponentType<any> | string\n } = {\n section: Section,\n fragment: Fragment,\n }\n\n const Component = componentsMap![mode!]\n\n return (\n <Component {...props} ref={forwardedRef}>\n {children}\n </Component>\n )\n})\n\nContainer.displayName = 'Container'\n\nexport { Container }\nexport type { ContainerProps }\n"],
|
|
5
|
+
"mappings": "AAiBS,mBAAAA,EAAA,OAAAC,MAAA,oBAjBT,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBAcrB,MAAMJ,EAAW,CAAC,CAAE,SAAAK,CAAS,IACpBJ,EAAAD,EAAA,CAAG,SAAAK,EAAS,EAGfC,EAAUJ,EAAM,WAA6C,CAAC,CAAE,GAAGK,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAJ,EACA,UAAAK,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIP,EAEEQ,EAAON,EAAUL,EAAO,MAExBY,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,OACEjB,EAACc,EAAA,CAAM,GAAGD,EAAgB,IAAKN,EAAc,UAAWL,EAAGO,EAAW,gBAAiB,sBAAsB,EAC3G,SAAAT,EAAC,OACC,UAAWE,EACTO,EACA,8DACA,8EACAM,IAAaL,CAAM,GAAKA,EACxBM,IAAeL,CAAQ,GAAKA,EAC5BM,IAAkBL,CAAW,GAAKA,CACpC,EAEC,SAAAR,EACH,EACF,CAEJ,CAAC,EAEKc,EAAYjB,EAAM,WAA6C,CAAC,CAAE,GAAGK,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,SAAAH,EAAU,KAAAe,EAAO,SAAU,EAAIb,EASjCc,EALF,CACF,QAASf,EACT,SAAUN,CACZ,EAEiCoB,CAAK,EAEtC,OACEnB,EAACoB,EAAA,CAAW,GAAGd,EAAO,IAAKC,EACxB,SAAAH,EACH,CAEJ,CAAC,EAEDc,EAAU,YAAc",
|
|
6
6
|
"names": ["Fragment", "jsx", "React", "cn", "Slot", "children", "Section", "props", "forwardedRef", "asChild", "className", "spaceY", "spaceTop", "spaceBottom", "containerProps", "Comp", "spaceY_map", "spaceTop_map", "spaceBottom_map", "Container", "mode", "Component"]
|
|
7
7
|
}
|