@anker-in/headless-ui 0.0.27-alpha.65 → 0.0.27-alpha.67
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/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/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 +3 -3
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/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 +3 -3
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +3 -3
- package/package.json +1 -1
- package/dist/cjs/libs.d.js +0 -2
- package/dist/cjs/libs.d.js.map +0 -7
- package/dist/esm/libs.d.js +0 -2
- package/dist/esm/libs.d.js.map +0 -7
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var x=Object.create;var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var C=(e,o)=>{for(var r in o)c(e,r,{get:o[r],enumerable:!0})},u=(e,o,r,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of h(o))!y.call(e,i)&&i!==r&&c(e,i,{get:()=>o[i],enumerable:!(a=b(o,i))||a.enumerable});return e};var m=(e,o,r)=>(r=e!=null?x(v(e)):{},u(o||!e||!e.__esModule?c(r,"default",{value:e,enumerable:!0}):r,e)),F=e=>u(c({},"__esModule",{value:!0}),e);var D={};C(D,{default:()=>A});module.exports=F(D);var t=require("react/jsx-runtime"),l=require("react"),n=require("../../helpers/utils.js"),s=m(require("../../components/picture.js")),p=require("../../shared/Styles.js"),g=m(require("../Title/index.js")),d=m(require("./SwiperCategory.js"));const N=(e,o)=>{const r=[];for(let a=0;a<e.length;a+=o)r.push(e.slice(a,a+o));return r},w=({data:e,configuration:o})=>{const r=(0,l.useRef)(null),a=(0,l.useRef)(null);return(0,t.jsxs)("div",{ref:r,className:(0,n.cn)("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]",o?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,t.jsx)("div",{ref:a,children:(0,t.jsx)(s.default,{source:e?.image?.url||e?.image,className:"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})}),(0,t.jsx)("p",{className:"tablet:text-lg box-border line-clamp-2 flex-1 text-center text-sm font-semibold",children:e?.name})]})},E=({data:e,configuration:o})=>(0,t.jsxs)("div",{className:(0,n.cn)("box-border max-h-[126px] w-full overflow-hidden bg-[#EAEAEC]","cursor-pointer px-3 py-4 duration-300 hover:bg-[#FFFFFF]",o?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,t.jsx)(s.default,{className:"mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image}),(0,t.jsx)("p",{className:"flex-1 truncate text-center text-sm font-semibold",children:e?.name})]},`${e?.name}`),k=({data:e,configuration:o})=>{const r=(0,l.useRef)(null),a=(0,l.useRef)(null);return(0,t.jsxs)("div",{ref:r,className:(0,n.cn)("box-border flex w-[calc(20%-12px)] shrink-0 flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]",o?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,t.jsx)("div",{className:"size-full",ref:a,children:(0,t.jsx)(s.default,{className:"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),(0,t.jsx)("p",{className:"tablet:text-lg flex-1 text-center text-sm font-semibold",children:e?.name})]})},I=({data:e,configuration:o,index:r})=>(0,t.jsxs)("div",{className:(0,n.cn)("box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-[#EAEAEC]","cursor-pointer p-4 hover:bg-[#FFFFFF]",r===0?"row-span-2 h-[252px]":"h-[120px]",o?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,t.jsx)("div",{className:(0,n.cn)(r===0?"max-h-[146px]":"max-h-[72px]"),children:(0,t.jsx)(s.default,{className:(0,n.cn)("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"),source:e?.image?.url||e?.image})}),(0,t.jsx)("p",{className:"line-clamp-2 text-center text-sm font-semibold",children:e?.name})]}),S=({data:e,configuration:o})=>(0,t.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,a)=>(0,t.jsx)(E,{data:r,configuration:o},a))}),j=({data:e,configuration:o})=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)("div",{className:"mx-auto flex w-full gap-4",children:e?.map((r,a)=>(0,t.jsx)(k,{data:r,configuration:o},a))})}),(0,t.jsx)("div",{className:"tablet:hidden block",children:(0,t.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,a)=>(0,t.jsx)(I,{index:a,data:r,configuration:o},a))})})]}),_=({data:e,buildData:o,className:r="",key:a})=>{const i=e?.isShowSelect?e?.products:e?.productData,f=i?.length<=5;return(0,t.jsxs)("div",{className:(0,n.cn)("w-full",r),children:[e?.title&&(0,t.jsx)(g.default,{data:{title:e?.title}}),f?(0,t.jsx)(j,{data:i,configuration:{shape:e?.shape}}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)(d.default,{id:`Category${a}`,Slide:w,data:{list:i,configuration:{shape:e?.shape}}})}),(0,t.jsx)("div",{className:"tablet:hidden block overflow-hidden",children:(0,t.jsx)(d.default,{id:`Category1${a}`,Slide:S,data:{list:N(i,6),configuration:{shape:e?.shape}}})})]})]})};var A=(0,p.withStyles)(_);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqEI,IAAAI,EAAA,6BApEJC,EAA8B,iBAC9BC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAC3BC,EAAkB,gCAClBC,EAAsB,
|
|
6
|
-
"names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperCategory", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\n// import { useGSAP } from '@gsap/react'\n// import gsap from 'gsap'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const imageRef = useRef<HTMLDivElement>(null)\n // useGSAP(\n // () => {\n // const container = containerRef.current\n // const imageBox = imageRef.current\n // if (!container || !imageBox) return\n // const tween = gsap.to(imageBox, {\n // scale: 1.1,\n // duration: 0.3,\n // ease: 'power1.out',\n // paused: true,\n // })\n\n // // \u9F20\u6807\u8FDB\u5165/\u79BB\u5F00\u65F6\u64AD\u653E\u6216\u53CD\u5411\u64AD\u653E\u8BE5\u52A8\u753B\n // container.addEventListener('mouseenter', () => tween.play())\n // container.addEventListener('mouseleave', () => tween.reverse())\n // },\n // {\n // scope: containerRef, // \u2463 \u5C06 scope \u4F20\u7ED9 useGSAP\uFF0C\u8BA9\u9009\u62E9\u5668\u53EF\u5C40\u9650\u4E8E\u6B64\u4E0A\u4E0B\u6587 :contentReference[oaicite:1]{index=1}\n // dependencies: [], // \u4EC5\u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u8FD0\u884C\u4E00\u6B21\n // revertOnUpdate: false, // \u4E0D\u5728\u4F9D\u8D56\u66F4\u65B0\u65F6\u8FD8\u539F\u52A8\u753B\n // }\n // )\n return (\n <div\n ref={containerRef}\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div ref={imageRef}>\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </div>\n <p className=\"tablet:text-lg box-border line-clamp-2 flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'box-border max-h-[126px] w-full overflow-hidden bg-[#EAEAEC]',\n 'cursor-pointer px-3 py-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture\n className=\"mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n <p className=\"flex-1 truncate text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore pc\u5C55\u793A\nconst SinglePcCategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const textRef = useRef<HTMLDivElement>(null)\n // useGSAP(\n // () => {\n // const container = containerRef.current\n // const textBox = textRef.current\n // if (!container || !textBox) return\n // const tween = gsap.to(textBox, {\n // scale: 1.1,\n // duration: 0.3,\n // ease: 'power1.out',\n // paused: true,\n // })\n\n // // \u9F20\u6807\u8FDB\u5165/\u79BB\u5F00\u65F6\u64AD\u653E\u6216\u53CD\u5411\u64AD\u653E\u8BE5\u52A8\u753B\n // container.addEventListener('mouseenter', () => tween.play())\n // container.addEventListener('mouseleave', () => tween.reverse())\n // },\n // {\n // scope: containerRef, // \u2463 \u5C06 scope \u4F20\u7ED9 useGSAP\uFF0C\u8BA9\u9009\u62E9\u5668\u53EF\u5C40\u9650\u4E8E\u6B64\u4E0A\u4E0B\u6587 :contentReference[oaicite:1]{index=1}\n // dependencies: [], // \u4EC5\u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u8FD0\u884C\u4E00\u6B21\n // revertOnUpdate: false, // \u4E0D\u5728\u4F9D\u8D56\u66F4\u65B0\u65F6\u8FD8\u539F\u52A8\u753B\n // }\n // )\n return (\n <div\n ref={containerRef}\n className={cn(\n 'box-border flex w-[calc(20%-12px)] shrink-0 flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className=\"size-full\" ref={textRef}>\n <Picture\n className=\"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </div>\n <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-[#EAEAEC]',\n 'cursor-pointer p-4 hover:bg-[#FFFFFF]',\n index === 0 ? 'row-span-2 h-[252px]' : 'h-[120px]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className={cn(index === 0 ? 'max-h-[146px]' : 'max-h-[72px]')}>\n <Picture\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover'\n )}\n source={data?.image?.url || data?.image}\n />\n </div>\n <p className=\"line-clamp-2 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return <SingleItem key={index} data={item} configuration={configuration} />\n })}\n </div>\n )\n}\n\n// soundcore\u5C55\u793A\nconst SoundCoreCategoryItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <>\n <div className=\"tablet:block hidden\">\n <div className=\"mx-auto flex w-full gap-4\">\n {data?.map((item, index) => {\n return <SinglePcCategoryItem key={index} data={item} configuration={configuration} />\n })}\n </div>\n </div>\n <div className=\"tablet:hidden block\">\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n })}\n </div>\n </div>\n </>\n )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\n const isSoundCore = currentData?.length <= 5\n return (\n <div className={cn('w-full', className)}>\n {data?.title && <Title data={{ title: data?.title }} />}\n {isSoundCore ? (\n <SoundCoreCategoryItem data={currentData} configuration={{ shape: data?.shape }} />\n ) : (\n <>\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape } }}\n />\n </div>\n <div className=\"tablet:hidden block overflow-hidden\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape } }}\n />\n </div>\n </>\n )}\n </div>\n )\n}\n\nexport default withStyles(Category)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperCategory", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "containerRef", "imageRef", "Picture", "SingleItem", "SinglePcCategoryItem", "textRef", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "SoundCoreCategoryItem", "Category", "buildData", "className", "key", "currentData", "isSoundCore", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var G=Object.create;var l=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var S=(a,t)=>{for(var r in t)l(a,r,{get:t[r],enumerable:!0})},y=(a,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of C(t))!R.call(a,o)&&o!==r&&l(a,o,{get:()=>t[o],enumerable:!(s=M(t,o))||s.enumerable});return a};var m=(a,t,r)=>(r=a!=null?G(h(a)):{},y(t||!a||!a.__esModule?l(r,"default",{value:a,enumerable:!0}):r,a)),z=a=>y(l({},"__esModule",{value:!0}),a);var D={};S(D,{default:()=>q});module.exports=z(D);var e=require("react/jsx-runtime"),d=require("react"),u=require("../../helpers/utils.js"),f=require("../../shared/Styles.js"),v=m(require("../Slogan/index.js")),i=require("../../components/gird.js"),n=require("../../components/container.js"),b=m(require("../BrandEquity/index.js")),g=m(require("../MemberEquity/index.js")),c=require("@payloadcms/richtext-lexical/html");const B=({children:a,id:t,components:r})=>(0,e.jsxs)("div",{id:t,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:a}),(0,e.jsx)(e.Fragment,{children:r?.map(s=>{switch(s.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"bg-[#1D1D1F]",children:(0,e.jsx)(n.Container,{className:"!my-0",children:(0,e.jsxs)(i.Grid,{children:[(0,e.jsx)(i.GridItem,{span:1}),(0,e.jsx)(i.GridItem,{span:10,children:(0,e.jsx)(b.default,{data:s})}),(0,e.jsx)(i.GridItem,{span:1})]})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"w-full bg-[#1D1D1F] py-10",children:(0,e.jsx)(n.Container,{className:"!my-0",children:(0,e.jsxs)(i.Grid,{children:[(0,e.jsx)(i.GridItem,{span:1}),(0,e.jsx)(i.GridItem,{span:10,children:(0,e.jsx)(g.default,{data:s,className:"w-full"})}),(0,e.jsx)(i.GridItem,{span:1})]})})});default:return null}})})]}),I=({className:a="",id:t,data:{title:r,videoTitle:s,btnText:o,img:E,video:N,theme:p,shape:P,components:k}})=>{const[F,L]=(0,d.useState)(!1),w=(0,d.useRef)(null),x=typeof r=="string"?r:r&&(0,c.convertLexicalToHTML)({data:r});return typeof s=="string"||s&&(0,c.convertLexicalToHTML)({data:s}),(0,e.jsx)(B,{id:t,components:k,children:(0,e.jsxs)("div",{className:(0,u.cn)("relative h-screen w-full",a,{"aiui-dark":p==="dark","rounded-box":P==="rounded"}),children:[(0,e.jsx)("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2",children:(0,e.jsx)(n.Container,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsxs)(i.Grid,{children:[(0,e.jsx)(i.GridItem,{span:1}),(0,e.jsx)(i.GridItem,{span:10,children:(0,e.jsx)(v.default,{className:"sticky-title",data:{title:x||"",theme:p}})}),(0,e.jsx)(i.GridItem,{span:1})]})})}),(0,e.jsxs)("div",{className:"media-cover relative h-screen w-full overflow-hidden",children:[(0,e.jsx)("video",{ref:w,className:"size-full object-cover",src:N?.url,autoPlay:!0,muted:!0,loop:!0}),(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%)"}})]})]})})};var q=(0,f.withStyles)(I);
|
|
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 } from 'react'\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'\
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuDM,IAAAI,EAAA,6BAtDNC,EAAmD,iBACnDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAmB,iCACnBC,EAA+B,oCAC/BC,EAA0B,yCAC1BC,EAAwB,sCACxBC,EAAyB,
|
|
6
|
-
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\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'\n// import gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\n\nconst StickyBox = ({\n children,\n id,\n components,\n}: {\n children: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n}) => {\n // useEffect(() => {\n // const height = window.screen.height\n\n // gsap.registerPlugin(ScrollTrigger)\n // gsap\n // .timeline({\n // scrollTrigger: {\n // trigger: `#${id}`,\n // start: 'top top',\n // end: `top+=${height * 1.8}px bottom`,\n // markers: true,\n // scrub: 0,\n // },\n // })\n // .to(`#${id} .sticky-cover`, {\n // opacity: 1,\n // duration: 0.3,\n // })\n // .to(\n // `#${id} .media-content`,\n // {\n // top: '100%',\n // transform: 'translate(-50%, -100%)',\n // duration: 1,\n // },\n // '<'\n // )\n // }, [])\n\n return (\n <div id={id} 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=\"bg-[#1D1D1F]\">\n <Container className=\"!my-0\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <BrandEquity data={componentData} />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"w-full bg-[#1D1D1F] py-10\">\n <Container className=\"!my-0\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <MemberEquity data={componentData} className=\"w-full\" />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n )\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n}\n\nconst MediaPlayerSticky: React.FC<MediaPlayerBaseProps> = ({\n className = '',\n id,\n data: { title, videoTitle, btnText, img, video, theme, shape, components },\n}) => {\n const [isPlaying, setIsPlaying] = useState(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n return (\n <StickyBox id={id} components={components}>\n <div\n className={cn('relative h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2\">\n <Container spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n <div className=\"media-cover relative h-screen w-full overflow-hidden\">\n <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\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 </StickyBox>\n )\n}\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuDM,IAAAI,EAAA,6BAtDNC,EAAmD,iBACnDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAmB,iCACnBC,EAA+B,oCAC/BC,EAA0B,yCAC1BC,EAAwB,sCACxBC,EAAyB,uCAGzBC,EAAqC,6CAIrC,MAAMC,EAAY,CAAC,CACjB,SAAAC,EACA,GAAAC,EACA,WAAAC,CACF,OAmCI,QAAC,OAAI,GAAID,EAAI,UAAU,gBACrB,gCAAG,SAAAD,EAAS,KACZ,mBACG,SAAAE,GAAY,IAAKC,GAAuB,CACvC,OAAQA,EAAc,UAAW,CAC/B,IAAK,mBACH,SACE,OAAC,OAAI,UAAU,eACb,mBAAC,aAAU,UAAU,QACnB,oBAAC,QACC,oBAAC,YAAS,KAAM,EAAG,KACnB,OAAC,YAAS,KAAM,GACd,mBAAC,EAAAC,QAAA,CAAY,KAAMD,EAAe,EACpC,KACA,OAAC,YAAS,KAAM,EAAG,GACrB,EACF,EACF,EAGJ,IAAK,oBACH,SACE,OAAC,OAAI,UAAU,4BACb,mBAAC,aAAU,UAAU,QACnB,oBAAC,QACC,oBAAC,YAAS,KAAM,EAAG,KACnB,OAAC,YAAS,KAAM,GACd,mBAAC,EAAAE,QAAA,CAAa,KAAMF,EAAe,UAAU,SAAS,EACxD,KACA,OAAC,YAAS,KAAM,EAAG,GACrB,EACF,EACF,EAGJ,QACE,OAAO,IACX,CACF,CAAC,EACH,GACF,EAIEG,EAAoD,CAAC,CACzD,UAAAC,EAAY,GACZ,GAAAN,EACA,KAAM,CAAE,MAAAO,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,WAAAZ,CAAW,CAC3E,IAAM,CACJ,KAAM,CAACa,EAAWC,CAAY,KAAI,YAAS,EAAK,EAC1CC,KAAW,UAAyB,IAAI,EAExCC,EAAa,OAAOV,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,CAAM,CAAC,EACpG,cAAOC,GAAe,UAAwBA,MAAc,wBAAqB,CAAE,KAAMA,CAAW,CAAC,KAGnG,OAACV,EAAA,CAAU,GAAIE,EAAI,WAAYC,EAC7B,oBAAC,OACC,aAAW,MAAG,2BAA4BK,EAAW,CACnD,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,oBAAC,OAAI,UAAU,wFACb,mBAAC,aAAU,OAAO,uCAChB,oBAAC,QACC,oBAAC,YAAS,KAAM,EAAG,KACnB,OAAC,YAAS,KAAM,GACd,mBAAC,EAAAK,QAAA,CAAO,UAAU,eAAe,KAAM,CAAE,MAAOD,GAAc,GAAI,MAAAL,CAAM,EAAG,EAC7E,KACA,OAAC,YAAS,KAAM,EAAG,GACrB,EACF,EACF,KACA,QAAC,OAAI,UAAU,uDACb,oBAAC,SAAM,IAAKI,EAAU,UAAU,yBAAyB,IAAKL,GAAO,IAAK,SAAQ,GAAC,MAAK,GAAC,KAAI,GAAC,KAC9F,OAAC,OACC,UAAU,8DACV,MAAO,CACL,WAAY,+DACd,EACF,GACF,GACF,EACF,CAEJ,EAEA,IAAOzB,KAAQ,cAAWmB,CAAiB",
|
|
6
|
+
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_html", "StickyBox", "children", "id", "components", "componentData", "BrandEquity", "MemberEquity", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "title_html", "Slogan"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var R=Object.create;var p=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var j=(e,t)=>{for(var l in t)p(e,l,{get:t[l],enumerable:!0})},D=(e,t,l,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of F(t))!$.call(e,s)&&s!==l&&p(e,s,{get:()=>t[s],enumerable:!(a=E(t,s))||a.enumerable});return e};var z=(e,t,l)=>(l=e!=null?R(G(e)):{},D(t||!e||!e.__esModule?p(l,"default",{value:e,enumerable:!0}):l,e)),C=e=>D(p({},"__esModule",{value:!0}),e);var P={};j(P,{default:()=>M});module.exports=C(P);var n=require("react/jsx-runtime"),r=z(require("react")),u=require("../../helpers/utils.js"),c=require("../../components/index.js"),S=require("../../shared/Styles.js");function L(e=[],t=3){const l=[];for(let a=0;a<e.length;a+=t)l.push(e.slice(a,a+t));return l}const N=r.default.forwardRef(({data:e,className:t=""},l)=>{const{title:a,features:s=[],featureChunkSize:v=3,theme:w}=e,[m,y]=r.default.useState(0),[b,x]=r.default.useState(!0),f=L(s,v),d=f.length,o=s.length>v,T=o?[...f,f[0]]:f,g=40;r.default.useEffect(()=>{if(!o)return;const i=setInterval(()=>{y(h=>h+1),x(!0)},3e3);return()=>clearInterval(i)},[d,o]),r.default.useEffect(()=>{if(o)if(m===d){const i=setTimeout(()=>{x(!1),y(0)},500);return()=>clearTimeout(i)}else x(!0)},[m,d,o]);const H=(0,r.useRef)(null);return(0,n.jsxs)("div",{ref:l,className:(0,u.cn)("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",t),children:[(0,n.jsx)(c.Heading,{ref:H,as:"h2",size:2,weight:"bold",align:"left",className:(0,u.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":w!=="dark","text-[#fff]":w==="dark"}),children:a}),s&&s.length>0&&(0,n.jsx)("div",{className:"relative w-full max-w-[500px] overflow-hidden",style:{height:`${g}px`},children:(0,n.jsx)("div",{className:(0,u.cn)(["flex flex-col",b?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${m*g}px)`},children:T.map((i,h)=>(0,n.jsx)("div",{className:"flex w-full flex-row items-stretch gap-3 overflow-hidden",style:{height:`${g}px`},children:i.map((I,k)=>(0,n.jsxs)(r.default.Fragment,{children:[k>0&&(0,n.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]"}),(0,n.jsx)(c.Text,{align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]",html:I.title})]},k))},h))})})]})});N.displayName="Slogan";var M=(0,S.withStyles)(N);
|
|
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, { useRef } from 'react'\
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqGM,IAAAI,EAAA,6BApGNC,EAA8B,
|
|
6
|
-
"names": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\n// import { useGSAP } from '@gsap/react'\n// import { gsap } from 'gsap'\n// import { SplitText } from 'gsap/SplitText'\n// import { ScrollTrigger } from 'gsap/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'\n\n// gsap.registerPlugin(SplitText, ScrollTrigger)\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, theme } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\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 // \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 splitTextInstance = useRef<SplitText | null>(null)\n // useGSAP(() => {\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',\n // end: `bottom bottom-=${height + 40}px`,\n // scrub: true,\n // onUpdate: self => {\n // const progress = self.progress\n // const total = words.length\n // const interval = 1 / total\n // const overlap = 0.5\n // words.forEach((word, i) => {\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 => t.kill())\n // }\n // }, [])\n\n return (\n <div\n ref={ref}\n className={cn(\n '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 'text-[#1D1D1F]': theme !== 'dark',\n 'text-[#fff]': theme === 'dark',\n }\n )}\n >\n {title}\n </Heading>\n {features && features.length > 0 && (\n <div className=\"relative w-full max-w-[500px] overflow-hidden\" style={{ height: `${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=\"flex w-full flex-row items-stretch gap-3 overflow-hidden\"\n style={{ height: `${groupHeight}px` }}\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-[#D9D9D9]\" />}\n <Text\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]\"\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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqGM,IAAAI,EAAA,6BApGNC,EAA8B,oBAK9BC,EAAmB,kCACnBC,EAA8B,qCAC9BC,EAA2B,kCAK3B,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,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CAC9F,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,iBAAAC,EAAmB,EAAG,MAAAC,CAAM,EAAIN,EACxD,CAACO,EAAYC,CAAa,EAAI,EAAAT,QAAM,SAAS,CAAC,EAC9C,CAACU,EAAiBC,CAAkB,EAAI,EAAAX,QAAM,SAAS,EAAI,EAC3DY,EAAiBlB,EAAWW,EAAUC,CAAgB,EACtDO,EAAcD,EAAe,OAC7BE,EAAeT,EAAS,OAASC,EACjCS,EAAgBD,EAAe,CAAC,GAAGF,EAAgBA,EAAe,CAAC,CAAC,EAAIA,EACxEI,EAAc,GAGpB,EAAAhB,QAAM,UAAU,IAAM,CACpB,GAAI,CAACc,EAAc,OACnB,MAAMG,EAAQ,YAAY,IAAM,CAC9BR,EAAcX,GAAKA,EAAI,CAAC,EACxBa,EAAmB,EAAI,CACzB,EAAG,GAAI,EACP,MAAO,IAAM,cAAcM,CAAK,CAClC,EAAG,CAACJ,EAAaC,CAAY,CAAC,EAG9B,EAAAd,QAAM,UAAU,IAAM,CACpB,GAAKc,EACL,GAAIN,IAAeK,EAAa,CAC9B,MAAMK,EAAS,WAAW,IAAM,CAC9BP,EAAmB,EAAK,EACxBF,EAAc,CAAC,CACjB,EAAG,GAAG,EACN,MAAO,IAAM,aAAaS,CAAM,CAClC,MACEP,EAAmB,EAAI,CAE3B,EAAG,CAACH,EAAYK,EAAaC,CAAY,CAAC,EAG1C,MAAMK,KAAW,UAA2B,IAAI,EAqChD,SACE,QAAC,OACC,IAAKhB,EACL,aAAW,MACT,0JACAD,CACF,EAEA,oBAAC,WACC,IAAKiB,EACL,GAAG,KACH,KAAM,EACN,OAAQ,OACR,MAAO,OACP,aAAW,MACT,uGACA,CACE,iBAAkBZ,IAAU,OAC5B,cAAeA,IAAU,MAC3B,CACF,EAEC,SAAAH,EACH,EACCC,GAAYA,EAAS,OAAS,MAC7B,OAAC,OAAI,UAAU,gDAAgD,MAAO,CAAE,OAAQ,GAAGW,CAAW,IAAK,EACjG,mBAAC,OACC,aAAW,MAAG,CACZ,gBACAN,EAAkB,mEAAqE,kBACzF,CAAC,EACD,MAAO,CACL,UAAW,eAAeF,EAAaQ,CAAW,KACpD,EAEC,SAAAD,EAAc,IAAI,CAACK,EAAOC,OACzB,OAAC,OACC,UAAU,2DACV,MAAO,CAAE,OAAQ,GAAGL,CAAW,IAAK,EAGnC,SAAAI,EAAM,IAAI,CAACE,EAASC,OACnB,QAAC,EAAAvB,QAAM,SAAN,CACE,UAAAuB,EAAQ,MAAK,OAAC,OAAI,UAAU,wDAAwD,KACrF,OAAC,QACC,MAAM,OACN,GAAG,IACH,UAAU,8HACV,KAAMD,EAAQ,MAChB,IAPmBC,CAQrB,CACD,GAZIF,CAaP,CACD,EACH,EACF,GAEJ,CAEJ,CAAC,EAEDtB,EAAO,YAAc,SAErB,IAAOZ,KAAQ,cAAWY,CAAM",
|
|
6
|
+
"names": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_components", "import_Styles", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "ref", "title", "features", "featureChunkSize", "theme", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "group", "idx", "feature", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var c=Object.create;var m=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var i in t)m(e,i,{get:t[i],enumerable:!0})},a=(e,t,i,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of u(t))!h.call(e,r)&&r!==i&&m(e,r,{get:()=>t[r],enumerable:!(l=T(t,r))||l.enumerable});return e};var R=(e,t,i)=>(i=e!=null?c(y(e)):{},a(t||!e||!e.__esModule?m(i,"default",{value:e,enumerable:!0}):i,e)),b=e=>a(m({},"__esModule",{value:!0}),e);var g={};H(g,{default:()=>v});module.exports=b(g);var s=require("react/jsx-runtime"),o=R(require("react")),f=require("../../helpers/utils.js"),n=require("../../components/index.js"),d=require("../../shared/Styles.js");const p=o.default.forwardRef(({data:e,className:t})=>{const{title:i,theme:l}=e,r=(0,o.useRef)(null);return i&&(0,s.jsx)("div",{className:(0,f.cn)("tablet:mb-[32px] mb-[24px] space-y-4",t,{"aiui-dark":l==="dark"}),children:(0,s.jsx)(n.Heading,{ref:r,as:"h2",size:5,html:i})})});p.displayName="Title";var v=(0,d.withStyles)(p);
|
|
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'\
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqDQ,IAAAI,EAAA,6BApDRC,EAA8B,
|
|
6
|
-
"names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\n// import { useGSAP } from '@gsap/react'\n// import gsap from 'gsap'\n// import { SplitText } from 'gsap/SplitText'\n// import { ScrollTrigger } from 'gsap/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\n// gsap.registerPlugin(SplitText, ScrollTrigger)\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 // 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',\n // end: `bottom bottom+=${height + 20}px`,\n // scrub: true,\n // onUpdate: self => {\n // const progress = self.progress\n // const total = words.length\n // const interval = 1 / total\n // const overlap = 0.5\n // words.forEach((word, i) => {\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 => 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=\"h2\" size={5} 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,oBAK9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAI3B,MAAMC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,KAAW,UAA2B,IAAI,EAoChD,OACEF,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,IAAOP,KAAQ,cAAWO,CAAK",
|
|
6
|
+
"names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_components", "import_Styles", "Title", "React", "data", "className", "title", "theme", "titleRef"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as d,jsx as t,jsxs as n}from"react/jsx-runtime";import{useRef as s}from"react";import{cn as i}from"../../helpers/utils.js";import c from"../../components/picture.js";import{withStyles as p}from"../../shared/Styles.js";import g from"../Title/index.js";import m from"./SwiperCategory.js";const f=(e,a)=>{const r=[];for(let o=0;o<e.length;o+=a)r.push(e.slice(o,o+a));return r},x=({data:e,configuration:a})=>{const r=s(null),o=s(null);return n("div",{ref:r,className:i("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]",a?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[t("div",{ref:o,children:t(c,{source:e?.image?.url||e?.image,className:"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})}),t("p",{className:"tablet:text-lg box-border line-clamp-2 flex-1 text-center text-sm font-semibold",children:e?.name})]})},b=({data:e,configuration:a})=>n("div",{className:i("box-border max-h-[126px] w-full overflow-hidden bg-[#EAEAEC]","cursor-pointer px-3 py-4 duration-300 hover:bg-[#FFFFFF]",a?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[t(c,{className:"mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image}),t("p",{className:"flex-1 truncate text-center text-sm font-semibold",children:e?.name})]},`${e?.name}`),h=({data:e,configuration:a})=>{const r=s(null),o=s(null);return n("div",{ref:r,className:i("box-border flex w-[calc(20%-12px)] shrink-0 flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]",a?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[t("div",{className:"size-full",ref:o,children:t(c,{className:"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),t("p",{className:"tablet:text-lg flex-1 text-center text-sm font-semibold",children:e?.name})]})},v=({data:e,configuration:a,index:r})=>n("div",{className:i("box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-[#EAEAEC]","cursor-pointer p-4 hover:bg-[#FFFFFF]",r===0?"row-span-2 h-[252px]":"h-[120px]",a?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[t("div",{className:i(r===0?"max-h-[146px]":"max-h-[72px]"),children:t(c,{className:i("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"),source:e?.image?.url||e?.image})}),t("p",{className:"line-clamp-2 text-center text-sm font-semibold",children:e?.name})]}),y=({data:e,configuration:a})=>t("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,o)=>t(b,{data:r,configuration:a},o))}),C=({data:e,configuration:a})=>n(d,{children:[t("div",{className:"tablet:block hidden",children:t("div",{className:"mx-auto flex w-full gap-4",children:e?.map((r,o)=>t(h,{data:r,configuration:a},o))})}),t("div",{className:"tablet:hidden block",children:t("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,o)=>t(v,{index:o,data:r,configuration:a},o))})})]}),F=({data:e,buildData:a,className:r="",key:o})=>{const l=e?.isShowSelect?e?.products:e?.productData,u=l?.length<=5;return n("div",{className:i("w-full",r),children:[e?.title&&t(g,{data:{title:e?.title}}),u?t(C,{data:l,configuration:{shape:e?.shape}}):n(d,{children:[t("div",{className:"tablet:block hidden",children:t(m,{id:`Category${o}`,Slide:x,data:{list:l,configuration:{shape:e?.shape}}})}),t("div",{className:"tablet:hidden block overflow-hidden",children:t(m,{id:`Category1${o}`,Slide:y,data:{list:f(l,6),configuration:{shape:e?.shape}}})})]})]})};var _=p(F);export{_ as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\
|
|
5
|
-
"mappings": "aAqEI,OAkIA,YAAAA,EAzHI,OAAAC,EATJ,QAAAC,MAAA,oBApEJ,OAAgB,UAAAC,MAAc,QAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAW,oBAClB,OAAOC,MAAe,
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useRef", "cn", "Picture", "withStyles", "Title", "SwiperBox", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\n// import { useGSAP } from '@gsap/react'\n// import gsap from 'gsap'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const imageRef = useRef<HTMLDivElement>(null)\n // useGSAP(\n // () => {\n // const container = containerRef.current\n // const imageBox = imageRef.current\n // if (!container || !imageBox) return\n // const tween = gsap.to(imageBox, {\n // scale: 1.1,\n // duration: 0.3,\n // ease: 'power1.out',\n // paused: true,\n // })\n\n // // \u9F20\u6807\u8FDB\u5165/\u79BB\u5F00\u65F6\u64AD\u653E\u6216\u53CD\u5411\u64AD\u653E\u8BE5\u52A8\u753B\n // container.addEventListener('mouseenter', () => tween.play())\n // container.addEventListener('mouseleave', () => tween.reverse())\n // },\n // {\n // scope: containerRef, // \u2463 \u5C06 scope \u4F20\u7ED9 useGSAP\uFF0C\u8BA9\u9009\u62E9\u5668\u53EF\u5C40\u9650\u4E8E\u6B64\u4E0A\u4E0B\u6587 :contentReference[oaicite:1]{index=1}\n // dependencies: [], // \u4EC5\u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u8FD0\u884C\u4E00\u6B21\n // revertOnUpdate: false, // \u4E0D\u5728\u4F9D\u8D56\u66F4\u65B0\u65F6\u8FD8\u539F\u52A8\u753B\n // }\n // )\n return (\n <div\n ref={containerRef}\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div ref={imageRef}>\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </div>\n <p className=\"tablet:text-lg box-border line-clamp-2 flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'box-border max-h-[126px] w-full overflow-hidden bg-[#EAEAEC]',\n 'cursor-pointer px-3 py-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture\n className=\"mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n <p className=\"flex-1 truncate text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore pc\u5C55\u793A\nconst SinglePcCategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const textRef = useRef<HTMLDivElement>(null)\n // useGSAP(\n // () => {\n // const container = containerRef.current\n // const textBox = textRef.current\n // if (!container || !textBox) return\n // const tween = gsap.to(textBox, {\n // scale: 1.1,\n // duration: 0.3,\n // ease: 'power1.out',\n // paused: true,\n // })\n\n // // \u9F20\u6807\u8FDB\u5165/\u79BB\u5F00\u65F6\u64AD\u653E\u6216\u53CD\u5411\u64AD\u653E\u8BE5\u52A8\u753B\n // container.addEventListener('mouseenter', () => tween.play())\n // container.addEventListener('mouseleave', () => tween.reverse())\n // },\n // {\n // scope: containerRef, // \u2463 \u5C06 scope \u4F20\u7ED9 useGSAP\uFF0C\u8BA9\u9009\u62E9\u5668\u53EF\u5C40\u9650\u4E8E\u6B64\u4E0A\u4E0B\u6587 :contentReference[oaicite:1]{index=1}\n // dependencies: [], // \u4EC5\u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u8FD0\u884C\u4E00\u6B21\n // revertOnUpdate: false, // \u4E0D\u5728\u4F9D\u8D56\u66F4\u65B0\u65F6\u8FD8\u539F\u52A8\u753B\n // }\n // )\n return (\n <div\n ref={containerRef}\n className={cn(\n 'box-border flex w-[calc(20%-12px)] shrink-0 flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className=\"size-full\" ref={textRef}>\n <Picture\n className=\"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </div>\n <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-[#EAEAEC]',\n 'cursor-pointer p-4 hover:bg-[#FFFFFF]',\n index === 0 ? 'row-span-2 h-[252px]' : 'h-[120px]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className={cn(index === 0 ? 'max-h-[146px]' : 'max-h-[72px]')}>\n <Picture\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover'\n )}\n source={data?.image?.url || data?.image}\n />\n </div>\n <p className=\"line-clamp-2 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return <SingleItem key={index} data={item} configuration={configuration} />\n })}\n </div>\n )\n}\n\n// soundcore\u5C55\u793A\nconst SoundCoreCategoryItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <>\n <div className=\"tablet:block hidden\">\n <div className=\"mx-auto flex w-full gap-4\">\n {data?.map((item, index) => {\n return <SinglePcCategoryItem key={index} data={item} configuration={configuration} />\n })}\n </div>\n </div>\n <div className=\"tablet:hidden block\">\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n })}\n </div>\n </div>\n </>\n )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\n const isSoundCore = currentData?.length <= 5\n return (\n <div className={cn('w-full', className)}>\n {data?.title && <Title data={{ title: data?.title }} />}\n {isSoundCore ? (\n <SoundCoreCategoryItem data={currentData} configuration={{ shape: data?.shape }} />\n ) : (\n <>\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape } }}\n />\n </div>\n <div className=\"tablet:hidden block overflow-hidden\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape } }}\n />\n </div>\n </>\n )}\n </div>\n )\n}\n\nexport default withStyles(Category)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useRef", "cn", "Picture", "withStyles", "Title", "SwiperBox", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "containerRef", "imageRef", "SingleItem", "SinglePcCategoryItem", "textRef", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "SoundCoreCategoryItem", "Category", "buildData", "className", "key", "currentData", "isSoundCore", "Category_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as c,jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as b,useRef as g}from"react";import{cn as N}from"../../helpers/utils.js";import{withStyles as P}from"../../shared/Styles.js";import k from"../Slogan/index.js";import{Grid as l,GridItem as a}from"../../components/gird.js";import{Container as n}from"../../components/container.js";import w from"../BrandEquity/index.js";import x from"../MemberEquity/index.js";import{convertLexicalToHTML as m}from"@payloadcms/richtext-lexical/html";const G=({children:s,id:o,components:r})=>i("div",{id:o,className:"relative z-10",children:[e(c,{children:s}),e(c,{children:r?.map(t=>{switch(t.blockType){case"ipc-brand-equity":return e("div",{className:"bg-[#1D1D1F]",children:e(n,{className:"!my-0",children:i(l,{children:[e(a,{span:1}),e(a,{span:10,children:e(w,{data:t})}),e(a,{span:1})]})})});case"ipc-member-equity":return e("div",{className:"w-full bg-[#1D1D1F] py-10",children:e(n,{className:"!my-0",children:i(l,{children:[e(a,{span:1}),e(a,{span:10,children:e(x,{data:t,className:"w-full"})}),e(a,{span:1})]})})});default:return null}})})]}),M=({className:s="",id:o,data:{title:r,videoTitle:t,btnText:C,img:h,video:p,theme:d,shape:y,components:u}})=>{const[R,S]=b(!1),f=g(null),v=typeof r=="string"?r:r&&m({data:r});return typeof t=="string"||t&&m({data:t}),e(G,{id:o,components:u,children:i("div",{className:N("relative h-screen w-full",s,{"aiui-dark":d==="dark","rounded-box":y==="rounded"}),children:[e("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2",children:e(n,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:i(l,{children:[e(a,{span:1}),e(a,{span:10,children:e(k,{className:"sticky-title",data:{title:v||"",theme:d}})}),e(a,{span:1})]})})}),i("div",{className:"media-cover relative h-screen w-full overflow-hidden",children:[e("video",{ref:f,className:"size-full object-cover",src:p?.url,autoPlay:!0,muted:!0,loop:!0}),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%)"}})]})]})})};var V=P(M);export{V 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 } from 'react'\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'\
|
|
5
|
-
"mappings": "aAuDM,mBAAAA,EAAA,OAAAC,EAQc,QAAAC,MARd,oBAtDN,OAAgB,YAAAC,EAAU,UAAAC,
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\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'\n// import gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\n\nconst StickyBox = ({\n children,\n id,\n components,\n}: {\n children: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n}) => {\n // useEffect(() => {\n // const height = window.screen.height\n\n // gsap.registerPlugin(ScrollTrigger)\n // gsap\n // .timeline({\n // scrollTrigger: {\n // trigger: `#${id}`,\n // start: 'top top',\n // end: `top+=${height * 1.8}px bottom`,\n // markers: true,\n // scrub: 0,\n // },\n // })\n // .to(`#${id} .sticky-cover`, {\n // opacity: 1,\n // duration: 0.3,\n // })\n // .to(\n // `#${id} .media-content`,\n // {\n // top: '100%',\n // transform: 'translate(-50%, -100%)',\n // duration: 1,\n // },\n // '<'\n // )\n // }, [])\n\n return (\n <div id={id} 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=\"bg-[#1D1D1F]\">\n <Container className=\"!my-0\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <BrandEquity data={componentData} />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"w-full bg-[#1D1D1F] py-10\">\n <Container className=\"!my-0\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <MemberEquity data={componentData} className=\"w-full\" />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n )\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n}\n\nconst MediaPlayerSticky: React.FC<MediaPlayerBaseProps> = ({\n className = '',\n id,\n data: { title, videoTitle, btnText, img, video, theme, shape, components },\n}) => {\n const [isPlaying, setIsPlaying] = useState(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n return (\n <StickyBox id={id} components={components}>\n <div\n className={cn('relative h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2\">\n <Container spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n <div className=\"media-cover relative h-screen w-full overflow-hidden\">\n <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\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 </StickyBox>\n )\n}\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "convertLexicalToHTML", "StickyBox", "children", "id", "components", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "title_html", "MediaPlayerSticky_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as l,jsxs as k}from"react/jsx-runtime";import t,{useRef as T}from"react";import{cn as d}from"../../helpers/utils.js";import{Heading as H,Text as I}from"../../components/index.js";import{withStyles as R}from"../../shared/Styles.js";function E(a=[],r=3){const o=[];for(let e=0;e<a.length;e+=r)o.push(a.slice(e,e+r));return o}const y=t.forwardRef(({data:a,className:r=""},o)=>{const{title:e,features:i=[],featureChunkSize:g=3,theme:h}=a,[p,v]=t.useState(0),[D,u]=t.useState(!0),f=E(i,g),c=f.length,s=i.length>g,N=s?[...f,f[0]]:f,m=40;t.useEffect(()=>{if(!s)return;const n=setInterval(()=>{v(x=>x+1),u(!0)},3e3);return()=>clearInterval(n)},[c,s]),t.useEffect(()=>{if(s)if(p===c){const n=setTimeout(()=>{u(!1),v(0)},500);return()=>clearTimeout(n)}else u(!0)},[p,c,s]);const S=T(null);return k("div",{ref:o,className:d("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",r),children:[l(H,{ref:S,as:"h2",size:2,weight:"bold",align:"left",className:d("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":h!=="dark","text-[#fff]":h==="dark"}),children:e}),i&&i.length>0&&l("div",{className:"relative w-full max-w-[500px] overflow-hidden",style:{height:`${m}px`},children:l("div",{className:d(["flex flex-col",D?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${p*m}px)`},children:N.map((n,x)=>l("div",{className:"flex w-full flex-row items-stretch gap-3 overflow-hidden",style:{height:`${m}px`},children:n.map((b,w)=>k(t.Fragment,{children:[w>0&&l("div",{className:"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]"}),l(I,{align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]",html:b.title})]},w))},x))})})]})});y.displayName="Slogan";var z=R(y);export{z 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, { useRef } from 'react'\
|
|
5
|
-
"mappings": "aAqGM,cAAAA,EAkCY,QAAAC,MAlCZ,oBApGN,OAAOC,GAAS,UAAAC,MAAc,
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useRef", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\n// import { useGSAP } from '@gsap/react'\n// import { gsap } from 'gsap'\n// import { SplitText } from 'gsap/SplitText'\n// import { ScrollTrigger } from 'gsap/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'\n\n// gsap.registerPlugin(SplitText, ScrollTrigger)\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, theme } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\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 // \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 splitTextInstance = useRef<SplitText | null>(null)\n // useGSAP(() => {\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',\n // end: `bottom bottom-=${height + 40}px`,\n // scrub: true,\n // onUpdate: self => {\n // const progress = self.progress\n // const total = words.length\n // const interval = 1 / total\n // const overlap = 0.5\n // words.forEach((word, i) => {\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 => t.kill())\n // }\n // }, [])\n\n return (\n <div\n ref={ref}\n className={cn(\n '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 'text-[#1D1D1F]': theme !== 'dark',\n 'text-[#fff]': theme === 'dark',\n }\n )}\n >\n {title}\n </Heading>\n {features && features.length > 0 && (\n <div className=\"relative w-full max-w-[500px] overflow-hidden\" style={{ height: `${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=\"flex w-full flex-row items-stretch gap-3 overflow-hidden\"\n style={{ height: `${groupHeight}px` }}\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-[#D9D9D9]\" />}\n <Text\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]\"\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": "aAqGM,cAAAA,EAkCY,QAAAC,MAlCZ,oBApGN,OAAOC,GAAS,UAAAC,MAAc,QAK9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,cAAAC,MAAkB,yBAK3B,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,EAASX,EAAM,WAAwC,CAAC,CAAE,KAAAY,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CAC9F,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,iBAAAC,EAAmB,EAAG,MAAAC,CAAM,EAAIN,EACxD,CAACO,EAAYC,CAAa,EAAIpB,EAAM,SAAS,CAAC,EAC9C,CAACqB,EAAiBC,CAAkB,EAAItB,EAAM,SAAS,EAAI,EAC3DuB,EAAiBjB,EAAWU,EAAUC,CAAgB,EACtDO,EAAcD,EAAe,OAC7BE,EAAeT,EAAS,OAASC,EACjCS,EAAgBD,EAAe,CAAC,GAAGF,EAAgBA,EAAe,CAAC,CAAC,EAAIA,EACxEI,EAAc,GAGpB3B,EAAM,UAAU,IAAM,CACpB,GAAI,CAACyB,EAAc,OACnB,MAAMG,EAAQ,YAAY,IAAM,CAC9BR,EAAcV,GAAKA,EAAI,CAAC,EACxBY,EAAmB,EAAI,CACzB,EAAG,GAAI,EACP,MAAO,IAAM,cAAcM,CAAK,CAClC,EAAG,CAACJ,EAAaC,CAAY,CAAC,EAG9BzB,EAAM,UAAU,IAAM,CACpB,GAAKyB,EACL,GAAIN,IAAeK,EAAa,CAC9B,MAAMK,EAAS,WAAW,IAAM,CAC9BP,EAAmB,EAAK,EACxBF,EAAc,CAAC,CACjB,EAAG,GAAG,EACN,MAAO,IAAM,aAAaS,CAAM,CAClC,MACEP,EAAmB,EAAI,CAE3B,EAAG,CAACH,EAAYK,EAAaC,CAAY,CAAC,EAG1C,MAAMK,EAAW7B,EAA2B,IAAI,EAqChD,OACEF,EAAC,OACC,IAAKe,EACL,UAAWZ,EACT,0JACAW,CACF,EAEA,UAAAf,EAACK,EAAA,CACC,IAAK2B,EACL,GAAG,KACH,KAAM,EACN,OAAQ,OACR,MAAO,OACP,UAAW5B,EACT,uGACA,CACE,iBAAkBgB,IAAU,OAC5B,cAAeA,IAAU,MAC3B,CACF,EAEC,SAAAH,EACH,EACCC,GAAYA,EAAS,OAAS,GAC7BlB,EAAC,OAAI,UAAU,gDAAgD,MAAO,CAAE,OAAQ,GAAG6B,CAAW,IAAK,EACjG,SAAA7B,EAAC,OACC,UAAWI,EAAG,CACZ,gBACAmB,EAAkB,mEAAqE,kBACzF,CAAC,EACD,MAAO,CACL,UAAW,eAAeF,EAAaQ,CAAW,KACpD,EAEC,SAAAD,EAAc,IAAI,CAACK,EAAOC,IACzBlC,EAAC,OACC,UAAU,2DACV,MAAO,CAAE,OAAQ,GAAG6B,CAAW,IAAK,EAGnC,SAAAI,EAAM,IAAI,CAACE,EAASC,IACnBnC,EAACC,EAAM,SAAN,CACE,UAAAkC,EAAQ,GAAKpC,EAAC,OAAI,UAAU,wDAAwD,EACrFA,EAACM,EAAA,CACC,MAAM,OACN,GAAG,IACH,UAAU,8HACV,KAAM6B,EAAQ,MAChB,IAPmBC,CAQrB,CACD,GAZIF,CAaP,CACD,EACH,EACF,GAEJ,CAEJ,CAAC,EAEDrB,EAAO,YAAc,SAErB,IAAOwB,EAAQ9B,EAAWM,CAAM",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useRef", "cn", "Heading", "Text", "withStyles", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "ref", "title", "features", "featureChunkSize", "theme", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "group", "idx", "feature", "index", "Slogan_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as i}from"react/jsx-runtime";import s,{useRef as a}from"react";import{cn as p}from"../../helpers/utils.js";import{Heading as f}from"../../components/index.js";import{withStyles as n}from"../../shared/Styles.js";const t=s.forwardRef(({data:r,className:l})=>{const{title:e,theme:m}=r,o=a(null);return e&&i("div",{className:p("tablet:mb-[32px] mb-[24px] space-y-4",l,{"aiui-dark":m==="dark"}),children:i(f,{ref:o,as:"h2",size:5,html:e})})});t.displayName="Title";var y=n(t);export{y 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'\
|
|
5
|
-
"mappings": "aAqDQ,cAAAA,MAAA,oBApDR,OAAOC,GAAS,UAAAC,MAAc,
|
|
6
|
-
"names": ["jsx", "React", "useRef", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\n// import { useGSAP } from '@gsap/react'\n// import gsap from 'gsap'\n// import { SplitText } from 'gsap/SplitText'\n// import { ScrollTrigger } from 'gsap/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\n// gsap.registerPlugin(SplitText, ScrollTrigger)\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 // 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',\n // end: `bottom bottom+=${height + 20}px`,\n // scrub: true,\n // onUpdate: self => {\n // const progress = self.progress\n // const total = words.length\n // const interval = 1 / total\n // const overlap = 0.5\n // words.forEach((word, i) => {\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 => 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=\"h2\" size={5} 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,QAK9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAI3B,MAAMC,EAAQL,EAAM,WAAuC,CAAC,CAAE,KAAAM,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,EAAWT,EAA2B,IAAI,EAoChD,OACEO,GACET,EAAC,OAAI,UAAWG,EAAG,uCAAwCK,EAAW,CAAE,YAAaE,IAAU,MAAO,CAAC,EACrG,SAAAV,EAACI,EAAA,CAAQ,IAAKO,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDH,EAAM,YAAc,QAEpB,IAAOM,EAAQP,EAAWC,CAAK",
|
|
6
|
+
"names": ["jsx", "React", "useRef", "cn", "Heading", "withStyles", "Title", "data", "className", "title", "theme", "titleRef", "Title_default"]
|
|
7
7
|
}
|
package/package.json
CHANGED
package/dist/cjs/libs.d.js
DELETED
package/dist/cjs/libs.d.js.map
DELETED
package/dist/esm/libs.d.js
DELETED
package/dist/esm/libs.d.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/libs.d.ts"],
|
|
4
|
-
"sourcesContent": ["declare module 'gsap/dist/SplitText.js' {\n import { SplitText } from 'gsap/dist/SplitText'\n export default SplitText\n}\n\ndeclare module 'gsap/dist/ScrollTrigger.js' {\n import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n export default ScrollTrigger\n}\n"],
|
|
5
|
-
"mappings": "8DAAA,IAAAA,EAAAC,EAAA",
|
|
6
|
-
"names": ["require_libs_d", "__commonJSMin"]
|
|
7
|
-
}
|