@chayns-components/core 5.0.0-beta.1384 → 5.0.0-beta.1385
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/lib/cjs/components/small-wait-cursor/SmallWaitCursor.js.map +1 -1
- package/lib/cjs/components/small-wait-cursor/SmallWaitCursor.styles.js +12 -10
- package/lib/cjs/components/small-wait-cursor/SmallWaitCursor.styles.js.map +1 -1
- package/lib/esm/components/small-wait-cursor/SmallWaitCursor.js.map +1 -1
- package/lib/esm/components/small-wait-cursor/SmallWaitCursor.styles.js +12 -10
- package/lib/esm/components/small-wait-cursor/SmallWaitCursor.styles.js.map +1 -1
- package/lib/types/components/small-wait-cursor/SmallWaitCursor.d.ts +23 -8
- package/lib/types/components/small-wait-cursor/SmallWaitCursor.styles.d.ts +3 -3
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SmallWaitCursor.js","names":["_react","_interopRequireDefault","require","_SmallWaitCursor","e","__esModule","default","SmallWaitCursorSize","exports","SmallWaitCursorSpeed","SmallWaitCursor","shouldHideBackground","shouldHideWaitCursor","size","Medium","speed","color","createElement","StyledSmallWaitCursor","$shouldShowWaitCursor","$size","StyledSmallWaitCursorWaitCursor","$shouldHideBackground","$speed","$color","StyledSmallWaitCursorBackground","displayName","_default"],"sources":["../../../../src/components/small-wait-cursor/SmallWaitCursor.tsx"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nimport React, { FC } from 'react';\nimport {\n StyledSmallWaitCursor,\n StyledSmallWaitCursorBackground,\n StyledSmallWaitCursorWaitCursor,\n} from './SmallWaitCursor.styles';\n\nexport enum SmallWaitCursorSize {\n Small = 16,\n Medium = 30,\n}\n\nexport enum SmallWaitCursorSpeed {\n Slow = 1.5,\n Medium = 1,\n Fast = 0.5,\n}\n\nexport type SmallWaitCursorProps = {\n /**\n * Specifies whether the wait cursor should be displayed with a background.\n */\n shouldHideBackground?: boolean;\n /**\n * Specifies whether the wait cursor should be displayed.\n */\n shouldHideWaitCursor?: boolean;\n /**\n * The size of the wait cursor in pixels. Use the SmallWaitCursorSize enum for this prop.\n */\n size?: SmallWaitCursorSize | number;\n /**\n * The speed of the animation in seconds. Use the SmallWaitCursorSpeed enum for this prop.\n
|
|
1
|
+
{"version":3,"file":"SmallWaitCursor.js","names":["_react","_interopRequireDefault","require","_SmallWaitCursor","e","__esModule","default","SmallWaitCursorSize","exports","SmallWaitCursorSpeed","SmallWaitCursor","shouldHideBackground","shouldHideWaitCursor","size","Medium","speed","color","createElement","StyledSmallWaitCursor","$shouldShowWaitCursor","$size","StyledSmallWaitCursorWaitCursor","$shouldHideBackground","$speed","$color","StyledSmallWaitCursorBackground","displayName","_default"],"sources":["../../../../src/components/small-wait-cursor/SmallWaitCursor.tsx"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nimport React, { FC } from 'react';\nimport {\n StyledSmallWaitCursor,\n StyledSmallWaitCursorBackground,\n StyledSmallWaitCursorWaitCursor,\n} from './SmallWaitCursor.styles';\n\nexport enum SmallWaitCursorSize {\n Small = 16,\n Medium = 30,\n}\n\nexport enum SmallWaitCursorSpeed {\n Slow = 1.5,\n Medium = 1,\n Fast = 0.5,\n}\n\nexport type SmallWaitCursorProps = {\n /**\n * @description The color of the inner circle of the wait cursor.\n * @optional\n * @default undefined\n * @example <SmallWaitCursor color=\"#FF0000\" />\n */\n color?: string;\n /**\n * @description Specifies whether the wait cursor should be displayed with a background.\n * @optional\n * @default false\n * @example <SmallWaitCursor shouldHideBackground />\n */\n shouldHideBackground?: boolean;\n /**\n * @description Specifies whether the wait cursor should be displayed.\n * @optional\n * @default false\n * @example <SmallWaitCursor shouldHideWaitCursor />\n */\n shouldHideWaitCursor?: boolean;\n /**\n * @description The size of the wait cursor in pixels. Use the SmallWaitCursorSize enum for this prop or a custom value in pixels.\n * @optional\n * @default SmallWaitCursorSize.Medium\n * @example <SmallWaitCursor size={SmallWaitCursorSize.Small} />\n */\n size?: SmallWaitCursorSize | number;\n /**\n * @description The speed of the animation in seconds. Use the SmallWaitCursorSpeed enum for this prop.\n * @optional\n * @default SmallWaitCursorSpeed.Medium\n * @example <SmallWaitCursor speed={SmallWaitCursorSpeed.Fast} />\n */\n speed?: SmallWaitCursorSpeed;\n};\n\nconst SmallWaitCursor: FC<SmallWaitCursorProps> = ({\n shouldHideBackground = false,\n shouldHideWaitCursor = false,\n size = SmallWaitCursorSize.Medium,\n speed = SmallWaitCursorSpeed.Medium,\n color,\n}) => (\n <StyledSmallWaitCursor $shouldShowWaitCursor={!shouldHideWaitCursor} $size={size}>\n <StyledSmallWaitCursorWaitCursor\n $shouldHideBackground={shouldHideBackground}\n $size={size}\n $speed={speed}\n $color={color}\n />\n {!shouldHideBackground && <StyledSmallWaitCursorBackground />}\n </StyledSmallWaitCursor>\n);\n\nSmallWaitCursor.displayName = 'SmallWaitCursor';\n\nexport default SmallWaitCursor;\n"],"mappings":";;;;;;AAEA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAIkC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAPlC;AAAA,IASYG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,0BAAnBA,mBAAmB;EAAnBA,mBAAmB,CAAnBA,mBAAmB;EAAnBA,mBAAmB,CAAnBA,mBAAmB;EAAA,OAAnBA,mBAAmB;AAAA;AAAA,IAKnBE,oBAAoB,GAAAD,OAAA,CAAAC,oBAAA,0BAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA;AA4ChC,MAAMC,eAAyC,GAAGA,CAAC;EAC/CC,oBAAoB,GAAG,KAAK;EAC5BC,oBAAoB,GAAG,KAAK;EAC5BC,IAAI,GAAGN,mBAAmB,CAACO,MAAM;EACjCC,KAAK,GAAGN,oBAAoB,CAACK,MAAM;EACnCE;AACJ,CAAC,kBACGhB,MAAA,CAAAM,OAAA,CAAAW,aAAA,CAACd,gBAAA,CAAAe,qBAAqB;EAACC,qBAAqB,EAAE,CAACP,oBAAqB;EAACQ,KAAK,EAAEP;AAAK,gBAC7Eb,MAAA,CAAAM,OAAA,CAAAW,aAAA,CAACd,gBAAA,CAAAkB,+BAA+B;EAC5BC,qBAAqB,EAAEX,oBAAqB;EAC5CS,KAAK,EAAEP,IAAK;EACZU,MAAM,EAAER,KAAM;EACdS,MAAM,EAAER;AAAM,CACjB,CAAC,EACD,CAACL,oBAAoB,iBAAIX,MAAA,CAAAM,OAAA,CAAAW,aAAA,CAACd,gBAAA,CAAAsB,+BAA+B,MAAE,CACzC,CAC1B;AAEDf,eAAe,CAACgB,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAnB,OAAA,CAAAF,OAAA,GAEjCI,eAAe","ignoreList":[]}
|
|
@@ -30,17 +30,17 @@ const StyledSmallWaitCursorBackground = exports.StyledSmallWaitCursorBackground
|
|
|
30
30
|
0 1px 1px rgba(0, 0, 0, 0.2);
|
|
31
31
|
`;
|
|
32
32
|
const spin = (0, _styledComponents.keyframes)`
|
|
33
|
-
|
|
34
|
-
transform: rotate(
|
|
35
|
-
}
|
|
36
|
-
to {
|
|
37
|
-
transform: rotate(360deg);
|
|
38
|
-
}
|
|
33
|
+
from { transform: rotate(0deg); }
|
|
34
|
+
to { transform: rotate(360deg); }
|
|
39
35
|
`;
|
|
40
36
|
const StyledSmallWaitCursorWaitCursor = exports.StyledSmallWaitCursorWaitCursor = _styledComponents.default.div`
|
|
41
37
|
position: absolute;
|
|
42
|
-
top:
|
|
43
|
-
|
|
38
|
+
top: ${({
|
|
39
|
+
$shouldHideBackground
|
|
40
|
+
}) => $shouldHideBackground ? 0 : 5}px;
|
|
41
|
+
left: ${({
|
|
42
|
+
$shouldHideBackground
|
|
43
|
+
}) => $shouldHideBackground ? 0 : 5}px;
|
|
44
44
|
z-index: 2;
|
|
45
45
|
border-style: solid;
|
|
46
46
|
border-width: 3px;
|
|
@@ -55,11 +55,13 @@ const StyledSmallWaitCursorWaitCursor = exports.StyledSmallWaitCursorWaitCursor
|
|
|
55
55
|
return theme.colorMode === 'dark' && $shouldHideBackground ? theme.headline : theme.primary;
|
|
56
56
|
}};
|
|
57
57
|
height: ${({
|
|
58
|
+
$shouldHideBackground,
|
|
58
59
|
$size
|
|
59
|
-
}) => `${$size - 10}px`};
|
|
60
|
+
}) => $shouldHideBackground ? '100%' : `${$size - 10}px`};
|
|
60
61
|
width: ${({
|
|
62
|
+
$shouldHideBackground,
|
|
61
63
|
$size
|
|
62
|
-
}) => `${$size - 10}px`};
|
|
64
|
+
}) => $shouldHideBackground ? '100%' : `${$size - 10}px`};
|
|
63
65
|
border-radius: 50%;
|
|
64
66
|
display: inline-block;
|
|
65
67
|
border-top: 3px solid transparent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SmallWaitCursor.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledSmallWaitCursor","exports","styled","div","$size","$shouldShowWaitCursor","StyledSmallWaitCursorBackground","spin","keyframes","StyledSmallWaitCursorWaitCursor","
|
|
1
|
+
{"version":3,"file":"SmallWaitCursor.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledSmallWaitCursor","exports","styled","div","$size","$shouldShowWaitCursor","StyledSmallWaitCursorBackground","spin","keyframes","StyledSmallWaitCursorWaitCursor","$shouldHideBackground","theme","$color","colorMode","headline","primary","$speed"],"sources":["../../../../src/components/small-wait-cursor/SmallWaitCursor.styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type {\n SmallWaitCursorProps,\n SmallWaitCursorSize,\n SmallWaitCursorSpeed,\n} from './SmallWaitCursor';\n\ntype StyledSmallWaitCursorProps = WithTheme<{\n $shouldShowWaitCursor: boolean;\n $size: SmallWaitCursorSize | number;\n}>;\n\nexport const StyledSmallWaitCursor = styled.div<StyledSmallWaitCursorProps>`\n position: relative;\n height: ${({ $size }) => $size}px;\n width: ${({ $size }) => $size}px;\n opacity: ${({ $shouldShowWaitCursor }) => ($shouldShowWaitCursor ? 1 : 0)};\n`;\n\ntype StyledSmallWaitCursorBackgroundProps = WithTheme<unknown>;\n\nexport const StyledSmallWaitCursorBackground = styled.div<StyledSmallWaitCursorBackgroundProps>`\n background-color: white;\n border-radius: 50%;\n height: 100%;\n width: 100%;\n position: relative;\n z-index: 1;\n box-shadow:\n 0 4px 12px 0 rgba(0, 0, 0, 0.2),\n 0 1px 1px rgba(0, 0, 0, 0.2);\n`;\n\ntype StyledSmallWaitCursorWaitCursorProps = WithTheme<{\n $color: SmallWaitCursorProps['color'];\n $shouldHideBackground: SmallWaitCursorProps['shouldHideBackground'];\n $size: SmallWaitCursorSize | number;\n $speed: SmallWaitCursorSpeed;\n}>;\n\nconst spin = keyframes`\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n`;\n\nexport const StyledSmallWaitCursorWaitCursor = styled.div<StyledSmallWaitCursorWaitCursorProps>`\n position: absolute;\n top: ${({ $shouldHideBackground }) => ($shouldHideBackground ? 0 : 5)}px;\n left: ${({ $shouldHideBackground }) => ($shouldHideBackground ? 0 : 5)}px;\n z-index: 2;\n border-style: solid;\n border-width: 3px;\n border-color: ${({\n theme,\n $shouldHideBackground,\n $color,\n }: StyledSmallWaitCursorWaitCursorProps) => {\n if ($color) {\n return $color;\n }\n\n return theme.colorMode === 'dark' && $shouldHideBackground ? theme.headline : theme.primary;\n }};\n height: ${({ $shouldHideBackground, $size }) =>\n $shouldHideBackground ? '100%' : `${$size - 10}px`};\n width: ${({ $shouldHideBackground, $size }) =>\n $shouldHideBackground ? '100%' : `${$size - 10}px`};\n border-radius: 50%;\n display: inline-block;\n border-top: 3px solid transparent;\n\n animation: ${spin} ${({ $speed }) => $speed}s linear infinite;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAsD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAa/C,MAAMkB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,GAA+B;AAC3E;AACA,cAAc,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK;AAClC,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC,eAAe,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,CAAC,GAAG,CAAE;AAC7E,CAAC;AAIM,MAAMC,+BAA+B,GAAAL,OAAA,CAAAK,+BAAA,GAAGJ,yBAAM,CAACC,GAAyC;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AASD,MAAMI,IAAI,GAAG,IAAAC,2BAAS;AACtB;AACA;AACA,CAAC;AAEM,MAAMC,+BAA+B,GAAAR,OAAA,CAAAQ,+BAAA,GAAGP,yBAAM,CAACC,GAAyC;AAC/F;AACA,WAAW,CAAC;EAAEO;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,CAAC,GAAG,CAAE;AACzE,YAAY,CAAC;EAAEA;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,CAAC,GAAG,CAAE;AAC1E;AACA;AACA;AACA,oBAAoB,CAAC;EACbC,KAAK;EACLD,qBAAqB;EACrBE;AACkC,CAAC,KAAK;EACxC,IAAIA,MAAM,EAAE;IACR,OAAOA,MAAM;EACjB;EAEA,OAAOD,KAAK,CAACE,SAAS,KAAK,MAAM,IAAIH,qBAAqB,GAAGC,KAAK,CAACG,QAAQ,GAAGH,KAAK,CAACI,OAAO;AAC/F,CAAC;AACL,cAAc,CAAC;EAAEL,qBAAqB;EAAEN;AAAM,CAAC,KACvCM,qBAAqB,GAAG,MAAM,GAAG,GAAGN,KAAK,GAAG,EAAE,IAAI;AAC1D,aAAa,CAAC;EAAEM,qBAAqB;EAAEN;AAAM,CAAC,KACtCM,qBAAqB,GAAG,MAAM,GAAG,GAAGN,KAAK,GAAG,EAAE,IAAI;AAC1D;AACA;AACA;AACA;AACA,iBAAiBG,IAAI,IAAI,CAAC;EAAES;AAAO,CAAC,KAAKA,MAAM;AAC/C,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SmallWaitCursor.js","names":["React","StyledSmallWaitCursor","StyledSmallWaitCursorBackground","StyledSmallWaitCursorWaitCursor","SmallWaitCursorSize","SmallWaitCursorSpeed","SmallWaitCursor","shouldHideBackground","shouldHideWaitCursor","size","Medium","speed","color","createElement","$shouldShowWaitCursor","$size","$shouldHideBackground","$speed","$color","displayName"],"sources":["../../../../src/components/small-wait-cursor/SmallWaitCursor.tsx"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nimport React, { FC } from 'react';\nimport {\n StyledSmallWaitCursor,\n StyledSmallWaitCursorBackground,\n StyledSmallWaitCursorWaitCursor,\n} from './SmallWaitCursor.styles';\n\nexport enum SmallWaitCursorSize {\n Small = 16,\n Medium = 30,\n}\n\nexport enum SmallWaitCursorSpeed {\n Slow = 1.5,\n Medium = 1,\n Fast = 0.5,\n}\n\nexport type SmallWaitCursorProps = {\n /**\n * Specifies whether the wait cursor should be displayed with a background.\n */\n shouldHideBackground?: boolean;\n /**\n * Specifies whether the wait cursor should be displayed.\n */\n shouldHideWaitCursor?: boolean;\n /**\n * The size of the wait cursor in pixels. Use the SmallWaitCursorSize enum for this prop.\n */\n size?: SmallWaitCursorSize | number;\n /**\n * The speed of the animation in seconds. Use the SmallWaitCursorSpeed enum for this prop.\n
|
|
1
|
+
{"version":3,"file":"SmallWaitCursor.js","names":["React","StyledSmallWaitCursor","StyledSmallWaitCursorBackground","StyledSmallWaitCursorWaitCursor","SmallWaitCursorSize","SmallWaitCursorSpeed","SmallWaitCursor","shouldHideBackground","shouldHideWaitCursor","size","Medium","speed","color","createElement","$shouldShowWaitCursor","$size","$shouldHideBackground","$speed","$color","displayName"],"sources":["../../../../src/components/small-wait-cursor/SmallWaitCursor.tsx"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nimport React, { FC } from 'react';\nimport {\n StyledSmallWaitCursor,\n StyledSmallWaitCursorBackground,\n StyledSmallWaitCursorWaitCursor,\n} from './SmallWaitCursor.styles';\n\nexport enum SmallWaitCursorSize {\n Small = 16,\n Medium = 30,\n}\n\nexport enum SmallWaitCursorSpeed {\n Slow = 1.5,\n Medium = 1,\n Fast = 0.5,\n}\n\nexport type SmallWaitCursorProps = {\n /**\n * @description The color of the inner circle of the wait cursor.\n * @optional\n * @default undefined\n * @example <SmallWaitCursor color=\"#FF0000\" />\n */\n color?: string;\n /**\n * @description Specifies whether the wait cursor should be displayed with a background.\n * @optional\n * @default false\n * @example <SmallWaitCursor shouldHideBackground />\n */\n shouldHideBackground?: boolean;\n /**\n * @description Specifies whether the wait cursor should be displayed.\n * @optional\n * @default false\n * @example <SmallWaitCursor shouldHideWaitCursor />\n */\n shouldHideWaitCursor?: boolean;\n /**\n * @description The size of the wait cursor in pixels. Use the SmallWaitCursorSize enum for this prop or a custom value in pixels.\n * @optional\n * @default SmallWaitCursorSize.Medium\n * @example <SmallWaitCursor size={SmallWaitCursorSize.Small} />\n */\n size?: SmallWaitCursorSize | number;\n /**\n * @description The speed of the animation in seconds. Use the SmallWaitCursorSpeed enum for this prop.\n * @optional\n * @default SmallWaitCursorSpeed.Medium\n * @example <SmallWaitCursor speed={SmallWaitCursorSpeed.Fast} />\n */\n speed?: SmallWaitCursorSpeed;\n};\n\nconst SmallWaitCursor: FC<SmallWaitCursorProps> = ({\n shouldHideBackground = false,\n shouldHideWaitCursor = false,\n size = SmallWaitCursorSize.Medium,\n speed = SmallWaitCursorSpeed.Medium,\n color,\n}) => (\n <StyledSmallWaitCursor $shouldShowWaitCursor={!shouldHideWaitCursor} $size={size}>\n <StyledSmallWaitCursorWaitCursor\n $shouldHideBackground={shouldHideBackground}\n $size={size}\n $speed={speed}\n $color={color}\n />\n {!shouldHideBackground && <StyledSmallWaitCursorBackground />}\n </StyledSmallWaitCursor>\n);\n\nSmallWaitCursor.displayName = 'SmallWaitCursor';\n\nexport default SmallWaitCursor;\n"],"mappings":"AAAA;;AAEA,OAAOA,KAAK,MAAc,OAAO;AACjC,SACIC,qBAAqB,EACrBC,+BAA+B,EAC/BC,+BAA+B,QAC5B,0BAA0B;AAEjC,WAAYC,mBAAmB,0BAAnBA,mBAAmB;EAAnBA,mBAAmB,CAAnBA,mBAAmB;EAAnBA,mBAAmB,CAAnBA,mBAAmB;EAAA,OAAnBA,mBAAmB;AAAA;AAK/B,WAAYC,oBAAoB,0BAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA;AA4ChC,MAAMC,eAAyC,GAAGA,CAAC;EAC/CC,oBAAoB,GAAG,KAAK;EAC5BC,oBAAoB,GAAG,KAAK;EAC5BC,IAAI,GAAGL,mBAAmB,CAACM,MAAM;EACjCC,KAAK,GAAGN,oBAAoB,CAACK,MAAM;EACnCE;AACJ,CAAC,kBACGZ,KAAA,CAAAa,aAAA,CAACZ,qBAAqB;EAACa,qBAAqB,EAAE,CAACN,oBAAqB;EAACO,KAAK,EAAEN;AAAK,gBAC7ET,KAAA,CAAAa,aAAA,CAACV,+BAA+B;EAC5Ba,qBAAqB,EAAET,oBAAqB;EAC5CQ,KAAK,EAAEN,IAAK;EACZQ,MAAM,EAAEN,KAAM;EACdO,MAAM,EAAEN;AAAM,CACjB,CAAC,EACD,CAACL,oBAAoB,iBAAIP,KAAA,CAAAa,aAAA,CAACX,+BAA+B,MAAE,CACzC,CAC1B;AAEDI,eAAe,CAACa,WAAW,GAAG,iBAAiB;AAE/C,eAAeb,eAAe","ignoreList":[]}
|
|
@@ -23,17 +23,17 @@ export const StyledSmallWaitCursorBackground = styled.div`
|
|
|
23
23
|
0 1px 1px rgba(0, 0, 0, 0.2);
|
|
24
24
|
`;
|
|
25
25
|
const spin = keyframes`
|
|
26
|
-
|
|
27
|
-
transform: rotate(
|
|
28
|
-
}
|
|
29
|
-
to {
|
|
30
|
-
transform: rotate(360deg);
|
|
31
|
-
}
|
|
26
|
+
from { transform: rotate(0deg); }
|
|
27
|
+
to { transform: rotate(360deg); }
|
|
32
28
|
`;
|
|
33
29
|
export const StyledSmallWaitCursorWaitCursor = styled.div`
|
|
34
30
|
position: absolute;
|
|
35
|
-
top:
|
|
36
|
-
|
|
31
|
+
top: ${({
|
|
32
|
+
$shouldHideBackground
|
|
33
|
+
}) => $shouldHideBackground ? 0 : 5}px;
|
|
34
|
+
left: ${({
|
|
35
|
+
$shouldHideBackground
|
|
36
|
+
}) => $shouldHideBackground ? 0 : 5}px;
|
|
37
37
|
z-index: 2;
|
|
38
38
|
border-style: solid;
|
|
39
39
|
border-width: 3px;
|
|
@@ -48,11 +48,13 @@ export const StyledSmallWaitCursorWaitCursor = styled.div`
|
|
|
48
48
|
return theme.colorMode === 'dark' && $shouldHideBackground ? theme.headline : theme.primary;
|
|
49
49
|
}};
|
|
50
50
|
height: ${({
|
|
51
|
+
$shouldHideBackground,
|
|
51
52
|
$size
|
|
52
|
-
}) => `${$size - 10}px`};
|
|
53
|
+
}) => $shouldHideBackground ? '100%' : `${$size - 10}px`};
|
|
53
54
|
width: ${({
|
|
55
|
+
$shouldHideBackground,
|
|
54
56
|
$size
|
|
55
|
-
}) => `${$size - 10}px`};
|
|
57
|
+
}) => $shouldHideBackground ? '100%' : `${$size - 10}px`};
|
|
56
58
|
border-radius: 50%;
|
|
57
59
|
display: inline-block;
|
|
58
60
|
border-top: 3px solid transparent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SmallWaitCursor.styles.js","names":["styled","keyframes","StyledSmallWaitCursor","div","$size","$shouldShowWaitCursor","StyledSmallWaitCursorBackground","spin","StyledSmallWaitCursorWaitCursor","
|
|
1
|
+
{"version":3,"file":"SmallWaitCursor.styles.js","names":["styled","keyframes","StyledSmallWaitCursor","div","$size","$shouldShowWaitCursor","StyledSmallWaitCursorBackground","spin","StyledSmallWaitCursorWaitCursor","$shouldHideBackground","theme","$color","colorMode","headline","primary","$speed"],"sources":["../../../../src/components/small-wait-cursor/SmallWaitCursor.styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type {\n SmallWaitCursorProps,\n SmallWaitCursorSize,\n SmallWaitCursorSpeed,\n} from './SmallWaitCursor';\n\ntype StyledSmallWaitCursorProps = WithTheme<{\n $shouldShowWaitCursor: boolean;\n $size: SmallWaitCursorSize | number;\n}>;\n\nexport const StyledSmallWaitCursor = styled.div<StyledSmallWaitCursorProps>`\n position: relative;\n height: ${({ $size }) => $size}px;\n width: ${({ $size }) => $size}px;\n opacity: ${({ $shouldShowWaitCursor }) => ($shouldShowWaitCursor ? 1 : 0)};\n`;\n\ntype StyledSmallWaitCursorBackgroundProps = WithTheme<unknown>;\n\nexport const StyledSmallWaitCursorBackground = styled.div<StyledSmallWaitCursorBackgroundProps>`\n background-color: white;\n border-radius: 50%;\n height: 100%;\n width: 100%;\n position: relative;\n z-index: 1;\n box-shadow:\n 0 4px 12px 0 rgba(0, 0, 0, 0.2),\n 0 1px 1px rgba(0, 0, 0, 0.2);\n`;\n\ntype StyledSmallWaitCursorWaitCursorProps = WithTheme<{\n $color: SmallWaitCursorProps['color'];\n $shouldHideBackground: SmallWaitCursorProps['shouldHideBackground'];\n $size: SmallWaitCursorSize | number;\n $speed: SmallWaitCursorSpeed;\n}>;\n\nconst spin = keyframes`\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n`;\n\nexport const StyledSmallWaitCursorWaitCursor = styled.div<StyledSmallWaitCursorWaitCursorProps>`\n position: absolute;\n top: ${({ $shouldHideBackground }) => ($shouldHideBackground ? 0 : 5)}px;\n left: ${({ $shouldHideBackground }) => ($shouldHideBackground ? 0 : 5)}px;\n z-index: 2;\n border-style: solid;\n border-width: 3px;\n border-color: ${({\n theme,\n $shouldHideBackground,\n $color,\n }: StyledSmallWaitCursorWaitCursorProps) => {\n if ($color) {\n return $color;\n }\n\n return theme.colorMode === 'dark' && $shouldHideBackground ? theme.headline : theme.primary;\n }};\n height: ${({ $shouldHideBackground, $size }) =>\n $shouldHideBackground ? '100%' : `${$size - 10}px`};\n width: ${({ $shouldHideBackground, $size }) =>\n $shouldHideBackground ? '100%' : `${$size - 10}px`};\n border-radius: 50%;\n display: inline-block;\n border-top: 3px solid transparent;\n\n animation: ${spin} ${({ $speed }) => $speed}s linear infinite;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,SAAS,QAAQ,mBAAmB;AAarD,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,GAA+B;AAC3E;AACA,cAAc,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK;AAClC,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC,eAAe,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,CAAC,GAAG,CAAE;AAC7E,CAAC;AAID,OAAO,MAAMC,+BAA+B,GAAGN,MAAM,CAACG,GAAyC;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AASD,MAAMI,IAAI,GAAGN,SAAS;AACtB;AACA;AACA,CAAC;AAED,OAAO,MAAMO,+BAA+B,GAAGR,MAAM,CAACG,GAAyC;AAC/F;AACA,WAAW,CAAC;EAAEM;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,CAAC,GAAG,CAAE;AACzE,YAAY,CAAC;EAAEA;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,CAAC,GAAG,CAAE;AAC1E;AACA;AACA;AACA,oBAAoB,CAAC;EACbC,KAAK;EACLD,qBAAqB;EACrBE;AACkC,CAAC,KAAK;EACxC,IAAIA,MAAM,EAAE;IACR,OAAOA,MAAM;EACjB;EAEA,OAAOD,KAAK,CAACE,SAAS,KAAK,MAAM,IAAIH,qBAAqB,GAAGC,KAAK,CAACG,QAAQ,GAAGH,KAAK,CAACI,OAAO;AAC/F,CAAC;AACL,cAAc,CAAC;EAAEL,qBAAqB;EAAEL;AAAM,CAAC,KACvCK,qBAAqB,GAAG,MAAM,GAAG,GAAGL,KAAK,GAAG,EAAE,IAAI;AAC1D,aAAa,CAAC;EAAEK,qBAAqB;EAAEL;AAAM,CAAC,KACtCK,qBAAqB,GAAG,MAAM,GAAG,GAAGL,KAAK,GAAG,EAAE,IAAI;AAC1D;AACA;AACA;AACA;AACA,iBAAiBG,IAAI,IAAI,CAAC;EAAEQ;AAAO,CAAC,KAAKA,MAAM;AAC/C,CAAC","ignoreList":[]}
|
|
@@ -10,25 +10,40 @@ export declare enum SmallWaitCursorSpeed {
|
|
|
10
10
|
}
|
|
11
11
|
export type SmallWaitCursorProps = {
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* @description The color of the inner circle of the wait cursor.
|
|
14
|
+
* @optional
|
|
15
|
+
* @default undefined
|
|
16
|
+
* @example <SmallWaitCursor color="#FF0000" />
|
|
17
|
+
*/
|
|
18
|
+
color?: string;
|
|
19
|
+
/**
|
|
20
|
+
* @description Specifies whether the wait cursor should be displayed with a background.
|
|
21
|
+
* @optional
|
|
22
|
+
* @default false
|
|
23
|
+
* @example <SmallWaitCursor shouldHideBackground />
|
|
14
24
|
*/
|
|
15
25
|
shouldHideBackground?: boolean;
|
|
16
26
|
/**
|
|
17
|
-
* Specifies whether the wait cursor should be displayed.
|
|
27
|
+
* @description Specifies whether the wait cursor should be displayed.
|
|
28
|
+
* @optional
|
|
29
|
+
* @default false
|
|
30
|
+
* @example <SmallWaitCursor shouldHideWaitCursor />
|
|
18
31
|
*/
|
|
19
32
|
shouldHideWaitCursor?: boolean;
|
|
20
33
|
/**
|
|
21
|
-
* The size of the wait cursor in pixels. Use the SmallWaitCursorSize enum for this prop.
|
|
34
|
+
* @description The size of the wait cursor in pixels. Use the SmallWaitCursorSize enum for this prop or a custom value in pixels.
|
|
35
|
+
* @optional
|
|
36
|
+
* @default SmallWaitCursorSize.Medium
|
|
37
|
+
* @example <SmallWaitCursor size={SmallWaitCursorSize.Small} />
|
|
22
38
|
*/
|
|
23
39
|
size?: SmallWaitCursorSize | number;
|
|
24
40
|
/**
|
|
25
|
-
* The speed of the animation in seconds. Use the SmallWaitCursorSpeed enum for this prop.
|
|
41
|
+
* @description The speed of the animation in seconds. Use the SmallWaitCursorSpeed enum for this prop.
|
|
42
|
+
* @optional
|
|
43
|
+
* @default SmallWaitCursorSpeed.Medium
|
|
44
|
+
* @example <SmallWaitCursor speed={SmallWaitCursorSpeed.Fast} />
|
|
26
45
|
*/
|
|
27
46
|
speed?: SmallWaitCursorSpeed;
|
|
28
|
-
/**
|
|
29
|
-
* The color of the inner circle of the wait cursor.
|
|
30
|
-
*/
|
|
31
|
-
color?: string;
|
|
32
47
|
};
|
|
33
48
|
declare const SmallWaitCursor: FC<SmallWaitCursorProps>;
|
|
34
49
|
export default SmallWaitCursor;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
|
|
2
|
-
import type { SmallWaitCursorSize, SmallWaitCursorSpeed } from './SmallWaitCursor';
|
|
2
|
+
import type { SmallWaitCursorProps, SmallWaitCursorSize, SmallWaitCursorSpeed } from './SmallWaitCursor';
|
|
3
3
|
type StyledSmallWaitCursorProps = WithTheme<{
|
|
4
4
|
$shouldShowWaitCursor: boolean;
|
|
5
5
|
$size: SmallWaitCursorSize | number;
|
|
@@ -9,10 +9,10 @@ export declare const StyledSmallWaitCursorBackground: import("styled-components/
|
|
|
9
9
|
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
10
10
|
}>> & string;
|
|
11
11
|
type StyledSmallWaitCursorWaitCursorProps = WithTheme<{
|
|
12
|
+
$color: SmallWaitCursorProps['color'];
|
|
13
|
+
$shouldHideBackground: SmallWaitCursorProps['shouldHideBackground'];
|
|
12
14
|
$size: SmallWaitCursorSize | number;
|
|
13
15
|
$speed: SmallWaitCursorSpeed;
|
|
14
|
-
$shouldHideBackground: boolean;
|
|
15
|
-
$color?: string;
|
|
16
16
|
}>;
|
|
17
17
|
export declare const StyledSmallWaitCursorWaitCursor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSmallWaitCursorWaitCursorProps>> & string;
|
|
18
18
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1385",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "6986f3c2ce4bccf031a46f4ab6f78cdd7a169ee0"
|
|
90
90
|
}
|