@contentful/f36-skeleton
Advanced tools
Comparing version 4.0.1-next-v4-9789.2434 to 4.0.1-next-v4-9898.2438
178
dist/main.js
@@ -1,2 +0,178 @@ | ||
var e=f(require("@babel/runtime/helpers/extends")),t=require("react"),n=f(t),{useCallback:r}=t,{Box:o,useId:i}=require("@contentful/f36-core"),{TableRow:a,TableCell:l}=require("@contentful/f36-table");function s(e,t,n,r){Object.defineProperty(e,t,{get:n,set:r,enumerable:!0,configurable:!0})}function f(e){return e&&e.__esModule?e.default:e}var c={};function u({numberOfLines:e=1,offsetLeft:t=0,offsetTop:o=0,lineHeight:i=21,marginBottom:a=20,width:l}){const s=r((e=>l||(e?"80%":"100%")),[l]);return n.createElement(n.Fragment,null,Array.from(Array(e)).map(((r,l)=>n.createElement("rect",{key:`skeleton-display-text-${l}`,x:t,y:l*(+i+ +a)+ +o,rx:"0",ry:"0",width:s(e>1&&e-l==1),height:i}))))}s(c,"SkeletonBodyText",(()=>m)),s(c,"SkeletonContainer",(()=>d)),s(c,"SkeletonDisplayText",(()=>p)),s(c,"SkeletonImage",(()=>g)),s(c,"SkeletonRow",(()=>b)),s(c,"SkeletonText",(()=>u));const m=({lineHeight:t=16,marginBottom:r=8,numberOfLines:o=2,offsetLeft:i=0,offsetTop:a=0,...l})=>n.createElement(u,e({lineHeight:t,marginBottom:r,numberOfLines:o>0?o:1,offsetLeft:i,offsetTop:a},l));function d({children:t,testId:r="cf-ui-skeleton-form",ariaLabel:a="Loading component...",width:l="100%",height:s="100%",preserveAspectRatio:f,backgroundColor:c="#e5ebed",backgroundOpacity:u=1,isAnimated:m=!0,speed:d=2,foregroundColor:p="#f7f9fa",foregroundOpacity:g=1,svgWidth:h="100%",svgHeight:b="100%",clipId:y,gradientId:E,animateId:k,...$}){const L=i(y,"cf-ui-skeleton-clip"),O=i(E,"cf-ui-skeleton-clip-gradient"),v=i(void 0,"animation"),C=k||v;return n.createElement(o,e({as:"svg",display:"block",role:"img","aria-label":a,preserveAspectRatio:f,width:h,height:b,testId:r},$),a?n.createElement("title",null,a):null,n.createElement("rect",{x:"0",y:"0",width:l,height:s,clipPath:`url(#${L})`,style:{fill:`url(#${O})`}}),n.createElement("defs",null,n.createElement("clipPath",{id:L},t),n.createElement("linearGradient",{id:O},n.createElement("stop",{offset:"0%",stopColor:c,stopOpacity:u},m&&n.createElement("animate",{id:C,attributeName:"stop-color",values:`${c}; ${p}; ${c}`,dur:`${d}s`,repeatCount:"indefinite"})),n.createElement("stop",{offset:"50%",stopColor:p,stopOpacity:g},m&&n.createElement("animate",{attributeName:"stop-color",values:`${c}; ${p}; ${c}`,begin:`${C}.begin+0.25s`,dur:`${d}s`,repeatCount:"indefinite"})),n.createElement("stop",{offset:"100%",stopColor:c,stopOpacity:u},m&&n.createElement("animate",{attributeName:"stop-color",begin:`${C}.begin+0.5s`,values:`${c}; ${p}; ${c}`,dur:`${d}s`,repeatCount:"indefinite"})))))}function p({lineHeight:t=21,marginBottom:r=20,numberOfLines:o=1,offsetLeft:i=0,offsetTop:a=0,width:l=100,...s}){return n.createElement(u,e({lineHeight:t,marginBottom:r,numberOfLines:o,offsetLeft:i,offsetTop:a,width:l},s))}function g({testId:t="cf-ui-skeleton-image",offsetLeft:r,offsetTop:o,width:i=70,height:a=70,radiusX:l=0,radiusY:s=0,...f}){return n.createElement("rect",e({x:r,y:o,rx:l,ry:s,width:i,height:a,"data-test-id":t},f))}const h=()=>n.createElement(l,null,n.createElement(d,{svgHeight:16},n.createElement(m,{numberOfLines:1}))),b=({columnCount:e=5,rowCount:t=1})=>n.createElement(n.Fragment,null,Array.from(Array(t)).map(((t,r)=>n.createElement(a,{key:r},Array.from(Array(e)).map(((e,t)=>n.createElement(h,{key:t})))))));var y,E;y=module.exports,E=c,Object.keys(E).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(y,e,{enumerable:!0,get:function(){return E[e]}})})); | ||
var $gbt2b$react = require("react"); | ||
var $gbt2b$contentfulf36core = require("@contentful/f36-core"); | ||
var $gbt2b$contentfulf36table = require("@contentful/f36-table"); | ||
function $parcel$export(e, n, v, s) { | ||
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
} | ||
function $parcel$interopDefault(a) { | ||
return a && a.__esModule ? a.default : a; | ||
} | ||
$parcel$export(module.exports, "SkeletonBodyText", () => $b73b2a08349178b5$export$919fca0c481496d5); | ||
$parcel$export(module.exports, "SkeletonContainer", () => $8e88ffccb54a3f30$export$66b8cea0c448285); | ||
$parcel$export(module.exports, "SkeletonDisplayText", () => $43f386fc7c923d82$export$406e2958a1a2b65d); | ||
$parcel$export(module.exports, "SkeletonImage", () => $e6046a5136031fdb$export$d72bf888bd1ed2bc); | ||
$parcel$export(module.exports, "SkeletonRow", () => $78eceaa2147bc1c7$export$8bbcb87f63697989); | ||
$parcel$export(module.exports, "SkeletonText", () => $041187023cd1b680$export$cb6ddd830302c2a8); | ||
function $041187023cd1b680$export$cb6ddd830302c2a8({ numberOfLines: numberOfLines = 1 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , lineHeight: lineHeight = 21 , marginBottom: marginBottom = 20 , width: width }) { | ||
const getLineWidth = $gbt2b$react.useCallback((lastLine)=>{ | ||
if (width) return width; | ||
return lastLine ? '80%' : '100%'; | ||
}, [ | ||
width | ||
]); | ||
return(/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($parcel$interopDefault($gbt2b$react).Fragment, null, Array.from(Array(numberOfLines)).map((_, index)=>/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("rect", { | ||
key: `skeleton-display-text-${index}`, | ||
x: offsetLeft, | ||
y: index * (+lineHeight + +marginBottom) + +offsetTop // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
, | ||
rx: "0", | ||
ry: "0", | ||
width: getLineWidth(numberOfLines > 1 && numberOfLines - index === 1 // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
), | ||
height: lineHeight | ||
}) | ||
))); | ||
} | ||
const $b73b2a08349178b5$export$919fca0c481496d5 = ({ lineHeight: lineHeight = 16 , marginBottom: marginBottom = 8 , numberOfLines: numberOfLines = 2 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , ...otherProps })=>{ | ||
return(/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($041187023cd1b680$export$cb6ddd830302c2a8, { | ||
lineHeight: lineHeight, | ||
marginBottom: marginBottom, | ||
numberOfLines: numberOfLines > 0 // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
? numberOfLines : 1, | ||
offsetLeft: offsetLeft, | ||
offsetTop: offsetTop, | ||
...otherProps | ||
})); | ||
}; | ||
function $8e88ffccb54a3f30$export$66b8cea0c448285({ children: children , testId: testId = 'cf-ui-skeleton-form' , ariaLabel: ariaLabel = 'Loading component...' , width: width = '100%' , height: height = '100%' , preserveAspectRatio: preserveAspectRatio , backgroundColor: backgroundColor = '#e5ebed' , backgroundOpacity: backgroundOpacity = 1 , isAnimated: isAnimated = true , speed: speed = 2 , foregroundColor: foregroundColor = '#f7f9fa' , foregroundOpacity: foregroundOpacity = 1 , svgWidth: svgWidth = '100%' , svgHeight: svgHeight = '100%' , clipId: clipId , gradientId: gradientId , animateId: animateId , ...otherProps }) { | ||
const uniqueClipId = $gbt2b$contentfulf36core.useId(clipId, 'cf-ui-skeleton-clip'); | ||
const uniqueGradientId = $gbt2b$contentfulf36core.useId(gradientId, 'cf-ui-skeleton-clip-gradient'); | ||
const randomAnimateId = $gbt2b$contentfulf36core.useId(undefined, 'animation'); | ||
const uniqueAnimateId = animateId || randomAnimateId; | ||
return(/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($gbt2b$contentfulf36core.Box, { | ||
as: "svg", | ||
display: "block", | ||
role: "img", | ||
"aria-label": ariaLabel, | ||
preserveAspectRatio: preserveAspectRatio, | ||
width: svgWidth, | ||
height: svgHeight, | ||
testId: testId, | ||
...otherProps | ||
}, ariaLabel ? /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("title", null, ariaLabel) : null, /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("rect", { | ||
x: "0", | ||
y: "0", | ||
width: width, | ||
height: height, | ||
clipPath: `url(#${uniqueClipId})`, | ||
style: { | ||
fill: `url(#${uniqueGradientId})` | ||
} | ||
}), /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("defs", null, /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("clipPath", { | ||
id: uniqueClipId | ||
}, children), /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("linearGradient", { | ||
id: uniqueGradientId | ||
}, /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("stop", { | ||
offset: "0%", | ||
stopColor: backgroundColor, | ||
stopOpacity: backgroundOpacity | ||
}, isAnimated && /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("animate", { | ||
id: uniqueAnimateId, | ||
attributeName: "stop-color", | ||
values: `${backgroundColor}; ${foregroundColor}; ${backgroundColor}`, | ||
dur: `${speed}s`, | ||
repeatCount: "indefinite" | ||
})), /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("stop", { | ||
offset: "50%", | ||
stopColor: foregroundColor, | ||
stopOpacity: foregroundOpacity | ||
}, isAnimated && /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("animate", { | ||
attributeName: "stop-color", | ||
values: `${backgroundColor}; ${foregroundColor}; ${backgroundColor}`, | ||
begin: `${uniqueAnimateId}.begin+0.25s`, | ||
dur: `${speed}s`, | ||
repeatCount: "indefinite" | ||
})), /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("stop", { | ||
offset: "100%", | ||
stopColor: backgroundColor, | ||
stopOpacity: backgroundOpacity | ||
}, isAnimated && /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("animate", { | ||
attributeName: "stop-color", | ||
begin: `${uniqueAnimateId}.begin+0.5s`, | ||
values: `${backgroundColor}; ${foregroundColor}; ${backgroundColor}`, | ||
dur: `${speed}s`, | ||
repeatCount: "indefinite" | ||
})))))); | ||
} | ||
function $43f386fc7c923d82$export$406e2958a1a2b65d({ lineHeight: lineHeight = 21 , marginBottom: marginBottom = 20 , numberOfLines: numberOfLines = 1 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , width: width = 100 , ...otherProps }) { | ||
return(/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($041187023cd1b680$export$cb6ddd830302c2a8, { | ||
lineHeight: lineHeight, | ||
marginBottom: marginBottom, | ||
numberOfLines: numberOfLines, | ||
offsetLeft: offsetLeft, | ||
offsetTop: offsetTop, | ||
width: width, | ||
...otherProps | ||
})); | ||
} | ||
function $e6046a5136031fdb$export$d72bf888bd1ed2bc({ testId: testId = 'cf-ui-skeleton-image' , offsetLeft: offsetLeft , offsetTop: offsetTop , width: width = 70 , height: height = 70 , radiusX: radiusX = 0 , radiusY: radiusY = 0 , ...otherProps }) { | ||
return(/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("rect", { | ||
x: offsetLeft, | ||
y: offsetTop, | ||
rx: radiusX, | ||
ry: radiusY, | ||
width: width, | ||
height: height, | ||
"data-test-id": testId, | ||
...otherProps | ||
})); | ||
} | ||
const $ce475dd116a738bd$export$46c6672a9bd39b51 = ()=>{ | ||
return(/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($gbt2b$contentfulf36table.TableCell, null, /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($8e88ffccb54a3f30$export$66b8cea0c448285, { | ||
svgHeight: 16 | ||
}, /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($b73b2a08349178b5$export$919fca0c481496d5, { | ||
numberOfLines: 1 | ||
})))); | ||
}; | ||
const $78eceaa2147bc1c7$export$8bbcb87f63697989 = ({ columnCount: columnCount = 5 , rowCount: rowCount = 1 })=>{ | ||
return(/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($parcel$interopDefault($gbt2b$react).Fragment, null, Array.from(Array(rowCount)).map((_, rowIndex)=>/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($gbt2b$contentfulf36table.TableRow, { | ||
key: rowIndex | ||
}, Array.from(Array(columnCount)).map((_, cellIndex)=>/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($ce475dd116a738bd$export$46c6672a9bd39b51, { | ||
key: cellIndex | ||
}) | ||
)) | ||
))); | ||
}; | ||
//# sourceMappingURL=main.js.map |
@@ -1,2 +0,166 @@ | ||
import e from"@babel/runtime/helpers/esm/extends";import t,{useCallback as n}from"react";import{Box as o,useId as r}from"@contentful/f36-core";import{TableRow as a,TableCell as i}from"@contentful/f36-table";function l(e,t,n,o){Object.defineProperty(e,t,{get:n,set:o,enumerable:!0,configurable:!0})}var s={};function f({numberOfLines:e=1,offsetLeft:o=0,offsetTop:r=0,lineHeight:a=21,marginBottom:i=20,width:l}){const s=n((e=>l||(e?"80%":"100%")),[l]);return t.createElement(t.Fragment,null,Array.from(Array(e)).map(((n,l)=>t.createElement("rect",{key:`skeleton-display-text-${l}`,x:o,y:l*(+a+ +i)+ +r,rx:"0",ry:"0",width:s(e>1&&e-l==1),height:a}))))}l(s,"SkeletonBodyText",(()=>m)),l(s,"SkeletonContainer",(()=>c)),l(s,"SkeletonDisplayText",(()=>u)),l(s,"SkeletonImage",(()=>p)),l(s,"SkeletonRow",(()=>g)),l(s,"SkeletonText",(()=>f));const m=({lineHeight:n=16,marginBottom:o=8,numberOfLines:r=2,offsetLeft:a=0,offsetTop:i=0,...l})=>t.createElement(f,e({lineHeight:n,marginBottom:o,numberOfLines:r>0?r:1,offsetLeft:a,offsetTop:i},l));function c({children:n,testId:a="cf-ui-skeleton-form",ariaLabel:i="Loading component...",width:l="100%",height:s="100%",preserveAspectRatio:f,backgroundColor:m="#e5ebed",backgroundOpacity:c=1,isAnimated:u=!0,speed:p=2,foregroundColor:d="#f7f9fa",foregroundOpacity:g=1,svgWidth:h="100%",svgHeight:b="100%",clipId:y,gradientId:k,animateId:E,...$}){const x=r(y,"cf-ui-skeleton-clip"),C=r(k,"cf-ui-skeleton-clip-gradient"),L=r(void 0,"animation"),T=E||L;return t.createElement(o,e({as:"svg",display:"block",role:"img","aria-label":i,preserveAspectRatio:f,width:h,height:b,testId:a},$),i?t.createElement("title",null,i):null,t.createElement("rect",{x:"0",y:"0",width:l,height:s,clipPath:`url(#${x})`,style:{fill:`url(#${C})`}}),t.createElement("defs",null,t.createElement("clipPath",{id:x},n),t.createElement("linearGradient",{id:C},t.createElement("stop",{offset:"0%",stopColor:m,stopOpacity:c},u&&t.createElement("animate",{id:T,attributeName:"stop-color",values:`${m}; ${d}; ${m}`,dur:`${p}s`,repeatCount:"indefinite"})),t.createElement("stop",{offset:"50%",stopColor:d,stopOpacity:g},u&&t.createElement("animate",{attributeName:"stop-color",values:`${m}; ${d}; ${m}`,begin:`${T}.begin+0.25s`,dur:`${p}s`,repeatCount:"indefinite"})),t.createElement("stop",{offset:"100%",stopColor:m,stopOpacity:c},u&&t.createElement("animate",{attributeName:"stop-color",begin:`${T}.begin+0.5s`,values:`${m}; ${d}; ${m}`,dur:`${p}s`,repeatCount:"indefinite"})))))}function u({lineHeight:n=21,marginBottom:o=20,numberOfLines:r=1,offsetLeft:a=0,offsetTop:i=0,width:l=100,...s}){return t.createElement(f,e({lineHeight:n,marginBottom:o,numberOfLines:r,offsetLeft:a,offsetTop:i,width:l},s))}function p({testId:n="cf-ui-skeleton-image",offsetLeft:o,offsetTop:r,width:a=70,height:i=70,radiusX:l=0,radiusY:s=0,...f}){return t.createElement("rect",e({x:o,y:r,rx:l,ry:s,width:a,height:i,"data-test-id":n},f))}const d=()=>t.createElement(i,null,t.createElement(c,{svgHeight:16},t.createElement(m,{numberOfLines:1}))),g=({columnCount:e=5,rowCount:n=1})=>t.createElement(t.Fragment,null,Array.from(Array(n)).map(((n,o)=>t.createElement(a,{key:o},Array.from(Array(e)).map(((e,n)=>t.createElement(d,{key:n})))))));export{m as SkeletonBodyText,c as SkeletonContainer,u as SkeletonDisplayText,p as SkeletonImage,g as SkeletonRow,f as SkeletonText}; | ||
import $59JSH$react, {useCallback as $59JSH$useCallback} from "react"; | ||
import {useId as $59JSH$useId, Box as $59JSH$Box} from "@contentful/f36-core"; | ||
import {TableRow as $59JSH$TableRow, TableCell as $59JSH$TableCell} from "@contentful/f36-table"; | ||
function $00f6bdd671a67129$export$cb6ddd830302c2a8({ numberOfLines: numberOfLines = 1 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , lineHeight: lineHeight = 21 , marginBottom: marginBottom = 20 , width: width }) { | ||
const getLineWidth = $59JSH$useCallback((lastLine)=>{ | ||
if (width) return width; | ||
return lastLine ? '80%' : '100%'; | ||
}, [ | ||
width | ||
]); | ||
return(/*#__PURE__*/ $59JSH$react.createElement($59JSH$react.Fragment, null, Array.from(Array(numberOfLines)).map((_, index)=>/*#__PURE__*/ $59JSH$react.createElement("rect", { | ||
key: `skeleton-display-text-${index}`, | ||
x: offsetLeft, | ||
y: index * (+lineHeight + +marginBottom) + +offsetTop // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
, | ||
rx: "0", | ||
ry: "0", | ||
width: getLineWidth(numberOfLines > 1 && numberOfLines - index === 1 // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
), | ||
height: lineHeight | ||
}) | ||
))); | ||
} | ||
const $20cd7b984354214c$export$919fca0c481496d5 = ({ lineHeight: lineHeight = 16 , marginBottom: marginBottom = 8 , numberOfLines: numberOfLines = 2 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , ...otherProps })=>{ | ||
return(/*#__PURE__*/ $59JSH$react.createElement($00f6bdd671a67129$export$cb6ddd830302c2a8, { | ||
lineHeight: lineHeight, | ||
marginBottom: marginBottom, | ||
numberOfLines: numberOfLines > 0 // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
? numberOfLines : 1, | ||
offsetLeft: offsetLeft, | ||
offsetTop: offsetTop, | ||
...otherProps | ||
})); | ||
}; | ||
function $5ce6df81e0e6093a$export$66b8cea0c448285({ children: children , testId: testId = 'cf-ui-skeleton-form' , ariaLabel: ariaLabel = 'Loading component...' , width: width = '100%' , height: height = '100%' , preserveAspectRatio: preserveAspectRatio , backgroundColor: backgroundColor = '#e5ebed' , backgroundOpacity: backgroundOpacity = 1 , isAnimated: isAnimated = true , speed: speed = 2 , foregroundColor: foregroundColor = '#f7f9fa' , foregroundOpacity: foregroundOpacity = 1 , svgWidth: svgWidth = '100%' , svgHeight: svgHeight = '100%' , clipId: clipId , gradientId: gradientId , animateId: animateId , ...otherProps }) { | ||
const uniqueClipId = $59JSH$useId(clipId, 'cf-ui-skeleton-clip'); | ||
const uniqueGradientId = $59JSH$useId(gradientId, 'cf-ui-skeleton-clip-gradient'); | ||
const randomAnimateId = $59JSH$useId(undefined, 'animation'); | ||
const uniqueAnimateId = animateId || randomAnimateId; | ||
return(/*#__PURE__*/ $59JSH$react.createElement($59JSH$Box, { | ||
as: "svg", | ||
display: "block", | ||
role: "img", | ||
"aria-label": ariaLabel, | ||
preserveAspectRatio: preserveAspectRatio, | ||
width: svgWidth, | ||
height: svgHeight, | ||
testId: testId, | ||
...otherProps | ||
}, ariaLabel ? /*#__PURE__*/ $59JSH$react.createElement("title", null, ariaLabel) : null, /*#__PURE__*/ $59JSH$react.createElement("rect", { | ||
x: "0", | ||
y: "0", | ||
width: width, | ||
height: height, | ||
clipPath: `url(#${uniqueClipId})`, | ||
style: { | ||
fill: `url(#${uniqueGradientId})` | ||
} | ||
}), /*#__PURE__*/ $59JSH$react.createElement("defs", null, /*#__PURE__*/ $59JSH$react.createElement("clipPath", { | ||
id: uniqueClipId | ||
}, children), /*#__PURE__*/ $59JSH$react.createElement("linearGradient", { | ||
id: uniqueGradientId | ||
}, /*#__PURE__*/ $59JSH$react.createElement("stop", { | ||
offset: "0%", | ||
stopColor: backgroundColor, | ||
stopOpacity: backgroundOpacity | ||
}, isAnimated && /*#__PURE__*/ $59JSH$react.createElement("animate", { | ||
id: uniqueAnimateId, | ||
attributeName: "stop-color", | ||
values: `${backgroundColor}; ${foregroundColor}; ${backgroundColor}`, | ||
dur: `${speed}s`, | ||
repeatCount: "indefinite" | ||
})), /*#__PURE__*/ $59JSH$react.createElement("stop", { | ||
offset: "50%", | ||
stopColor: foregroundColor, | ||
stopOpacity: foregroundOpacity | ||
}, isAnimated && /*#__PURE__*/ $59JSH$react.createElement("animate", { | ||
attributeName: "stop-color", | ||
values: `${backgroundColor}; ${foregroundColor}; ${backgroundColor}`, | ||
begin: `${uniqueAnimateId}.begin+0.25s`, | ||
dur: `${speed}s`, | ||
repeatCount: "indefinite" | ||
})), /*#__PURE__*/ $59JSH$react.createElement("stop", { | ||
offset: "100%", | ||
stopColor: backgroundColor, | ||
stopOpacity: backgroundOpacity | ||
}, isAnimated && /*#__PURE__*/ $59JSH$react.createElement("animate", { | ||
attributeName: "stop-color", | ||
begin: `${uniqueAnimateId}.begin+0.5s`, | ||
values: `${backgroundColor}; ${foregroundColor}; ${backgroundColor}`, | ||
dur: `${speed}s`, | ||
repeatCount: "indefinite" | ||
})))))); | ||
} | ||
function $8d8b0c86f35f77bf$export$406e2958a1a2b65d({ lineHeight: lineHeight = 21 , marginBottom: marginBottom = 20 , numberOfLines: numberOfLines = 1 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , width: width = 100 , ...otherProps }) { | ||
return(/*#__PURE__*/ $59JSH$react.createElement($00f6bdd671a67129$export$cb6ddd830302c2a8, { | ||
lineHeight: lineHeight, | ||
marginBottom: marginBottom, | ||
numberOfLines: numberOfLines, | ||
offsetLeft: offsetLeft, | ||
offsetTop: offsetTop, | ||
width: width, | ||
...otherProps | ||
})); | ||
} | ||
function $fb0ca3c3a071df41$export$d72bf888bd1ed2bc({ testId: testId = 'cf-ui-skeleton-image' , offsetLeft: offsetLeft , offsetTop: offsetTop , width: width = 70 , height: height = 70 , radiusX: radiusX = 0 , radiusY: radiusY = 0 , ...otherProps }) { | ||
return(/*#__PURE__*/ $59JSH$react.createElement("rect", { | ||
x: offsetLeft, | ||
y: offsetTop, | ||
rx: radiusX, | ||
ry: radiusY, | ||
width: width, | ||
height: height, | ||
"data-test-id": testId, | ||
...otherProps | ||
})); | ||
} | ||
const $30c71ab4212f826c$export$46c6672a9bd39b51 = ()=>{ | ||
return(/*#__PURE__*/ $59JSH$react.createElement($59JSH$TableCell, null, /*#__PURE__*/ $59JSH$react.createElement($5ce6df81e0e6093a$export$66b8cea0c448285, { | ||
svgHeight: 16 | ||
}, /*#__PURE__*/ $59JSH$react.createElement($20cd7b984354214c$export$919fca0c481496d5, { | ||
numberOfLines: 1 | ||
})))); | ||
}; | ||
const $e08101ed77535408$export$8bbcb87f63697989 = ({ columnCount: columnCount = 5 , rowCount: rowCount = 1 })=>{ | ||
return(/*#__PURE__*/ $59JSH$react.createElement($59JSH$react.Fragment, null, Array.from(Array(rowCount)).map((_, rowIndex)=>/*#__PURE__*/ $59JSH$react.createElement($59JSH$TableRow, { | ||
key: rowIndex | ||
}, Array.from(Array(columnCount)).map((_, cellIndex)=>/*#__PURE__*/ $59JSH$react.createElement($30c71ab4212f826c$export$46c6672a9bd39b51, { | ||
key: cellIndex | ||
}) | ||
)) | ||
))); | ||
}; | ||
export {$20cd7b984354214c$export$919fca0c481496d5 as SkeletonBodyText, $5ce6df81e0e6093a$export$66b8cea0c448285 as SkeletonContainer, $8d8b0c86f35f77bf$export$406e2958a1a2b65d as SkeletonDisplayText, $fb0ca3c3a071df41$export$d72bf888bd1ed2bc as SkeletonImage, $e08101ed77535408$export$8bbcb87f63697989 as SkeletonRow, $00f6bdd671a67129$export$cb6ddd830302c2a8 as SkeletonText}; | ||
//# sourceMappingURL=module.js.map |
{ | ||
"name": "@contentful/f36-skeleton", | ||
"version": "4.0.1-next-v4-9789.2434+754dee05", | ||
"version": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
"description": "Forma 36: Skeleton component", | ||
"scripts": { | ||
"build": "parcel build index.ts" | ||
"build": "parcel build" | ||
}, | ||
"dependencies": { | ||
"@babel/runtime": "^7.6.2", | ||
"@contentful/f36-core": "4.0.1-next-v4-9789.2434+754dee05", | ||
"@contentful/f36-table": "4.0.1-next-v4-9789.2434+754dee05", | ||
"@contentful/f36-tokens": "4.0.1-next-v4-9789.2434+754dee05", | ||
"@contentful/f36-core": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
"@contentful/f36-table": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
"@contentful/f36-tokens": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
"emotion": "^10.0.17" | ||
@@ -36,3 +36,3 @@ }, | ||
}, | ||
"gitHead": "754dee05f9e188f1492231120e4449a9e4f1992d" | ||
"gitHead": "c14d4c99c0a87c8905dbe90d5f1dc38dd12d1008" | ||
} |
# @contentful/f36-skeleton | ||
This package is part of the pre-release. This means it is unsupported and subject to breaking changes without warning. | ||
Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components) | ||
### Table of contents | ||
- [`SkeletonContainer`](./src/SkeletonContainer/README.mdx) | ||
- [`SkeletonBodyText`](./src/SkeletonBodyText/README.mdx) | ||
- [`SkeletonDisplayText`](./src/SkeletonDisplayText/README.mdx) | ||
- [`SkeletonImage`](./src/SkeletonImage/README.mdx) | ||
- [`SkeletonRow`](./src/SkeletonRow/README.mdx) | ||
Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components). |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
75663
738
2
6