@twilio-paste/skeleton-loader
Advanced tools
# @twilio-paste/skeleton-loader | ||
## 1.0.3 | ||
### Patch Changes | ||
- [`91d20b99f`](https://github.com/twilio-labs/paste/commit/91d20b99f5697b91c3e84d3aa778c94938677120) [#2328](https://github.com/twilio-labs/paste/pull/2328) Thanks [@TheSisb](https://github.com/TheSisb)! - [Skeleton-Loader]: Small animation tweak so that the highlight fully moves through the skeleton loader correctly at the end state. | ||
## 1.0.2 | ||
@@ -4,0 +10,0 @@ |
@@ -40,3 +40,4 @@ var __defProp = Object.defineProperty; | ||
var StyledAnimatedSkeleton = styled(AnimatedSkeleton)(() => css({ | ||
background: `linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.4) 60%, transparent)` | ||
background: `linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.4) 60%, transparent)`, | ||
transform: `translateX(-100%) skew(155deg)` | ||
})); | ||
@@ -46,3 +47,3 @@ var animatedConfig = { | ||
from: { translateX: "-100%", skew: "155deg" }, | ||
to: { translateX: "100%", skew: "155deg" }, | ||
to: { translateX: "105%", skew: "155deg" }, | ||
config: { | ||
@@ -49,0 +50,0 @@ mass: 0.1, |
@@ -69,3 +69,4 @@ var __create = Object.create; | ||
var StyledAnimatedSkeleton = (0, import_styling_library.styled)(AnimatedSkeleton)(() => (0, import_styling_library.css)({ | ||
background: `linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.4) 60%, transparent)` | ||
background: `linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.4) 60%, transparent)`, | ||
transform: `translateX(-100%) skew(155deg)` | ||
})); | ||
@@ -75,3 +76,3 @@ var animatedConfig = { | ||
from: { translateX: "-100%", skew: "155deg" }, | ||
to: { translateX: "100%", skew: "155deg" }, | ||
to: { translateX: "105%", skew: "155deg" }, | ||
config: { | ||
@@ -78,0 +79,0 @@ mass: 0.1, |
@@ -1,1 +0,1 @@ | ||
var w=Object.defineProperty,v=Object.defineProperties;var T=Object.getOwnPropertyDescriptors;var a=Object.getOwnPropertySymbols;var s=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable;var l=(e,t,o)=>t in e?w(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,p=(e,t)=>{for(var o in t||(t={}))s.call(t,o)&&l(e,o,t[o]);if(a)for(var o of a(t))d.call(t,o)&&l(e,o,t[o]);return e},m=(e,t)=>v(e,T(t));var u=(e,t)=>{var o={};for(var r in e)s.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&a)for(var r of a(e))t.indexOf(r)<0&&d.call(e,r)&&(o[r]=e[r]);return o};import*as i from"react";import{useSpring as A,animated as H}from"@twilio-paste/animation-library";import{css as D,styled as M}from"@twilio-paste/styling-library";import{Box as c,safelySpreadBoxProps as O}from"@twilio-paste/box";var z=H(c),C=M(z)(()=>D({background:"linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.4) 60%, transparent)"})),N={loop:{delay:700,reset:!0},from:{translateX:"-100%",skew:"155deg"},to:{translateX:"100%",skew:"155deg"},config:{mass:.1,tension:80,friction:50}},W=i.forwardRef((X,P)=>{var n=X,{borderBottomLeftRadius:e,borderBottomRightRadius:t,borderRadius:o="borderRadius20",borderTopLeftRadius:r,borderTopRightRadius:g,element:f="SKELETON_LOADER",display:b,height:R="sizeIcon20",maxHeight:y,maxWidth:S,minHeight:k,minWidth:L,size:h=null,width:x=null}=n,B=u(n,["borderBottomLeftRadius","borderBottomRightRadius","borderRadius","borderTopLeftRadius","borderTopRightRadius","element","display","height","maxHeight","maxWidth","minHeight","minWidth","size","width"]);let E=A(N);return i.createElement(c,m(p({},O(B)),{"aria-busy":"true",backgroundColor:"colorBackgroundStrong",borderBottomLeftRadius:e,borderBottomRightRadius:t,borderRadius:o,borderTopLeftRadius:r,borderTopRightRadius:g,display:b,element:f,height:R,maxHeight:y,maxWidth:S,minHeight:k,minWidth:L,overflow:"hidden",pointerEvents:"none",position:"relative",userSelect:"none",size:h,width:x,ref:P}),i.createElement(C,{bottom:0,left:0,position:"absolute",right:0,top:0,style:E}))});W.displayName="SkeletonLoader";export{W as SkeletonLoader}; | ||
var E=Object.defineProperty,v=Object.defineProperties;var T=Object.getOwnPropertyDescriptors;var i=Object.getOwnPropertySymbols;var s=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable;var l=(e,t,o)=>t in e?E(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,p=(e,t)=>{for(var o in t||(t={}))s.call(t,o)&&l(e,o,t[o]);if(i)for(var o of i(t))d.call(t,o)&&l(e,o,t[o]);return e},m=(e,t)=>v(e,T(t));var u=(e,t)=>{var o={};for(var r in e)s.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&i)for(var r of i(e))t.indexOf(r)<0&&d.call(e,r)&&(o[r]=e[r]);return o};import*as a from"react";import{useSpring as A,animated as H}from"@twilio-paste/animation-library";import{css as D,styled as M}from"@twilio-paste/styling-library";import{Box as g,safelySpreadBoxProps as O}from"@twilio-paste/box";var X=H(g),z=M(X)(()=>D({background:"linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.4) 60%, transparent)",transform:"translateX(-100%) skew(155deg)"})),C={loop:{delay:700,reset:!0},from:{translateX:"-100%",skew:"155deg"},to:{translateX:"105%",skew:"155deg"},config:{mass:.1,tension:80,friction:50}},N=a.forwardRef((W,P)=>{var n=W,{borderBottomLeftRadius:e,borderBottomRightRadius:t,borderRadius:o="borderRadius20",borderTopLeftRadius:r,borderTopRightRadius:c,element:f="SKELETON_LOADER",display:b,height:R="sizeIcon20",maxHeight:k,maxWidth:y,minHeight:S,minWidth:L,size:h=null,width:x=null}=n,B=u(n,["borderBottomLeftRadius","borderBottomRightRadius","borderRadius","borderTopLeftRadius","borderTopRightRadius","element","display","height","maxHeight","maxWidth","minHeight","minWidth","size","width"]);let w=A(C);return a.createElement(g,m(p({},O(B)),{"aria-busy":"true",backgroundColor:"colorBackgroundStrong",borderBottomLeftRadius:e,borderBottomRightRadius:t,borderRadius:o,borderTopLeftRadius:r,borderTopRightRadius:c,display:b,element:f,height:R,maxHeight:k,maxWidth:y,minHeight:S,minWidth:L,overflow:"hidden",pointerEvents:"none",position:"relative",userSelect:"none",size:h,width:x,ref:P}),a.createElement(z,{bottom:0,left:0,position:"absolute",right:0,top:0,style:w}))});N.displayName="SkeletonLoader";export{N as SkeletonLoader}; |
@@ -1,1 +0,1 @@ | ||
var M=Object.create;var a=Object.defineProperty,O=Object.defineProperties,z=Object.getOwnPropertyDescriptor,C=Object.getOwnPropertyDescriptors,N=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,W=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var g=(e,t,o)=>t in e?a(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,f=(e,t)=>{for(var o in t||(t={}))m.call(t,o)&&g(e,o,t[o]);if(d)for(var o of d(t))c.call(t,o)&&g(e,o,t[o]);return e},b=(e,t)=>O(e,C(t)),R=e=>a(e,"__esModule",{value:!0});var y=(e,t)=>{var o={};for(var r in e)m.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&d)for(var r of d(e))t.indexOf(r)<0&&c.call(e,r)&&(o[r]=e[r]);return o};var X=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},S=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of N(t))!m.call(e,i)&&(o||i!=="default")&&a(e,i,{get:()=>t[i],enumerable:!(r=z(t,i))||r.enumerable});return e},I=(e,t)=>S(R(a(e!=null?M(W(e)):{},"default",!t&&e&&e.__esModule?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e),K=(e=>(t,o)=>e&&e.get(t)||(o=S(R({}),t,1),e&&e.set(t,o),o))(typeof WeakMap!="undefined"?new WeakMap:0);var F={};X(F,{SkeletonLoader:()=>k});var n=I(require("react")),l=require("@twilio-paste/animation-library"),p=require("@twilio-paste/styling-library"),s=require("@twilio-paste/box"),_=(0,l.animated)(s.Box),j=(0,p.styled)(_)(()=>(0,p.css)({background:"linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.4) 60%, transparent)"})),q={loop:{delay:700,reset:!0},from:{translateX:"-100%",skew:"155deg"},to:{translateX:"100%",skew:"155deg"},config:{mass:.1,tension:80,friction:50}},k=n.forwardRef((G,H)=>{var u=G,{borderBottomLeftRadius:e,borderBottomRightRadius:t,borderRadius:o="borderRadius20",borderTopLeftRadius:r,borderTopRightRadius:i,element:L="SKELETON_LOADER",display:h,height:x="sizeIcon20",maxHeight:B,maxWidth:P,minHeight:E,minWidth:w,size:v=null,width:T=null}=u,A=y(u,["borderBottomLeftRadius","borderBottomRightRadius","borderRadius","borderTopLeftRadius","borderTopRightRadius","element","display","height","maxHeight","maxWidth","minHeight","minWidth","size","width"]);let D=(0,l.useSpring)(q);return n.createElement(s.Box,b(f({},(0,s.safelySpreadBoxProps)(A)),{"aria-busy":"true",backgroundColor:"colorBackgroundStrong",borderBottomLeftRadius:e,borderBottomRightRadius:t,borderRadius:o,borderTopLeftRadius:r,borderTopRightRadius:i,display:h,element:L,height:x,maxHeight:B,maxWidth:P,minHeight:E,minWidth:w,overflow:"hidden",pointerEvents:"none",position:"relative",userSelect:"none",size:v,width:T,ref:H}),n.createElement(j,{bottom:0,left:0,position:"absolute",right:0,top:0,style:D}))});k.displayName="SkeletonLoader";module.exports=K(F);0&&(module.exports={SkeletonLoader}); | ||
var M=Object.create;var i=Object.defineProperty,O=Object.defineProperties,X=Object.getOwnPropertyDescriptor,z=Object.getOwnPropertyDescriptors,C=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,N=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var c=(e,t,o)=>t in e?i(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,f=(e,t)=>{for(var o in t||(t={}))m.call(t,o)&&c(e,o,t[o]);if(d)for(var o of d(t))g.call(t,o)&&c(e,o,t[o]);return e},b=(e,t)=>O(e,z(t)),R=e=>i(e,"__esModule",{value:!0});var k=(e,t)=>{var o={};for(var r in e)m.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&d)for(var r of d(e))t.indexOf(r)<0&&g.call(e,r)&&(o[r]=e[r]);return o};var W=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},y=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of C(t))!m.call(e,a)&&(o||a!=="default")&&i(e,a,{get:()=>t[a],enumerable:!(r=X(t,a))||r.enumerable});return e},I=(e,t)=>y(R(i(e!=null?M(N(e)):{},"default",!t&&e&&e.__esModule?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e),K=(e=>(t,o)=>e&&e.get(t)||(o=y(R({}),t,1),e&&e.set(t,o),o))(typeof WeakMap!="undefined"?new WeakMap:0);var F={};W(F,{SkeletonLoader:()=>S});var n=I(require("react")),l=require("@twilio-paste/animation-library"),p=require("@twilio-paste/styling-library"),s=require("@twilio-paste/box"),_=(0,l.animated)(s.Box),j=(0,p.styled)(_)(()=>(0,p.css)({background:"linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.4) 60%, transparent)",transform:"translateX(-100%) skew(155deg)"})),q={loop:{delay:700,reset:!0},from:{translateX:"-100%",skew:"155deg"},to:{translateX:"105%",skew:"155deg"},config:{mass:.1,tension:80,friction:50}},S=n.forwardRef((G,H)=>{var u=G,{borderBottomLeftRadius:e,borderBottomRightRadius:t,borderRadius:o="borderRadius20",borderTopLeftRadius:r,borderTopRightRadius:a,element:L="SKELETON_LOADER",display:h,height:x="sizeIcon20",maxHeight:B,maxWidth:P,minHeight:w,minWidth:E,size:v=null,width:T=null}=u,A=k(u,["borderBottomLeftRadius","borderBottomRightRadius","borderRadius","borderTopLeftRadius","borderTopRightRadius","element","display","height","maxHeight","maxWidth","minHeight","minWidth","size","width"]);let D=(0,l.useSpring)(q);return n.createElement(s.Box,b(f({},(0,s.safelySpreadBoxProps)(A)),{"aria-busy":"true",backgroundColor:"colorBackgroundStrong",borderBottomLeftRadius:e,borderBottomRightRadius:t,borderRadius:o,borderTopLeftRadius:r,borderTopRightRadius:a,display:h,element:L,height:x,maxHeight:B,maxWidth:P,minHeight:w,minWidth:E,overflow:"hidden",pointerEvents:"none",position:"relative",userSelect:"none",size:v,width:T,ref:H}),n.createElement(j,{bottom:0,left:0,position:"absolute",right:0,top:0,style:D}))});S.displayName="SkeletonLoader";module.exports=K(F);0&&(module.exports={SkeletonLoader}); |
{ | ||
"name": "@twilio-paste/skeleton-loader", | ||
"version": "1.0.2", | ||
"version": "1.0.3", | ||
"category": "data display", | ||
@@ -45,3 +45,3 @@ "status": "production", | ||
"@twilio-paste/styling-library": "^0.3.7", | ||
"@twilio-paste/theme": "^6.0.2", | ||
"@twilio-paste/theme": "^6.0.4", | ||
"@twilio-paste/types": "^3.1.5", | ||
@@ -48,0 +48,0 @@ "prop-types": "^15.7.2", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
296
0.68%430887
-0.43%