2019-08-23 15:20:22 +02:00
|
|
|
/*
|
|
|
|
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
|
|
|
|
*
|
|
|
|
* This is free software, licensed under the GNU General Public License v3.
|
|
|
|
* See /LICENSE for more information.
|
|
|
|
*/
|
|
|
|
|
2019-08-27 15:28:29 +02:00
|
|
|
import React from "react";
|
2024-06-06 16:57:08 +02:00
|
|
|
|
2019-08-27 15:28:29 +02:00
|
|
|
import PropTypes from "prop-types";
|
2019-08-23 15:20:22 +02:00
|
|
|
|
2020-01-22 13:21:46 +01:00
|
|
|
import "./Spinner.css";
|
|
|
|
|
2019-08-23 15:20:22 +02:00
|
|
|
Spinner.propTypes = {
|
|
|
|
/** Children components put into `div` with "spinner-text" class. */
|
|
|
|
children: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
2019-08-27 15:28:29 +02:00
|
|
|
PropTypes.node,
|
2019-08-23 15:20:22 +02:00
|
|
|
]),
|
2024-04-19 16:09:03 +02:00
|
|
|
/** Render component with full-screen mode (using appropriate `.css` styles) */
|
2019-08-23 15:20:22 +02:00
|
|
|
fullScreen: PropTypes.bool.isRequired,
|
2019-08-27 15:28:29 +02:00
|
|
|
className: PropTypes.string,
|
2019-08-23 15:20:22 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
Spinner.defaultProps = {
|
|
|
|
fullScreen: false,
|
|
|
|
};
|
|
|
|
|
2020-08-18 15:39:00 +02:00
|
|
|
export function Spinner({ fullScreen, children, className }) {
|
2019-08-23 15:20:22 +02:00
|
|
|
if (!fullScreen) {
|
2019-08-27 15:28:29 +02:00
|
|
|
return (
|
2020-08-18 15:39:00 +02:00
|
|
|
<div
|
|
|
|
className={`spinner-wrapper ${className || "my-3 text-center"}`}
|
|
|
|
>
|
2019-08-27 15:28:29 +02:00
|
|
|
<SpinnerElement>{children}</SpinnerElement>
|
|
|
|
</div>
|
|
|
|
);
|
2019-08-23 15:20:22 +02:00
|
|
|
}
|
|
|
|
|
2019-08-27 15:28:29 +02:00
|
|
|
return (
|
2019-11-15 09:55:24 +01:00
|
|
|
<div className="spinner-fs-wrapper">
|
2019-08-27 15:28:29 +02:00
|
|
|
<div className="spinner-fs-background">
|
|
|
|
<SpinnerElement>{children}</SpinnerElement>
|
|
|
|
</div>
|
2019-08-23 15:20:22 +02:00
|
|
|
</div>
|
2019-08-27 15:28:29 +02:00
|
|
|
);
|
2019-08-23 15:20:22 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
SpinnerElement.propTypes = {
|
|
|
|
/** Spinner's size */
|
|
|
|
small: PropTypes.bool,
|
2019-12-06 11:31:43 +01:00
|
|
|
/** Additional className */
|
|
|
|
className: PropTypes.string,
|
2019-08-23 15:20:22 +02:00
|
|
|
/** Children components */
|
|
|
|
children: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
2019-08-27 15:28:29 +02:00
|
|
|
PropTypes.node,
|
2019-08-23 15:20:22 +02:00
|
|
|
]),
|
|
|
|
};
|
|
|
|
|
2019-12-06 11:31:43 +01:00
|
|
|
export function SpinnerElement({ small, className, children }) {
|
2019-08-27 15:28:29 +02:00
|
|
|
return (
|
|
|
|
<>
|
2019-12-06 11:31:43 +01:00
|
|
|
<div
|
2020-08-18 15:39:00 +02:00
|
|
|
className={`spinner-border ${
|
|
|
|
small ? "spinner-border-sm" : ""
|
|
|
|
} ${className || ""}`.trim()}
|
2019-12-06 11:31:43 +01:00
|
|
|
role="status"
|
|
|
|
>
|
2019-08-27 15:28:29 +02:00
|
|
|
<span className="sr-only" />
|
|
|
|
</div>
|
2019-12-06 11:31:43 +01:00
|
|
|
{children && <div className="spinner-text">{children}</div>}
|
2019-08-27 15:28:29 +02:00
|
|
|
</>
|
|
|
|
);
|
2019-08-23 15:20:22 +02:00
|
|
|
}
|