From d62c05fb197332cad0a498335d9458270c7ddc80 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 16 Jun 2021 01:49:29 -0400
Subject: [PATCH] Add card context

---
 src/layout/card/NitroCardView.tsx             | 29 +++++++++----------
 src/layout/card/NitroCardView.types.ts        |  3 +-
 src/layout/card/context/NitroCardContext.tsx  | 13 +++++++++
 .../card/context/NitroCardContext.types.ts    | 11 +++++++
 .../card/header/NitroCardHeaderView.tsx       |  4 ++-
 5 files changed, 43 insertions(+), 17 deletions(-)
 create mode 100644 src/layout/card/context/NitroCardContext.tsx
 create mode 100644 src/layout/card/context/NitroCardContext.types.ts

diff --git a/src/layout/card/NitroCardView.tsx b/src/layout/card/NitroCardView.tsx
index 11013c2f..88aadbbe 100644
--- a/src/layout/card/NitroCardView.tsx
+++ b/src/layout/card/NitroCardView.tsx
@@ -1,27 +1,26 @@
 import { FC } from 'react';
 import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
+import { NitroCardContextProvider } from './context/NitroCardContext';
 import { NitroCardViewProps } from './NitroCardView.types';
 
 export const NitroCardView: FC<NitroCardViewProps> = props =>
 {
-    const { className = '', simple = false, disableDrag = false, children = null } = props;
-
-    if(simple)
-    {
-        return (
-            <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
-                { children }
-            </div>
-        );
-    }
+    const { className = '', disableDrag = false, simple = false, theme = 'primary', children = null } = props;
 
     return (
-        <div className="nitro-card-responsive">
-            <DraggableWindow handle=".drag-handler" disableDrag= { disableDrag }>
+        <NitroCardContextProvider value={ { theme } }>
+            { simple &&
                 <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
                     { children }
-                </div>
-            </DraggableWindow>
-        </div>
+                </div> }
+            { !simple &&
+                <div className="nitro-card-responsive">
+                    <DraggableWindow handle=".drag-handler" disableDrag= { disableDrag }>
+                        <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
+                            { children }
+                        </div>
+                    </DraggableWindow>
+                </div> }
+        </NitroCardContextProvider>
     );
 }
diff --git a/src/layout/card/NitroCardView.types.ts b/src/layout/card/NitroCardView.types.ts
index 404b6e0f..fcdd2f9a 100644
--- a/src/layout/card/NitroCardView.types.ts
+++ b/src/layout/card/NitroCardView.types.ts
@@ -1,6 +1,7 @@
 export interface NitroCardViewProps
 {
     className?: string;
-    simple?: boolean;
     disableDrag?: boolean;
+    simple?: boolean;
+    theme?: string;
 }
diff --git a/src/layout/card/context/NitroCardContext.tsx b/src/layout/card/context/NitroCardContext.tsx
new file mode 100644
index 00000000..fad15670
--- /dev/null
+++ b/src/layout/card/context/NitroCardContext.tsx
@@ -0,0 +1,13 @@
+import { createContext, FC, useContext } from 'react';
+import { INitroCardContext, NitroCardContextProps } from './NitroCardContext.types';
+
+const NitroCardContext = createContext<INitroCardContext>({
+    theme: null
+});
+
+export const NitroCardContextProvider: FC<NitroCardContextProps> = props =>
+{
+    return <NitroCardContext.Provider value={ props.value }>{ props.children }</NitroCardContext.Provider>
+}
+
+export const useNitroCardContext = () => useContext(NitroCardContext);
diff --git a/src/layout/card/context/NitroCardContext.types.ts b/src/layout/card/context/NitroCardContext.types.ts
new file mode 100644
index 00000000..ba745f56
--- /dev/null
+++ b/src/layout/card/context/NitroCardContext.types.ts
@@ -0,0 +1,11 @@
+import { ProviderProps } from 'react';
+
+export interface INitroCardContext
+{
+    theme: string;
+}
+
+export interface NitroCardContextProps extends ProviderProps<INitroCardContext>
+{
+
+}
diff --git a/src/layout/card/header/NitroCardHeaderView.tsx b/src/layout/card/header/NitroCardHeaderView.tsx
index df00422f..8e93c8ed 100644
--- a/src/layout/card/header/NitroCardHeaderView.tsx
+++ b/src/layout/card/header/NitroCardHeaderView.tsx
@@ -1,12 +1,14 @@
 import { FC } from 'react';
+import { useNitroCardContext } from '../context/NitroCardContext';
 import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
 
 export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 {
     const { headerText = null, onCloseClick = null } = props;
+    const { theme } = useNitroCardContext();
 
     return (
-        <div className="drag-handler container-fluid bg-primary">
+        <div className={ `drag-handler container-fluid bg-${ theme }` }>
             <div className="row nitro-card-header">
                 <div className="col-10 offset-1 d-flex justify-content-center align-items-center">
                     <div className="h4 m-0 text-white text-shadow">{ headerText }</div>