@anker-in/headless-ui 1.3.55 → 1.3.56
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/Marquee/Marquee.js +1 -1
- package/dist/cjs/biz-components/Marquee/Marquee.js.map +2 -2
- package/dist/cjs/biz-components/Marquee/type.d.ts +1 -0
- package/dist/cjs/biz-components/Marquee/type.js +1 -1
- package/dist/cjs/biz-components/Marquee/type.js.map +1 -1
- package/dist/esm/biz-components/Marquee/Marquee.js +1 -1
- package/dist/esm/biz-components/Marquee/Marquee.js.map +2 -2
- package/dist/esm/biz-components/Marquee/type.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var E=Object.create;var v=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var D=(e,t)=>{for(var
|
|
1
|
+
"use strict";"use client";var E=Object.create;var v=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var D=(e,t)=>{for(var r in t)v(e,r,{get:t[r],enumerable:!0})},q=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of H(t))!A.call(e,l)&&l!==r&&v(e,l,{get:()=>t[l],enumerable:!(o=L(t,l))||o.enumerable});return e};var W=(e,t,r)=>(r=e!=null?E(j(e)):{},q(t||!e||!e.__esModule?v(r,"default",{value:e,enumerable:!0}):r,e)),$=e=>q(v({},"__esModule",{value:!0}),e);var B={};D(B,{MarqueeIconAndTextContent:()=>N,MarqueeImageContent:()=>C,MarqueeItem:()=>d,MarqueePictureContent:()=>h,MarqueeTextContent:()=>M,default:()=>_});module.exports=$(B);var s=require("react/jsx-runtime"),a=W(require("react")),m=require("../../components/index.js"),i=require("../../helpers/utils.js"),k=require("../../shared/Styles.js"),G=require("swiper/css"),P=require("../../hooks/useExposure.js");const O="image",S="marquee",g=a.default.forwardRef(({data:{items:e=[],speed:t=3e3,reverseDirection:r=!1,key:o}={},className:l},T)=>{const c=(0,a.useRef)(null),y=(0,a.useRef)(null);(0,a.useImperativeHandle)(T,()=>c.current),(0,P.useExposure)(c,{componentType:O,componentName:S});const w=`${t*5}ms`,x="clamp(24px, 4vw, 64px)",[I,R]=(0,a.useState)(2);return(0,a.useLayoutEffect)(()=>{const n=y.current;if(!n)return;const p=()=>{const f=n.offsetWidth;if(f===0)return;const b=window.innerWidth,z=Math.ceil(b/f);R(Math.max(2,z))};p(),c.current?.style.setProperty("--track-width",`${n.offsetWidth}px`);const u=new ResizeObserver(()=>{p(),c.current?.style.setProperty("--track-width",`${n.offsetWidth}px`)});return u.observe(n),()=>u.disconnect()},[e]),(0,s.jsx)("div",{ref:c,id:o?`Marquee-${o}`:void 0,className:(0,i.cn)("text-info-primary w-full",l),children:(0,s.jsxs)("div",{className:(0,i.cn)("flex h-full w-max items-center",r?"animate-marquee-reverse":"animate-marquee"),style:{"--marquee-duration":w},children:[(0,s.jsx)("div",{ref:y,className:"flex h-full shrink-0 items-center",style:{gap:x,paddingRight:x},children:e.map((n,p)=>(0,s.jsx)("div",{className:"shrink-0",children:(0,s.jsx)(d,{data:n})},(n?.id??"")+"-orig-"+p))}),Array.from({length:I}).map((n,p)=>(0,s.jsx)("div",{className:"flex h-full shrink-0 items-center",style:{gap:x,paddingRight:x},"aria-hidden":"true",children:e.map((u,f)=>(0,s.jsx)("div",{className:"shrink-0",children:(0,s.jsx)(d,{data:u})},(u?.id??"")+"-copy-"+p+"-"+f))},`copy-group-${p}`))]})})});g.displayName="Marquee";const d=({data:e,configuration:t})=>(0,s.jsxs)(s.Fragment,{children:[e.type==="image"&&(0,s.jsx)(C,{image:e?.image,imageClassName:t?.imageClassName}),e.type==="text"&&(0,s.jsx)(M,{text:e?.text??e?.textContent,textClassName:t?.textClassName}),e.type==="iconAndText"&&(0,s.jsx)(N,{icon:e?.iconImage,text:e?.iconText,iconClassName:t?.iconClassName,textClassName:t?.textClassName}),e.type==="picture"&&(0,s.jsx)(h,{pictureImage:e?.pictureImage,pictureClassName:t?.pictureClassName})]});d.displayName="MarqueeItem";const C=({image:e,imageClassName:t})=>(0,s.jsx)("div",{className:"laptop:w-[120px] h-full w-[72px] shrink-0",children:(0,s.jsx)(m.Picture,{source:e?.url,alt:e?.alt||"",imgClassName:(0,i.cn)("object-cover",t)})});C.displayName="MarqueeImageContent";const M=a.default.forwardRef(({text:e,textClassName:t},r)=>(0,s.jsx)(m.Text,{as:"div",ref:r,html:e,className:(0,i.cn)("text-lines-2 flex size-full items-center justify-center font-bold leading-[1.2]",t)}));M.displayName="MarqueeTextContent";const N=({icon:e,text:t,iconClassName:r,textClassName:o})=>(0,s.jsxs)("div",{className:"laptop:h-[72px] laptop:gap-2 flex h-[48px] items-center gap-1",children:[e&&(0,s.jsx)("img",{src:e?.url,alt:e?.alt||"",className:(0,i.cn)("desktop:size-6 size-5 shrink-0 object-contain",r)}),t&&(0,s.jsx)(m.Text,{as:"div",html:t,className:(0,i.cn)("laptop:text-[16px] lg-desktop::text-[18px] flex h-full items-center text-[14px] ",o)})]});N.displayName="MarqueeIconAndTextContent";const h=({pictureImage:e,pictureClassName:t})=>(0,s.jsx)("div",{className:"lg-desktop:size-[128px] desktop:size-[112px] laptop:size-[96px] tablet:size-[72px] size-[72px] shrink-0",children:(0,s.jsx)(m.Picture,{source:e?.url,alt:e?.alt||"",className:"w-full",imgClassName:(0,i.cn)("object-contain",t)})});h.displayName="MarqueePictureContent";var _=(0,k.withLayout)(g);
|
|
2
2
|
//# sourceMappingURL=Marquee.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Marquee/Marquee.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle, useLayoutEffect, useState, type RefObject } from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type {\n MarqueeProps,\n MarqueeItemProps,\n MarqueeImageContentProps,\n MarqueeTextContentProps,\n MarqueeIconAndTextContentProps,\n MarqueePictureContentProps,\n} from './type.js'\n\nimport 'swiper/css'\n\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'marquee'\n\nconst Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(\n ({ data: { items = [], speed = 3000, reverseDirection = false, key: dataKey } = {}, className }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n componentType,\n componentName,\n })\n\n const duration = `${speed * 5}ms`\n const gap = 'clamp(24px, 4vw, 64px)'\n\n const [copies, setCopies] = useState(2)\n\n useLayoutEffect(() => {\n const track = trackRef.current\n if (!track) return\n\n const calcCopies = () => {\n const trackWidth = track.offsetWidth\n if (trackWidth === 0) return\n const viewportWidth = window.innerWidth\n const minCopies = Math.ceil(viewportWidth / trackWidth)\n setCopies(Math.max(2, minCopies))\n }\n\n calcCopies()\n innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n\n const ro = new ResizeObserver(() => {\n calcCopies()\n innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n })\n ro.observe(track)\n return () => ro.disconnect()\n }, [items])\n\n return (\n <div\n ref={innerRef}\n id={dataKey ? `Marquee-${dataKey}` : undefined}\n className={cn('text-info-primary w-full', className)}\n >\n <div\n className={cn(\n 'flex h-full w-max items-center',\n reverseDirection ? 'animate-marquee-reverse' : 'animate-marquee'\n )}\n style={{ '--marquee-duration': duration } as React.CSSProperties}\n >\n {/* \u539F\u59CB\u8F68\u9053\uFF1A\u7528 ref \u6D4B\u91CF\u771F\u5B9E\u5BBD\u5EA6 */}\n <div ref={trackRef} className=\"flex h-full shrink-0 items-center\" style={{ gap, paddingRight: gap }}>\n {items.map((item, index) => (\n <div key={(item?.id ?? '') + '-orig-' + index} className=\"shrink-0\">\n <MarqueeItem data={item} />\n </div>\n ))}\n </div>\n\n {Array.from({ length: copies }).map((_, copyIndex) => (\n <div\n key={`copy-group-${copyIndex}`}\n className=\"flex h-full shrink-0 items-center\"\n style={{ gap, paddingRight: gap }}\n aria-hidden=\"true\"\n >\n {items.map((item, index) => (\n <div key={(item?.id ?? '') + '-copy-' + copyIndex + '-' + index} className=\"shrink-0\">\n <MarqueeItem data={item} />\n </div>\n ))}\n </div>\n ))}\n </div>\n </div>\n )\n }\n)\n\nMarquee.displayName = 'Marquee'\n\n// \u2500\u2500\u2500 Sub-components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n return (\n <>\n {data.type === 'image' && (\n <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n )}\n {data.type === 'text' && <MarqueeTextContent text={data?.text} textClassName={configuration?.textClassName}
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,+BAAAE,EAAA,wBAAAC,EAAA,gBAAAC,EAAA,0BAAAC,EAAA,uBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAR,GAmEQ,IAAAS,EAAA,6BAlERC,EAA8F,oBAC9FC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAU3BC,EAAO,sBAEPC,EAA4B,sCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAEhBC,EAAU,EAAAC,QAAM,WACpB,CAAC,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,IAAM,iBAAAC,EAAmB,GAAO,IAAKC,CAAQ,EAAI,CAAC,EAAG,UAAAC,CAAU,EAAGC,IAAQ,CACvG,MAAMC,KAAW,UAAuB,IAAI,EACtCC,KAAW,UAAuB,IAAI,KAE5C,uBAAoBF,EAAK,IAAMC,EAAS,OAAyB,KAEjE,eAAYA,EAAkD,CAC5D,cAAAV,EACA,cAAAC,CACF,CAAC,EAED,MAAMW,EAAW,GAAGP,EAAQ,CAAC,KACvBQ,EAAM,yBAEN,CAACC,EAAQC,CAAS,KAAI,YAAS,CAAC,EAEtC,4BAAgB,IAAM,CACpB,MAAMC,EAAQL,EAAS,QACvB,GAAI,CAACK,EAAO,OAEZ,MAAMC,EAAa,IAAM,CACvB,MAAMC,EAAaF,EAAM,YACzB,GAAIE,IAAe,EAAG,OACtB,MAAMC,EAAgB,OAAO,WACvBC,EAAY,KAAK,KAAKD,EAAgBD,CAAU,EACtDH,EAAU,KAAK,IAAI,EAAGK,CAAS,CAAC,CAClC,EAEAH,EAAW,EACXP,EAAS,SAAS,MAAM,YAAY,gBAAiB,GAAGM,EAAM,WAAW,IAAI,EAE7E,MAAMK,EAAK,IAAI,eAAe,IAAM,CAClCJ,EAAW,EACXP,EAAS,SAAS,MAAM,YAAY,gBAAiB,GAAGM,EAAM,WAAW,IAAI,CAC/E,CAAC,EACD,OAAAK,EAAG,QAAQL,CAAK,EACT,IAAMK,EAAG,WAAW,CAC7B,EAAG,CAACjB,CAAK,CAAC,KAGR,OAAC,OACC,IAAKM,EACL,GAAIH,EAAU,WAAWA,CAAO,GAAK,OACrC,aAAW,MAAG,2BAA4BC,CAAS,EAEnD,oBAAC,OACC,aAAW,MACT,iCACAF,EAAmB,0BAA4B,iBACjD,EACA,MAAO,CAAE,qBAAsBM,CAAS,EAGxC,oBAAC,OAAI,IAAKD,EAAU,UAAU,oCAAoC,MAAO,CAAE,IAAAE,EAAK,aAAcA,CAAI,EAC/F,SAAAT,EAAM,IAAI,CAACkB,EAAMC,OAChB,OAAC,OAA8C,UAAU,WACvD,mBAACnC,EAAA,CAAY,KAAMkC,EAAM,IADhBA,GAAM,IAAM,IAAM,SAAWC,CAExC,CACD,EACH,EAEC,MAAM,KAAK,CAAE,OAAQT,CAAO,CAAC,EAAE,IAAI,CAACU,EAAGC,OACtC,OAAC,OAEC,UAAU,oCACV,MAAO,CAAE,IAAAZ,EAAK,aAAcA,CAAI,EAChC,cAAY,OAEX,SAAAT,EAAM,IAAI,CAACkB,EAAMC,OAChB,OAAC,OAAgE,UAAU,WACzE,mBAACnC,EAAA,CAAY,KAAMkC,EAAM,IADhBA,GAAM,IAAM,IAAM,SAAWG,EAAY,IAAMF,CAE1D,CACD,GATI,cAAcE,CAAS,EAU9B,CACD,GACH,EACF,CAEJ,CACF,EAEAvB,EAAQ,YAAc,UAItB,MAAMd,EAAc,CAAC,CAAE,KAAAsC,EAAM,cAAAC,CAAc,OAEvC,oBACG,UAAAD,EAAK,OAAS,YACb,OAACvC,EAAA,CAAoB,MAAOuC,GAAM,MAAO,eAAgBC,GAAe,eAAgB,EAEzFD,EAAK,OAAS,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle, useLayoutEffect, useState, type RefObject } from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type {\n MarqueeProps,\n MarqueeItemProps,\n MarqueeImageContentProps,\n MarqueeTextContentProps,\n MarqueeIconAndTextContentProps,\n MarqueePictureContentProps,\n} from './type.js'\n\nimport 'swiper/css'\n\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'marquee'\n\nconst Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(\n ({ data: { items = [], speed = 3000, reverseDirection = false, key: dataKey } = {}, className }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n componentType,\n componentName,\n })\n\n const duration = `${speed * 5}ms`\n const gap = 'clamp(24px, 4vw, 64px)'\n\n const [copies, setCopies] = useState(2)\n\n useLayoutEffect(() => {\n const track = trackRef.current\n if (!track) return\n\n const calcCopies = () => {\n const trackWidth = track.offsetWidth\n if (trackWidth === 0) return\n const viewportWidth = window.innerWidth\n const minCopies = Math.ceil(viewportWidth / trackWidth)\n setCopies(Math.max(2, minCopies))\n }\n\n calcCopies()\n innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n\n const ro = new ResizeObserver(() => {\n calcCopies()\n innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n })\n ro.observe(track)\n return () => ro.disconnect()\n }, [items])\n\n return (\n <div\n ref={innerRef}\n id={dataKey ? `Marquee-${dataKey}` : undefined}\n className={cn('text-info-primary w-full', className)}\n >\n <div\n className={cn(\n 'flex h-full w-max items-center',\n reverseDirection ? 'animate-marquee-reverse' : 'animate-marquee'\n )}\n style={{ '--marquee-duration': duration } as React.CSSProperties}\n >\n {/* \u539F\u59CB\u8F68\u9053\uFF1A\u7528 ref \u6D4B\u91CF\u771F\u5B9E\u5BBD\u5EA6 */}\n <div ref={trackRef} className=\"flex h-full shrink-0 items-center\" style={{ gap, paddingRight: gap }}>\n {items.map((item, index) => (\n <div key={(item?.id ?? '') + '-orig-' + index} className=\"shrink-0\">\n <MarqueeItem data={item} />\n </div>\n ))}\n </div>\n\n {Array.from({ length: copies }).map((_, copyIndex) => (\n <div\n key={`copy-group-${copyIndex}`}\n className=\"flex h-full shrink-0 items-center\"\n style={{ gap, paddingRight: gap }}\n aria-hidden=\"true\"\n >\n {items.map((item, index) => (\n <div key={(item?.id ?? '') + '-copy-' + copyIndex + '-' + index} className=\"shrink-0\">\n <MarqueeItem data={item} />\n </div>\n ))}\n </div>\n ))}\n </div>\n </div>\n )\n }\n)\n\nMarquee.displayName = 'Marquee'\n\n// \u2500\u2500\u2500 Sub-components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n return (\n <>\n {data.type === 'image' && (\n <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n )}\n {data.type === 'text' && (\n <MarqueeTextContent text={data?.text ?? data?.textContent} textClassName={configuration?.textClassName} />\n )}\n {data.type === 'iconAndText' && (\n <MarqueeIconAndTextContent\n icon={data?.iconImage}\n text={data?.iconText}\n iconClassName={configuration?.iconClassName}\n textClassName={configuration?.textClassName}\n />\n )}\n {data.type === 'picture' && (\n <MarqueePictureContent pictureImage={data?.pictureImage} pictureClassName={configuration?.pictureClassName} />\n )}\n </>\n )\n}\n\nMarqueeItem.displayName = 'MarqueeItem'\n\nconst MarqueeImageContent = ({ image, imageClassName }: MarqueeImageContentProps) => {\n return (\n <div className=\"laptop:w-[120px] h-full w-[72px] shrink-0\">\n <Picture source={image?.url} alt={image?.alt || ''} imgClassName={cn('object-cover', imageClassName)} />\n </div>\n )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(({ text, textClassName }, ref) => {\n return (\n <Text\n as=\"div\"\n ref={ref}\n html={text}\n className={cn('text-lines-2 flex size-full items-center justify-center font-bold leading-[1.2]', textClassName)}\n />\n )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nconst MarqueeIconAndTextContent = ({ icon, text, iconClassName, textClassName }: MarqueeIconAndTextContentProps) => {\n return (\n <div className=\"laptop:h-[72px] laptop:gap-2 flex h-[48px] items-center gap-1\">\n {icon && (\n <img\n src={icon?.url}\n alt={icon?.alt || ''}\n className={cn('desktop:size-6 size-5 shrink-0 object-contain', iconClassName)}\n />\n )}\n {text && (\n <Text\n as=\"div\"\n html={text}\n className={cn(\n 'laptop:text-[16px] lg-desktop::text-[18px] flex h-full items-center text-[14px] ',\n textClassName\n )}\n />\n )}\n </div>\n )\n}\n\nMarqueeIconAndTextContent.displayName = 'MarqueeIconAndTextContent'\n\nconst MarqueePictureContent = ({ pictureImage, pictureClassName }: MarqueePictureContentProps) => {\n return (\n <div className=\"lg-desktop:size-[128px] desktop:size-[112px] laptop:size-[96px] tablet:size-[72px] size-[72px] shrink-0\">\n <Picture\n source={pictureImage?.url}\n alt={pictureImage?.alt || ''}\n className=\"w-full\"\n imgClassName={cn('object-contain', pictureClassName)}\n />\n </div>\n )\n}\n\nMarqueePictureContent.displayName = 'MarqueePictureContent'\n\nexport default withLayout(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent, MarqueeIconAndTextContent, MarqueePictureContent }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Marquee_exports", "__export", "MarqueeIconAndTextContent", "MarqueeImageContent", "MarqueeItem", "MarqueePictureContent", "MarqueeTextContent", "Marquee_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_css", "import_useExposure", "componentType", "componentName", "Marquee", "React", "items", "speed", "reverseDirection", "dataKey", "className", "ref", "innerRef", "trackRef", "duration", "gap", "copies", "setCopies", "track", "calcCopies", "trackWidth", "viewportWidth", "minCopies", "ro", "item", "index", "_", "copyIndex", "data", "configuration", "image", "imageClassName", "text", "textClassName", "icon", "iconClassName", "pictureImage", "pictureClassName"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var a=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var m=(t,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of o(e))!g.call(t,r)&&r!==s&&a(t,r,{get:()=>e[r],enumerable:!(n=i(e,r))||n.enumerable});return t};var p=t=>m(a({},"__esModule",{value:!0}),t);var c={};module.exports=p(c);
|
|
2
2
|
//# sourceMappingURL=type.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Marquee/type.ts"],
|
|
4
|
-
"sourcesContent": ["import type { Img } from '../../types/props.js'\n\ninterface MarqueeProps {\n data: {\n key?: string\n /** \u662F\u5426\u53CD\u5411\u6EDA\u52A8 */\n reverseDirection?: boolean\n /**\n * \u4E00\u8F6E\u52A8\u753B\u65F6\u957F\uFF08ms\uFF09\u3002\u6570\u503C\u8D8A\u5C0F\u6EDA\u52A8\u8D8A\u5FEB\uFF0C\u9ED8\u8BA4 8000\uFF08\u5373 8s \u5B8C\u6210\u4E00\u8F6E\uFF09\n */\n speed?: number\n /** \u8DD1\u9A6C\u706F\u5185\u5BB9 */\n items: any[]\n }\n className?: string\n}\n\ninterface MarqueeItemProps {\n data: {\n id?: string\n type: 'image' | 'text' | 'iconAndText' | 'picture'\n image?: Img\n text?: string\n iconImage?: Img\n iconText?: string\n pictureImage?: Img\n }\n configuration?: {\n imageClassName?: string\n textClassName?: string\n iconClassName?: string\n pictureClassName?: string\n }\n}\n\ninterface MarqueeImageContentProps {\n image?: Img\n imageClassName?: string\n}\n\ninterface MarqueeTextContentProps {\n text?: string\n textClassName?: string\n}\n\ninterface MarqueeIconAndTextContentProps {\n icon?: Img\n text?: string\n iconClassName?: string\n textClassName?: string\n}\n\ninterface MarqueePictureContentProps {\n pictureImage?: Img\n pictureClassName?: string\n}\n\nexport type {\n MarqueeProps,\n MarqueeItemProps,\n MarqueeImageContentProps,\n MarqueeTextContentProps,\n MarqueeIconAndTextContentProps,\n MarqueePictureContentProps,\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { Img } from '../../types/props.js'\n\ninterface MarqueeProps {\n data: {\n key?: string\n /** \u662F\u5426\u53CD\u5411\u6EDA\u52A8 */\n reverseDirection?: boolean\n /**\n * \u4E00\u8F6E\u52A8\u753B\u65F6\u957F\uFF08ms\uFF09\u3002\u6570\u503C\u8D8A\u5C0F\u6EDA\u52A8\u8D8A\u5FEB\uFF0C\u9ED8\u8BA4 8000\uFF08\u5373 8s \u5B8C\u6210\u4E00\u8F6E\uFF09\n */\n speed?: number\n /** \u8DD1\u9A6C\u706F\u5185\u5BB9 */\n items: any[]\n }\n className?: string\n}\n\ninterface MarqueeItemProps {\n data: {\n id?: string\n type: 'image' | 'text' | 'iconAndText' | 'picture'\n image?: Img\n text?: string\n textContent?: string\n iconImage?: Img\n iconText?: string\n pictureImage?: Img\n }\n configuration?: {\n imageClassName?: string\n textClassName?: string\n iconClassName?: string\n pictureClassName?: string\n }\n}\n\ninterface MarqueeImageContentProps {\n image?: Img\n imageClassName?: string\n}\n\ninterface MarqueeTextContentProps {\n text?: string\n textClassName?: string\n}\n\ninterface MarqueeIconAndTextContentProps {\n icon?: Img\n text?: string\n iconClassName?: string\n textClassName?: string\n}\n\ninterface MarqueePictureContentProps {\n pictureImage?: Img\n pictureClassName?: string\n}\n\nexport type {\n MarqueeProps,\n MarqueeItemProps,\n MarqueeImageContentProps,\n MarqueeTextContentProps,\n MarqueeIconAndTextContentProps,\n MarqueePictureContentProps,\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["type_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as W,jsx as t,jsxs as
|
|
1
|
+
"use client";import{Fragment as W,jsx as t,jsxs as C}from"react/jsx-runtime";import N,{useRef as h,useImperativeHandle as z,useLayoutEffect as E,useState as L}from"react";import{Picture as y,Text as q}from"../../components/index.js";import{cn as n}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import"swiper/css";import{useExposure as j}from"../../hooks/useExposure.js";const A="image",D="marquee",g=N.forwardRef(({data:{items:e=[],speed:s=3e3,reverseDirection:i=!1,key:p}={},className:k},P)=>{const o=h(null),M=h(null);z(P,()=>o.current),j(o,{componentType:A,componentName:D});const T=`${s*5}ms`,m="clamp(24px, 4vw, 64px)",[w,I]=L(2);return E(()=>{const r=M.current;if(!r)return;const a=()=>{const c=r.offsetWidth;if(c===0)return;const R=window.innerWidth,b=Math.ceil(R/c);I(Math.max(2,b))};a(),o.current?.style.setProperty("--track-width",`${r.offsetWidth}px`);const l=new ResizeObserver(()=>{a(),o.current?.style.setProperty("--track-width",`${r.offsetWidth}px`)});return l.observe(r),()=>l.disconnect()},[e]),t("div",{ref:o,id:p?`Marquee-${p}`:void 0,className:n("text-info-primary w-full",k),children:C("div",{className:n("flex h-full w-max items-center",i?"animate-marquee-reverse":"animate-marquee"),style:{"--marquee-duration":T},children:[t("div",{ref:M,className:"flex h-full shrink-0 items-center",style:{gap:m,paddingRight:m},children:e.map((r,a)=>t("div",{className:"shrink-0",children:t(u,{data:r})},(r?.id??"")+"-orig-"+a))}),Array.from({length:w}).map((r,a)=>t("div",{className:"flex h-full shrink-0 items-center",style:{gap:m,paddingRight:m},"aria-hidden":"true",children:e.map((l,c)=>t("div",{className:"shrink-0",children:t(u,{data:l})},(l?.id??"")+"-copy-"+a+"-"+c))},`copy-group-${a}`))]})})});g.displayName="Marquee";const u=({data:e,configuration:s})=>C(W,{children:[e.type==="image"&&t(d,{image:e?.image,imageClassName:s?.imageClassName}),e.type==="text"&&t(x,{text:e?.text??e?.textContent,textClassName:s?.textClassName}),e.type==="iconAndText"&&t(f,{icon:e?.iconImage,text:e?.iconText,iconClassName:s?.iconClassName,textClassName:s?.textClassName}),e.type==="picture"&&t(v,{pictureImage:e?.pictureImage,pictureClassName:s?.pictureClassName})]});u.displayName="MarqueeItem";const d=({image:e,imageClassName:s})=>t("div",{className:"laptop:w-[120px] h-full w-[72px] shrink-0",children:t(y,{source:e?.url,alt:e?.alt||"",imgClassName:n("object-cover",s)})});d.displayName="MarqueeImageContent";const x=N.forwardRef(({text:e,textClassName:s},i)=>t(q,{as:"div",ref:i,html:e,className:n("text-lines-2 flex size-full items-center justify-center font-bold leading-[1.2]",s)}));x.displayName="MarqueeTextContent";const f=({icon:e,text:s,iconClassName:i,textClassName:p})=>C("div",{className:"laptop:h-[72px] laptop:gap-2 flex h-[48px] items-center gap-1",children:[e&&t("img",{src:e?.url,alt:e?.alt||"",className:n("desktop:size-6 size-5 shrink-0 object-contain",i)}),s&&t(q,{as:"div",html:s,className:n("laptop:text-[16px] lg-desktop::text-[18px] flex h-full items-center text-[14px] ",p)})]});f.displayName="MarqueeIconAndTextContent";const v=({pictureImage:e,pictureClassName:s})=>t("div",{className:"lg-desktop:size-[128px] desktop:size-[112px] laptop:size-[96px] tablet:size-[72px] size-[72px] shrink-0",children:t(y,{source:e?.url,alt:e?.alt||"",className:"w-full",imgClassName:n("object-contain",s)})});v.displayName="MarqueePictureContent";var G=H(g);export{f as MarqueeIconAndTextContent,d as MarqueeImageContent,u as MarqueeItem,v as MarqueePictureContent,x as MarqueeTextContent,G as default};
|
|
2
2
|
//# sourceMappingURL=Marquee.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Marquee/Marquee.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle, useLayoutEffect, useState, type RefObject } from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type {\n MarqueeProps,\n MarqueeItemProps,\n MarqueeImageContentProps,\n MarqueeTextContentProps,\n MarqueeIconAndTextContentProps,\n MarqueePictureContentProps,\n} from './type.js'\n\nimport 'swiper/css'\n\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'marquee'\n\nconst Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(\n ({ data: { items = [], speed = 3000, reverseDirection = false, key: dataKey } = {}, className }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n componentType,\n componentName,\n })\n\n const duration = `${speed * 5}ms`\n const gap = 'clamp(24px, 4vw, 64px)'\n\n const [copies, setCopies] = useState(2)\n\n useLayoutEffect(() => {\n const track = trackRef.current\n if (!track) return\n\n const calcCopies = () => {\n const trackWidth = track.offsetWidth\n if (trackWidth === 0) return\n const viewportWidth = window.innerWidth\n const minCopies = Math.ceil(viewportWidth / trackWidth)\n setCopies(Math.max(2, minCopies))\n }\n\n calcCopies()\n innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n\n const ro = new ResizeObserver(() => {\n calcCopies()\n innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n })\n ro.observe(track)\n return () => ro.disconnect()\n }, [items])\n\n return (\n <div\n ref={innerRef}\n id={dataKey ? `Marquee-${dataKey}` : undefined}\n className={cn('text-info-primary w-full', className)}\n >\n <div\n className={cn(\n 'flex h-full w-max items-center',\n reverseDirection ? 'animate-marquee-reverse' : 'animate-marquee'\n )}\n style={{ '--marquee-duration': duration } as React.CSSProperties}\n >\n {/* \u539F\u59CB\u8F68\u9053\uFF1A\u7528 ref \u6D4B\u91CF\u771F\u5B9E\u5BBD\u5EA6 */}\n <div ref={trackRef} className=\"flex h-full shrink-0 items-center\" style={{ gap, paddingRight: gap }}>\n {items.map((item, index) => (\n <div key={(item?.id ?? '') + '-orig-' + index} className=\"shrink-0\">\n <MarqueeItem data={item} />\n </div>\n ))}\n </div>\n\n {Array.from({ length: copies }).map((_, copyIndex) => (\n <div\n key={`copy-group-${copyIndex}`}\n className=\"flex h-full shrink-0 items-center\"\n style={{ gap, paddingRight: gap }}\n aria-hidden=\"true\"\n >\n {items.map((item, index) => (\n <div key={(item?.id ?? '') + '-copy-' + copyIndex + '-' + index} className=\"shrink-0\">\n <MarqueeItem data={item} />\n </div>\n ))}\n </div>\n ))}\n </div>\n </div>\n )\n }\n)\n\nMarquee.displayName = 'Marquee'\n\n// \u2500\u2500\u2500 Sub-components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n return (\n <>\n {data.type === 'image' && (\n <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n )}\n {data.type === 'text' && <MarqueeTextContent text={data?.text} textClassName={configuration?.textClassName}
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle, useLayoutEffect, useState, type RefObject } from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type {\n MarqueeProps,\n MarqueeItemProps,\n MarqueeImageContentProps,\n MarqueeTextContentProps,\n MarqueeIconAndTextContentProps,\n MarqueePictureContentProps,\n} from './type.js'\n\nimport 'swiper/css'\n\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'marquee'\n\nconst Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(\n ({ data: { items = [], speed = 3000, reverseDirection = false, key: dataKey } = {}, className }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n componentType,\n componentName,\n })\n\n const duration = `${speed * 5}ms`\n const gap = 'clamp(24px, 4vw, 64px)'\n\n const [copies, setCopies] = useState(2)\n\n useLayoutEffect(() => {\n const track = trackRef.current\n if (!track) return\n\n const calcCopies = () => {\n const trackWidth = track.offsetWidth\n if (trackWidth === 0) return\n const viewportWidth = window.innerWidth\n const minCopies = Math.ceil(viewportWidth / trackWidth)\n setCopies(Math.max(2, minCopies))\n }\n\n calcCopies()\n innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n\n const ro = new ResizeObserver(() => {\n calcCopies()\n innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n })\n ro.observe(track)\n return () => ro.disconnect()\n }, [items])\n\n return (\n <div\n ref={innerRef}\n id={dataKey ? `Marquee-${dataKey}` : undefined}\n className={cn('text-info-primary w-full', className)}\n >\n <div\n className={cn(\n 'flex h-full w-max items-center',\n reverseDirection ? 'animate-marquee-reverse' : 'animate-marquee'\n )}\n style={{ '--marquee-duration': duration } as React.CSSProperties}\n >\n {/* \u539F\u59CB\u8F68\u9053\uFF1A\u7528 ref \u6D4B\u91CF\u771F\u5B9E\u5BBD\u5EA6 */}\n <div ref={trackRef} className=\"flex h-full shrink-0 items-center\" style={{ gap, paddingRight: gap }}>\n {items.map((item, index) => (\n <div key={(item?.id ?? '') + '-orig-' + index} className=\"shrink-0\">\n <MarqueeItem data={item} />\n </div>\n ))}\n </div>\n\n {Array.from({ length: copies }).map((_, copyIndex) => (\n <div\n key={`copy-group-${copyIndex}`}\n className=\"flex h-full shrink-0 items-center\"\n style={{ gap, paddingRight: gap }}\n aria-hidden=\"true\"\n >\n {items.map((item, index) => (\n <div key={(item?.id ?? '') + '-copy-' + copyIndex + '-' + index} className=\"shrink-0\">\n <MarqueeItem data={item} />\n </div>\n ))}\n </div>\n ))}\n </div>\n </div>\n )\n }\n)\n\nMarquee.displayName = 'Marquee'\n\n// \u2500\u2500\u2500 Sub-components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n return (\n <>\n {data.type === 'image' && (\n <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n )}\n {data.type === 'text' && (\n <MarqueeTextContent text={data?.text ?? data?.textContent} textClassName={configuration?.textClassName} />\n )}\n {data.type === 'iconAndText' && (\n <MarqueeIconAndTextContent\n icon={data?.iconImage}\n text={data?.iconText}\n iconClassName={configuration?.iconClassName}\n textClassName={configuration?.textClassName}\n />\n )}\n {data.type === 'picture' && (\n <MarqueePictureContent pictureImage={data?.pictureImage} pictureClassName={configuration?.pictureClassName} />\n )}\n </>\n )\n}\n\nMarqueeItem.displayName = 'MarqueeItem'\n\nconst MarqueeImageContent = ({ image, imageClassName }: MarqueeImageContentProps) => {\n return (\n <div className=\"laptop:w-[120px] h-full w-[72px] shrink-0\">\n <Picture source={image?.url} alt={image?.alt || ''} imgClassName={cn('object-cover', imageClassName)} />\n </div>\n )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(({ text, textClassName }, ref) => {\n return (\n <Text\n as=\"div\"\n ref={ref}\n html={text}\n className={cn('text-lines-2 flex size-full items-center justify-center font-bold leading-[1.2]', textClassName)}\n />\n )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nconst MarqueeIconAndTextContent = ({ icon, text, iconClassName, textClassName }: MarqueeIconAndTextContentProps) => {\n return (\n <div className=\"laptop:h-[72px] laptop:gap-2 flex h-[48px] items-center gap-1\">\n {icon && (\n <img\n src={icon?.url}\n alt={icon?.alt || ''}\n className={cn('desktop:size-6 size-5 shrink-0 object-contain', iconClassName)}\n />\n )}\n {text && (\n <Text\n as=\"div\"\n html={text}\n className={cn(\n 'laptop:text-[16px] lg-desktop::text-[18px] flex h-full items-center text-[14px] ',\n textClassName\n )}\n />\n )}\n </div>\n )\n}\n\nMarqueeIconAndTextContent.displayName = 'MarqueeIconAndTextContent'\n\nconst MarqueePictureContent = ({ pictureImage, pictureClassName }: MarqueePictureContentProps) => {\n return (\n <div className=\"lg-desktop:size-[128px] desktop:size-[112px] laptop:size-[96px] tablet:size-[72px] size-[72px] shrink-0\">\n <Picture\n source={pictureImage?.url}\n alt={pictureImage?.alt || ''}\n className=\"w-full\"\n imgClassName={cn('object-contain', pictureClassName)}\n />\n </div>\n )\n}\n\nMarqueePictureContent.displayName = 'MarqueePictureContent'\n\nexport default withLayout(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent, MarqueeIconAndTextContent, MarqueePictureContent }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useImperativeHandle", "useLayoutEffect", "useState", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "Marquee", "items", "speed", "reverseDirection", "dataKey", "className", "ref", "innerRef", "trackRef", "duration", "gap", "copies", "setCopies", "track", "calcCopies", "trackWidth", "viewportWidth", "minCopies", "ro", "item", "index", "MarqueeItem", "_", "copyIndex", "data", "configuration", "MarqueeImageContent", "MarqueeTextContent", "MarqueeIconAndTextContent", "MarqueePictureContent", "image", "imageClassName", "text", "textClassName", "icon", "iconClassName", "pictureImage", "pictureClassName", "Marquee_default"]
|
|
7
7
|
}
|