Fix #52 (8.7.1)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus4",
-  "version": "8.7.0",
+  "version": "8.7.1",
   "description": "Focus v4 (Typescript + MobX)",
   "main": "index.js",
   "repository": {

src/network/__style__/loading-bar.css

@@ -4,16 +4,6 @@
     width: 100%;
 }
 
-.bar :global([data-focus="progress-bar"]) {
-    margin: 0;
-    background-color: transparent;
-    overflow: visible;
-}
-
-.bar :global([data-focus="progress-bar"]) :global(.progress-bar) {
-    box-shadow: 0 0 6px 0 #03a9f4;
-}
-
 .bar ul {
     position: fixed;
     bottom: 0;
@@ -40,3 +30,7 @@
 .bar ul li span {
     margin: 0 5px;
 }
+
+.linear {
+    display: block;
+}

src/network/loading-bar.tsx

@@ -2,30 +2,34 @@ import {observer} from "mobx-react";
 import * as React from "react";
 import {themr} from "react-css-themr";
 import {FontIcon} from "react-toolbox/lib/font_icon";
+import {ProgressBar, ProgressBarTheme} from "react-toolbox/lib/progress_bar";
 
 import {getIcon} from "../components";
-import {ReactComponent} from "../config";
 
 import {requestStore} from "./store";
 
 import * as styles from "./__style__/loading-bar.css";
 
-export type LoadingBarStyle = Partial<typeof styles>;
+export type LoadingBarStyle = Partial<typeof styles> & ProgressBarTheme;
 
 export interface LoadingBarProps {
+    /** Affiche la barre de dev qui montre l'état du RequestStore. */
     displayDevBar?: boolean;
+    /** Pour les icônes. Par défaut : "focus". */
     i18nPrefix?: string;
-    ProgressBar: ReactComponent<{completed: number}>;
+    /** Type de la ProgressBar. Par défaut : "linear". */
+    progressBarType?: "linear" | "circular";
+    /** CSS. */
     theme?: LoadingBarStyle;
 }
 
 /** Composant standard pour afficher une barre de chargement sur l'état des requêtes en cours. */
-export const LoadingBar = observer(({i18nPrefix = "focus", theme, displayDevBar, ProgressBar}: LoadingBarProps) => {
+export const LoadingBar = observer(({i18nPrefix = "focus", progressBarType, theme, displayDevBar}: LoadingBarProps) => {
     const {count, error, pending, success} = requestStore;
     const completed = +((count.total - count.pending) / count.total) * 100;
     return (
         <div className={theme!.bar}>
-            {completed < 100 ? <ProgressBar completed={completed} /> : null}
+            {completed < 100 ? <ProgressBar type={progressBarType} theme={theme} /> : null}
             {displayDevBar ?
                 <ul>
                     <li><FontIcon>{getIcon(`${i18nPrefix}.icons.loadingBar.pending`)}</FontIcon> pending {pending}</li>