refactor(component): simplify the usage of spinner inside the Button …

…component re #175
themesberg · Jan 13, 2023 · 4444550 · 4444550
1 parent dafc988
commit 4444550
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 16 deletions.
diff --git a/src/docs/pages/ButtonsPage.tsx b/src/docs/pages/ButtonsPage.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { HiOutlineArrowRight, HiShoppingCart } from 'react-icons/hi';
-import { Button, Spinner } from '../../lib';
+import { Button } from '../../lib';
 import type { CodeExample } from './DemoPage';
 import { DemoPage } from './DemoPage';
 
@@ -269,21 +269,15 @@ const ButtonsPage: FC = () => {
       title: 'Loader',
       code: (
         <div className="flex flex-wrap items-center gap-2">
-          <div>
-            <Button>
-              <div className="mr-3">
-                <Spinner size="sm" light />
-              </div>
-              Loading ...
-            </Button>
-          </div>
-          <div>
-            <Button outline>
-              <div className="mr-3">
-                <Spinner size="sm" light />
-              </div>
-              Loading ...
-            </Button>
+          <div className="flex flex-wrap items-center gap-2">
+            <div>
+              <Button isProcessing={true}>Loading ...</Button>
+            </div>
+            <div>
+              <Button isProcessing={true} outline>
+                Loading ...
+              </Button>
+            </div>
           </div>
         </div>
       ),

diff --git a/src/lib/components/Button/Button.tsx b/src/lib/components/Button/Button.tsx
@@ -8,6 +8,7 @@ import type {
   FlowbiteSizes,
 } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
+import { Spinner } from '../Spinner';
 import type { PositionInButtonGroup } from './ButtonGroup';
 import ButtonGroup from './ButtonGroup';
 
@@ -16,6 +17,12 @@ export interface FlowbiteButtonTheme {
   fullSized: string;
   color: ButtonColors;
   disabled: string;
+  isProcessing: string;
+  processing: {
+    spinnerSize: string;
+    spinnerLight: string;
+    spinnerClassName: string;
+  };
   gradient: ButtonGradientColors;
   gradientDuoTone: ButtonGradientDuoToneColors;
   inner: {
@@ -58,6 +65,12 @@ export interface ButtonProps extends Omit<ComponentProps<'button'>, 'color' | 'r
   gradientDuoTone?: keyof ButtonGradientDuoToneColors;
   gradientMonochrome?: keyof ButtonGradientColors;
   href?: string;
+  isProcessing?: boolean;
+  processing?: {
+    spinnerSize?: string;
+    spinnerLight?: boolean;
+    spinnerClassName?: string;
+  };
   label?: ReactNode;
   outline?: boolean;
   fullSized?: boolean;
@@ -72,6 +85,12 @@ const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, Button
       children,
       color = 'info',
       disabled = false,
+      isProcessing = false,
+      processing = {
+        spinnerSize: 'sm',
+        spinnerLight: true,
+        spinnerClassName: 'mr-3',
+      },
       gradientDuoTone,
       gradientMonochrome,
       href,
@@ -124,6 +143,13 @@ const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, Button
           )}
         >
           <>
+            {isProcessing && (
+              <Spinner
+                size={processing.spinnerSize}
+                light={processing.spinnerLight}
+                className={processing.spinnerClassName}
+              />
+            )}
             {typeof children !== 'undefined' && children}
             {typeof label !== 'undefined' && (
               <span className={theme.label} data-testid="flowbite-button-label">

diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
@@ -192,6 +192,12 @@ const theme: FlowbiteTheme = {
         'text-white bg-yellow-400 border border-transparent hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 disabled:hover:bg-yellow-400 dark:focus:ring-yellow-900 dark:disabled:hover:bg-yellow-400',
     },
     disabled: 'cursor-not-allowed opacity-50',
+    isProcessing: 'cursor-wait',
+    processing: {
+      spinnerSize: '',
+      spinnerLight: '',
+      spinnerClassName: '',
+    },
     gradient: {
       cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800',
       failure: