@cleartrip/ct-design-dotted-loader 5.14.0-SNAPSHOT-bookzero-final.0 → 5.14.0
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/ct-design-dottedLoader.browser.cjs.js +2 -2
- package/dist/ct-design-dottedLoader.browser.cjs.js.map +1 -1
- package/dist/ct-design-dottedLoader.browser.esm.js +2 -2
- package/dist/ct-design-dottedLoader.browser.esm.js.map +1 -1
- package/dist/ct-design-dottedLoader.cjs.js +12 -12
- package/dist/ct-design-dottedLoader.cjs.js.map +1 -1
- package/dist/ct-design-dottedLoader.esm.js +12 -12
- package/dist/ct-design-dottedLoader.esm.js.map +1 -1
- package/dist/ct-design-dottedLoader.umd.js +12 -12
- package/dist/ct-design-dottedLoader.umd.js.map +1 -1
- package/dist/style.d.ts +3 -3
- package/dist/style.d.ts.map +1 -1
- package/dist/type.d.ts +4 -4
- package/dist/type.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/DottedLoader.native.tsx +10 -10
- package/src/DottedLoader.tsx +9 -9
- package/src/style.ts +11 -5
- package/src/type.ts +9 -8
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";var o=require("react/jsx-runtime"),r=require("react"),e=require("@cleartrip/ct-design-container"),t=require("@cleartrip/ct-design-style-manager"),
|
|
1
|
+
"use strict";var o=require("react/jsx-runtime"),r=require("react"),e=require("@cleartrip/ct-design-container"),t=require("@cleartrip/ct-design-style-manager"),n=require("@emotion/css");const a=t.makeStyles(o=>({root:{alignItems:"center",justifyContent:"center",flexDirection:"row",columnGap:8},dot:{borderRadius:o.border.radius[32],backgroundColor:o.color.background.defaultDark}})),s=({dotId:r,variant:s,restingColor:l,pulseColor:i,styleConfig:d})=>{const{root:u=[]}=d||{},c=t.useStyles(o=>{const e=function(o,r){switch(o){case"large":return r.size[3];case"medium":return r.size[2];default:return r.size[1]}}(s,o),t=null!=l?l:o.color.background.defaultDark,a=(({restingColor:o,pulseColor:r})=>n.keyframes`
|
|
2
2
|
0% { background-color: ${o}; transform: scale(1); }
|
|
3
3
|
50% { background-color: ${r}; transform: scale(1.2); }
|
|
4
4
|
100% { background-color: ${o}; transform: scale(1); }
|
|
5
|
-
`)({
|
|
5
|
+
`)({restingColor:t,pulseColor:null!=i?i:o.color.background.defaultDarkest});return{dot:{width:e,height:e,backgroundColor:t,animation:`${a} ease-in-out 1s infinite`,animationDelay:1/3*r+"s"}}},[s,r,l,i]);return o.jsx(e.Container,{styleConfig:{root:[a.dot,c.dot,...u]}})},l=r.memo(r.forwardRef(({css:r,variant:t="medium",dotColors:n,styleConfig:l},i)=>{const{root:d=[],loaderCont:u}=l||{},c=r?[r]:[];return o.jsx(e.Container,{ref:i,styleConfig:{root:[a.root,...d,...c]},children:Array.from({length:3}).map((r,e)=>o.jsx(s,{dotId:e,variant:t,restingColor:null==n?void 0:n.restingColor,pulseColor:null==n?void 0:n.pulseColor,styleConfig:{root:u}},e))})}));var i;l.displayName="DottedLoader",exports.DottedLoaderSize=void 0,(i=exports.DottedLoaderSize||(exports.DottedLoaderSize={})).SMALL="small",i.MEDIUM="medium",i.LARGE="large",exports.DottedLoader=l;
|
|
6
6
|
//# sourceMappingURL=ct-design-dottedLoader.browser.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-dottedLoader.browser.cjs.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/constants.ts"],"sourcesContent":[null,null,null],"names":["staticLoaderStyles","makeStyles","theme","root","alignItems","justifyContent","flexDirection","columnGap","dot","borderRadius","border","radius","backgroundColor","color","background","defaultDark","LoaderDot","dotId","variant","
|
|
1
|
+
{"version":3,"file":"ct-design-dottedLoader.browser.cjs.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/constants.ts"],"sourcesContent":[null,null,null],"names":["staticLoaderStyles","makeStyles","theme","root","alignItems","justifyContent","flexDirection","columnGap","dot","borderRadius","border","radius","backgroundColor","color","background","defaultDark","LoaderDot","dotId","variant","restingColor","pulseColor","styleConfig","dotStyles","dynamicStyles","useStyles","size","getLoaderDimension","resolvedRestingColor","animationName","keyframes","dotAnimationKeyframe","defaultDarkest","width","height","animation","animationDelay","_jsx","jsx","Container","DottedLoader","memo","forwardRef","css","dotColors","forwardedRef","rootStyles","loaderCont","legacyCssStyles","ref","children","Array","from","length","map","_","id","DottedLoaderSize","displayName"],"mappings":"yLA6BO,MAiBDA,EAAqBC,EAAAA,WAAYC,IAAW,CAChDC,KAAM,CACJC,WAAY,SACZC,eAAgB,SAChBC,cAAe,MACfC,UAAW,GAEbC,IAAK,CACHC,aAAcP,EAAMQ,OAAOC,OAAO,IAClCC,gBAAiBV,EAAMW,MAAMC,WAAWC,gBCvCtCC,EAAY,EAAGC,QAAOC,UAASC,eAAcC,aAAYC,kBAC7D,MAAQlB,KAAMmB,EAAY,IAAOD,GAAe,CAAA,EAE1CE,EAAgBC,YACnBtB,IACC,MAAMuB,EDTI,SAAmBA,EAAiCvB,GAClE,OAAQuB,GACN,IAAK,QACH,OAAOvB,EAAMuB,KAAK,GACpB,IAAK,SACH,OAAOvB,EAAMuB,KAAK,GACpB,QACE,OAAOvB,EAAMuB,KAAK,GAExB,CCAmBC,CAAmBR,EAAShB,GACnCyB,EAAuBR,QAAAA,EAAgBjB,EAAMW,MAAMC,WAAWC,YAE9Da,EDKwB,GAClCT,eACAC,gBAIIS,EAASA,SAAA;2BACYV;4BACCC;6BACCD;ECdDW,CAAqB,CACzCX,aAAcQ,EACdP,WAHyBA,QAAAA,EAAclB,EAAMW,MAAMC,WAAWiB,iBAMhE,MAAO,CACLvB,IAAK,CACHwB,MAAOP,EACPQ,OAAQR,EACRb,gBAAiBe,EACjBO,UAAW,GAAGN,4BACdO,eAAoB,EAAI,EAAKlB,EAAb,OAItB,CAACC,EAASD,EAAOE,EAAcC,IAGjC,OACEgB,EAAAC,IAACC,YAAS,CACRjB,YAAa,CACXlB,KAAM,CAACH,EAAmBQ,IAAKe,EAAcf,OAAQc,OAevDiB,EAAeC,EAAIA,KACvBC,aAA6C,EAAGC,MAAKxB,UAAU,SAAUyB,YAAWtB,eAAeuB,KACjG,MAAQzC,KAAM0C,EAAa,GAAEC,WAAEA,GAAezB,GAAe,GACvD0B,EAA4BL,EAAM,CAACA,GAAiB,GAE1D,OACEN,MAACE,EAASA,UAAA,CACRU,IAAKJ,EACLvB,YAAa,CACXlB,KAAM,CAACH,EAAmBG,QAAS0C,KAAeE,IACnDE,SAEAC,MAAMC,KAAK,CAAEC,OA/DJ,IA+DyBC,IAAI,CAACC,EAAGC,IACzCnB,EAAAA,IAACpB,EAAS,CAERC,MAAOsC,EACPrC,QAASA,EACTC,aAAcwB,aAAA,EAAAA,EAAWxB,aACzBC,WAAYuB,eAAAA,EAAWvB,WACvBC,YAAa,CAAElB,KAAM2C,IALhBS,SC1EjB,IAAYC,EDuFZjB,EAAakB,YAAc,eCvFfD,QAIXA,sBAAA,GAJWA,EAAAA,QAAgBA,mBAAhBA,yBAIX,CAAA,IAHC,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{jsx as o}from"react/jsx-runtime";import{memo as r,forwardRef as t}from"react";import{Container as e}from"@cleartrip/ct-design-container";import{makeStyles as n,useStyles as
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{memo as r,forwardRef as t}from"react";import{Container as e}from"@cleartrip/ct-design-container";import{makeStyles as n,useStyles as l}from"@cleartrip/ct-design-style-manager";import{keyframes as a}from"@emotion/css";const i=n(o=>({root:{alignItems:"center",justifyContent:"center",flexDirection:"row",columnGap:8},dot:{borderRadius:o.border.radius[32],backgroundColor:o.color.background.defaultDark}})),s=({dotId:r,variant:t,restingColor:n,pulseColor:s,styleConfig:c})=>{const{root:d=[]}=c||{},u=l(o=>{const e=function(o,r){switch(o){case"large":return r.size[3];case"medium":return r.size[2];default:return r.size[1]}}(t,o),l=null!=n?n:o.color.background.defaultDark,i=(({restingColor:o,pulseColor:r})=>a`
|
|
2
2
|
0% { background-color: ${o}; transform: scale(1); }
|
|
3
3
|
50% { background-color: ${r}; transform: scale(1.2); }
|
|
4
4
|
100% { background-color: ${o}; transform: scale(1); }
|
|
5
|
-
`)({
|
|
5
|
+
`)({restingColor:l,pulseColor:null!=s?s:o.color.background.defaultDarkest});return{dot:{width:e,height:e,backgroundColor:l,animation:`${i} ease-in-out 1s infinite`,animationDelay:1/3*r+"s"}}},[t,r,n,s]);return o(e,{styleConfig:{root:[i.dot,u.dot,...d]}})},c=r(t(({css:r,variant:t="medium",dotColors:n,styleConfig:l},a)=>{const{root:c=[],loaderCont:d}=l||{},u=r?[r]:[];return o(e,{ref:a,styleConfig:{root:[i.root,...c,...u]},children:Array.from({length:3}).map((r,e)=>o(s,{dotId:e,variant:t,restingColor:null==n?void 0:n.restingColor,pulseColor:null==n?void 0:n.pulseColor,styleConfig:{root:d}},e))})}));var d;c.displayName="DottedLoader",function(o){o.SMALL="small",o.MEDIUM="medium",o.LARGE="large"}(d||(d={}));export{c as DottedLoader,d as DottedLoaderSize};
|
|
6
6
|
//# sourceMappingURL=ct-design-dottedLoader.browser.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-dottedLoader.browser.esm.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/constants.ts"],"sourcesContent":[null,null,null],"names":["staticLoaderStyles","makeStyles","theme","root","alignItems","justifyContent","flexDirection","columnGap","dot","borderRadius","border","radius","backgroundColor","color","background","defaultDark","LoaderDot","dotId","variant","
|
|
1
|
+
{"version":3,"file":"ct-design-dottedLoader.browser.esm.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/constants.ts"],"sourcesContent":[null,null,null],"names":["staticLoaderStyles","makeStyles","theme","root","alignItems","justifyContent","flexDirection","columnGap","dot","borderRadius","border","radius","backgroundColor","color","background","defaultDark","LoaderDot","dotId","variant","restingColor","pulseColor","styleConfig","dotStyles","dynamicStyles","useStyles","size","getLoaderDimension","resolvedRestingColor","animationName","keyframes","dotAnimationKeyframe","defaultDarkest","width","height","animation","animationDelay","_jsx","Container","DottedLoader","memo","forwardRef","css","dotColors","forwardedRef","rootStyles","loaderCont","legacyCssStyles","ref","children","Array","from","length","map","_","id","DottedLoaderSize","displayName"],"mappings":"wQA6BO,MAiBDA,EAAqBC,EAAYC,IAAW,CAChDC,KAAM,CACJC,WAAY,SACZC,eAAgB,SAChBC,cAAe,MACfC,UAAW,GAEbC,IAAK,CACHC,aAAcP,EAAMQ,OAAOC,OAAO,IAClCC,gBAAiBV,EAAMW,MAAMC,WAAWC,gBCvCtCC,EAAY,EAAGC,QAAOC,UAASC,eAAcC,aAAYC,kBAC7D,MAAQlB,KAAMmB,EAAY,IAAOD,GAAe,CAAA,EAE1CE,EAAgBC,EACnBtB,IACC,MAAMuB,EDTI,SAAmBA,EAAiCvB,GAClE,OAAQuB,GACN,IAAK,QACH,OAAOvB,EAAMuB,KAAK,GACpB,IAAK,SACH,OAAOvB,EAAMuB,KAAK,GACpB,QACE,OAAOvB,EAAMuB,KAAK,GAExB,CCAmBC,CAAmBR,EAAShB,GACnCyB,EAAuBR,QAAAA,EAAgBjB,EAAMW,MAAMC,WAAWC,YAE9Da,EDKwB,GAClCT,eACAC,gBAIIS,CAAS;2BACYV;4BACCC;6BACCD;ECdDW,CAAqB,CACzCX,aAAcQ,EACdP,WAHyBA,QAAAA,EAAclB,EAAMW,MAAMC,WAAWiB,iBAMhE,MAAO,CACLvB,IAAK,CACHwB,MAAOP,EACPQ,OAAQR,EACRb,gBAAiBe,EACjBO,UAAW,GAAGN,4BACdO,eAAoB,EAAI,EAAKlB,EAAb,OAItB,CAACC,EAASD,EAAOE,EAAcC,IAGjC,OACEgB,EAACC,EAAS,CACRhB,YAAa,CACXlB,KAAM,CAACH,EAAmBQ,IAAKe,EAAcf,OAAQc,OAevDgB,EAAeC,EACnBC,EAA6C,EAAGC,MAAKvB,UAAU,SAAUwB,YAAWrB,eAAesB,KACjG,MAAQxC,KAAMyC,EAAa,GAAEC,WAAEA,GAAexB,GAAe,GACvDyB,EAA4BL,EAAM,CAACA,GAAiB,GAE1D,OACEL,EAACC,EAAS,CACRU,IAAKJ,EACLtB,YAAa,CACXlB,KAAM,CAACH,EAAmBG,QAASyC,KAAeE,IACnDE,SAEAC,MAAMC,KAAK,CAAEC,OA/DJ,IA+DyBC,IAAI,CAACC,EAAGC,IACzClB,EAACpB,EAAS,CAERC,MAAOqC,EACPpC,QAASA,EACTC,aAAcuB,aAAA,EAAAA,EAAWvB,aACzBC,WAAYsB,eAAAA,EAAWtB,WACvBC,YAAa,CAAElB,KAAM0C,IALhBS,aC1ELC,EDuFZjB,EAAakB,YAAc,eCvF3B,SAAYD,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}
|
|
@@ -16,10 +16,10 @@ function getLoaderDimension(size, theme) {
|
|
|
16
16
|
return theme.size[1];
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
|
-
const dotAnimationKeyframe = ({
|
|
20
|
-
0% { background-color: ${
|
|
21
|
-
50% { background-color: ${
|
|
22
|
-
100% { background-color: ${
|
|
19
|
+
const dotAnimationKeyframe = ({ restingColor, pulseColor, }) => css.keyframes `
|
|
20
|
+
0% { background-color: ${restingColor}; transform: scale(1); }
|
|
21
|
+
50% { background-color: ${pulseColor}; transform: scale(1.2); }
|
|
22
|
+
100% { background-color: ${restingColor}; transform: scale(1); }
|
|
23
23
|
`;
|
|
24
24
|
const staticLoaderStyles = ctDesignStyleManager.makeStyles((theme) => ({
|
|
25
25
|
root: {
|
|
@@ -35,26 +35,26 @@ const staticLoaderStyles = ctDesignStyleManager.makeStyles((theme) => ({
|
|
|
35
35
|
}));
|
|
36
36
|
|
|
37
37
|
const DOT_COUNT = 3;
|
|
38
|
-
const LoaderDot = ({ dotId, variant,
|
|
38
|
+
const LoaderDot = ({ dotId, variant, restingColor, pulseColor, styleConfig }) => {
|
|
39
39
|
const { root: dotStyles = [] } = styleConfig || {};
|
|
40
40
|
const dynamicStyles = ctDesignStyleManager.useStyles((theme) => {
|
|
41
41
|
const size = getLoaderDimension(variant, theme);
|
|
42
|
-
const
|
|
43
|
-
const
|
|
42
|
+
const resolvedRestingColor = restingColor !== null && restingColor !== void 0 ? restingColor : theme.color.background.defaultDark;
|
|
43
|
+
const resolvedPulseColor = pulseColor !== null && pulseColor !== void 0 ? pulseColor : theme.color.background.defaultDarkest;
|
|
44
44
|
const animationName = dotAnimationKeyframe({
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
restingColor: resolvedRestingColor,
|
|
46
|
+
pulseColor: resolvedPulseColor,
|
|
47
47
|
});
|
|
48
48
|
return {
|
|
49
49
|
dot: {
|
|
50
50
|
width: size,
|
|
51
51
|
height: size,
|
|
52
|
-
backgroundColor:
|
|
52
|
+
backgroundColor: resolvedRestingColor,
|
|
53
53
|
animation: `${animationName} ease-in-out 1s infinite`,
|
|
54
54
|
animationDelay: `${(1 / 3) * dotId}s`,
|
|
55
55
|
},
|
|
56
56
|
};
|
|
57
|
-
}, [variant, dotId,
|
|
57
|
+
}, [variant, dotId, restingColor, pulseColor]);
|
|
58
58
|
return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
|
|
59
59
|
root: [staticLoaderStyles.dot, dynamicStyles.dot, ...dotStyles],
|
|
60
60
|
} }));
|
|
@@ -64,7 +64,7 @@ const DottedLoader = react.memo(react.forwardRef(({ css, variant = 'medium', dot
|
|
|
64
64
|
const legacyCssStyles = css ? [css] : [];
|
|
65
65
|
return (jsxRuntime.jsx(ctDesignContainer.Container, { ref: forwardedRef, styleConfig: {
|
|
66
66
|
root: [staticLoaderStyles.root, ...rootStyles, ...legacyCssStyles],
|
|
67
|
-
}, children: Array.from({ length: DOT_COUNT }).map((_, id) => (jsxRuntime.jsx(LoaderDot, { dotId: id, variant: variant,
|
|
67
|
+
}, children: Array.from({ length: DOT_COUNT }).map((_, id) => (jsxRuntime.jsx(LoaderDot, { dotId: id, variant: variant, restingColor: dotColors === null || dotColors === void 0 ? void 0 : dotColors.restingColor, pulseColor: dotColors === null || dotColors === void 0 ? void 0 : dotColors.pulseColor, styleConfig: { root: loaderCont } }, id))) }));
|
|
68
68
|
}));
|
|
69
69
|
DottedLoader.displayName = 'DottedLoader';
|
|
70
70
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-dottedLoader.cjs.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/constants.ts"],"sourcesContent":[null,null,null],"names":["keyframes","makeStyles","useStyles","_jsx","Container","memo","forwardRef","DottedLoaderSize"],"mappings":";;;;;;;;AAYgB,SAAA,kBAAkB,CAAC,IAA+B,EAAE,KAAY,EAAA;IAC9E,QAAQ,IAAI;AACV,QAAA,KAAK,OAAO;AACV,YAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AACvB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AACvB,QAAA;AACE,YAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KACxB;AACH,CAAC;AAQM,MAAM,oBAAoB,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"ct-design-dottedLoader.cjs.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/constants.ts"],"sourcesContent":[null,null,null],"names":["keyframes","makeStyles","useStyles","_jsx","Container","memo","forwardRef","DottedLoaderSize"],"mappings":"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"}
|
|
@@ -14,10 +14,10 @@ function getLoaderDimension(size, theme) {
|
|
|
14
14
|
return theme.size[1];
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
const dotAnimationKeyframe = ({
|
|
18
|
-
0% { background-color: ${
|
|
19
|
-
50% { background-color: ${
|
|
20
|
-
100% { background-color: ${
|
|
17
|
+
const dotAnimationKeyframe = ({ restingColor, pulseColor, }) => keyframes `
|
|
18
|
+
0% { background-color: ${restingColor}; transform: scale(1); }
|
|
19
|
+
50% { background-color: ${pulseColor}; transform: scale(1.2); }
|
|
20
|
+
100% { background-color: ${restingColor}; transform: scale(1); }
|
|
21
21
|
`;
|
|
22
22
|
const staticLoaderStyles = makeStyles((theme) => ({
|
|
23
23
|
root: {
|
|
@@ -33,26 +33,26 @@ const staticLoaderStyles = makeStyles((theme) => ({
|
|
|
33
33
|
}));
|
|
34
34
|
|
|
35
35
|
const DOT_COUNT = 3;
|
|
36
|
-
const LoaderDot = ({ dotId, variant,
|
|
36
|
+
const LoaderDot = ({ dotId, variant, restingColor, pulseColor, styleConfig }) => {
|
|
37
37
|
const { root: dotStyles = [] } = styleConfig || {};
|
|
38
38
|
const dynamicStyles = useStyles((theme) => {
|
|
39
39
|
const size = getLoaderDimension(variant, theme);
|
|
40
|
-
const
|
|
41
|
-
const
|
|
40
|
+
const resolvedRestingColor = restingColor !== null && restingColor !== void 0 ? restingColor : theme.color.background.defaultDark;
|
|
41
|
+
const resolvedPulseColor = pulseColor !== null && pulseColor !== void 0 ? pulseColor : theme.color.background.defaultDarkest;
|
|
42
42
|
const animationName = dotAnimationKeyframe({
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
restingColor: resolvedRestingColor,
|
|
44
|
+
pulseColor: resolvedPulseColor,
|
|
45
45
|
});
|
|
46
46
|
return {
|
|
47
47
|
dot: {
|
|
48
48
|
width: size,
|
|
49
49
|
height: size,
|
|
50
|
-
backgroundColor:
|
|
50
|
+
backgroundColor: resolvedRestingColor,
|
|
51
51
|
animation: `${animationName} ease-in-out 1s infinite`,
|
|
52
52
|
animationDelay: `${(1 / 3) * dotId}s`,
|
|
53
53
|
},
|
|
54
54
|
};
|
|
55
|
-
}, [variant, dotId,
|
|
55
|
+
}, [variant, dotId, restingColor, pulseColor]);
|
|
56
56
|
return (jsx(Container, { styleConfig: {
|
|
57
57
|
root: [staticLoaderStyles.dot, dynamicStyles.dot, ...dotStyles],
|
|
58
58
|
} }));
|
|
@@ -62,7 +62,7 @@ const DottedLoader = memo(forwardRef(({ css, variant = 'medium', dotColors, styl
|
|
|
62
62
|
const legacyCssStyles = css ? [css] : [];
|
|
63
63
|
return (jsx(Container, { ref: forwardedRef, styleConfig: {
|
|
64
64
|
root: [staticLoaderStyles.root, ...rootStyles, ...legacyCssStyles],
|
|
65
|
-
}, children: Array.from({ length: DOT_COUNT }).map((_, id) => (jsx(LoaderDot, { dotId: id, variant: variant,
|
|
65
|
+
}, children: Array.from({ length: DOT_COUNT }).map((_, id) => (jsx(LoaderDot, { dotId: id, variant: variant, restingColor: dotColors === null || dotColors === void 0 ? void 0 : dotColors.restingColor, pulseColor: dotColors === null || dotColors === void 0 ? void 0 : dotColors.pulseColor, styleConfig: { root: loaderCont } }, id))) }));
|
|
66
66
|
}));
|
|
67
67
|
DottedLoader.displayName = 'DottedLoader';
|
|
68
68
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-dottedLoader.esm.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/constants.ts"],"sourcesContent":[null,null,null],"names":["_jsx"],"mappings":";;;;;;AAYgB,SAAA,kBAAkB,CAAC,IAA+B,EAAE,KAAY,EAAA;IAC9E,QAAQ,IAAI;AACV,QAAA,KAAK,OAAO;AACV,YAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AACvB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AACvB,QAAA;AACE,YAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KACxB;AACH,CAAC;AAQM,MAAM,oBAAoB,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"ct-design-dottedLoader.esm.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/constants.ts"],"sourcesContent":[null,null,null],"names":["_jsx"],"mappings":"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"}
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
return theme.size[1];
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
const dotAnimationKeyframe = ({
|
|
18
|
-
0% { background-color: ${
|
|
19
|
-
50% { background-color: ${
|
|
20
|
-
100% { background-color: ${
|
|
17
|
+
const dotAnimationKeyframe = ({ restingColor, pulseColor, }) => css.keyframes `
|
|
18
|
+
0% { background-color: ${restingColor}; transform: scale(1); }
|
|
19
|
+
50% { background-color: ${pulseColor}; transform: scale(1.2); }
|
|
20
|
+
100% { background-color: ${restingColor}; transform: scale(1); }
|
|
21
21
|
`;
|
|
22
22
|
const staticLoaderStyles = ctDesignStyleManager.makeStyles((theme) => ({
|
|
23
23
|
root: {
|
|
@@ -33,26 +33,26 @@
|
|
|
33
33
|
}));
|
|
34
34
|
|
|
35
35
|
const DOT_COUNT = 3;
|
|
36
|
-
const LoaderDot = ({ dotId, variant,
|
|
36
|
+
const LoaderDot = ({ dotId, variant, restingColor, pulseColor, styleConfig }) => {
|
|
37
37
|
const { root: dotStyles = [] } = styleConfig || {};
|
|
38
38
|
const dynamicStyles = ctDesignStyleManager.useStyles((theme) => {
|
|
39
39
|
const size = getLoaderDimension(variant, theme);
|
|
40
|
-
const
|
|
41
|
-
const
|
|
40
|
+
const resolvedRestingColor = restingColor !== null && restingColor !== void 0 ? restingColor : theme.color.background.defaultDark;
|
|
41
|
+
const resolvedPulseColor = pulseColor !== null && pulseColor !== void 0 ? pulseColor : theme.color.background.defaultDarkest;
|
|
42
42
|
const animationName = dotAnimationKeyframe({
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
restingColor: resolvedRestingColor,
|
|
44
|
+
pulseColor: resolvedPulseColor,
|
|
45
45
|
});
|
|
46
46
|
return {
|
|
47
47
|
dot: {
|
|
48
48
|
width: size,
|
|
49
49
|
height: size,
|
|
50
|
-
backgroundColor:
|
|
50
|
+
backgroundColor: resolvedRestingColor,
|
|
51
51
|
animation: `${animationName} ease-in-out 1s infinite`,
|
|
52
52
|
animationDelay: `${(1 / 3) * dotId}s`,
|
|
53
53
|
},
|
|
54
54
|
};
|
|
55
|
-
}, [variant, dotId,
|
|
55
|
+
}, [variant, dotId, restingColor, pulseColor]);
|
|
56
56
|
return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
|
|
57
57
|
root: [staticLoaderStyles.dot, dynamicStyles.dot, ...dotStyles],
|
|
58
58
|
} }));
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
const legacyCssStyles = css ? [css] : [];
|
|
63
63
|
return (jsxRuntime.jsx(ctDesignContainer.Container, { ref: forwardedRef, styleConfig: {
|
|
64
64
|
root: [staticLoaderStyles.root, ...rootStyles, ...legacyCssStyles],
|
|
65
|
-
}, children: Array.from({ length: DOT_COUNT }).map((_, id) => (jsxRuntime.jsx(LoaderDot, { dotId: id, variant: variant,
|
|
65
|
+
}, children: Array.from({ length: DOT_COUNT }).map((_, id) => (jsxRuntime.jsx(LoaderDot, { dotId: id, variant: variant, restingColor: dotColors === null || dotColors === void 0 ? void 0 : dotColors.restingColor, pulseColor: dotColors === null || dotColors === void 0 ? void 0 : dotColors.pulseColor, styleConfig: { root: loaderCont } }, id))) }));
|
|
66
66
|
}));
|
|
67
67
|
DottedLoader.displayName = 'DottedLoader';
|
|
68
68
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-dottedLoader.umd.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/constants.ts"],"sourcesContent":[null,null,null],"names":["keyframes","makeStyles","useStyles","_jsx","Container","memo","forwardRef","DottedLoaderSize"],"mappings":";;;;;;EAYgB,SAAA,kBAAkB,CAAC,IAA+B,EAAE,KAAY,EAAA;MAC9E,QAAQ,IAAI;EACV,QAAA,KAAK,OAAO;EACV,YAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EACvB,QAAA,KAAK,QAAQ;EACX,YAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EACvB,QAAA;EACE,YAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;OACxB;EACH,CAAC;EAQM,MAAM,oBAAoB,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"ct-design-dottedLoader.umd.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/constants.ts"],"sourcesContent":[null,null,null],"names":["keyframes","makeStyles","useStyles","_jsx","Container","memo","forwardRef","DottedLoaderSize"],"mappings":"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"}
|
package/dist/style.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { Theme } from '@cleartrip/ct-design-theme';
|
|
2
2
|
import { LoaderVariant } from './type';
|
|
3
3
|
export declare function getLoaderDimension(size: LoaderVariant | undefined, theme: Theme): 4 | 8 | 12;
|
|
4
|
-
export declare const dotAnimationKeyframe: ({
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
export declare const dotAnimationKeyframe: ({ restingColor, pulseColor, }: {
|
|
5
|
+
restingColor: string;
|
|
6
|
+
pulseColor: string;
|
|
7
7
|
}) => string;
|
|
8
8
|
declare const staticLoaderStyles: {
|
|
9
9
|
root: {
|
package/dist/style.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/DottedLoader/src/style.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAGxD,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAOvC,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,EAAE,KAAK,EAAE,KAAK,cAS/E;AAQD,eAAO,MAAM,oBAAoB,GAAI
|
|
1
|
+
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/DottedLoader/src/style.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAGxD,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAOvC,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,EAAE,KAAK,EAAE,KAAK,cAS/E;AAQD,eAAO,MAAM,oBAAoB,GAAI,+BAGlC;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB,WAIA,CAAC;AAOF,QAAA,MAAM,kBAAkB;;;;;;;;;;;CAWrB,CAAC;AAEJ,eAAe,kBAAkB,CAAC"}
|
package/dist/type.d.ts
CHANGED
|
@@ -9,8 +9,8 @@ export interface IDottedLoaderStyleConfig {
|
|
|
9
9
|
export interface IDottedLoaderProps {
|
|
10
10
|
variant?: LoaderVariant;
|
|
11
11
|
dotColors?: {
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
restingColor?: string;
|
|
13
|
+
pulseColor?: string;
|
|
14
14
|
};
|
|
15
15
|
styleConfig?: IDottedLoaderStyleConfig;
|
|
16
16
|
css?: CSSProperties;
|
|
@@ -22,8 +22,8 @@ export interface IDot {
|
|
|
22
22
|
dotId: number;
|
|
23
23
|
variant?: LoaderVariant;
|
|
24
24
|
styleConfig?: IDotStyleConfig;
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
restingColor?: string;
|
|
26
|
+
pulseColor?: string;
|
|
27
27
|
}
|
|
28
28
|
export type DottedLoaderProps = IDottedLoaderProps;
|
|
29
29
|
//# sourceMappingURL=type.d.ts.map
|
package/dist/type.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/DottedLoader/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAMzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,GAAG,gBAAgB,EAAE,CAAC;AAMlD,MAAM,WAAW,wBAAwB;IAIvC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAKhB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAKD,MAAM,WAAW,kBAAkB;IAIjC,OAAO,CAAC,EAAE,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/DottedLoader/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAMzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,GAAG,gBAAgB,EAAE,CAAC;AAMlD,MAAM,WAAW,wBAAwB;IAIvC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAKhB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAKD,MAAM,WAAW,kBAAkB;IAIjC,OAAO,CAAC,EAAE,aAAa,CAAC;IAKxB,SAAS,CAAC,EAAE;QAEV,YAAY,CAAC,EAAE,MAAM,CAAC;QAEtB,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IAKF,WAAW,CAAC,EAAE,wBAAwB,CAAC;IAUvC,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB;AAKD,MAAM,WAAW,eAAe;IAI9B,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,MAAM,WAAW,IAAI;IAKnB,KAAK,EAAE,MAAM,CAAC;IAKd,OAAO,CAAC,EAAE,aAAa,CAAC;IAKxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAE9B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cleartrip/ct-design-dotted-loader",
|
|
3
|
-
"version": "5.14.0
|
|
3
|
+
"version": "5.14.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"main": "./dist/ct-design-dottedLoader.cjs.js",
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
],
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@emotion/css": "11.13.4",
|
|
28
|
-
"@cleartrip/ct-design-
|
|
29
|
-
"@cleartrip/ct-design-
|
|
30
|
-
"@cleartrip/ct-design-
|
|
28
|
+
"@cleartrip/ct-design-style-manager": "5.13.0",
|
|
29
|
+
"@cleartrip/ct-design-theme": "5.13.0",
|
|
30
|
+
"@cleartrip/ct-design-container": "5.14.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@cleartrip/ct-design-types": "5.13.0
|
|
33
|
+
"@cleartrip/ct-design-types": "5.13.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": ">=16.8.0",
|
|
@@ -27,12 +27,12 @@ const ANIMATION_DURATION = 333;
|
|
|
27
27
|
* `withDelay` offset derived from its `dotId` to stagger the three-dot
|
|
28
28
|
* pulse exactly like the web keyframe.
|
|
29
29
|
*/
|
|
30
|
-
const LoaderDot = ({ dotId, variant = DottedLoaderSize.MEDIUM,
|
|
30
|
+
const LoaderDot = ({ dotId, variant = DottedLoaderSize.MEDIUM, restingColor, pulseColor, styleConfig }: IDot) => {
|
|
31
31
|
const globalTheme = useTheme();
|
|
32
|
-
const
|
|
33
|
-
const
|
|
32
|
+
const resolvedRestingColor = restingColor ?? globalTheme?.color.background.defaultDark;
|
|
33
|
+
const resolvedPulseColor = pulseColor ?? globalTheme?.color.background.defaultDarkest;
|
|
34
34
|
const scale = useSharedValue(1);
|
|
35
|
-
const backgroundColor = useSharedValue(
|
|
35
|
+
const backgroundColor = useSharedValue(resolvedRestingColor);
|
|
36
36
|
const { root: customStyles = [] } = styleConfig || {};
|
|
37
37
|
|
|
38
38
|
const loaderStyles = useStyles(
|
|
@@ -72,14 +72,14 @@ const LoaderDot = ({ dotId, variant = DottedLoaderSize.MEDIUM, color1, color2, s
|
|
|
72
72
|
delay,
|
|
73
73
|
withRepeat(
|
|
74
74
|
withSequence(
|
|
75
|
-
withTiming(
|
|
76
|
-
withTiming(
|
|
77
|
-
withTiming(
|
|
75
|
+
withTiming(resolvedRestingColor, { duration: ANIMATION_DURATION }),
|
|
76
|
+
withTiming(resolvedPulseColor, { duration: ANIMATION_DURATION + 1 }),
|
|
77
|
+
withTiming(resolvedRestingColor, { duration: ANIMATION_DURATION }),
|
|
78
78
|
),
|
|
79
79
|
-1,
|
|
80
80
|
),
|
|
81
81
|
);
|
|
82
|
-
}, [dotId,
|
|
82
|
+
}, [dotId, resolvedRestingColor, resolvedPulseColor, scale, backgroundColor]);
|
|
83
83
|
|
|
84
84
|
useEffect(() => {
|
|
85
85
|
startAnimation();
|
|
@@ -113,8 +113,8 @@ const DottedLoader = memo(
|
|
|
113
113
|
key={id}
|
|
114
114
|
dotId={id}
|
|
115
115
|
variant={variant}
|
|
116
|
-
|
|
117
|
-
|
|
116
|
+
restingColor={dotColors?.restingColor}
|
|
117
|
+
pulseColor={dotColors?.pulseColor}
|
|
118
118
|
styleConfig={{ root: [...loaderCont] }}
|
|
119
119
|
/>
|
|
120
120
|
))}
|
package/src/DottedLoader.tsx
CHANGED
|
@@ -14,30 +14,30 @@ const DOT_COUNT = 3;
|
|
|
14
14
|
* and animation block, then composes the shared static `dot` slot
|
|
15
15
|
* (border-radius + background colour) into Container's `styleConfig`.
|
|
16
16
|
*/
|
|
17
|
-
const LoaderDot = ({ dotId, variant,
|
|
17
|
+
const LoaderDot = ({ dotId, variant, restingColor, pulseColor, styleConfig }: IDot) => {
|
|
18
18
|
const { root: dotStyles = [] } = styleConfig || {};
|
|
19
19
|
|
|
20
20
|
const dynamicStyles = useStyles(
|
|
21
21
|
(theme) => {
|
|
22
22
|
const size = getLoaderDimension(variant, theme);
|
|
23
|
-
const
|
|
24
|
-
const
|
|
23
|
+
const resolvedRestingColor = restingColor ?? theme.color.background.defaultDark;
|
|
24
|
+
const resolvedPulseColor = pulseColor ?? theme.color.background.defaultDarkest;
|
|
25
25
|
const animationName = dotAnimationKeyframe({
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
restingColor: resolvedRestingColor,
|
|
27
|
+
pulseColor: resolvedPulseColor,
|
|
28
28
|
});
|
|
29
29
|
|
|
30
30
|
return {
|
|
31
31
|
dot: {
|
|
32
32
|
width: size,
|
|
33
33
|
height: size,
|
|
34
|
-
backgroundColor:
|
|
34
|
+
backgroundColor: resolvedRestingColor,
|
|
35
35
|
animation: `${animationName} ease-in-out 1s infinite`,
|
|
36
36
|
animationDelay: `${(1 / 3) * dotId}s`,
|
|
37
37
|
},
|
|
38
38
|
};
|
|
39
39
|
},
|
|
40
|
-
[variant, dotId,
|
|
40
|
+
[variant, dotId, restingColor, pulseColor],
|
|
41
41
|
);
|
|
42
42
|
|
|
43
43
|
return (
|
|
@@ -75,8 +75,8 @@ const DottedLoader = memo(
|
|
|
75
75
|
key={id}
|
|
76
76
|
dotId={id}
|
|
77
77
|
variant={variant}
|
|
78
|
-
|
|
79
|
-
|
|
78
|
+
restingColor={dotColors?.restingColor}
|
|
79
|
+
pulseColor={dotColors?.pulseColor}
|
|
80
80
|
styleConfig={{ root: loaderCont }}
|
|
81
81
|
/>
|
|
82
82
|
))}
|
package/src/style.ts
CHANGED
|
@@ -23,14 +23,20 @@ export function getLoaderDimension(size: LoaderVariant | undefined, theme: Theme
|
|
|
23
23
|
|
|
24
24
|
/**
|
|
25
25
|
* Produces a stable emotion keyframe animation name for the given
|
|
26
|
-
* colour pair. Each unique `(
|
|
26
|
+
* colour pair. Each unique `(restingColor, pulseColor)` combination is cached by
|
|
27
27
|
* emotion so repeated calls with the same theme share a single
|
|
28
28
|
* declaration.
|
|
29
29
|
*/
|
|
30
|
-
export const dotAnimationKeyframe = ({
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
export const dotAnimationKeyframe = ({
|
|
31
|
+
restingColor,
|
|
32
|
+
pulseColor,
|
|
33
|
+
}: {
|
|
34
|
+
restingColor: string;
|
|
35
|
+
pulseColor: string;
|
|
36
|
+
}) => keyframes`
|
|
37
|
+
0% { background-color: ${restingColor}; transform: scale(1); }
|
|
38
|
+
50% { background-color: ${pulseColor}; transform: scale(1.2); }
|
|
39
|
+
100% { background-color: ${restingColor}; transform: scale(1); }
|
|
34
40
|
`;
|
|
35
41
|
|
|
36
42
|
/**
|
package/src/type.ts
CHANGED
|
@@ -36,12 +36,13 @@ export interface IDottedLoaderProps {
|
|
|
36
36
|
variant?: LoaderVariant;
|
|
37
37
|
|
|
38
38
|
/**
|
|
39
|
-
*
|
|
40
|
-
* is the peak of the animation. Falls back to theme defaults when omitted.
|
|
39
|
+
* Custom colours for the three pulsing dots.
|
|
41
40
|
*/
|
|
42
41
|
dotColors?: {
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
/** Normal dot colour — what you see most of the time between pulses. */
|
|
43
|
+
restingColor?: string;
|
|
44
|
+
/** Brighter colour when each dot pops / scales up during the pulse. */
|
|
45
|
+
pulseColor?: string;
|
|
45
46
|
};
|
|
46
47
|
|
|
47
48
|
/**
|
|
@@ -86,10 +87,10 @@ export interface IDot {
|
|
|
86
87
|
* Per-dot style overrides.
|
|
87
88
|
*/
|
|
88
89
|
styleConfig?: IDotStyleConfig;
|
|
89
|
-
/**
|
|
90
|
-
|
|
91
|
-
/**
|
|
92
|
-
|
|
90
|
+
/** Normal dot colour between pulses. Uses theme default if not set. */
|
|
91
|
+
restingColor?: string;
|
|
92
|
+
/** Colour when the dot pops at the peak of the pulse. Uses theme default if not set. */
|
|
93
|
+
pulseColor?: string;
|
|
93
94
|
}
|
|
94
95
|
|
|
95
96
|
export type DottedLoaderProps = IDottedLoaderProps;
|