@activecollab/components 1.0.129 → 1.0.130
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/cjs/components/Loaders/Spinner/SpinnerLoader.js +8 -8
- package/dist/cjs/components/Loaders/Spinner/SpinnerLoader.js.map +1 -1
- package/dist/cjs/components/Loaders/Spinner/Styles.js +4 -4
- package/dist/cjs/components/Loaders/Spinner/Styles.js.map +1 -1
- package/dist/esm/components/Loaders/Spinner/SpinnerLoader.d.ts +1 -1
- package/dist/esm/components/Loaders/Spinner/SpinnerLoader.d.ts.map +1 -1
- package/dist/esm/components/Loaders/Spinner/SpinnerLoader.js +8 -8
- package/dist/esm/components/Loaders/Spinner/SpinnerLoader.js.map +1 -1
- package/dist/esm/components/Loaders/Spinner/Styles.d.ts +2 -2
- package/dist/esm/components/Loaders/Spinner/Styles.d.ts.map +1 -1
- package/dist/esm/components/Loaders/Spinner/Styles.js +4 -4
- package/dist/esm/components/Loaders/Spinner/Styles.js.map +1 -1
- package/dist/index.js +12 -12
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _Styles = require("./Styles");
|
|
13
13
|
|
|
14
|
-
var _excluded = ["radius", "
|
|
14
|
+
var _excluded = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
|
|
15
15
|
|
|
16
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
17
|
|
|
@@ -25,13 +25,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
25
25
|
|
|
26
26
|
var SpinnerLoader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
27
27
|
var _ref$radius = _ref.radius,
|
|
28
|
-
radius = _ref$radius === void 0 ?
|
|
29
|
-
_ref$
|
|
30
|
-
|
|
28
|
+
radius = _ref$radius === void 0 ? 10 : _ref$radius,
|
|
29
|
+
_ref$stroke = _ref.stroke,
|
|
30
|
+
stroke = _ref$stroke === void 0 ? 2 : _ref$stroke,
|
|
31
31
|
_ref$activeStrokeColo = _ref.activeStrokeColor,
|
|
32
|
-
activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-
|
|
32
|
+
activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-secondary)" : _ref$activeStrokeColo,
|
|
33
33
|
_ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
|
|
34
|
-
inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-300)" : _ref$inactiveStrokeCo,
|
|
34
|
+
inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-transparent-300)" : _ref$inactiveStrokeCo,
|
|
35
35
|
_ref$activeColorPerce = _ref.activeColorPercentage,
|
|
36
36
|
activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
|
|
37
37
|
_ref$rotateDurationIn = _ref.rotateDurationInSeconds,
|
|
@@ -42,8 +42,8 @@ var SpinnerLoader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
42
42
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledSpinnerLoader, _extends({
|
|
43
43
|
ref: ref,
|
|
44
44
|
className: className,
|
|
45
|
-
$
|
|
46
|
-
$
|
|
45
|
+
$diameter: radius * 2,
|
|
46
|
+
$stroke: stroke,
|
|
47
47
|
$activeStrokeColor: activeStrokeColor,
|
|
48
48
|
$inactiveStrokeColor: inactiveStrokeColor,
|
|
49
49
|
$activeColorPercentage: activeColorPercentage,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":["SpinnerLoader","ref","radius","
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":["SpinnerLoader","ref","radius","stroke","activeStrokeColor","inactiveStrokeColor","activeColorPercentage","rotateDurationInSeconds","className","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;AAiBO,IAAMA,aAAa,gBAAG,uBAI3B,gBAWEC,GAXF,EAYK;AAAA,yBAVDC,MAUC;AAAA,MAVDA,MAUC,4BAVQ,EAUR;AAAA,yBATDC,MASC;AAAA,MATDA,MASC,4BATQ,CASR;AAAA,mCARDC,iBAQC;AAAA,MARDA,iBAQC,sCARmB,wBAQnB;AAAA,mCAPDC,mBAOC;AAAA,MAPDA,mBAOC,sCAPqB,oCAOrB;AAAA,mCANDC,qBAMC;AAAA,MANDA,qBAMC,sCANuB,KAMvB;AAAA,mCALDC,uBAKC;AAAA,MALDA,uBAKC,sCALyB,IAKzB;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE,6BAAC,2BAAD;AACE,IAAA,GAAG,EAAER,GADP;AAEE,IAAA,SAAS,EAAEO,SAFb;AAGE,IAAA,SAAS,EAAEN,MAAM,GAAG,CAHtB;AAIE,IAAA,OAAO,EAAEC,MAJX;AAKE,IAAA,kBAAkB,EAAEC,iBALtB;AAME,IAAA,oBAAoB,EAAEC,mBANxB;AAOE,IAAA,sBAAsB,EAAEC,qBAP1B;AAQE,IAAA,wBAAwB,EAAEC;AAR5B,KASME,IATN,EADF;AAaD,CA9B0B,CAAtB;;AAiCPT,aAAa,CAACU,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef } from \"react\";\nimport { StyledSpinnerLoader } from \"./Styles\";\n\nexport interface SpinnerLoaderProps {\n /** Loader circumference size */\n radius?: number;\n /** Stroke width of the loader */\n stroke?: number;\n /** Active color of spinning loader */\n activeStrokeColor?: string;\n /** Percentage of the circle which the active color takes */\n activeColorPercentage?: \"25%\" | \"50%\" | \"75%\";\n /** Inactive color of spinning loader */\n inactiveStrokeColor?: string;\n /** Rotate speed of animation in seconds */\n rotateDurationInSeconds?: number;\n}\n\nexport const SpinnerLoader = forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<\"div\"> & SpinnerLoaderProps\n>(\n (\n {\n radius = 10,\n stroke = 2,\n activeStrokeColor = \"var(--color-secondary)\",\n inactiveStrokeColor = \"var(--color-theme-transparent-300)\",\n activeColorPercentage = \"25%\",\n rotateDurationInSeconds = 0.75,\n className,\n ...rest\n },\n ref\n ) => {\n return (\n <StyledSpinnerLoader\n ref={ref}\n className={className}\n $diameter={radius * 2}\n $stroke={stroke}\n $activeStrokeColor={activeStrokeColor}\n $inactiveStrokeColor={inactiveStrokeColor}\n $activeColorPercentage={activeColorPercentage}\n $rotateDurationInSeconds={rotateDurationInSeconds}\n {...rest}\n />\n );\n }\n);\n\nSpinnerLoader.displayName = \"SpinnerLoader\";\n"],"file":"SpinnerLoader.js"}
|
|
@@ -21,13 +21,13 @@ var StyledSpinnerLoader = _styledComponents.default.div.withConfig({
|
|
|
21
21
|
displayName: "Styles__StyledSpinnerLoader",
|
|
22
22
|
componentId: "sc-1ht53g9-0"
|
|
23
23
|
})(["", " border-radius:100%;", " ", " ", " ", ""], _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
24
|
-
return (0, _styledComponents.css)(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$
|
|
24
|
+
return (0, _styledComponents.css)(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$diameter, props.$diameter, rotateAnimation, props.$rotateDurationInSeconds);
|
|
25
25
|
}, function (props) {
|
|
26
|
-
return props.$activeColorPercentage === "25%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
26
|
+
return props.$activeColorPercentage === "25%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
27
27
|
}, function (props) {
|
|
28
|
-
return props.$activeColorPercentage === "50%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
28
|
+
return props.$activeColorPercentage === "50%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
29
29
|
}, function (props) {
|
|
30
|
-
return props.$activeColorPercentage === "75%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
30
|
+
return props.$activeColorPercentage === "75%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
31
31
|
});
|
|
32
32
|
|
|
33
33
|
exports.StyledSpinnerLoader = StyledSpinnerLoader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":["rotateAnimation","keyframes","StyledSpinnerLoader","styled","div","BoxSizingStyle","props","css","$
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":["rotateAnimation","keyframes","StyledSpinnerLoader","styled","div","BoxSizingStyle","props","css","$diameter","$rotateDurationInSeconds","$activeColorPercentage","$stroke","$inactiveStrokeColor","$activeStrokeColor"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,eAAe,OAAGC,2BAAH,iEAArB;;AAcO,IAAMC,mBAAmB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,oDAC5BC,8BAD4B,EAG5B,UAACC,KAAD;AAAA,aACAC,qBADA,wEAEWD,KAAK,CAACE,SAFjB,EAGYF,KAAK,CAACE,SAHlB,EAIeR,eAJf,EAIkCM,KAAK,CAACG,wBAJxC;AAAA,CAH4B,EAW5B,UAACH,KAAD;AAAA,SACAA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,OAFxB,EAE2CL,KAAK,CAACM,oBAFjD,EAGmBN,KAAK,CAACK,OAHzB,EAG4CL,KAAK,CAACM,oBAHlD,EAIiBN,KAAK,CAACK,OAJvB,EAI0CL,KAAK,CAACM,oBAJhD,EAKgBN,KAAK,CAACK,OALtB,EAKyCL,KAAK,CAACO,kBAL/C,CADA;AAAA,CAX4B,EAoB5B,UAACP,KAAD;AAAA,SACAA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,OAFxB,EAE2CL,KAAK,CAACO,kBAFjD,EAGmBP,KAAK,CAACK,OAHzB,EAG4CL,KAAK,CAACM,oBAHlD,EAIiBN,KAAK,CAACK,OAJvB,EAI0CL,KAAK,CAACM,oBAJhD,EAKgBN,KAAK,CAACK,OALtB,EAKyCL,KAAK,CAACO,kBAL/C,CADA;AAAA,CApB4B,EA6B1B,UAACP,KAAD;AAAA,SACFA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,OAFxB,EAE2CL,KAAK,CAACO,kBAFjD,EAGmBP,KAAK,CAACK,OAHzB,EAG4CL,KAAK,CAACO,kBAHlD,EAIiBP,KAAK,CAACK,OAJvB,EAI0CL,KAAK,CAACM,oBAJhD,EAKgBN,KAAK,CAACK,OALtB,EAKyCL,KAAK,CAACO,kBAL/C,CADE;AAAA,CA7B0B,CAAzB","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\n\nconst rotateAnimation = keyframes`\n from { transform: rotate(0deg); }\n to { transform: rotate(359deg); }\n`;\n\nexport interface StyledSpinnerLoaderProps {\n $diameter: number;\n $stroke: number;\n $activeStrokeColor: string;\n $inactiveStrokeColor: string;\n $activeColorPercentage: \"25%\" | \"50%\" | \"75%\";\n $rotateDurationInSeconds: number;\n}\n\nexport const StyledSpinnerLoader = styled.div<StyledSpinnerLoaderProps>`\n ${BoxSizingStyle}\n border-radius: 100%;\n ${(props) =>\n css`\n width: ${props.$diameter}px;\n height: ${props.$diameter}px;\n animation: ${rotateAnimation} ${props.$rotateDurationInSeconds}s infinite\n linear;\n `}\n\n ${(props) =>\n props.$activeColorPercentage === \"25%\" &&\n css`\n border-right: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-bottom: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n `}\n\n ${(props) =>\n props.$activeColorPercentage === \"50%\" &&\n css`\n border-right: ${props.$stroke}px solid ${props.$activeStrokeColor};\n border-bottom: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n `}\n\n ${(props) =>\n props.$activeColorPercentage === \"75%\" &&\n css`\n border-right: ${props.$stroke}px solid ${props.$activeStrokeColor};\n border-bottom: ${props.$stroke}px solid ${props.$activeStrokeColor};\n border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n `}\n`;\n"],"file":"Styles.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpinnerLoader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,MAAM,WAAW,kBAAkB;IAEjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,
|
|
1
|
+
{"version":3,"file":"SpinnerLoader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,MAAM,WAAW,kBAAkB;IAEjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,qBAAqB,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IAE9C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,aAAa,qOA+BzB,CAAC"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["radius", "
|
|
3
|
+
var _excluded = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
|
|
4
4
|
import React, { forwardRef } from "react";
|
|
5
5
|
import { StyledSpinnerLoader } from "./Styles";
|
|
6
6
|
export var SpinnerLoader = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
7
7
|
var _ref$radius = _ref.radius,
|
|
8
|
-
radius = _ref$radius === void 0 ?
|
|
9
|
-
_ref$
|
|
10
|
-
|
|
8
|
+
radius = _ref$radius === void 0 ? 10 : _ref$radius,
|
|
9
|
+
_ref$stroke = _ref.stroke,
|
|
10
|
+
stroke = _ref$stroke === void 0 ? 2 : _ref$stroke,
|
|
11
11
|
_ref$activeStrokeColo = _ref.activeStrokeColor,
|
|
12
|
-
activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-
|
|
12
|
+
activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-secondary)" : _ref$activeStrokeColo,
|
|
13
13
|
_ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
|
|
14
|
-
inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-300)" : _ref$inactiveStrokeCo,
|
|
14
|
+
inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-transparent-300)" : _ref$inactiveStrokeCo,
|
|
15
15
|
_ref$activeColorPerce = _ref.activeColorPercentage,
|
|
16
16
|
activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
|
|
17
17
|
_ref$rotateDurationIn = _ref.rotateDurationInSeconds,
|
|
@@ -22,8 +22,8 @@ export var SpinnerLoader = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
22
22
|
return /*#__PURE__*/React.createElement(StyledSpinnerLoader, _extends({
|
|
23
23
|
ref: ref,
|
|
24
24
|
className: className,
|
|
25
|
-
$
|
|
26
|
-
$
|
|
25
|
+
$diameter: radius * 2,
|
|
26
|
+
$stroke: stroke,
|
|
27
27
|
$activeStrokeColor: activeStrokeColor,
|
|
28
28
|
$inactiveStrokeColor: inactiveStrokeColor,
|
|
29
29
|
$activeColorPercentage: activeColorPercentage,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":["React","forwardRef","StyledSpinnerLoader","SpinnerLoader","ref","radius","
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":["React","forwardRef","StyledSpinnerLoader","SpinnerLoader","ref","radius","stroke","activeStrokeColor","inactiveStrokeColor","activeColorPercentage","rotateDurationInSeconds","className","rest","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,mBAAT,QAAoC,UAApC;AAiBA,OAAO,IAAMC,aAAa,gBAAGF,UAAU,CAIrC,gBAWEG,GAXF,EAYK;AAAA,yBAVDC,MAUC;AAAA,MAVDA,MAUC,4BAVQ,EAUR;AAAA,yBATDC,MASC;AAAA,MATDA,MASC,4BATQ,CASR;AAAA,mCARDC,iBAQC;AAAA,MARDA,iBAQC,sCARmB,wBAQnB;AAAA,mCAPDC,mBAOC;AAAA,MAPDA,mBAOC,sCAPqB,oCAOrB;AAAA,mCANDC,qBAMC;AAAA,MANDA,qBAMC,sCANuB,KAMvB;AAAA,mCALDC,uBAKC;AAAA,MALDA,uBAKC,sCALyB,IAKzB;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE,oBAAC,mBAAD;AACE,IAAA,GAAG,EAAER,GADP;AAEE,IAAA,SAAS,EAAEO,SAFb;AAGE,IAAA,SAAS,EAAEN,MAAM,GAAG,CAHtB;AAIE,IAAA,OAAO,EAAEC,MAJX;AAKE,IAAA,kBAAkB,EAAEC,iBALtB;AAME,IAAA,oBAAoB,EAAEC,mBANxB;AAOE,IAAA,sBAAsB,EAAEC,qBAP1B;AAQE,IAAA,wBAAwB,EAAEC;AAR5B,KASME,IATN,EADF;AAaD,CA9BoC,CAAhC;AAiCPT,aAAa,CAACU,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef } from \"react\";\nimport { StyledSpinnerLoader } from \"./Styles\";\n\nexport interface SpinnerLoaderProps {\n /** Loader circumference size */\n radius?: number;\n /** Stroke width of the loader */\n stroke?: number;\n /** Active color of spinning loader */\n activeStrokeColor?: string;\n /** Percentage of the circle which the active color takes */\n activeColorPercentage?: \"25%\" | \"50%\" | \"75%\";\n /** Inactive color of spinning loader */\n inactiveStrokeColor?: string;\n /** Rotate speed of animation in seconds */\n rotateDurationInSeconds?: number;\n}\n\nexport const SpinnerLoader = forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<\"div\"> & SpinnerLoaderProps\n>(\n (\n {\n radius = 10,\n stroke = 2,\n activeStrokeColor = \"var(--color-secondary)\",\n inactiveStrokeColor = \"var(--color-theme-transparent-300)\",\n activeColorPercentage = \"25%\",\n rotateDurationInSeconds = 0.75,\n className,\n ...rest\n },\n ref\n ) => {\n return (\n <StyledSpinnerLoader\n ref={ref}\n className={className}\n $diameter={radius * 2}\n $stroke={stroke}\n $activeStrokeColor={activeStrokeColor}\n $inactiveStrokeColor={inactiveStrokeColor}\n $activeColorPercentage={activeColorPercentage}\n $rotateDurationInSeconds={rotateDurationInSeconds}\n {...rest}\n />\n );\n }\n);\n\nSpinnerLoader.displayName = \"SpinnerLoader\";\n"],"file":"SpinnerLoader.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,wBAAwB;IACvC,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IAC9C,wBAAwB,EAAE,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,mBAAmB,0FAqC/B,CAAC"}
|
|
@@ -5,12 +5,12 @@ export var StyledSpinnerLoader = styled.div.withConfig({
|
|
|
5
5
|
displayName: "Styles__StyledSpinnerLoader",
|
|
6
6
|
componentId: "sc-1ht53g9-0"
|
|
7
7
|
})(["", " border-radius:100%;", " ", " ", " ", ""], BoxSizingStyle, function (props) {
|
|
8
|
-
return css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$
|
|
8
|
+
return css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$diameter, props.$diameter, rotateAnimation, props.$rotateDurationInSeconds);
|
|
9
9
|
}, function (props) {
|
|
10
|
-
return props.$activeColorPercentage === "25%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
10
|
+
return props.$activeColorPercentage === "25%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
11
11
|
}, function (props) {
|
|
12
|
-
return props.$activeColorPercentage === "50%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
12
|
+
return props.$activeColorPercentage === "50%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
13
13
|
}, function (props) {
|
|
14
|
-
return props.$activeColorPercentage === "75%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
14
|
+
return props.$activeColorPercentage === "75%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
15
15
|
});
|
|
16
16
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":["styled","css","keyframes","BoxSizingStyle","rotateAnimation","StyledSpinnerLoader","div","props","$
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":["styled","css","keyframes","BoxSizingStyle","rotateAnimation","StyledSpinnerLoader","div","props","$diameter","$rotateDurationInSeconds","$activeColorPercentage","$stroke","$inactiveStrokeColor","$activeStrokeColor"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,EAAsBC,SAAtB,QAAuC,mBAAvC;AACA,SAASC,cAAT,QAA+B,sBAA/B;AAEA,IAAMC,eAAe,GAAGF,SAAH,gEAArB;AAcA,OAAO,IAAMG,mBAAmB,GAAGL,MAAM,CAACM,GAAV;AAAA;AAAA;AAAA,oDAC5BH,cAD4B,EAG5B,UAACI,KAAD;AAAA,SACAN,GADA,uEAEWM,KAAK,CAACC,SAFjB,EAGYD,KAAK,CAACC,SAHlB,EAIeJ,eAJf,EAIkCG,KAAK,CAACE,wBAJxC;AAAA,CAH4B,EAW5B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,sBAAN,KAAiC,KAAjC,IACAT,GADA,iIAEkBM,KAAK,CAACI,OAFxB,EAE2CJ,KAAK,CAACK,oBAFjD,EAGmBL,KAAK,CAACI,OAHzB,EAG4CJ,KAAK,CAACK,oBAHlD,EAIiBL,KAAK,CAACI,OAJvB,EAI0CJ,KAAK,CAACK,oBAJhD,EAKgBL,KAAK,CAACI,OALtB,EAKyCJ,KAAK,CAACM,kBAL/C,CADA;AAAA,CAX4B,EAoB5B,UAACN,KAAD;AAAA,SACAA,KAAK,CAACG,sBAAN,KAAiC,KAAjC,IACAT,GADA,iIAEkBM,KAAK,CAACI,OAFxB,EAE2CJ,KAAK,CAACM,kBAFjD,EAGmBN,KAAK,CAACI,OAHzB,EAG4CJ,KAAK,CAACK,oBAHlD,EAIiBL,KAAK,CAACI,OAJvB,EAI0CJ,KAAK,CAACK,oBAJhD,EAKgBL,KAAK,CAACI,OALtB,EAKyCJ,KAAK,CAACM,kBAL/C,CADA;AAAA,CApB4B,EA6B1B,UAACN,KAAD;AAAA,SACFA,KAAK,CAACG,sBAAN,KAAiC,KAAjC,IACAT,GADA,iIAEkBM,KAAK,CAACI,OAFxB,EAE2CJ,KAAK,CAACM,kBAFjD,EAGmBN,KAAK,CAACI,OAHzB,EAG4CJ,KAAK,CAACM,kBAHlD,EAIiBN,KAAK,CAACI,OAJvB,EAI0CJ,KAAK,CAACK,oBAJhD,EAKgBL,KAAK,CAACI,OALtB,EAKyCJ,KAAK,CAACM,kBAL/C,CADE;AAAA,CA7B0B,CAAzB","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\n\nconst rotateAnimation = keyframes`\n from { transform: rotate(0deg); }\n to { transform: rotate(359deg); }\n`;\n\nexport interface StyledSpinnerLoaderProps {\n $diameter: number;\n $stroke: number;\n $activeStrokeColor: string;\n $inactiveStrokeColor: string;\n $activeColorPercentage: \"25%\" | \"50%\" | \"75%\";\n $rotateDurationInSeconds: number;\n}\n\nexport const StyledSpinnerLoader = styled.div<StyledSpinnerLoaderProps>`\n ${BoxSizingStyle}\n border-radius: 100%;\n ${(props) =>\n css`\n width: ${props.$diameter}px;\n height: ${props.$diameter}px;\n animation: ${rotateAnimation} ${props.$rotateDurationInSeconds}s infinite\n linear;\n `}\n\n ${(props) =>\n props.$activeColorPercentage === \"25%\" &&\n css`\n border-right: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-bottom: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n `}\n\n ${(props) =>\n props.$activeColorPercentage === \"50%\" &&\n css`\n border-right: ${props.$stroke}px solid ${props.$activeStrokeColor};\n border-bottom: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n `}\n\n ${(props) =>\n props.$activeColorPercentage === \"75%\" &&\n css`\n border-right: ${props.$stroke}px solid ${props.$activeStrokeColor};\n border-bottom: ${props.$stroke}px solid ${props.$activeStrokeColor};\n border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n `}\n`;\n"],"file":"Styles.js"}
|
package/dist/index.js
CHANGED
|
@@ -6188,25 +6188,25 @@
|
|
|
6188
6188
|
displayName: "Styles__StyledSpinnerLoader",
|
|
6189
6189
|
componentId: "sc-1ht53g9-0"
|
|
6190
6190
|
})(["", " border-radius:100%;", " ", " ", " ", ""], BoxSizingStyle, function (props) {
|
|
6191
|
-
return styled.css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$
|
|
6191
|
+
return styled.css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$diameter, props.$diameter, rotateAnimation, props.$rotateDurationInSeconds);
|
|
6192
6192
|
}, function (props) {
|
|
6193
|
-
return props.$activeColorPercentage === "25%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
6193
|
+
return props.$activeColorPercentage === "25%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
6194
6194
|
}, function (props) {
|
|
6195
|
-
return props.$activeColorPercentage === "50%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
6195
|
+
return props.$activeColorPercentage === "50%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
6196
6196
|
}, function (props) {
|
|
6197
|
-
return props.$activeColorPercentage === "75%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$
|
|
6197
|
+
return props.$activeColorPercentage === "75%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
6198
6198
|
});
|
|
6199
6199
|
|
|
6200
|
-
var _excluded$z = ["radius", "
|
|
6200
|
+
var _excluded$z = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
|
|
6201
6201
|
var SpinnerLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
6202
6202
|
var _ref$radius = _ref.radius,
|
|
6203
|
-
radius = _ref$radius === void 0 ?
|
|
6204
|
-
_ref$
|
|
6205
|
-
|
|
6203
|
+
radius = _ref$radius === void 0 ? 10 : _ref$radius,
|
|
6204
|
+
_ref$stroke = _ref.stroke,
|
|
6205
|
+
stroke = _ref$stroke === void 0 ? 2 : _ref$stroke,
|
|
6206
6206
|
_ref$activeStrokeColo = _ref.activeStrokeColor,
|
|
6207
|
-
activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-
|
|
6207
|
+
activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-secondary)" : _ref$activeStrokeColo,
|
|
6208
6208
|
_ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
|
|
6209
|
-
inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-300)" : _ref$inactiveStrokeCo,
|
|
6209
|
+
inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-transparent-300)" : _ref$inactiveStrokeCo,
|
|
6210
6210
|
_ref$activeColorPerce = _ref.activeColorPercentage,
|
|
6211
6211
|
activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
|
|
6212
6212
|
_ref$rotateDurationIn = _ref.rotateDurationInSeconds,
|
|
@@ -6217,8 +6217,8 @@
|
|
|
6217
6217
|
return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, _extends({
|
|
6218
6218
|
ref: ref,
|
|
6219
6219
|
className: className,
|
|
6220
|
-
$
|
|
6221
|
-
$
|
|
6220
|
+
$diameter: radius * 2,
|
|
6221
|
+
$stroke: stroke,
|
|
6222
6222
|
$activeStrokeColor: activeStrokeColor,
|
|
6223
6223
|
$inactiveStrokeColor: inactiveStrokeColor,
|
|
6224
6224
|
$activeColorPercentage: activeColorPercentage,
|