@prismicio/react 2.7.0 → 2.7.1
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/PrismicImage.cjs +10 -5
- package/dist/PrismicImage.cjs.map +1 -1
- package/dist/PrismicImage.d.ts +456 -3
- package/dist/PrismicImage.js +10 -5
- package/dist/PrismicImage.js.map +1 -1
- package/dist/package.json.cjs +1 -1
- package/dist/package.json.js +1 -1
- package/package.json +1 -1
- package/src/PrismicImage.tsx +19 -13
package/dist/PrismicImage.cjs
CHANGED
|
@@ -23,10 +23,9 @@ function _interopNamespaceDefault(e) {
|
|
|
23
23
|
return Object.freeze(n);
|
|
24
24
|
}
|
|
25
25
|
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
|
|
26
|
-
const PrismicImage = React__namespace.forwardRef(function PrismicImage2(
|
|
27
|
-
const { field, alt, fallbackAlt, imgixParams, widths, pixelDensities, ...restProps } = props;
|
|
26
|
+
const PrismicImage = React__namespace.forwardRef(function PrismicImage2({ field, alt, fallbackAlt, imgixParams = {}, widths, pixelDensities, ...restProps }, ref) {
|
|
28
27
|
if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {
|
|
29
|
-
if (typeof alt === "string" &&
|
|
28
|
+
if (typeof alt === "string" && alt !== "") {
|
|
30
29
|
console.warn(`[PrismicImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="". For more details, see ${devMsg.devMsg("alt-must-be-an-empty-string")}`);
|
|
31
30
|
}
|
|
32
31
|
if (typeof fallbackAlt === "string" && fallbackAlt !== "") {
|
|
@@ -37,18 +36,24 @@ const PrismicImage = React__namespace.forwardRef(function PrismicImage2(props, r
|
|
|
37
36
|
}
|
|
38
37
|
}
|
|
39
38
|
if (isFilled.imageThumbnail(field)) {
|
|
39
|
+
const resolvedImgixParams = imgixParams;
|
|
40
|
+
for (const x in imgixParams) {
|
|
41
|
+
if (resolvedImgixParams[x] === null) {
|
|
42
|
+
resolvedImgixParams[x] = void 0;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
40
45
|
let src;
|
|
41
46
|
let srcSet;
|
|
42
47
|
if (widths || !pixelDensities) {
|
|
43
48
|
const res = asImageWidthSrcSet.asImageWidthSrcSet(field, {
|
|
44
|
-
...
|
|
49
|
+
...resolvedImgixParams,
|
|
45
50
|
widths: widths === "defaults" ? void 0 : widths
|
|
46
51
|
});
|
|
47
52
|
src = res.src;
|
|
48
53
|
srcSet = res.srcset;
|
|
49
54
|
} else if (pixelDensities) {
|
|
50
55
|
const res = asImagePixelDensitySrcSet.asImagePixelDensitySrcSet(field, {
|
|
51
|
-
...
|
|
56
|
+
...resolvedImgixParams,
|
|
52
57
|
pixelDensities: pixelDensities === "defaults" ? void 0 : pixelDensities
|
|
53
58
|
});
|
|
54
59
|
src = res.src;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrismicImage.cjs","sources":["../../src/PrismicImage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as prismic from \"@prismicio/client\";\n\nimport { devMsg } from \"./lib/devMsg\";\n\n/**\n * Props for `<PrismicImage>`.\n */\nexport type PrismicImageProps = Omit<\n\tReact.DetailedHTMLProps<\n\t\tReact.ImgHTMLAttributes<HTMLImageElement>,\n\t\tHTMLImageElement\n\t>,\n\t\"src\" | \"srcset\" | \"alt\"\n> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismic.ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * See: https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?:
|
|
1
|
+
{"version":3,"file":"PrismicImage.cjs","sources":["../../src/PrismicImage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as prismic from \"@prismicio/client\";\nimport { ImgixURLParams } from \"imgix-url-builder\";\n\nimport { devMsg } from \"./lib/devMsg\";\n\n/**\n * Props for `<PrismicImage>`.\n */\nexport type PrismicImageProps = Omit<\n\tReact.DetailedHTMLProps<\n\t\tReact.ImgHTMLAttributes<HTMLImageElement>,\n\t\tHTMLImageElement\n\t>,\n\t\"src\" | \"srcset\" | \"alt\"\n> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismic.ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * See: https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: { [P in keyof ImgixURLParams]: ImgixURLParams[P] | null };\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\";\n\n\t/**\n\t * Declare an image as decorative only if the Image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\";\n} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Widths used to build a `srcset` value for the Image field.\n\t\t\t\t *\n\t\t\t\t * If a `widths` prop is not given or `\"defaults\"` is passed, the\n\t\t\t\t * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,\n\t\t\t\t * 3840.\n\t\t\t\t *\n\t\t\t\t * If the Image field contains responsive views, each responsive view\n\t\t\t\t * can be used as a width in the resulting `srcset` by passing\n\t\t\t\t * `\"thumbnails\"` as the `widths` prop.\n\t\t\t\t */\n\t\t\t\twidths?:\n\t\t\t\t\t| NonNullable<\n\t\t\t\t\t\t\tParameters<typeof prismic.asImageWidthSrcSet>[1]\n\t\t\t\t\t >[\"widths\"]\n\t\t\t\t\t| \"defaults\";\n\t\t\t\t/**\n\t\t\t\t * Not used when the `widths` prop is used.\n\t\t\t\t */\n\t\t\t\tpixelDensities?: never;\n\t\t }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Not used when the `widths` prop is used.\n\t\t\t\t */\n\t\t\t\twidths?: never;\n\t\t\t\t/**\n\t\t\t\t * Pixel densities used to build a `srcset` value for the Image field.\n\t\t\t\t *\n\t\t\t\t * If a `pixelDensities` prop is passed `\"defaults\"`, the following\n\t\t\t\t * pixel densities will be used: 1, 2, 3.\n\t\t\t\t */\n\t\t\t\tpixelDensities:\n\t\t\t\t\t| NonNullable<\n\t\t\t\t\t\t\tParameters<typeof prismic.asImagePixelDensitySrcSet>[1]\n\t\t\t\t\t >[\"pixelDensities\"]\n\t\t\t\t\t| \"defaults\";\n\t\t }\n\t);\n\n/**\n * React component that renders an image from a Prismic Image field or one of\n * its thumbnails. It will automatically set the `alt` attribute using the Image\n * field's `alt` property.\n *\n * By default, a widths-based srcset will be used to support responsive images.\n * This ensures only the smallest image needed for a browser is downloaded.\n *\n * To use a pixel-density-based srcset, use the `pixelDensities` prop. Default\n * pixel densities can be used by using `pixelDensities=\"defaults\"`.\n *\n * **Note**: If you are using a framework that has a native image component,\n * such as Next.js and Gatsby, prefer using those image components instead. They\n * can provide deeper framework integration than `<PrismicImage>`.\n *\n * @param props - Props for the component.\n *\n * @returns A responsive image component for the given Image field.\n */\nexport const PrismicImage = React.forwardRef(function PrismicImage(\n\t{\n\t\tfield,\n\t\talt,\n\t\tfallbackAlt,\n\t\timgixParams = {},\n\t\twidths,\n\t\tpixelDensities,\n\t\t...restProps\n\t}: PrismicImageProps,\n\tref: React.ForwardedRef<HTMLImageElement>,\n): JSX.Element | null {\n\tif (\n\t\ttypeof process !== \"undefined\" &&\n\t\tprocess.env.NODE_ENV === \"development\"\n\t) {\n\t\tif (typeof alt === \"string\" && alt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"alt\" prop can only be used to declare an image as decorative by passing an empty string (alt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"alt\" prop or changing it to alt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\n\t\tif (typeof fallbackAlt === \"string\" && fallbackAlt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"fallbackAlt\" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"fallbackAlt\" prop or changing it to fallbackAlt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\n\t\tif (widths && pixelDensities) {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] Only one of \"widths\" or \"pixelDensities\" props can be provided. You can resolve this warning by removing either the \"widths\" or \"pixelDensities\" prop. \"widths\" will be used in this case.`,\n\t\t\t);\n\t\t}\n\t}\n\n\tif (prismic.isFilled.imageThumbnail(field)) {\n\t\tconst resolvedImgixParams = imgixParams;\n\t\tfor (const x in imgixParams) {\n\t\t\tif (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {\n\t\t\t\tresolvedImgixParams[x as keyof typeof resolvedImgixParams] = undefined;\n\t\t\t}\n\t\t}\n\n\t\tlet src: string | undefined;\n\t\tlet srcSet: string | undefined;\n\n\t\tif (widths || !pixelDensities) {\n\t\t\tconst res = prismic.asImageWidthSrcSet(field, {\n\t\t\t\t...resolvedImgixParams,\n\t\t\t\twidths: widths === \"defaults\" ? undefined : widths,\n\t\t\t} as ImgixURLParams);\n\n\t\t\tsrc = res.src;\n\t\t\tsrcSet = res.srcset;\n\t\t} else if (pixelDensities) {\n\t\t\tconst res = prismic.asImagePixelDensitySrcSet(field, {\n\t\t\t\t...resolvedImgixParams,\n\t\t\t\tpixelDensities:\n\t\t\t\t\tpixelDensities === \"defaults\" ? undefined : pixelDensities,\n\t\t\t} as ImgixURLParams);\n\n\t\t\tsrc = res.src;\n\t\t\tsrcSet = res.srcset;\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\tref={ref}\n\t\t\t\tsrc={src}\n\t\t\t\tsrcSet={srcSet}\n\t\t\t\talt={alt ?? (field.alt || fallbackAlt)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n});\n"],"names":["React","PrismicImage","devMsg","prismic.isFilled.imageThumbnail","prismic.asImageWidthSrcSet","prismic.asImagePixelDensitySrcSet","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyGO,MAAM,eAAeA,iBAAM,WAAW,SAASC,cACrD,EACC,OACA,KACA,aACA,cAAc,CACd,GAAA,QACA,gBACA,GAAG,aAEJ,KAAyC;AAEzC,MACC,OAAO,YAAY,eACnB,QAAQ,IAAI,aAAa,eACxB;AACD,QAAI,OAAO,QAAQ,YAAY,QAAQ,IAAI;AAC1C,cAAQ,KACP,qQAAqQC,OACpQ,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAO,gBAAgB,YAAY,gBAAgB,IAAI;AAC1D,cAAQ,KACP,qSAAqSA,OACpS,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,UAAU,gBAAgB;AAC7B,cAAQ,KACP,2MAA2M;AAAA,IAE5M;AAAA,EACD;AAED,MAAIC,SAAAA,eAAgC,KAAK,GAAG;AAC3C,UAAM,sBAAsB;AAC5B,eAAW,KAAK,aAAa;AACxB,UAAA,oBAAoB,CAAqC,MAAM,MAAM;AACxE,4BAAoB,CAAqC,IAAI;AAAA,MAC7D;AAAA,IACD;AAEG,QAAA;AACA,QAAA;AAEA,QAAA,UAAU,CAAC,gBAAgB;AACxB,YAAA,MAAMC,mBAAQ,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,QACH,QAAQ,WAAW,aAAa,SAAY;AAAA,MAAA,CAC1B;AAEnB,YAAM,IAAI;AACV,eAAS,IAAI;AAAA,eACH,gBAAgB;AACpB,YAAA,MAAMC,0BAAQ,0BAA0B,OAAO;AAAA,QACpD,GAAG;AAAA,QACH,gBACC,mBAAmB,aAAa,SAAY;AAAA,MAAA,CAC3B;AAEnB,YAAM,IAAI;AACV,eAAS,IAAI;AAAA,IACb;AAGA,WAAAC,2BAAA,IAAC,OACA,EAAA,KACA,KACA,QACA,KAAK,QAAQ,MAAM,OAAO,cAC1B,GAAI,UAAU,CAAA;AAAA,EAAA,OAGV;AACC,WAAA;AAAA,EACP;AACF,CAAC;;"}
|
package/dist/PrismicImage.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import * as prismic from "@prismicio/client";
|
|
3
|
+
import { ImgixURLParams } from "imgix-url-builder";
|
|
3
4
|
/**
|
|
4
5
|
* Props for `<PrismicImage>`.
|
|
5
6
|
*/
|
|
@@ -13,7 +14,9 @@ export type PrismicImageProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttrib
|
|
|
13
14
|
*
|
|
14
15
|
* See: https://docs.imgix.com/apis/rendering
|
|
15
16
|
*/
|
|
16
|
-
imgixParams?:
|
|
17
|
+
imgixParams?: {
|
|
18
|
+
[P in keyof ImgixURLParams]: ImgixURLParams[P] | null;
|
|
19
|
+
};
|
|
17
20
|
/**
|
|
18
21
|
* Declare an image as decorative by providing `alt=""`.
|
|
19
22
|
*
|
|
@@ -88,7 +91,232 @@ export declare const PrismicImage: React.ForwardRefExoticComponent<(Omit<Omit<Re
|
|
|
88
91
|
*
|
|
89
92
|
* See: https://docs.imgix.com/apis/rendering
|
|
90
93
|
*/
|
|
91
|
-
imgixParams?:
|
|
94
|
+
imgixParams?: {
|
|
95
|
+
ar?: `${number}:${number}` | null | undefined;
|
|
96
|
+
auto?: ("true" | "enhance" | "format" | "redeye" | "compress")[] | null | undefined;
|
|
97
|
+
bg?: string | null | undefined;
|
|
98
|
+
blendAlign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
99
|
+
blendalign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
100
|
+
ba?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
101
|
+
blendAlpha?: number | null | undefined;
|
|
102
|
+
blendalpha?: number | null | undefined;
|
|
103
|
+
balph?: number | null | undefined;
|
|
104
|
+
blendColor?: string | null | undefined;
|
|
105
|
+
blendcolor?: string | null | undefined;
|
|
106
|
+
blendClr?: string | null | undefined;
|
|
107
|
+
blendclr?: string | null | undefined;
|
|
108
|
+
blendCrop?: ("faces" | "top" | "bottom" | "left" | "right")[] | null | undefined;
|
|
109
|
+
blendcrop?: ("faces" | "top" | "bottom" | "left" | "right")[] | null | undefined;
|
|
110
|
+
bc?: ("faces" | "top" | "bottom" | "left" | "right")[] | null | undefined;
|
|
111
|
+
blendFit?: "crop" | "clamp" | "clip" | "scale" | "max" | null | undefined;
|
|
112
|
+
blendfit?: "crop" | "clamp" | "clip" | "scale" | "max" | null | undefined;
|
|
113
|
+
bf?: "crop" | "clamp" | "clip" | "scale" | "max" | null | undefined;
|
|
114
|
+
blendH?: number | null | undefined;
|
|
115
|
+
blendh?: number | null | undefined;
|
|
116
|
+
bh?: number | null | undefined;
|
|
117
|
+
blendMode?: "color" | "hue" | "burn" | "dodge" | "darken" | "difference" | "exclusion" | "hardlight" | "lighten" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "softlight" | "normal" | null | undefined;
|
|
118
|
+
blendmode?: "color" | "hue" | "burn" | "dodge" | "darken" | "difference" | "exclusion" | "hardlight" | "lighten" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "softlight" | "normal" | null | undefined;
|
|
119
|
+
bm?: "color" | "hue" | "burn" | "dodge" | "darken" | "difference" | "exclusion" | "hardlight" | "lighten" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "softlight" | "normal" | null | undefined;
|
|
120
|
+
blendPad?: number | null | undefined;
|
|
121
|
+
blendpad?: number | null | undefined;
|
|
122
|
+
bp?: number | null | undefined;
|
|
123
|
+
blendSize?: "inherit" | null | undefined;
|
|
124
|
+
blendsize?: "inherit" | null | undefined;
|
|
125
|
+
bs?: "inherit" | null | undefined;
|
|
126
|
+
blendW?: number | null | undefined;
|
|
127
|
+
blendw?: number | null | undefined;
|
|
128
|
+
bw?: number | null | undefined;
|
|
129
|
+
blendX?: number | null | undefined;
|
|
130
|
+
blendx?: number | null | undefined;
|
|
131
|
+
bx?: number | null | undefined;
|
|
132
|
+
blendY?: number | null | undefined;
|
|
133
|
+
blendy?: number | null | undefined;
|
|
134
|
+
by?: number | null | undefined;
|
|
135
|
+
blend?: string | null | undefined;
|
|
136
|
+
b?: string | null | undefined;
|
|
137
|
+
blur?: number | null | undefined;
|
|
138
|
+
borderBottom?: number | null | undefined;
|
|
139
|
+
borderLeft?: number | null | undefined;
|
|
140
|
+
borderRadiusInner?: number | [number, number, number, number] | null | undefined;
|
|
141
|
+
borderRadius?: number | [number, number, number, number] | null | undefined;
|
|
142
|
+
borderRight?: number | null | undefined;
|
|
143
|
+
borderTop?: number | null | undefined;
|
|
144
|
+
border?: [number, string] | null | undefined;
|
|
145
|
+
bri?: number | null | undefined;
|
|
146
|
+
ch?: ("width" | "dpr" | "save-data")[] | null | undefined;
|
|
147
|
+
chromasub?: 444 | 422 | 420 | null | undefined;
|
|
148
|
+
colorquant?: number | null | undefined;
|
|
149
|
+
colors?: number | null | undefined;
|
|
150
|
+
con?: number | null | undefined;
|
|
151
|
+
cornerRadius?: number | [number, number, number, number] | null | undefined;
|
|
152
|
+
crop?: ("faces" | "top" | "bottom" | "left" | "right" | "entropy" | "edges" | "focalpoint")[] | null | undefined;
|
|
153
|
+
cs?: "srgb" | "adobergb1998" | "tinysrgb" | "strip" | null | undefined;
|
|
154
|
+
dl?: string | null | undefined;
|
|
155
|
+
dpi?: number | null | undefined;
|
|
156
|
+
dpr?: number | null | undefined;
|
|
157
|
+
duotoneAlpha?: number | null | undefined;
|
|
158
|
+
duotone?: [string, string] | null | undefined;
|
|
159
|
+
exp?: number | null | undefined;
|
|
160
|
+
expires?: number | null | undefined;
|
|
161
|
+
faceindex?: number | null | undefined;
|
|
162
|
+
facepad?: number | null | undefined;
|
|
163
|
+
faces?: 1 | null | undefined;
|
|
164
|
+
fillColor?: string | null | undefined;
|
|
165
|
+
fillcolor?: string | null | undefined;
|
|
166
|
+
fill?: "blur" | "solid" | null | undefined;
|
|
167
|
+
fit?: "crop" | "fill" | "clamp" | "clip" | "scale" | "max" | "facearea" | "fillmax" | "min" | null | undefined;
|
|
168
|
+
f?: "crop" | "fill" | "clamp" | "clip" | "scale" | "max" | "facearea" | "fillmax" | "min" | null | undefined;
|
|
169
|
+
flip?: "h" | "v" | "hv" | null | undefined;
|
|
170
|
+
fm?: "gif" | "jpg" | "jp2" | "json" | "jxr" | "pjpg" | "mp4" | "png" | "png8" | "png32" | "webp" | "webm" | "blurhash" | "avif" | null | undefined;
|
|
171
|
+
fpDebug?: boolean | null | undefined;
|
|
172
|
+
fpX?: number | null | undefined;
|
|
173
|
+
fpY?: number | null | undefined;
|
|
174
|
+
fpZ?: number | null | undefined;
|
|
175
|
+
gam?: number | null | undefined;
|
|
176
|
+
gridColors?: [string, string] | null | undefined;
|
|
177
|
+
gridSize?: number | null | undefined;
|
|
178
|
+
h?: number | null | undefined;
|
|
179
|
+
height?: number | null | undefined;
|
|
180
|
+
high?: number | null | undefined;
|
|
181
|
+
htn?: number | null | undefined;
|
|
182
|
+
hue?: number | null | undefined;
|
|
183
|
+
invert?: boolean | null | undefined;
|
|
184
|
+
inv?: boolean | null | undefined;
|
|
185
|
+
iptc?: "allow" | "block" | null | undefined;
|
|
186
|
+
lossless?: boolean | null | undefined;
|
|
187
|
+
markAlign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
188
|
+
ma?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
189
|
+
markalign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
190
|
+
markAlpha?: number | null | undefined;
|
|
191
|
+
markalpha?: number | null | undefined;
|
|
192
|
+
malph?: number | null | undefined;
|
|
193
|
+
markBase?: string | null | undefined;
|
|
194
|
+
mb?: string | null | undefined;
|
|
195
|
+
markbase?: string | null | undefined;
|
|
196
|
+
markFit?: "crop" | "fill" | "clip" | "scale" | "max" | null | undefined;
|
|
197
|
+
mf?: "crop" | "fill" | "clip" | "scale" | "max" | null | undefined;
|
|
198
|
+
markfit?: "crop" | "fill" | "clip" | "scale" | "max" | null | undefined;
|
|
199
|
+
markH?: number | null | undefined;
|
|
200
|
+
mh?: number | null | undefined;
|
|
201
|
+
markh?: number | null | undefined;
|
|
202
|
+
markPad?: number | null | undefined;
|
|
203
|
+
mp?: number | null | undefined;
|
|
204
|
+
markpad?: number | null | undefined;
|
|
205
|
+
markRot?: number | null | undefined;
|
|
206
|
+
markScale?: number | null | undefined;
|
|
207
|
+
ms?: number | null | undefined;
|
|
208
|
+
markscale?: number | null | undefined;
|
|
209
|
+
markTile?: "grid" | null | undefined;
|
|
210
|
+
mtile?: "grid" | null | undefined;
|
|
211
|
+
marktile?: "grid" | null | undefined;
|
|
212
|
+
markW?: number | null | undefined;
|
|
213
|
+
mw?: number | null | undefined;
|
|
214
|
+
markw?: number | null | undefined;
|
|
215
|
+
markX?: number | null | undefined;
|
|
216
|
+
mx?: number | null | undefined;
|
|
217
|
+
markx?: number | null | undefined;
|
|
218
|
+
markY?: number | null | undefined;
|
|
219
|
+
my?: number | null | undefined;
|
|
220
|
+
marky?: number | null | undefined;
|
|
221
|
+
mark?: string | null | undefined;
|
|
222
|
+
m?: string | null | undefined;
|
|
223
|
+
maskBg?: string | null | undefined;
|
|
224
|
+
maskbg?: string | null | undefined;
|
|
225
|
+
mask?: string | null | undefined;
|
|
226
|
+
maxH?: number | null | undefined;
|
|
227
|
+
maxHeight?: number | null | undefined;
|
|
228
|
+
maxW?: number | null | undefined;
|
|
229
|
+
maxWidth?: number | null | undefined;
|
|
230
|
+
minH?: number | null | undefined;
|
|
231
|
+
minHeight?: number | null | undefined;
|
|
232
|
+
minW?: number | null | undefined;
|
|
233
|
+
minWidth?: number | null | undefined;
|
|
234
|
+
monochrome?: string | null | undefined;
|
|
235
|
+
mono?: string | null | undefined;
|
|
236
|
+
nr?: number | null | undefined;
|
|
237
|
+
nrs?: number | null | undefined;
|
|
238
|
+
orient?: 0 | 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 90 | 180 | 270 | null | undefined;
|
|
239
|
+
or?: 0 | 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 90 | 180 | 270 | null | undefined;
|
|
240
|
+
padBottom?: number | null | undefined;
|
|
241
|
+
padLeft?: number | null | undefined;
|
|
242
|
+
padRight?: number | null | undefined;
|
|
243
|
+
padTop?: number | null | undefined;
|
|
244
|
+
pad?: number | null | undefined;
|
|
245
|
+
page?: number | null | undefined;
|
|
246
|
+
palette?: "json" | "css" | null | undefined;
|
|
247
|
+
pdfAnnotation?: boolean | null | undefined;
|
|
248
|
+
annotation?: boolean | null | undefined;
|
|
249
|
+
prefix?: string | null | undefined;
|
|
250
|
+
px?: number | null | undefined;
|
|
251
|
+
q?: number | null | undefined;
|
|
252
|
+
rect?: [number | "left" | "right" | "center", number | "top" | "bottom" | "middle", number, number] | null | undefined;
|
|
253
|
+
rot?: number | null | undefined;
|
|
254
|
+
sat?: number | null | undefined;
|
|
255
|
+
sepia?: number | null | undefined;
|
|
256
|
+
shad?: number | null | undefined;
|
|
257
|
+
sharp?: number | null | undefined;
|
|
258
|
+
transparency?: "grid" | null | undefined;
|
|
259
|
+
trimColor?: string | null | undefined;
|
|
260
|
+
trimcolor?: string | null | undefined;
|
|
261
|
+
trimMd?: number | null | undefined;
|
|
262
|
+
trimmd?: number | null | undefined;
|
|
263
|
+
trimPad?: number | null | undefined;
|
|
264
|
+
trimpad?: number | null | undefined;
|
|
265
|
+
trimSd?: number | null | undefined;
|
|
266
|
+
trimsd?: number | null | undefined;
|
|
267
|
+
trimTol?: number | null | undefined;
|
|
268
|
+
trimtol?: number | null | undefined;
|
|
269
|
+
trim?: "color" | "auto" | null | undefined;
|
|
270
|
+
txtAlign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
271
|
+
txtalign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
272
|
+
ta?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
273
|
+
txtClip?: ("middle" | "start" | "end" | "ellipsis")[] | null | undefined;
|
|
274
|
+
txtclip?: ("middle" | "start" | "end" | "ellipsis")[] | null | undefined;
|
|
275
|
+
tcl?: ("middle" | "start" | "end" | "ellipsis")[] | null | undefined;
|
|
276
|
+
txtColor?: string | null | undefined;
|
|
277
|
+
txtcolor?: string | null | undefined;
|
|
278
|
+
txtClr?: string | null | undefined;
|
|
279
|
+
txtclr?: string | null | undefined;
|
|
280
|
+
tc?: string | null | undefined;
|
|
281
|
+
txtFit?: "max" | null | undefined;
|
|
282
|
+
txtfit?: "max" | null | undefined;
|
|
283
|
+
txtFont?: import("imgix-url-builder").Font | null | undefined;
|
|
284
|
+
tf?: import("imgix-url-builder").Font | null | undefined;
|
|
285
|
+
txtfont?: import("imgix-url-builder").Font | null | undefined;
|
|
286
|
+
txtLead?: number | null | undefined;
|
|
287
|
+
txtlead?: number | null | undefined;
|
|
288
|
+
txtLig?: 0 | 1 | 2 | null | undefined;
|
|
289
|
+
txtlig?: 0 | 1 | 2 | null | undefined;
|
|
290
|
+
txtLineColor?: string | null | undefined;
|
|
291
|
+
txtlinecolor?: string | null | undefined;
|
|
292
|
+
txtLineClr?: string | null | undefined;
|
|
293
|
+
txtlineclr?: string | null | undefined;
|
|
294
|
+
txtLine?: number | null | undefined;
|
|
295
|
+
txtline?: number | null | undefined;
|
|
296
|
+
tl?: number | null | undefined;
|
|
297
|
+
txtPad?: number | null | undefined;
|
|
298
|
+
txtpad?: number | null | undefined;
|
|
299
|
+
tp?: number | null | undefined;
|
|
300
|
+
txtShad?: number | null | undefined;
|
|
301
|
+
txtshad?: number | null | undefined;
|
|
302
|
+
tsh?: number | null | undefined;
|
|
303
|
+
txtSize?: number | null | undefined;
|
|
304
|
+
tsz?: number | null | undefined;
|
|
305
|
+
txtsize?: number | null | undefined;
|
|
306
|
+
txtTrack?: number | null | undefined;
|
|
307
|
+
txttrack?: number | null | undefined;
|
|
308
|
+
tt?: number | null | undefined;
|
|
309
|
+
txtWidth?: number | null | undefined;
|
|
310
|
+
txtwidth?: number | null | undefined;
|
|
311
|
+
txt?: string | null | undefined;
|
|
312
|
+
t?: string | null | undefined;
|
|
313
|
+
usm?: number | null | undefined;
|
|
314
|
+
usmrad?: number | null | undefined;
|
|
315
|
+
vib?: number | null | undefined;
|
|
316
|
+
w?: number | null | undefined;
|
|
317
|
+
width?: number | null | undefined;
|
|
318
|
+
s?: string | null | undefined;
|
|
319
|
+
} | undefined;
|
|
92
320
|
/**
|
|
93
321
|
* Declare an image as decorative by providing `alt=""`.
|
|
94
322
|
*
|
|
@@ -131,7 +359,232 @@ export declare const PrismicImage: React.ForwardRefExoticComponent<(Omit<Omit<Re
|
|
|
131
359
|
*
|
|
132
360
|
* See: https://docs.imgix.com/apis/rendering
|
|
133
361
|
*/
|
|
134
|
-
imgixParams?:
|
|
362
|
+
imgixParams?: {
|
|
363
|
+
ar?: `${number}:${number}` | null | undefined;
|
|
364
|
+
auto?: ("true" | "enhance" | "format" | "redeye" | "compress")[] | null | undefined;
|
|
365
|
+
bg?: string | null | undefined;
|
|
366
|
+
blendAlign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
367
|
+
blendalign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
368
|
+
ba?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
369
|
+
blendAlpha?: number | null | undefined;
|
|
370
|
+
blendalpha?: number | null | undefined;
|
|
371
|
+
balph?: number | null | undefined;
|
|
372
|
+
blendColor?: string | null | undefined;
|
|
373
|
+
blendcolor?: string | null | undefined;
|
|
374
|
+
blendClr?: string | null | undefined;
|
|
375
|
+
blendclr?: string | null | undefined;
|
|
376
|
+
blendCrop?: ("faces" | "top" | "bottom" | "left" | "right")[] | null | undefined;
|
|
377
|
+
blendcrop?: ("faces" | "top" | "bottom" | "left" | "right")[] | null | undefined;
|
|
378
|
+
bc?: ("faces" | "top" | "bottom" | "left" | "right")[] | null | undefined;
|
|
379
|
+
blendFit?: "crop" | "clamp" | "clip" | "scale" | "max" | null | undefined;
|
|
380
|
+
blendfit?: "crop" | "clamp" | "clip" | "scale" | "max" | null | undefined;
|
|
381
|
+
bf?: "crop" | "clamp" | "clip" | "scale" | "max" | null | undefined;
|
|
382
|
+
blendH?: number | null | undefined;
|
|
383
|
+
blendh?: number | null | undefined;
|
|
384
|
+
bh?: number | null | undefined;
|
|
385
|
+
blendMode?: "color" | "hue" | "burn" | "dodge" | "darken" | "difference" | "exclusion" | "hardlight" | "lighten" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "softlight" | "normal" | null | undefined;
|
|
386
|
+
blendmode?: "color" | "hue" | "burn" | "dodge" | "darken" | "difference" | "exclusion" | "hardlight" | "lighten" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "softlight" | "normal" | null | undefined;
|
|
387
|
+
bm?: "color" | "hue" | "burn" | "dodge" | "darken" | "difference" | "exclusion" | "hardlight" | "lighten" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "softlight" | "normal" | null | undefined;
|
|
388
|
+
blendPad?: number | null | undefined;
|
|
389
|
+
blendpad?: number | null | undefined;
|
|
390
|
+
bp?: number | null | undefined;
|
|
391
|
+
blendSize?: "inherit" | null | undefined;
|
|
392
|
+
blendsize?: "inherit" | null | undefined;
|
|
393
|
+
bs?: "inherit" | null | undefined;
|
|
394
|
+
blendW?: number | null | undefined;
|
|
395
|
+
blendw?: number | null | undefined;
|
|
396
|
+
bw?: number | null | undefined;
|
|
397
|
+
blendX?: number | null | undefined;
|
|
398
|
+
blendx?: number | null | undefined;
|
|
399
|
+
bx?: number | null | undefined;
|
|
400
|
+
blendY?: number | null | undefined;
|
|
401
|
+
blendy?: number | null | undefined;
|
|
402
|
+
by?: number | null | undefined;
|
|
403
|
+
blend?: string | null | undefined;
|
|
404
|
+
b?: string | null | undefined;
|
|
405
|
+
blur?: number | null | undefined;
|
|
406
|
+
borderBottom?: number | null | undefined;
|
|
407
|
+
borderLeft?: number | null | undefined;
|
|
408
|
+
borderRadiusInner?: number | [number, number, number, number] | null | undefined;
|
|
409
|
+
borderRadius?: number | [number, number, number, number] | null | undefined;
|
|
410
|
+
borderRight?: number | null | undefined;
|
|
411
|
+
borderTop?: number | null | undefined;
|
|
412
|
+
border?: [number, string] | null | undefined;
|
|
413
|
+
bri?: number | null | undefined;
|
|
414
|
+
ch?: ("width" | "dpr" | "save-data")[] | null | undefined;
|
|
415
|
+
chromasub?: 444 | 422 | 420 | null | undefined;
|
|
416
|
+
colorquant?: number | null | undefined;
|
|
417
|
+
colors?: number | null | undefined;
|
|
418
|
+
con?: number | null | undefined;
|
|
419
|
+
cornerRadius?: number | [number, number, number, number] | null | undefined;
|
|
420
|
+
crop?: ("faces" | "top" | "bottom" | "left" | "right" | "entropy" | "edges" | "focalpoint")[] | null | undefined;
|
|
421
|
+
cs?: "srgb" | "adobergb1998" | "tinysrgb" | "strip" | null | undefined;
|
|
422
|
+
dl?: string | null | undefined;
|
|
423
|
+
dpi?: number | null | undefined;
|
|
424
|
+
dpr?: number | null | undefined;
|
|
425
|
+
duotoneAlpha?: number | null | undefined;
|
|
426
|
+
duotone?: [string, string] | null | undefined;
|
|
427
|
+
exp?: number | null | undefined;
|
|
428
|
+
expires?: number | null | undefined;
|
|
429
|
+
faceindex?: number | null | undefined;
|
|
430
|
+
facepad?: number | null | undefined;
|
|
431
|
+
faces?: 1 | null | undefined;
|
|
432
|
+
fillColor?: string | null | undefined;
|
|
433
|
+
fillcolor?: string | null | undefined;
|
|
434
|
+
fill?: "blur" | "solid" | null | undefined;
|
|
435
|
+
fit?: "crop" | "fill" | "clamp" | "clip" | "scale" | "max" | "facearea" | "fillmax" | "min" | null | undefined;
|
|
436
|
+
f?: "crop" | "fill" | "clamp" | "clip" | "scale" | "max" | "facearea" | "fillmax" | "min" | null | undefined;
|
|
437
|
+
flip?: "h" | "v" | "hv" | null | undefined;
|
|
438
|
+
fm?: "gif" | "jpg" | "jp2" | "json" | "jxr" | "pjpg" | "mp4" | "png" | "png8" | "png32" | "webp" | "webm" | "blurhash" | "avif" | null | undefined;
|
|
439
|
+
fpDebug?: boolean | null | undefined;
|
|
440
|
+
fpX?: number | null | undefined;
|
|
441
|
+
fpY?: number | null | undefined;
|
|
442
|
+
fpZ?: number | null | undefined;
|
|
443
|
+
gam?: number | null | undefined;
|
|
444
|
+
gridColors?: [string, string] | null | undefined;
|
|
445
|
+
gridSize?: number | null | undefined;
|
|
446
|
+
h?: number | null | undefined;
|
|
447
|
+
height?: number | null | undefined;
|
|
448
|
+
high?: number | null | undefined;
|
|
449
|
+
htn?: number | null | undefined;
|
|
450
|
+
hue?: number | null | undefined;
|
|
451
|
+
invert?: boolean | null | undefined;
|
|
452
|
+
inv?: boolean | null | undefined;
|
|
453
|
+
iptc?: "allow" | "block" | null | undefined;
|
|
454
|
+
lossless?: boolean | null | undefined;
|
|
455
|
+
markAlign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
456
|
+
ma?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
457
|
+
markalign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
458
|
+
markAlpha?: number | null | undefined;
|
|
459
|
+
markalpha?: number | null | undefined;
|
|
460
|
+
malph?: number | null | undefined;
|
|
461
|
+
markBase?: string | null | undefined;
|
|
462
|
+
mb?: string | null | undefined;
|
|
463
|
+
markbase?: string | null | undefined;
|
|
464
|
+
markFit?: "crop" | "fill" | "clip" | "scale" | "max" | null | undefined;
|
|
465
|
+
mf?: "crop" | "fill" | "clip" | "scale" | "max" | null | undefined;
|
|
466
|
+
markfit?: "crop" | "fill" | "clip" | "scale" | "max" | null | undefined;
|
|
467
|
+
markH?: number | null | undefined;
|
|
468
|
+
mh?: number | null | undefined;
|
|
469
|
+
markh?: number | null | undefined;
|
|
470
|
+
markPad?: number | null | undefined;
|
|
471
|
+
mp?: number | null | undefined;
|
|
472
|
+
markpad?: number | null | undefined;
|
|
473
|
+
markRot?: number | null | undefined;
|
|
474
|
+
markScale?: number | null | undefined;
|
|
475
|
+
ms?: number | null | undefined;
|
|
476
|
+
markscale?: number | null | undefined;
|
|
477
|
+
markTile?: "grid" | null | undefined;
|
|
478
|
+
mtile?: "grid" | null | undefined;
|
|
479
|
+
marktile?: "grid" | null | undefined;
|
|
480
|
+
markW?: number | null | undefined;
|
|
481
|
+
mw?: number | null | undefined;
|
|
482
|
+
markw?: number | null | undefined;
|
|
483
|
+
markX?: number | null | undefined;
|
|
484
|
+
mx?: number | null | undefined;
|
|
485
|
+
markx?: number | null | undefined;
|
|
486
|
+
markY?: number | null | undefined;
|
|
487
|
+
my?: number | null | undefined;
|
|
488
|
+
marky?: number | null | undefined;
|
|
489
|
+
mark?: string | null | undefined;
|
|
490
|
+
m?: string | null | undefined;
|
|
491
|
+
maskBg?: string | null | undefined;
|
|
492
|
+
maskbg?: string | null | undefined;
|
|
493
|
+
mask?: string | null | undefined;
|
|
494
|
+
maxH?: number | null | undefined;
|
|
495
|
+
maxHeight?: number | null | undefined;
|
|
496
|
+
maxW?: number | null | undefined;
|
|
497
|
+
maxWidth?: number | null | undefined;
|
|
498
|
+
minH?: number | null | undefined;
|
|
499
|
+
minHeight?: number | null | undefined;
|
|
500
|
+
minW?: number | null | undefined;
|
|
501
|
+
minWidth?: number | null | undefined;
|
|
502
|
+
monochrome?: string | null | undefined;
|
|
503
|
+
mono?: string | null | undefined;
|
|
504
|
+
nr?: number | null | undefined;
|
|
505
|
+
nrs?: number | null | undefined;
|
|
506
|
+
orient?: 0 | 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 90 | 180 | 270 | null | undefined;
|
|
507
|
+
or?: 0 | 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 90 | 180 | 270 | null | undefined;
|
|
508
|
+
padBottom?: number | null | undefined;
|
|
509
|
+
padLeft?: number | null | undefined;
|
|
510
|
+
padRight?: number | null | undefined;
|
|
511
|
+
padTop?: number | null | undefined;
|
|
512
|
+
pad?: number | null | undefined;
|
|
513
|
+
page?: number | null | undefined;
|
|
514
|
+
palette?: "json" | "css" | null | undefined;
|
|
515
|
+
pdfAnnotation?: boolean | null | undefined;
|
|
516
|
+
annotation?: boolean | null | undefined;
|
|
517
|
+
prefix?: string | null | undefined;
|
|
518
|
+
px?: number | null | undefined;
|
|
519
|
+
q?: number | null | undefined;
|
|
520
|
+
rect?: [number | "left" | "right" | "center", number | "top" | "bottom" | "middle", number, number] | null | undefined;
|
|
521
|
+
rot?: number | null | undefined;
|
|
522
|
+
sat?: number | null | undefined;
|
|
523
|
+
sepia?: number | null | undefined;
|
|
524
|
+
shad?: number | null | undefined;
|
|
525
|
+
sharp?: number | null | undefined;
|
|
526
|
+
transparency?: "grid" | null | undefined;
|
|
527
|
+
trimColor?: string | null | undefined;
|
|
528
|
+
trimcolor?: string | null | undefined;
|
|
529
|
+
trimMd?: number | null | undefined;
|
|
530
|
+
trimmd?: number | null | undefined;
|
|
531
|
+
trimPad?: number | null | undefined;
|
|
532
|
+
trimpad?: number | null | undefined;
|
|
533
|
+
trimSd?: number | null | undefined;
|
|
534
|
+
trimsd?: number | null | undefined;
|
|
535
|
+
trimTol?: number | null | undefined;
|
|
536
|
+
trimtol?: number | null | undefined;
|
|
537
|
+
trim?: "color" | "auto" | null | undefined;
|
|
538
|
+
txtAlign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
539
|
+
txtalign?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
540
|
+
ta?: ("top" | "bottom" | "middle" | "left" | "right" | "center")[] | null | undefined;
|
|
541
|
+
txtClip?: ("middle" | "start" | "end" | "ellipsis")[] | null | undefined;
|
|
542
|
+
txtclip?: ("middle" | "start" | "end" | "ellipsis")[] | null | undefined;
|
|
543
|
+
tcl?: ("middle" | "start" | "end" | "ellipsis")[] | null | undefined;
|
|
544
|
+
txtColor?: string | null | undefined;
|
|
545
|
+
txtcolor?: string | null | undefined;
|
|
546
|
+
txtClr?: string | null | undefined;
|
|
547
|
+
txtclr?: string | null | undefined;
|
|
548
|
+
tc?: string | null | undefined;
|
|
549
|
+
txtFit?: "max" | null | undefined;
|
|
550
|
+
txtfit?: "max" | null | undefined;
|
|
551
|
+
txtFont?: import("imgix-url-builder").Font | null | undefined;
|
|
552
|
+
tf?: import("imgix-url-builder").Font | null | undefined;
|
|
553
|
+
txtfont?: import("imgix-url-builder").Font | null | undefined;
|
|
554
|
+
txtLead?: number | null | undefined;
|
|
555
|
+
txtlead?: number | null | undefined;
|
|
556
|
+
txtLig?: 0 | 1 | 2 | null | undefined;
|
|
557
|
+
txtlig?: 0 | 1 | 2 | null | undefined;
|
|
558
|
+
txtLineColor?: string | null | undefined;
|
|
559
|
+
txtlinecolor?: string | null | undefined;
|
|
560
|
+
txtLineClr?: string | null | undefined;
|
|
561
|
+
txtlineclr?: string | null | undefined;
|
|
562
|
+
txtLine?: number | null | undefined;
|
|
563
|
+
txtline?: number | null | undefined;
|
|
564
|
+
tl?: number | null | undefined;
|
|
565
|
+
txtPad?: number | null | undefined;
|
|
566
|
+
txtpad?: number | null | undefined;
|
|
567
|
+
tp?: number | null | undefined;
|
|
568
|
+
txtShad?: number | null | undefined;
|
|
569
|
+
txtshad?: number | null | undefined;
|
|
570
|
+
tsh?: number | null | undefined;
|
|
571
|
+
txtSize?: number | null | undefined;
|
|
572
|
+
tsz?: number | null | undefined;
|
|
573
|
+
txtsize?: number | null | undefined;
|
|
574
|
+
txtTrack?: number | null | undefined;
|
|
575
|
+
txttrack?: number | null | undefined;
|
|
576
|
+
tt?: number | null | undefined;
|
|
577
|
+
txtWidth?: number | null | undefined;
|
|
578
|
+
txtwidth?: number | null | undefined;
|
|
579
|
+
txt?: string | null | undefined;
|
|
580
|
+
t?: string | null | undefined;
|
|
581
|
+
usm?: number | null | undefined;
|
|
582
|
+
usmrad?: number | null | undefined;
|
|
583
|
+
vib?: number | null | undefined;
|
|
584
|
+
w?: number | null | undefined;
|
|
585
|
+
width?: number | null | undefined;
|
|
586
|
+
s?: string | null | undefined;
|
|
587
|
+
} | undefined;
|
|
135
588
|
/**
|
|
136
589
|
* Declare an image as decorative by providing `alt=""`.
|
|
137
590
|
*
|
package/dist/PrismicImage.js
CHANGED
|
@@ -4,10 +4,9 @@ import { devMsg } from "./lib/devMsg.js";
|
|
|
4
4
|
import { imageThumbnail } from './_node_modules/@prismicio/client/dist/helpers/isFilled.js';
|
|
5
5
|
import { asImageWidthSrcSet } from './_node_modules/@prismicio/client/dist/helpers/asImageWidthSrcSet.js';
|
|
6
6
|
import { asImagePixelDensitySrcSet } from './_node_modules/@prismicio/client/dist/helpers/asImagePixelDensitySrcSet.js';
|
|
7
|
-
const PrismicImage = React.forwardRef(function PrismicImage2(
|
|
8
|
-
const { field, alt, fallbackAlt, imgixParams, widths, pixelDensities, ...restProps } = props;
|
|
7
|
+
const PrismicImage = React.forwardRef(function PrismicImage2({ field, alt, fallbackAlt, imgixParams = {}, widths, pixelDensities, ...restProps }, ref) {
|
|
9
8
|
if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {
|
|
10
|
-
if (typeof alt === "string" &&
|
|
9
|
+
if (typeof alt === "string" && alt !== "") {
|
|
11
10
|
console.warn(`[PrismicImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="". For more details, see ${devMsg("alt-must-be-an-empty-string")}`);
|
|
12
11
|
}
|
|
13
12
|
if (typeof fallbackAlt === "string" && fallbackAlt !== "") {
|
|
@@ -18,18 +17,24 @@ const PrismicImage = React.forwardRef(function PrismicImage2(props, ref) {
|
|
|
18
17
|
}
|
|
19
18
|
}
|
|
20
19
|
if (imageThumbnail(field)) {
|
|
20
|
+
const resolvedImgixParams = imgixParams;
|
|
21
|
+
for (const x in imgixParams) {
|
|
22
|
+
if (resolvedImgixParams[x] === null) {
|
|
23
|
+
resolvedImgixParams[x] = void 0;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
21
26
|
let src;
|
|
22
27
|
let srcSet;
|
|
23
28
|
if (widths || !pixelDensities) {
|
|
24
29
|
const res = asImageWidthSrcSet(field, {
|
|
25
|
-
...
|
|
30
|
+
...resolvedImgixParams,
|
|
26
31
|
widths: widths === "defaults" ? void 0 : widths
|
|
27
32
|
});
|
|
28
33
|
src = res.src;
|
|
29
34
|
srcSet = res.srcset;
|
|
30
35
|
} else if (pixelDensities) {
|
|
31
36
|
const res = asImagePixelDensitySrcSet(field, {
|
|
32
|
-
...
|
|
37
|
+
...resolvedImgixParams,
|
|
33
38
|
pixelDensities: pixelDensities === "defaults" ? void 0 : pixelDensities
|
|
34
39
|
});
|
|
35
40
|
src = res.src;
|
package/dist/PrismicImage.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrismicImage.js","sources":["../../src/PrismicImage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as prismic from \"@prismicio/client\";\n\nimport { devMsg } from \"./lib/devMsg\";\n\n/**\n * Props for `<PrismicImage>`.\n */\nexport type PrismicImageProps = Omit<\n\tReact.DetailedHTMLProps<\n\t\tReact.ImgHTMLAttributes<HTMLImageElement>,\n\t\tHTMLImageElement\n\t>,\n\t\"src\" | \"srcset\" | \"alt\"\n> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismic.ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * See: https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?:
|
|
1
|
+
{"version":3,"file":"PrismicImage.js","sources":["../../src/PrismicImage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as prismic from \"@prismicio/client\";\nimport { ImgixURLParams } from \"imgix-url-builder\";\n\nimport { devMsg } from \"./lib/devMsg\";\n\n/**\n * Props for `<PrismicImage>`.\n */\nexport type PrismicImageProps = Omit<\n\tReact.DetailedHTMLProps<\n\t\tReact.ImgHTMLAttributes<HTMLImageElement>,\n\t\tHTMLImageElement\n\t>,\n\t\"src\" | \"srcset\" | \"alt\"\n> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismic.ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * See: https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: { [P in keyof ImgixURLParams]: ImgixURLParams[P] | null };\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\";\n\n\t/**\n\t * Declare an image as decorative only if the Image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\";\n} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Widths used to build a `srcset` value for the Image field.\n\t\t\t\t *\n\t\t\t\t * If a `widths` prop is not given or `\"defaults\"` is passed, the\n\t\t\t\t * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,\n\t\t\t\t * 3840.\n\t\t\t\t *\n\t\t\t\t * If the Image field contains responsive views, each responsive view\n\t\t\t\t * can be used as a width in the resulting `srcset` by passing\n\t\t\t\t * `\"thumbnails\"` as the `widths` prop.\n\t\t\t\t */\n\t\t\t\twidths?:\n\t\t\t\t\t| NonNullable<\n\t\t\t\t\t\t\tParameters<typeof prismic.asImageWidthSrcSet>[1]\n\t\t\t\t\t >[\"widths\"]\n\t\t\t\t\t| \"defaults\";\n\t\t\t\t/**\n\t\t\t\t * Not used when the `widths` prop is used.\n\t\t\t\t */\n\t\t\t\tpixelDensities?: never;\n\t\t }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Not used when the `widths` prop is used.\n\t\t\t\t */\n\t\t\t\twidths?: never;\n\t\t\t\t/**\n\t\t\t\t * Pixel densities used to build a `srcset` value for the Image field.\n\t\t\t\t *\n\t\t\t\t * If a `pixelDensities` prop is passed `\"defaults\"`, the following\n\t\t\t\t * pixel densities will be used: 1, 2, 3.\n\t\t\t\t */\n\t\t\t\tpixelDensities:\n\t\t\t\t\t| NonNullable<\n\t\t\t\t\t\t\tParameters<typeof prismic.asImagePixelDensitySrcSet>[1]\n\t\t\t\t\t >[\"pixelDensities\"]\n\t\t\t\t\t| \"defaults\";\n\t\t }\n\t);\n\n/**\n * React component that renders an image from a Prismic Image field or one of\n * its thumbnails. It will automatically set the `alt` attribute using the Image\n * field's `alt` property.\n *\n * By default, a widths-based srcset will be used to support responsive images.\n * This ensures only the smallest image needed for a browser is downloaded.\n *\n * To use a pixel-density-based srcset, use the `pixelDensities` prop. Default\n * pixel densities can be used by using `pixelDensities=\"defaults\"`.\n *\n * **Note**: If you are using a framework that has a native image component,\n * such as Next.js and Gatsby, prefer using those image components instead. They\n * can provide deeper framework integration than `<PrismicImage>`.\n *\n * @param props - Props for the component.\n *\n * @returns A responsive image component for the given Image field.\n */\nexport const PrismicImage = React.forwardRef(function PrismicImage(\n\t{\n\t\tfield,\n\t\talt,\n\t\tfallbackAlt,\n\t\timgixParams = {},\n\t\twidths,\n\t\tpixelDensities,\n\t\t...restProps\n\t}: PrismicImageProps,\n\tref: React.ForwardedRef<HTMLImageElement>,\n): JSX.Element | null {\n\tif (\n\t\ttypeof process !== \"undefined\" &&\n\t\tprocess.env.NODE_ENV === \"development\"\n\t) {\n\t\tif (typeof alt === \"string\" && alt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"alt\" prop can only be used to declare an image as decorative by passing an empty string (alt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"alt\" prop or changing it to alt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\n\t\tif (typeof fallbackAlt === \"string\" && fallbackAlt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"fallbackAlt\" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"fallbackAlt\" prop or changing it to fallbackAlt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\n\t\tif (widths && pixelDensities) {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] Only one of \"widths\" or \"pixelDensities\" props can be provided. You can resolve this warning by removing either the \"widths\" or \"pixelDensities\" prop. \"widths\" will be used in this case.`,\n\t\t\t);\n\t\t}\n\t}\n\n\tif (prismic.isFilled.imageThumbnail(field)) {\n\t\tconst resolvedImgixParams = imgixParams;\n\t\tfor (const x in imgixParams) {\n\t\t\tif (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {\n\t\t\t\tresolvedImgixParams[x as keyof typeof resolvedImgixParams] = undefined;\n\t\t\t}\n\t\t}\n\n\t\tlet src: string | undefined;\n\t\tlet srcSet: string | undefined;\n\n\t\tif (widths || !pixelDensities) {\n\t\t\tconst res = prismic.asImageWidthSrcSet(field, {\n\t\t\t\t...resolvedImgixParams,\n\t\t\t\twidths: widths === \"defaults\" ? undefined : widths,\n\t\t\t} as ImgixURLParams);\n\n\t\t\tsrc = res.src;\n\t\t\tsrcSet = res.srcset;\n\t\t} else if (pixelDensities) {\n\t\t\tconst res = prismic.asImagePixelDensitySrcSet(field, {\n\t\t\t\t...resolvedImgixParams,\n\t\t\t\tpixelDensities:\n\t\t\t\t\tpixelDensities === \"defaults\" ? undefined : pixelDensities,\n\t\t\t} as ImgixURLParams);\n\n\t\t\tsrc = res.src;\n\t\t\tsrcSet = res.srcset;\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\tref={ref}\n\t\t\t\tsrc={src}\n\t\t\t\tsrcSet={srcSet}\n\t\t\t\talt={alt ?? (field.alt || fallbackAlt)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n});\n"],"names":["PrismicImage","prismic.isFilled.imageThumbnail","prismic.asImageWidthSrcSet","prismic.asImagePixelDensitySrcSet"],"mappings":";;;;;;AAyGO,MAAM,eAAe,MAAM,WAAW,SAASA,cACrD,EACC,OACA,KACA,aACA,cAAc,CACd,GAAA,QACA,gBACA,GAAG,aAEJ,KAAyC;AAEzC,MACC,OAAO,YAAY,eACnB,QAAQ,IAAI,aAAa,eACxB;AACD,QAAI,OAAO,QAAQ,YAAY,QAAQ,IAAI;AAC1C,cAAQ,KACP,qQAAqQ,OACpQ,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAO,gBAAgB,YAAY,gBAAgB,IAAI;AAC1D,cAAQ,KACP,qSAAqS,OACpS,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,UAAU,gBAAgB;AAC7B,cAAQ,KACP,2MAA2M;AAAA,IAE5M;AAAA,EACD;AAED,MAAIC,eAAgC,KAAK,GAAG;AAC3C,UAAM,sBAAsB;AAC5B,eAAW,KAAK,aAAa;AACxB,UAAA,oBAAoB,CAAqC,MAAM,MAAM;AACxE,4BAAoB,CAAqC,IAAI;AAAA,MAC7D;AAAA,IACD;AAEG,QAAA;AACA,QAAA;AAEA,QAAA,UAAU,CAAC,gBAAgB;AACxB,YAAA,MAAMC,mBAA2B,OAAO;AAAA,QAC7C,GAAG;AAAA,QACH,QAAQ,WAAW,aAAa,SAAY;AAAA,MAAA,CAC1B;AAEnB,YAAM,IAAI;AACV,eAAS,IAAI;AAAA,eACH,gBAAgB;AACpB,YAAA,MAAMC,0BAAkC,OAAO;AAAA,QACpD,GAAG;AAAA,QACH,gBACC,mBAAmB,aAAa,SAAY;AAAA,MAAA,CAC3B;AAEnB,YAAM,IAAI;AACV,eAAS,IAAI;AAAA,IACb;AAGA,WAAA,oBAAC,OACA,EAAA,KACA,KACA,QACA,KAAK,QAAQ,MAAM,OAAO,cAC1B,GAAI,UAAU,CAAA;AAAA,EAAA,OAGV;AACC,WAAA;AAAA,EACP;AACF,CAAC;"}
|
package/dist/package.json.cjs
CHANGED
package/dist/package.json.js
CHANGED
package/package.json
CHANGED
package/src/PrismicImage.tsx
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import * as prismic from "@prismicio/client";
|
|
3
|
+
import { ImgixURLParams } from "imgix-url-builder";
|
|
3
4
|
|
|
4
5
|
import { devMsg } from "./lib/devMsg";
|
|
5
6
|
|
|
@@ -23,7 +24,7 @@ export type PrismicImageProps = Omit<
|
|
|
23
24
|
*
|
|
24
25
|
* See: https://docs.imgix.com/apis/rendering
|
|
25
26
|
*/
|
|
26
|
-
imgixParams?:
|
|
27
|
+
imgixParams?: { [P in keyof ImgixURLParams]: ImgixURLParams[P] | null };
|
|
27
28
|
|
|
28
29
|
/**
|
|
29
30
|
* Declare an image as decorative by providing `alt=""`.
|
|
@@ -103,24 +104,22 @@ export type PrismicImageProps = Omit<
|
|
|
103
104
|
* @returns A responsive image component for the given Image field.
|
|
104
105
|
*/
|
|
105
106
|
export const PrismicImage = React.forwardRef(function PrismicImage(
|
|
106
|
-
|
|
107
|
-
ref: React.ForwardedRef<HTMLImageElement>,
|
|
108
|
-
): JSX.Element | null {
|
|
109
|
-
const {
|
|
107
|
+
{
|
|
110
108
|
field,
|
|
111
109
|
alt,
|
|
112
110
|
fallbackAlt,
|
|
113
|
-
imgixParams,
|
|
111
|
+
imgixParams = {},
|
|
114
112
|
widths,
|
|
115
113
|
pixelDensities,
|
|
116
114
|
...restProps
|
|
117
|
-
}
|
|
118
|
-
|
|
115
|
+
}: PrismicImageProps,
|
|
116
|
+
ref: React.ForwardedRef<HTMLImageElement>,
|
|
117
|
+
): JSX.Element | null {
|
|
119
118
|
if (
|
|
120
119
|
typeof process !== "undefined" &&
|
|
121
120
|
process.env.NODE_ENV === "development"
|
|
122
121
|
) {
|
|
123
|
-
if (typeof alt === "string" &&
|
|
122
|
+
if (typeof alt === "string" && alt !== "") {
|
|
124
123
|
console.warn(
|
|
125
124
|
`[PrismicImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="". For more details, see ${devMsg(
|
|
126
125
|
"alt-must-be-an-empty-string",
|
|
@@ -144,23 +143,30 @@ export const PrismicImage = React.forwardRef(function PrismicImage(
|
|
|
144
143
|
}
|
|
145
144
|
|
|
146
145
|
if (prismic.isFilled.imageThumbnail(field)) {
|
|
146
|
+
const resolvedImgixParams = imgixParams;
|
|
147
|
+
for (const x in imgixParams) {
|
|
148
|
+
if (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {
|
|
149
|
+
resolvedImgixParams[x as keyof typeof resolvedImgixParams] = undefined;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
147
153
|
let src: string | undefined;
|
|
148
154
|
let srcSet: string | undefined;
|
|
149
155
|
|
|
150
156
|
if (widths || !pixelDensities) {
|
|
151
157
|
const res = prismic.asImageWidthSrcSet(field, {
|
|
152
|
-
...
|
|
158
|
+
...resolvedImgixParams,
|
|
153
159
|
widths: widths === "defaults" ? undefined : widths,
|
|
154
|
-
});
|
|
160
|
+
} as ImgixURLParams);
|
|
155
161
|
|
|
156
162
|
src = res.src;
|
|
157
163
|
srcSet = res.srcset;
|
|
158
164
|
} else if (pixelDensities) {
|
|
159
165
|
const res = prismic.asImagePixelDensitySrcSet(field, {
|
|
160
|
-
...
|
|
166
|
+
...resolvedImgixParams,
|
|
161
167
|
pixelDensities:
|
|
162
168
|
pixelDensities === "defaults" ? undefined : pixelDensities,
|
|
163
|
-
});
|
|
169
|
+
} as ImgixURLParams);
|
|
164
170
|
|
|
165
171
|
src = res.src;
|
|
166
172
|
srcSet = res.srcset;
|