asab_webui_components 27.2.2 → 27.2.3

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Spinner = Spinner;
+var _react = _interopRequireDefault(require("react"));
+require("./Spinner.scss");
+/*
+	Animated loading spinner component
+
+	Usage:
+		import { Spinner } from 'asab_webui_components';
+
+		<Spinner />
+*/
+
+function Spinner() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "asab-spinner d-flex justify-content-center w-100 overflow-hidden",
+    role: "status",
+    "aria-label": "Loading"
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    className: "asab-spinner-circular h-100",
+    viewBox: "25 25 50 50"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    className: "path",
+    cx: "50",
+    cy: "50",
+    r: "20",
+    fill: "none",
+    strokeWidth: "5",
+    strokeMiterlimit: "10"
+  })));
+}

package/dist/components/Spinner/Spinner.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import './Spinner.scss';
+
+/*
+	Animated loading spinner component
+
+	Usage:
+		import { Spinner } from 'asab_webui_components';
+
+		<Spinner />
+*/
+
+export function Spinner() {
+	
+	return (
+			<div className='asab-spinner d-flex justify-content-center w-100 overflow-hidden' role='status' aria-label='Loading'>
+				<svg className='asab-spinner-circular h-100' viewBox='25 25 50 50'>
+					<circle
+						className='path'
+						cx='50'
+						cy='50'
+						r='20'
+						fill='none'
+						strokeWidth='5'
+						strokeMiterlimit='10'
+					/>
+				</svg>
+			</div>
+	);
+}

package/dist/components/Spinner/Spinner.scss

@@ -0,0 +1,82 @@
+// SCSS Mixins for cross-browser compatibility
+@mixin keyframes($name) {
+	@-webkit-keyframes #{$name} {
+		@content;
+	}
+	@-moz-keyframes #{$name} {
+		@content;
+	}
+	@-o-keyframes #{$name} {
+		@content;
+	}
+	@keyframes #{$name} {
+		@content;
+	}
+}
+
+@mixin animation($value) {
+	-webkit-animation: $value;
+	-moz-animation: $value;
+	-o-animation: $value;
+	animation: $value;
+}
+
+@mixin transform($value) {
+	-webkit-transform: $value;
+	-moz-transform: $value;
+	-o-transform: $value;
+	transform: $value;
+}
+
+@mixin transform-origin($value) {
+	-webkit-transform-origin: $value;
+	-moz-transform-origin: $value;
+	-o-transform-origin: $value;
+	transform-origin: $value;
+}
+
+.asab-spinner {
+	position: relative;
+	height: 4rem;
+
+	.asab-spinner-circular {
+		@include animation(rotate 2s linear infinite);
+		@include transform-origin(center center);
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+		
+		.path {
+			stroke: var(--bs-primary);
+			stroke-dasharray: 1, 200;
+			stroke-dashoffset: 0;
+			@include animation(dash 1.5s ease-in-out infinite);
+			stroke-linecap: round;
+		}
+	}
+}
+
+// Animations using mixins
+@include keyframes(rotate) {
+	100% {
+		@include transform(rotate(360deg));
+	}
+}
+
+@include keyframes(dash) {
+	0% {
+		stroke-dasharray: 1, 200;
+		stroke-dashoffset: 0;
+	}
+	50% {
+		stroke-dasharray: 89, 200;
+		stroke-dashoffset: -35px;
+	}
+	100% {
+		stroke-dasharray: 89, 200;
+		stroke-dashoffset: -124px;
+	}
+}

package/dist/index.js

@@ -335,7 +335,7 @@ var _index = require("./components/Humanize/index.js");
 var _humanizeToString = _interopRequireDefault(require("./components/Humanize/humanizeToString.js"));
 var _DataTable = require("./components/DataTable2/DataTable2.js");
 var _index2 = require("./components/DataTable2/components/filters/index.js");
-var _Spinner = require("./components/Spinner");
+var _Spinner = require("./components/Spinner/Spinner.js");
 var _ControlledSwitch = _interopRequireDefault(require("./components/ControlledSwitch"));
 var _UncontrolledSwitch = _interopRequireDefault(require("./components/UncontrolledSwitch"));
 var _ContentLoader = require("./components/ContentLoader");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asab_webui_components",
-  "version": "27.2.2",
+  "version": "27.2.3",
   "license": "BSD-3-Clause",
   "description": "TeskaLabs ASAB WebUI Components Library",
   "contributors": [

package/dist/components/Spinner.js

@@ -1,25 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Spinner = Spinner;
-var _react = _interopRequireDefault(require("react"));
-var _reactstrap = require("reactstrap");
-function Spinner() {
-  return /*#__PURE__*/_react.default.createElement(_reactstrap.Row, {
-    className: "loading-spinner-div justify-content-center"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "suspense-loader spinner-grow text-primary mx-2",
-    role: "status"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "suspense-loader spinner-grow text-primary mx-2",
-    role: "status"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "visually-hidden"
-  }, "Loading...")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "suspense-loader spinner-grow text-primary mx-2",
-    role: "status"
-  }));
-}