1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-12-25 00:11:36 +01:00

Merge branch 'spinner-element-class-name' into 'dev'

Add className to SpinnerElement.

See merge request turris/reforis/foris-js!55
This commit is contained in:
Bogdan Bodnar 2019-12-06 15:07:16 +01:00
commit fd1518265f
2 changed files with 10 additions and 11 deletions

View File

@ -46,6 +46,8 @@ export function Spinner({
SpinnerElement.propTypes = { SpinnerElement.propTypes = {
/** Spinner's size */ /** Spinner's size */
small: PropTypes.bool, small: PropTypes.bool,
/** Additional className */
className: PropTypes.string,
/** Children components */ /** Children components */
children: PropTypes.oneOfType([ children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node), PropTypes.arrayOf(PropTypes.node),
@ -53,13 +55,16 @@ SpinnerElement.propTypes = {
]), ]),
}; };
export function SpinnerElement({ small, children }) { export function SpinnerElement({ small, className, children }) {
return ( return (
<> <>
<div className={`spinner-border ${small ? "spinner-border-sm" : ""}`} role="status"> <div
className={`spinner-border ${small ? "spinner-border-sm" : ""} ${className || ""}`.trim()}
role="status"
>
<span className="sr-only" /> <span className="sr-only" />
</div> </div>
<div className="spinner-text">{children}</div> {children && <div className="spinner-text">{children}</div>}
</> </>
); );
} }

View File

@ -26,16 +26,13 @@ exports[`conditional HOCs withSpinner should render spinner 1`] = `
class="spinner-wrapper my-3 text-center" class="spinner-wrapper my-3 text-center"
> >
<div <div
class="spinner-border " class="spinner-border"
role="status" role="status"
> >
<span <span
class="sr-only" class="sr-only"
/> />
</div> </div>
<div
class="spinner-text"
/>
</div> </div>
</div> </div>
`; `;
@ -46,16 +43,13 @@ exports[`conditional HOCs withSpinnerOnSending should render spinner 1`] = `
class="spinner-wrapper my-3 text-center" class="spinner-wrapper my-3 text-center"
> >
<div <div
class="spinner-border " class="spinner-border"
role="status" role="status"
> >
<span <span
class="sr-only" class="sr-only"
/> />
</div> </div>
<div
class="spinner-text"
/>
</div> </div>
</div> </div>
`; `;