@anker-in/headless-ui 1.0.21 → 1.0.22
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/components/picture.d.ts +1 -0
- package/dist/cjs/components/picture.js +1 -1
- package/dist/cjs/components/picture.js.map +3 -3
- package/dist/cjs/stories/picture.stories.d.ts +4 -0
- package/dist/cjs/stories/picture.stories.js +8 -3
- package/dist/cjs/stories/picture.stories.js.map +3 -3
- package/dist/esm/components/picture.d.ts +1 -0
- package/dist/esm/components/picture.js +1 -1
- package/dist/esm/components/picture.js.map +3 -3
- package/dist/esm/stories/picture.stories.d.ts +4 -0
- package/dist/esm/stories/picture.stories.js +8 -3
- package/dist/esm/stories/picture.stories.js.map +3 -3
- package/package.json +1 -1
|
@@ -8,6 +8,7 @@ export interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement>
|
|
|
8
8
|
quality?: number;
|
|
9
9
|
/** 响应式图片，对应picture 下source 的max-width */
|
|
10
10
|
deviceSizes?: number[];
|
|
11
|
+
alt?: string;
|
|
11
12
|
}
|
|
12
13
|
declare const Picture: React.ForwardRefExoticComponent<PictureProps & React.RefAttributes<HTMLPictureElement>>;
|
|
13
14
|
export default Picture;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var L=Object.create;var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var R=(t,e)=>{for(var r in e)d(t,r,{get:e[r],enumerable:!0})},y=(t,e,r,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of F(e))!j.call(t,a)&&a!==r&&d(t,a,{get:()=>e[a],enumerable:!(m=x(e,a))||m.enumerable});return t};var k=(t,e,r)=>(r=t!=null?L(U(t)):{},y(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t)),N=t=>y(d({},"__esModule",{value:!0}),t);var C={};R(C,{default:()=>B});module.exports=N(C);var u=require("react/jsx-runtime"),p=k(require("react"));const $=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],Z=3960,W=3980,v={domains:["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],deviceSizes:[375,768,1024,1280,1440,1540,1920]},z=t=>$.some(e=>t==e),D=(t="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(t),H=t=>{try{return new URL(t).searchParams.get("alt")||""}catch{return""}},T=t=>{try{const e=new URL(t);return e.searchParams.delete("alt"),e.toString()}catch{return t}},X=p.default.forwardRef(({imgClassName:t="",source:e="",quality:r=2,deviceSizes:m=[375,767,1023,1024,1279,1440,1439,1539,1919,1920],className:a,loading:A="lazy",alt:h="",...w},I)=>{const M=s=>(v?.domains||[]).some(i=>s.includes(i)),g=(0,p.useCallback)(({src:s,width:o})=>{const i=o,c=T(s);try{const n=new URL(c);if(!z(n.hostname))return c;const l=n.pathname.split("/").pop()||"";if(D(l))return c?.split("/")?.map(f=>{if(M(c)&&/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\?.*)?/.test(f)&&/_[0-9]{2,4}x/.test(c)===!1){const P=f.split(".");return P.map((b,E)=>E===P.length-2?`${b}_${i<3960?i:3980}x`:b).join(".")}return f}).join("/")}catch{return c}},[]),S=(0,p.useCallback)(({srcArr:s,width:o})=>{const i=o*r,c=g({src:s[0][0],width:i}),n=s.filter(([,l])=>l&&parseInt(l,10)>=o).map(([l])=>g({src:l,width:i})).pop();return(0,u.jsx)("source",{srcSet:n||c,media:`(max-width: ${o}px)`},o)},[g,r]),_=(0,p.useMemo)(()=>{if(typeof e!="string"||!e)return[];const s=e.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(n=>n.split(" ").filter(Boolean)),o=h||s.map(n=>n[0]).filter(Boolean).map(H).find(Boolean)||"",i=m.map(n=>S({srcArr:s,width:n})),c=g({src:s[0][0],width:1920*r});return[...i,(0,u.jsx)("img",{src:c,className:`w-full ${t}`,loading:A,alt:o,...w},"default")]},[m,t,g,r,e,S,h]);return(0,u.jsxs)("picture",{ref:I,className:`block overflow-hidden ${a}`,children:[_,w.children]})});var B=X;
|
|
2
2
|
//# sourceMappingURL=picture.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/picture.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n imgClassName?: string\n /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n source?: string\n /** \u56FE\u7247\u8D28\u91CF */\n quality?: number\n /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n deviceSizes?: number[]\n}\nconst images = {\n domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n deviceSizes: [375, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n imgClassName = '',\n source = '',\n quality = 2,\n deviceSizes = [375, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n className,\n loading = 'lazy',\n alt = '',\n ...rest\n }: PictureProps,\n ref\n ) => {\n const isShopifycdn = (src: string | string[]) => {\n const domains = images?.domains || []\n return domains.some(domain => src.includes(domain))\n }\n\n const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n const size = width\n try {\n const parsedUrl = new URL(
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["picture_exports", "__export", "picture_default", "__toCommonJS", "import_jsx_runtime", "import_react", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "images", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "React", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "alt", "rest", "ref", "isShopifycdn", "src", "imgSrcSetsize", "width", "size", "parsedUrl", "item", "name", "v", "i", "sourceSrcSet", "srcArr", "computedWidth", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n imgClassName?: string\n /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n source?: string\n /** \u56FE\u7247\u8D28\u91CF */\n quality?: number\n /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n deviceSizes?: number[]\n alt?: string\n}\nconst images = {\n domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n deviceSizes: [375, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\n/**\n * \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u89E3\u6790\u51FA\u7684 alt \u503C\uFF0C\u5982\u679C\u6CA1\u6709\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\n */\nconst parseAltFromUrl = (url: string): string => {\n try {\n return new URL(url).searchParams.get('alt') || ''\n } catch {\n return ''\n }\n}\n\n/**\n * \u79FB\u9664 URL \u4E2D\u7684 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u79FB\u9664 alt \u53C2\u6570\u540E\u7684 URL\n */\nconst removeAltFromUrl = (url: string): string => {\n try {\n const urlObj = new URL(url)\n urlObj.searchParams.delete('alt')\n return urlObj.toString()\n } catch {\n return url\n }\n}\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n imgClassName = '',\n source = '',\n quality = 2,\n deviceSizes = [375, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n className,\n loading = 'lazy',\n alt = '',\n ...rest\n }: PictureProps,\n ref\n ) => {\n const isShopifycdn = (src: string | string[]) => {\n const domains = images?.domains || []\n return domains.some(domain => src.includes(domain))\n }\n\n const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n const size = width\n const cleanSrc = removeAltFromUrl(src)\n try {\n const parsedUrl = new URL(cleanSrc)\n if (!isMatchDomain(parsedUrl.hostname)) {\n return cleanSrc\n }\n const fileName = parsedUrl.pathname.split('/').pop() || ''\n if (idMatchFileExtensions(fileName)) {\n return cleanSrc\n ?.split('/')\n ?.map(item => {\n if (\n isShopifycdn(cleanSrc) &&\n /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\\?.*)?/.test(item) &&\n /_[0-9]{2,4}x/.test(cleanSrc) === false\n ) {\n const name = item.split('.')\n return name\n .map((v, i) => {\n if (i === name.length - 2) {\n return `${v}_${size < 3960 ? size : 3980}x`\n }\n return v\n })\n .join('.')\n }\n return item\n })\n .join('/')\n }\n } catch (error) {\n return cleanSrc\n }\n }, [])\n\n const sourceSrcSet = useCallback(\n ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n const computedWidth = width * quality\n const defaultSrc = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n \n const matchingSrc = srcArr\n .filter(([, breakpoint]) => breakpoint && parseInt(breakpoint, 10) >= width)\n .map(([src]) => imgSrcSetsize({ src, width: computedWidth }))\n .pop()\n \n return <source key={width} srcSet={matchingSrc || defaultSrc} media={`(max-width: ${width}px)`} />\n },\n [imgSrcSetsize, quality]\n )\n\n const sourceList = useMemo(() => {\n if (typeof source !== 'string' || !source) return []\n \n const srcArr = source\n .replace(/[\\r\\n]/g, '')\n .replace(/\\s\\s+/g, ' ')\n .split(',')\n .map(item => item.split(' ').filter(Boolean))\n\n // \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\uFF0C\u4F18\u5148\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL\n const parsedAlt = alt || srcArr\n .map(item => item[0])\n .filter(Boolean)\n .map(parseAltFromUrl)\n .find(Boolean) || ''\n\n const sources = deviceSizes.map(width => sourceSrcSet({ srcArr, width }))\n const defaultImg = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n return [\n ...sources,\n <img key=\"default\" src={defaultImg} className={`w-full ${imgClassName}`} loading={loading} alt={parsedAlt} {...rest} />\n ]\n }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet, alt])\n\n return (\n <picture ref={ref} className={`block overflow-hidden ${className}`}>\n {sourceList}\n {rest.children}\n </picture>\n )\n }\n)\nexport default Picture\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["picture_exports", "__export", "picture_default", "__toCommonJS", "import_jsx_runtime", "import_react", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "images", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "parseAltFromUrl", "url", "removeAltFromUrl", "urlObj", "Picture", "React", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "alt", "rest", "ref", "isShopifycdn", "src", "imgSrcSetsize", "width", "size", "cleanSrc", "parsedUrl", "item", "name", "v", "i", "sourceSrcSet", "srcArr", "computedWidth", "defaultSrc", "matchingSrc", "breakpoint", "sourceList", "parsedAlt", "sources", "defaultImg"]
|
|
7
7
|
}
|
|
@@ -16,3 +16,7 @@ export default meta;
|
|
|
16
16
|
type Story = StoryObj<typeof meta>;
|
|
17
17
|
export declare const Default: Story;
|
|
18
18
|
export declare const NotMatchDomain: Story;
|
|
19
|
+
export declare const WithAltFromUrl: Story;
|
|
20
|
+
export declare const WithAltFromUrlMultipleBreakpoints: Story;
|
|
21
|
+
export declare const AltPriority: Story;
|
|
22
|
+
export declare const MixedAltSources: Story;
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
"use strict";var
|
|
2
|
-
\u5F53\u56FE\u7247\u5339\u914D\u57DF\u540D\uFF08'cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'\uFF09\u7684\u65F6\u5019\uFF0C\u4F1A\u81EA\u52A8\u5728\u56FE\u7247url\u540E\u9762\u6DFB\u52A0\u56FE\u7247\u5C3A\u5BF8\u540E\u7F00
|
|
3
|
-
|
|
1
|
+
"use strict";var c=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var d=(o,t)=>{for(var r in t)c(o,r,{get:t[r],enumerable:!0})},y=(o,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of m(t))!n.call(o,e)&&e!==r&&c(o,e,{get:()=>t[e],enumerable:!(l=i(t,e))||l.enumerable});return o};var u=o=>y(c({},"__esModule",{value:!0}),o);var w={};d(w,{AltPriority:()=>S,Default:()=>h,MixedAltSources:()=>b,NotMatchDomain:()=>$,WithAltFromUrl:()=>L,WithAltFromUrlMultipleBreakpoints:()=>R,default:()=>x});module.exports=u(w);var p=require("../components/index.js");const g="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219",f="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627",s="https://http.cat/images/200.jpg",a="https://http.cat/images/102.jpg",U={title:"Components/Picture",component:p.Picture,parameters:{layout:"centerd",docs:{description:{component:`\u54CD\u5E94\u5F0F\u56FE\u7247\u7EC4\u4EF6, \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0Csource="url1 1920\uFF0C url2 1080, url3 767".
|
|
2
|
+
\u5F53\u56FE\u7247\u5339\u914D\u57DF\u540D\uFF08'cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'\uFF09\u7684\u65F6\u5019\uFF0C\u4F1A\u81EA\u52A8\u5728\u56FE\u7247url\u540E\u9762\u6DFB\u52A0\u56FE\u7247\u5C3A\u5BF8\u540E\u7F00\u3002
|
|
3
|
+
|
|
4
|
+
\u65B0\u7279\u6027\uFF1A\u652F\u6301\u4ECE URL query \u53C2\u6570\u4E2D\u81EA\u52A8\u89E3\u6790 alt \u5C5E\u6027\uFF1A
|
|
5
|
+
- \u5982\u679C\u76F4\u63A5\u4F20\u5165 alt \u5C5E\u6027\uFF0C\u4F18\u5148\u7EA7\u66F4\u9AD8
|
|
6
|
+
- \u5982\u679C\u672A\u4F20\u5165 alt \u5C5E\u6027\uFF0C\u4F1A\u4ECE source \u4E2D\u7684 URL \u89E3\u6790 alt \u53C2\u6570
|
|
7
|
+
- \u591A\u4E2A\u65AD\u70B9 URL \u65F6\uFF0C\u53EA\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL \u7684 alt \u503C
|
|
8
|
+
`}}},tags:["autodocs"]};var x=U;const h={args:{source:`${g}, ${f} 768`,imgClassName:"rounded-[24px]"}},$={args:{source:`${s}, ${a} 768`,className:"w-[300px]"},parameters:{docs:{description:{story:"\u56FE\u7247\u4E0D\u5339\u914D\u57DF\u540D"}}}},L={args:{source:`${s}?alt=\u4ECEURL\u53C2\u6570\u89E3\u6790\u7684\u56FE\u7247\u63CF\u8FF0, ${a}?alt=\u79FB\u52A8\u7AEF\u56FE\u7247\u63CF\u8FF0 768`,className:"w-[300px]"},parameters:{docs:{description:{story:"\u4ECE URL query \u53C2\u6570\u4E2D\u89E3\u6790 alt \u5C5E\u6027"}}}},R={args:{source:`${s}?alt=\u7B2C\u4E00\u4E2A\u56FE\u7247\u63CF\u8FF0, ${a}?alt=\u7B2C\u4E8C\u4E2A\u56FE\u7247\u63CF\u8FF0 768, ${s}?alt=\u7B2C\u4E09\u4E2A\u56FE\u7247\u63CF\u8FF0 1024`,className:"w-[300px]"},parameters:{docs:{description:{story:"\u591A\u4E2A\u65AD\u70B9 URL \u65F6\uFF0C\u53EA\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL \u7684 alt \u503C"}}}},S={args:{source:`${s}?alt=URL\u4E2D\u7684alt\u53C2\u6570, ${a}?alt=\u79FB\u52A8\u7AEFalt\u53C2\u6570 768`,alt:"\u76F4\u63A5\u4F20\u5165\u7684alt\u5C5E\u6027",className:"w-[300px]"},parameters:{docs:{description:{story:"\u76F4\u63A5\u4F20\u5165\u7684 alt \u5C5E\u6027\u4F18\u5148\u7EA7\u66F4\u9AD8"}}}},b={args:{source:`${s}, ${a}?alt=\u53EA\u6709\u7B2C\u4E8C\u4E2AURL\u6709alt\u53C2\u6570 768`,className:"w-[300px]"},parameters:{docs:{description:{story:"\u6DF7\u5408\u60C5\u51B5\uFF1A\u7B2C\u4E00\u4E2A URL \u6CA1\u6709 alt \u53C2\u6570\uFF0C\u7B2C\u4E8C\u4E2A\u6709"}}}};
|
|
4
9
|
//# sourceMappingURL=picture.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/picture.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { Picture } from '../components/index.js'\nconst imageUrl =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219'\n\nconst mobImageUrl =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627'\n\nconst imageUrl2 = 'https://http.cat/images/200.jpg'\nconst mobImageUrl2 = 'https://http.cat/images/102.jpg'\n\nconst meta = {\n title: 'Components/Picture',\n component: Picture,\n parameters: {\n layout: 'centerd',\n docs: {\n description: {\n component: `\u54CD\u5E94\u5F0F\u56FE\u7247\u7EC4\u4EF6, \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0Csource=\"url1 1920\uFF0C url2 1080, url3 767\". \n \u5F53\u56FE\u7247\u5339\u914D\u57DF\u540D\uFF08'cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'\uFF09\u7684\u65F6\u5019\uFF0C\u4F1A\u81EA\u52A8\u5728\u56FE\u7247url\u540E\u9762\u6DFB\u52A0\u56FE\u7247\u5C3A\u5BF8\u540E\u7F00\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Picture>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n source: `${imageUrl}, ${mobImageUrl} 768`,\n imgClassName: 'rounded-[24px]',\n },\n}\n\nexport const NotMatchDomain: Story = {\n args: {\n source: `${imageUrl2}, ${mobImageUrl2} 768`,\n className: 'w-[300px]',\n },\n parameters: {\n docs: {\n description: {\n story: '\u56FE\u7247\u4E0D\u5339\u914D\u57DF\u540D',\n },\n },\n },\n}\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,
|
|
6
|
-
"names": ["picture_stories_exports", "__export", "Default", "NotMatchDomain", "picture_stories_default", "__toCommonJS", "import_components", "imageUrl", "mobImageUrl", "imageUrl2", "mobImageUrl2", "meta"]
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { Picture } from '../components/index.js'\nconst imageUrl =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219'\n\nconst mobImageUrl =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627'\n\nconst imageUrl2 = 'https://http.cat/images/200.jpg'\nconst mobImageUrl2 = 'https://http.cat/images/102.jpg'\n\nconst meta = {\n title: 'Components/Picture',\n component: Picture,\n parameters: {\n layout: 'centerd',\n docs: {\n description: {\n component: `\u54CD\u5E94\u5F0F\u56FE\u7247\u7EC4\u4EF6, \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0Csource=\"url1 1920\uFF0C url2 1080, url3 767\". \n \u5F53\u56FE\u7247\u5339\u914D\u57DF\u540D\uFF08'cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'\uFF09\u7684\u65F6\u5019\uFF0C\u4F1A\u81EA\u52A8\u5728\u56FE\u7247url\u540E\u9762\u6DFB\u52A0\u56FE\u7247\u5C3A\u5BF8\u540E\u7F00\u3002\n\n \u65B0\u7279\u6027\uFF1A\u652F\u6301\u4ECE URL query \u53C2\u6570\u4E2D\u81EA\u52A8\u89E3\u6790 alt \u5C5E\u6027\uFF1A\n - \u5982\u679C\u76F4\u63A5\u4F20\u5165 alt \u5C5E\u6027\uFF0C\u4F18\u5148\u7EA7\u66F4\u9AD8\n - \u5982\u679C\u672A\u4F20\u5165 alt \u5C5E\u6027\uFF0C\u4F1A\u4ECE source \u4E2D\u7684 URL \u89E3\u6790 alt \u53C2\u6570\n - \u591A\u4E2A\u65AD\u70B9 URL \u65F6\uFF0C\u53EA\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL \u7684 alt \u503C\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Picture>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n source: `${imageUrl}, ${mobImageUrl} 768`,\n imgClassName: 'rounded-[24px]',\n },\n}\n\nexport const NotMatchDomain: Story = {\n args: {\n source: `${imageUrl2}, ${mobImageUrl2} 768`,\n className: 'w-[300px]',\n },\n parameters: {\n docs: {\n description: {\n story: '\u56FE\u7247\u4E0D\u5339\u914D\u57DF\u540D',\n },\n },\n },\n}\n\nexport const WithAltFromUrl: Story = {\n args: {\n source: `${imageUrl2}?alt=\u4ECEURL\u53C2\u6570\u89E3\u6790\u7684\u56FE\u7247\u63CF\u8FF0, ${mobImageUrl2}?alt=\u79FB\u52A8\u7AEF\u56FE\u7247\u63CF\u8FF0 768`,\n className: 'w-[300px]',\n },\n parameters: {\n docs: {\n description: {\n story: '\u4ECE URL query \u53C2\u6570\u4E2D\u89E3\u6790 alt \u5C5E\u6027',\n },\n },\n },\n}\n\nexport const WithAltFromUrlMultipleBreakpoints: Story = {\n args: {\n source: `${imageUrl2}?alt=\u7B2C\u4E00\u4E2A\u56FE\u7247\u63CF\u8FF0, ${mobImageUrl2}?alt=\u7B2C\u4E8C\u4E2A\u56FE\u7247\u63CF\u8FF0 768, ${imageUrl2}?alt=\u7B2C\u4E09\u4E2A\u56FE\u7247\u63CF\u8FF0 1024`,\n className: 'w-[300px]',\n },\n parameters: {\n docs: {\n description: {\n story: '\u591A\u4E2A\u65AD\u70B9 URL \u65F6\uFF0C\u53EA\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL \u7684 alt \u503C',\n },\n },\n },\n}\n\nexport const AltPriority: Story = {\n args: {\n source: `${imageUrl2}?alt=URL\u4E2D\u7684alt\u53C2\u6570, ${mobImageUrl2}?alt=\u79FB\u52A8\u7AEFalt\u53C2\u6570 768`,\n alt: '\u76F4\u63A5\u4F20\u5165\u7684alt\u5C5E\u6027',\n className: 'w-[300px]',\n },\n parameters: {\n docs: {\n description: {\n story: '\u76F4\u63A5\u4F20\u5165\u7684 alt \u5C5E\u6027\u4F18\u5148\u7EA7\u66F4\u9AD8',\n },\n },\n },\n}\n\nexport const MixedAltSources: Story = {\n args: {\n source: `${imageUrl2}, ${mobImageUrl2}?alt=\u53EA\u6709\u7B2C\u4E8C\u4E2AURL\u6709alt\u53C2\u6570 768`,\n className: 'w-[300px]',\n },\n parameters: {\n docs: {\n description: {\n story: '\u6DF7\u5408\u60C5\u51B5\uFF1A\u7B2C\u4E00\u4E2A URL \u6CA1\u6709 alt \u53C2\u6570\uFF0C\u7B2C\u4E8C\u4E2A\u6709',\n },\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,EAAA,YAAAC,EAAA,oBAAAC,EAAA,mBAAAC,EAAA,mBAAAC,EAAA,sCAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAT,GACA,IAAAU,EAAwB,kCACxB,MAAMC,EACJ,4HAEIC,EACJ,iHAEIC,EAAY,kCACZC,EAAe,kCAEfC,EAAO,CACX,MAAO,qBACP,UAAW,UACX,WAAY,CACV,OAAQ,UACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOP,EAAQO,EAIR,MAAMZ,EAAiB,CAC5B,KAAM,CACJ,OAAQ,GAAGQ,CAAQ,KAAKC,CAAW,OACnC,aAAc,gBAChB,CACF,EAEaP,EAAwB,CACnC,KAAM,CACJ,OAAQ,GAAGQ,CAAS,KAAKC,CAAY,OACrC,UAAW,WACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,4CACT,CACF,CACF,CACF,EAEaR,EAAwB,CACnC,KAAM,CACJ,OAAQ,GAAGO,CAAS,yEAAuBC,CAAY,sDACvD,UAAW,WACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,kEACT,CACF,CACF,CACF,EAEaP,EAA2C,CACtD,KAAM,CACJ,OAAQ,GAAGM,CAAS,oDAAiBC,CAAY,wDAAqBD,CAAS,uDAC/E,UAAW,WACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,kIACT,CACF,CACF,CACF,EAEaX,EAAqB,CAChC,KAAM,CACJ,OAAQ,GAAGW,CAAS,wCAAoBC,CAAY,6CACpD,IAAK,gDACL,UAAW,WACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,+EACT,CACF,CACF,CACF,EAEaV,EAAyB,CACpC,KAAM,CACJ,OAAQ,GAAGS,CAAS,KAAKC,CAAY,kEACrC,UAAW,WACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,kHACT,CACF,CACF,CACF",
|
|
6
|
+
"names": ["picture_stories_exports", "__export", "AltPriority", "Default", "MixedAltSources", "NotMatchDomain", "WithAltFromUrl", "WithAltFromUrlMultipleBreakpoints", "picture_stories_default", "__toCommonJS", "import_components", "imageUrl", "mobImageUrl", "imageUrl2", "mobImageUrl2", "meta"]
|
|
7
7
|
}
|
|
@@ -8,6 +8,7 @@ export interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement>
|
|
|
8
8
|
quality?: number;
|
|
9
9
|
/** 响应式图片，对应picture 下source 的max-width */
|
|
10
10
|
deviceSizes?: number[];
|
|
11
|
+
alt?: string;
|
|
11
12
|
}
|
|
12
13
|
declare const Picture: React.ForwardRefExoticComponent<PictureProps & React.RefAttributes<HTMLPictureElement>>;
|
|
13
14
|
export default Picture;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as S,jsxs as N}from"react/jsx-runtime";import _,{useCallback as w,useMemo as E}from"react";const L=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],v=3960,z=3980,x={domains:["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],deviceSizes:[375,768,1024,1280,1440,1540,1920]},F=t=>L.some(s=>t==s),U=(t="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(t),j=t=>{try{return new URL(t).searchParams.get("alt")||""}catch{return""}},R=t=>{try{const s=new URL(t);return s.searchParams.delete("alt"),s.toString()}catch{return t}},k=_.forwardRef(({imgClassName:t="",source:s="",quality:p=2,deviceSizes:m=[375,767,1023,1024,1279,1440,1439,1539,1919,1920],className:P,loading:b="lazy",alt:g="",...u},y)=>{const A=r=>(x?.domains||[]).some(o=>r.includes(o)),a=w(({src:r,width:c})=>{const o=c,n=R(r);try{const e=new URL(n);if(!F(e.hostname))return n;const i=e.pathname.split("/").pop()||"";if(U(i))return n?.split("/")?.map(l=>{if(A(n)&&/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\?.*)?/.test(l)&&/_[0-9]{2,4}x/.test(n)===!1){const f=l.split(".");return f.map((h,M)=>M===f.length-2?`${h}_${o<3960?o:3980}x`:h).join(".")}return l}).join("/")}catch{return n}},[]),d=w(({srcArr:r,width:c})=>{const o=c*p,n=a({src:r[0][0],width:o}),e=r.filter(([,i])=>i&&parseInt(i,10)>=c).map(([i])=>a({src:i,width:o})).pop();return S("source",{srcSet:e||n,media:`(max-width: ${c}px)`},c)},[a,p]),I=E(()=>{if(typeof s!="string"||!s)return[];const r=s.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(e=>e.split(" ").filter(Boolean)),c=g||r.map(e=>e[0]).filter(Boolean).map(j).find(Boolean)||"",o=m.map(e=>d({srcArr:r,width:e})),n=a({src:r[0][0],width:1920*p});return[...o,S("img",{src:n,className:`w-full ${t}`,loading:b,alt:c,...u},"default")]},[m,t,a,p,s,d,g]);return N("picture",{ref:y,className:`block overflow-hidden ${P}`,children:[I,u.children]})});var D=k;export{D as default};
|
|
2
2
|
//# sourceMappingURL=picture.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/picture.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n imgClassName?: string\n /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n source?: string\n /** \u56FE\u7247\u8D28\u91CF */\n quality?: number\n /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n deviceSizes?: number[]\n}\nconst images = {\n domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n deviceSizes: [375, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n imgClassName = '',\n source = '',\n quality = 2,\n deviceSizes = [375, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n className,\n loading = 'lazy',\n alt = '',\n ...rest\n }: PictureProps,\n ref\n ) => {\n const isShopifycdn = (src: string | string[]) => {\n const domains = images?.domains || []\n return domains.some(domain => src.includes(domain))\n }\n\n const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n const size = width\n try {\n const parsedUrl = new URL(
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useCallback", "useMemo", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "images", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "alt", "rest", "ref", "isShopifycdn", "src", "imgSrcSetsize", "width", "size", "parsedUrl", "item", "name", "v", "i", "sourceSrcSet", "srcArr", "computedWidth", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n imgClassName?: string\n /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n source?: string\n /** \u56FE\u7247\u8D28\u91CF */\n quality?: number\n /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n deviceSizes?: number[]\n alt?: string\n}\nconst images = {\n domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n deviceSizes: [375, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\n/**\n * \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u89E3\u6790\u51FA\u7684 alt \u503C\uFF0C\u5982\u679C\u6CA1\u6709\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\n */\nconst parseAltFromUrl = (url: string): string => {\n try {\n return new URL(url).searchParams.get('alt') || ''\n } catch {\n return ''\n }\n}\n\n/**\n * \u79FB\u9664 URL \u4E2D\u7684 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u79FB\u9664 alt \u53C2\u6570\u540E\u7684 URL\n */\nconst removeAltFromUrl = (url: string): string => {\n try {\n const urlObj = new URL(url)\n urlObj.searchParams.delete('alt')\n return urlObj.toString()\n } catch {\n return url\n }\n}\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n imgClassName = '',\n source = '',\n quality = 2,\n deviceSizes = [375, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n className,\n loading = 'lazy',\n alt = '',\n ...rest\n }: PictureProps,\n ref\n ) => {\n const isShopifycdn = (src: string | string[]) => {\n const domains = images?.domains || []\n return domains.some(domain => src.includes(domain))\n }\n\n const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n const size = width\n const cleanSrc = removeAltFromUrl(src)\n try {\n const parsedUrl = new URL(cleanSrc)\n if (!isMatchDomain(parsedUrl.hostname)) {\n return cleanSrc\n }\n const fileName = parsedUrl.pathname.split('/').pop() || ''\n if (idMatchFileExtensions(fileName)) {\n return cleanSrc\n ?.split('/')\n ?.map(item => {\n if (\n isShopifycdn(cleanSrc) &&\n /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\\?.*)?/.test(item) &&\n /_[0-9]{2,4}x/.test(cleanSrc) === false\n ) {\n const name = item.split('.')\n return name\n .map((v, i) => {\n if (i === name.length - 2) {\n return `${v}_${size < 3960 ? size : 3980}x`\n }\n return v\n })\n .join('.')\n }\n return item\n })\n .join('/')\n }\n } catch (error) {\n return cleanSrc\n }\n }, [])\n\n const sourceSrcSet = useCallback(\n ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n const computedWidth = width * quality\n const defaultSrc = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n \n const matchingSrc = srcArr\n .filter(([, breakpoint]) => breakpoint && parseInt(breakpoint, 10) >= width)\n .map(([src]) => imgSrcSetsize({ src, width: computedWidth }))\n .pop()\n \n return <source key={width} srcSet={matchingSrc || defaultSrc} media={`(max-width: ${width}px)`} />\n },\n [imgSrcSetsize, quality]\n )\n\n const sourceList = useMemo(() => {\n if (typeof source !== 'string' || !source) return []\n \n const srcArr = source\n .replace(/[\\r\\n]/g, '')\n .replace(/\\s\\s+/g, ' ')\n .split(',')\n .map(item => item.split(' ').filter(Boolean))\n\n // \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\uFF0C\u4F18\u5148\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL\n const parsedAlt = alt || srcArr\n .map(item => item[0])\n .filter(Boolean)\n .map(parseAltFromUrl)\n .find(Boolean) || ''\n\n const sources = deviceSizes.map(width => sourceSrcSet({ srcArr, width }))\n const defaultImg = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n return [\n ...sources,\n <img key=\"default\" src={defaultImg} className={`w-full ${imgClassName}`} loading={loading} alt={parsedAlt} {...rest} />\n ]\n }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet, alt])\n\n return (\n <picture ref={ref} className={`block overflow-hidden ${className}`}>\n {sourceList}\n {rest.children}\n </picture>\n )\n }\n)\nexport default Picture\n"],
|
|
5
|
+
"mappings": "aA2He,cAAAA,EA+BT,QAAAC,MA/BS,oBA1Hf,OAAOC,GAAS,eAAAC,EAAa,WAAAC,MAAe,QAE5C,MAAMC,EAAkC,CAAC,kBAAmB,qBAAsB,kBAAkB,EAE9FC,EAAW,KACXC,EAAiB,KAajBC,EAAS,CACb,QAAS,CAAC,kBAAmB,qBAAsB,kBAAkB,EACrE,YAAa,CAAC,IAAK,IAAK,KAAM,KAAM,KAAM,KAAM,IAAI,CACtD,EAEMC,EAAiBC,GACdL,EAAgC,KAAKM,GAAUD,GAAaC,CAAM,EAErEC,EAAwB,CAACC,EAAmB,KAAO,yCAAyC,KAAKA,CAAQ,EAOzGC,EAAmBC,GAAwB,CAC/C,GAAI,CACF,OAAO,IAAI,IAAIA,CAAG,EAAE,aAAa,IAAI,KAAK,GAAK,EACjD,MAAQ,CACN,MAAO,EACT,CACF,EAOMC,EAAoBD,GAAwB,CAChD,GAAI,CACF,MAAME,EAAS,IAAI,IAAIF,CAAG,EAC1B,OAAAE,EAAO,aAAa,OAAO,KAAK,EACzBA,EAAO,SAAS,CACzB,MAAQ,CACN,OAAOF,CACT,CACF,EAEMG,EAAUhB,EAAM,WACpB,CACE,CACE,aAAAiB,EAAe,GACf,OAAAC,EAAS,GACT,QAAAC,EAAU,EACV,YAAAC,EAAc,CAAC,IAAK,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,IAAI,EACvE,UAAAC,EACA,QAAAC,EAAU,OACV,IAAAC,EAAM,GACN,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAgBC,IACJrB,GAAQ,SAAW,CAAC,GACrB,KAAKG,GAAUkB,EAAI,SAASlB,CAAM,CAAC,EAG9CmB,EAAgB3B,EAAY,CAAC,CAAE,IAAA0B,EAAK,MAAAE,CAAM,IAAsC,CACpF,MAAMC,EAAOD,EACPE,EAAWjB,EAAiBa,CAAG,EACrC,GAAI,CACF,MAAMK,EAAY,IAAI,IAAID,CAAQ,EAClC,GAAI,CAACxB,EAAcyB,EAAU,QAAQ,EACnC,OAAOD,EAET,MAAMpB,EAAWqB,EAAU,SAAS,MAAM,GAAG,EAAE,IAAI,GAAK,GACxD,GAAItB,EAAsBC,CAAQ,EAChC,OAAOoB,GACH,MAAM,GAAG,GACT,IAAIE,GAAQ,CACZ,GACEP,EAAaK,CAAQ,GACrB,gDAAgD,KAAKE,CAAI,GACzD,eAAe,KAAKF,CAAQ,IAAM,GAClC,CACA,MAAMG,EAAOD,EAAK,MAAM,GAAG,EAC3B,OAAOC,EACJ,IAAI,CAACC,EAAGC,IACHA,IAAMF,EAAK,OAAS,EACf,GAAGC,CAAC,IAAIL,EAAO,KAAOA,EAAO,IAAI,IAEnCK,CACR,EACA,KAAK,GAAG,CACb,CACA,OAAOF,CACT,CAAC,EACA,KAAK,GAAG,CAEf,MAAgB,CACd,OAAOF,CACT,CACF,EAAG,CAAC,CAAC,EAECM,EAAepC,EACnB,CAAC,CAAE,OAAAqC,EAAQ,MAAAT,CAAM,IAA6C,CAC5D,MAAMU,EAAgBV,EAAQV,EACxBqB,EAAaZ,EAAc,CAAE,IAAKU,EAAO,CAAC,EAAE,CAAC,EAAG,MAAOC,CAAc,CAAC,EAEtEE,EAAcH,EACjB,OAAO,CAAC,CAAC,CAAEI,CAAU,IAAMA,GAAc,SAASA,EAAY,EAAE,GAAKb,CAAK,EAC1E,IAAI,CAAC,CAACF,CAAG,IAAMC,EAAc,CAAE,IAAAD,EAAK,MAAOY,CAAc,CAAC,CAAC,EAC3D,IAAI,EAEP,OAAOzC,EAAC,UAAmB,OAAQ2C,GAAeD,EAAY,MAAO,eAAeX,CAAK,OAArEA,CAA4E,CAClG,EACA,CAACD,EAAeT,CAAO,CACzB,EAEMwB,EAAazC,EAAQ,IAAM,CAC/B,GAAI,OAAOgB,GAAW,UAAY,CAACA,EAAQ,MAAO,CAAC,EAEnD,MAAMoB,EAASpB,EACZ,QAAQ,UAAW,EAAE,EACrB,QAAQ,SAAU,GAAG,EACrB,MAAM,GAAG,EACT,IAAIe,GAAQA,EAAK,MAAM,GAAG,EAAE,OAAO,OAAO,CAAC,EAGxCW,EAAYrB,GAAOe,EACtB,IAAIL,GAAQA,EAAK,CAAC,CAAC,EACnB,OAAO,OAAO,EACd,IAAIrB,CAAe,EACnB,KAAK,OAAO,GAAK,GAEdiC,EAAUzB,EAAY,IAAIS,GAASQ,EAAa,CAAE,OAAAC,EAAQ,MAAAT,CAAM,CAAC,CAAC,EAClEiB,EAAalB,EAAc,CAAE,IAAKU,EAAO,CAAC,EAAE,CAAC,EAAG,MAAO,KAAOnB,CAAQ,CAAC,EAE7E,MAAO,CACL,GAAG0B,EACH/C,EAAC,OAAkB,IAAKgD,EAAY,UAAW,UAAU7B,CAAY,GAAI,QAASK,EAAS,IAAKsB,EAAY,GAAGpB,GAAtG,SAA4G,CACvH,CACF,EAAG,CAACJ,EAAaH,EAAcW,EAAeT,EAASD,EAAQmB,EAAcd,CAAG,CAAC,EAEjF,OACExB,EAAC,WAAQ,IAAK0B,EAAK,UAAW,yBAAyBJ,CAAS,GAC7D,UAAAsB,EACAnB,EAAK,UACR,CAEJ,CACF,EACA,IAAOuB,EAAQ/B",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useCallback", "useMemo", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "images", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "parseAltFromUrl", "url", "removeAltFromUrl", "urlObj", "Picture", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "alt", "rest", "ref", "isShopifycdn", "src", "imgSrcSetsize", "width", "size", "cleanSrc", "parsedUrl", "item", "name", "v", "i", "sourceSrcSet", "srcArr", "computedWidth", "defaultSrc", "matchingSrc", "breakpoint", "sourceList", "parsedAlt", "sources", "defaultImg", "picture_default"]
|
|
7
7
|
}
|
|
@@ -16,3 +16,7 @@ export default meta;
|
|
|
16
16
|
type Story = StoryObj<typeof meta>;
|
|
17
17
|
export declare const Default: Story;
|
|
18
18
|
export declare const NotMatchDomain: Story;
|
|
19
|
+
export declare const WithAltFromUrl: Story;
|
|
20
|
+
export declare const WithAltFromUrlMultipleBreakpoints: Story;
|
|
21
|
+
export declare const AltPriority: Story;
|
|
22
|
+
export declare const MixedAltSources: Story;
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import{Picture as
|
|
2
|
-
\u5F53\u56FE\u7247\u5339\u914D\u57DF\u540D\uFF08'cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'\uFF09\u7684\u65F6\u5019\uFF0C\u4F1A\u81EA\u52A8\u5728\u56FE\u7247url\u540E\u9762\u6DFB\u52A0\u56FE\u7247\u5C3A\u5BF8\u540E\u7F00
|
|
3
|
-
|
|
1
|
+
import{Picture as s}from"../components/index.js";const e="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219",a="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627",t="https://http.cat/images/200.jpg",o="https://http.cat/images/102.jpg",r={title:"Components/Picture",component:s,parameters:{layout:"centerd",docs:{description:{component:`\u54CD\u5E94\u5F0F\u56FE\u7247\u7EC4\u4EF6, \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0Csource="url1 1920\uFF0C url2 1080, url3 767".
|
|
2
|
+
\u5F53\u56FE\u7247\u5339\u914D\u57DF\u540D\uFF08'cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'\uFF09\u7684\u65F6\u5019\uFF0C\u4F1A\u81EA\u52A8\u5728\u56FE\u7247url\u540E\u9762\u6DFB\u52A0\u56FE\u7247\u5C3A\u5BF8\u540E\u7F00\u3002
|
|
3
|
+
|
|
4
|
+
\u65B0\u7279\u6027\uFF1A\u652F\u6301\u4ECE URL query \u53C2\u6570\u4E2D\u81EA\u52A8\u89E3\u6790 alt \u5C5E\u6027\uFF1A
|
|
5
|
+
- \u5982\u679C\u76F4\u63A5\u4F20\u5165 alt \u5C5E\u6027\uFF0C\u4F18\u5148\u7EA7\u66F4\u9AD8
|
|
6
|
+
- \u5982\u679C\u672A\u4F20\u5165 alt \u5C5E\u6027\uFF0C\u4F1A\u4ECE source \u4E2D\u7684 URL \u89E3\u6790 alt \u53C2\u6570
|
|
7
|
+
- \u591A\u4E2A\u65AD\u70B9 URL \u65F6\uFF0C\u53EA\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL \u7684 alt \u503C
|
|
8
|
+
`}}},tags:["autodocs"]};var l=r;const p={args:{source:`${e}, ${a} 768`,imgClassName:"rounded-[24px]"}},i={args:{source:`${t}, ${o} 768`,className:"w-[300px]"},parameters:{docs:{description:{story:"\u56FE\u7247\u4E0D\u5339\u914D\u57DF\u540D"}}}},m={args:{source:`${t}?alt=\u4ECEURL\u53C2\u6570\u89E3\u6790\u7684\u56FE\u7247\u63CF\u8FF0, ${o}?alt=\u79FB\u52A8\u7AEF\u56FE\u7247\u63CF\u8FF0 768`,className:"w-[300px]"},parameters:{docs:{description:{story:"\u4ECE URL query \u53C2\u6570\u4E2D\u89E3\u6790 alt \u5C5E\u6027"}}}},n={args:{source:`${t}?alt=\u7B2C\u4E00\u4E2A\u56FE\u7247\u63CF\u8FF0, ${o}?alt=\u7B2C\u4E8C\u4E2A\u56FE\u7247\u63CF\u8FF0 768, ${t}?alt=\u7B2C\u4E09\u4E2A\u56FE\u7247\u63CF\u8FF0 1024`,className:"w-[300px]"},parameters:{docs:{description:{story:"\u591A\u4E2A\u65AD\u70B9 URL \u65F6\uFF0C\u53EA\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL \u7684 alt \u503C"}}}},d={args:{source:`${t}?alt=URL\u4E2D\u7684alt\u53C2\u6570, ${o}?alt=\u79FB\u52A8\u7AEFalt\u53C2\u6570 768`,alt:"\u76F4\u63A5\u4F20\u5165\u7684alt\u5C5E\u6027",className:"w-[300px]"},parameters:{docs:{description:{story:"\u76F4\u63A5\u4F20\u5165\u7684 alt \u5C5E\u6027\u4F18\u5148\u7EA7\u66F4\u9AD8"}}}},y={args:{source:`${t}, ${o}?alt=\u53EA\u6709\u7B2C\u4E8C\u4E2AURL\u6709alt\u53C2\u6570 768`,className:"w-[300px]"},parameters:{docs:{description:{story:"\u6DF7\u5408\u60C5\u51B5\uFF1A\u7B2C\u4E00\u4E2A URL \u6CA1\u6709 alt \u53C2\u6570\uFF0C\u7B2C\u4E8C\u4E2A\u6709"}}}};export{d as AltPriority,p as Default,y as MixedAltSources,i as NotMatchDomain,m as WithAltFromUrl,n as WithAltFromUrlMultipleBreakpoints,l as default};
|
|
4
9
|
//# sourceMappingURL=picture.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/picture.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { Picture } from '../components/index.js'\nconst imageUrl =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219'\n\nconst mobImageUrl =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627'\n\nconst imageUrl2 = 'https://http.cat/images/200.jpg'\nconst mobImageUrl2 = 'https://http.cat/images/102.jpg'\n\nconst meta = {\n title: 'Components/Picture',\n component: Picture,\n parameters: {\n layout: 'centerd',\n docs: {\n description: {\n component: `\u54CD\u5E94\u5F0F\u56FE\u7247\u7EC4\u4EF6, \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0Csource=\"url1 1920\uFF0C url2 1080, url3 767\". \n \u5F53\u56FE\u7247\u5339\u914D\u57DF\u540D\uFF08'cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'\uFF09\u7684\u65F6\u5019\uFF0C\u4F1A\u81EA\u52A8\u5728\u56FE\u7247url\u540E\u9762\u6DFB\u52A0\u56FE\u7247\u5C3A\u5BF8\u540E\u7F00\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Picture>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n source: `${imageUrl}, ${mobImageUrl} 768`,\n imgClassName: 'rounded-[24px]',\n },\n}\n\nexport const NotMatchDomain: Story = {\n args: {\n source: `${imageUrl2}, ${mobImageUrl2} 768`,\n className: 'w-[300px]',\n },\n parameters: {\n docs: {\n description: {\n story: '\u56FE\u7247\u4E0D\u5339\u914D\u57DF\u540D',\n },\n },\n },\n}\n"],
|
|
5
|
-
"mappings": "AACA,OAAS,WAAAA,MAAe,yBACxB,MAAMC,EACJ,4HAEIC,EACJ,iHAEIC,EAAY,kCACZC,EAAe,kCAEfC,EAAO,CACX,MAAO,qBACP,UAAWL,EACX,WAAY,CACV,OAAQ,UACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA,
|
|
6
|
-
"names": ["Picture", "imageUrl", "mobImageUrl", "imageUrl2", "mobImageUrl2", "meta", "picture_stories_default", "Default", "NotMatchDomain"]
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { Picture } from '../components/index.js'\nconst imageUrl =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219'\n\nconst mobImageUrl =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627'\n\nconst imageUrl2 = 'https://http.cat/images/200.jpg'\nconst mobImageUrl2 = 'https://http.cat/images/102.jpg'\n\nconst meta = {\n title: 'Components/Picture',\n component: Picture,\n parameters: {\n layout: 'centerd',\n docs: {\n description: {\n component: `\u54CD\u5E94\u5F0F\u56FE\u7247\u7EC4\u4EF6, \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0Csource=\"url1 1920\uFF0C url2 1080, url3 767\". \n \u5F53\u56FE\u7247\u5339\u914D\u57DF\u540D\uFF08'cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'\uFF09\u7684\u65F6\u5019\uFF0C\u4F1A\u81EA\u52A8\u5728\u56FE\u7247url\u540E\u9762\u6DFB\u52A0\u56FE\u7247\u5C3A\u5BF8\u540E\u7F00\u3002\n\n \u65B0\u7279\u6027\uFF1A\u652F\u6301\u4ECE URL query \u53C2\u6570\u4E2D\u81EA\u52A8\u89E3\u6790 alt \u5C5E\u6027\uFF1A\n - \u5982\u679C\u76F4\u63A5\u4F20\u5165 alt \u5C5E\u6027\uFF0C\u4F18\u5148\u7EA7\u66F4\u9AD8\n - \u5982\u679C\u672A\u4F20\u5165 alt \u5C5E\u6027\uFF0C\u4F1A\u4ECE source \u4E2D\u7684 URL \u89E3\u6790 alt \u53C2\u6570\n - \u591A\u4E2A\u65AD\u70B9 URL \u65F6\uFF0C\u53EA\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL \u7684 alt \u503C\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Picture>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n source: `${imageUrl}, ${mobImageUrl} 768`,\n imgClassName: 'rounded-[24px]',\n },\n}\n\nexport const NotMatchDomain: Story = {\n args: {\n source: `${imageUrl2}, ${mobImageUrl2} 768`,\n className: 'w-[300px]',\n },\n parameters: {\n docs: {\n description: {\n story: '\u56FE\u7247\u4E0D\u5339\u914D\u57DF\u540D',\n },\n },\n },\n}\n\nexport const WithAltFromUrl: Story = {\n args: {\n source: `${imageUrl2}?alt=\u4ECEURL\u53C2\u6570\u89E3\u6790\u7684\u56FE\u7247\u63CF\u8FF0, ${mobImageUrl2}?alt=\u79FB\u52A8\u7AEF\u56FE\u7247\u63CF\u8FF0 768`,\n className: 'w-[300px]',\n },\n parameters: {\n docs: {\n description: {\n story: '\u4ECE URL query \u53C2\u6570\u4E2D\u89E3\u6790 alt \u5C5E\u6027',\n },\n },\n },\n}\n\nexport const WithAltFromUrlMultipleBreakpoints: Story = {\n args: {\n source: `${imageUrl2}?alt=\u7B2C\u4E00\u4E2A\u56FE\u7247\u63CF\u8FF0, ${mobImageUrl2}?alt=\u7B2C\u4E8C\u4E2A\u56FE\u7247\u63CF\u8FF0 768, ${imageUrl2}?alt=\u7B2C\u4E09\u4E2A\u56FE\u7247\u63CF\u8FF0 1024`,\n className: 'w-[300px]',\n },\n parameters: {\n docs: {\n description: {\n story: '\u591A\u4E2A\u65AD\u70B9 URL \u65F6\uFF0C\u53EA\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL \u7684 alt \u503C',\n },\n },\n },\n}\n\nexport const AltPriority: Story = {\n args: {\n source: `${imageUrl2}?alt=URL\u4E2D\u7684alt\u53C2\u6570, ${mobImageUrl2}?alt=\u79FB\u52A8\u7AEFalt\u53C2\u6570 768`,\n alt: '\u76F4\u63A5\u4F20\u5165\u7684alt\u5C5E\u6027',\n className: 'w-[300px]',\n },\n parameters: {\n docs: {\n description: {\n story: '\u76F4\u63A5\u4F20\u5165\u7684 alt \u5C5E\u6027\u4F18\u5148\u7EA7\u66F4\u9AD8',\n },\n },\n },\n}\n\nexport const MixedAltSources: Story = {\n args: {\n source: `${imageUrl2}, ${mobImageUrl2}?alt=\u53EA\u6709\u7B2C\u4E8C\u4E2AURL\u6709alt\u53C2\u6570 768`,\n className: 'w-[300px]',\n },\n parameters: {\n docs: {\n description: {\n story: '\u6DF7\u5408\u60C5\u51B5\uFF1A\u7B2C\u4E00\u4E2A URL \u6CA1\u6709 alt \u53C2\u6570\uFF0C\u7B2C\u4E8C\u4E2A\u6709',\n },\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "AACA,OAAS,WAAAA,MAAe,yBACxB,MAAMC,EACJ,4HAEIC,EACJ,iHAEIC,EAAY,kCACZC,EAAe,kCAEfC,EAAO,CACX,MAAO,qBACP,UAAWL,EACX,WAAY,CACV,OAAQ,UACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOM,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,OAAQ,GAAGN,CAAQ,KAAKC,CAAW,OACnC,aAAc,gBAChB,CACF,EAEaM,EAAwB,CACnC,KAAM,CACJ,OAAQ,GAAGL,CAAS,KAAKC,CAAY,OACrC,UAAW,WACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,4CACT,CACF,CACF,CACF,EAEaK,EAAwB,CACnC,KAAM,CACJ,OAAQ,GAAGN,CAAS,yEAAuBC,CAAY,sDACvD,UAAW,WACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,kEACT,CACF,CACF,CACF,EAEaM,EAA2C,CACtD,KAAM,CACJ,OAAQ,GAAGP,CAAS,oDAAiBC,CAAY,wDAAqBD,CAAS,uDAC/E,UAAW,WACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,kIACT,CACF,CACF,CACF,EAEaQ,EAAqB,CAChC,KAAM,CACJ,OAAQ,GAAGR,CAAS,wCAAoBC,CAAY,6CACpD,IAAK,gDACL,UAAW,WACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,+EACT,CACF,CACF,CACF,EAEaQ,EAAyB,CACpC,KAAM,CACJ,OAAQ,GAAGT,CAAS,KAAKC,CAAY,kEACrC,UAAW,WACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,kHACT,CACF,CACF,CACF",
|
|
6
|
+
"names": ["Picture", "imageUrl", "mobImageUrl", "imageUrl2", "mobImageUrl2", "meta", "picture_stories_default", "Default", "NotMatchDomain", "WithAltFromUrl", "WithAltFromUrlMultipleBreakpoints", "AltPriority", "MixedAltSources"]
|
|
7
7
|
}
|