From 1b8182e84111d689baa3296d4420d2dbea4d2495 Mon Sep 17 00:00:00 2001
From: revolist <maksim.k@revolist.eu>
Date: Sun, 20 Sep 2020 15:40:27 +0300
Subject: [PATCH] header update, theme fix

---
 demo                                          |   2 +-
 package.json                                  |   2 +-
 src/components/header/headerRenderer.tsx      |   3 +-
 .../revo-grid/revo-grid.default.scss          |   8 +-
 .../revo-grid/revo-grid.material.scss         | 110 +++++++++---------
 src/components/revo-grid/revo-grid.tsx        |   3 +-
 src/global/global.ts                          |   9 +-
 7 files changed, 74 insertions(+), 63 deletions(-)

diff --git a/demo b/demo
index 15932f6a..0250f36e 160000
--- a/demo
+++ b/demo
@@ -1 +1 @@
-Subproject commit 15932f6a865c76629636656feb46c35827a43587
+Subproject commit 0250f36e96fff2dfafa839f7769f09a285490dec
diff --git a/package.json b/package.json
index efbdd986..4494ccba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "1.4.8",
+  "version": "1.4.9",
   "description": "Virtual reactive data grid component - RevoGrid.",
   "license": "MIT",
   "bugs": {
diff --git a/src/components/header/headerRenderer.tsx b/src/components/header/headerRenderer.tsx
index cf6a87fa..d13824e3 100644
--- a/src/components/header/headerRenderer.tsx
+++ b/src/components/header/headerRenderer.tsx
@@ -15,7 +15,8 @@ const HeaderRenderer = ({column, data, onClick}: Props, _children: VNode[]): VNo
         style: { width: `${column.size}px`, transform: `translateX(${column.start}px)` },
         onClick: () => onClick(data)
     };
-    const headerChildren: VNode|string = data.columnTemplate ? data.columnTemplate(h.h, data) : data.name;
+    const headerChildren: VNode|string = data.columnTemplate ?
+        data.columnTemplate(h as unknown as RevoGrid.HyperFunc<VNode>, data) : data.name;
     return <div {...dataProps}>{headerChildren}</div>;
 };
 
diff --git a/src/components/revo-grid/revo-grid.default.scss b/src/components/revo-grid/revo-grid.default.scss
index 3ddd1474..af21bbfd 100644
--- a/src/components/revo-grid/revo-grid.default.scss
+++ b/src/components/revo-grid/revo-grid.default.scss
@@ -4,9 +4,11 @@ $header-size: 30px;
 $header-shadow: 0 1px 10px rgba(black, .2);
 $default-rows-size: 42px;
 
-revogr-viewport {
-	$shadow-top: 0 -1px 0 0 $header-border-color;
-	box-shadow: $shadow-top;
+revo-grid[theme="default"] {
+	revogr-viewport {
+		$shadow-top: 0 -1px 0 0 $header-border-color;
+		box-shadow: $shadow-top;
+	}
 
 	revogr-header {
 		text-align: center;
diff --git a/src/components/revo-grid/revo-grid.material.scss b/src/components/revo-grid/revo-grid.material.scss
index e140c728..32f7999a 100644
--- a/src/components/revo-grid/revo-grid.material.scss
+++ b/src/components/revo-grid/revo-grid.material.scss
@@ -7,69 +7,69 @@ $header-border-color: $cell-border-color;
 
 $cell-shadow-cell: 0 -1px 0 0 $cell-border-color inset;
 
-revo-grid {
+revo-grid[theme="material"] {
 	font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-}
-
-revogr-viewport {
-
-	revogr-header {
-		line-height: $header-height;
-		font-weight: 600;
-		text-align: left;
-
-		.data-header-cell {
-			$shadow-bottom: 0 -1px 0 0 $header-border-color inset;
-			$shadow-top: 0 -1px 0 0 $header-border-color;
-			box-shadow: $shadow-top, $shadow-bottom;
-			padding: 0 15px;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-
-		.header-row {
-			height: $header-height;
+	
+	revogr-viewport {
 
-			&.group {
+		revogr-header {
+			line-height: $header-height;
+			font-weight: 600;
+			text-align: left;
+	
+			.data-header-cell {
 				$shadow-bottom: 0 -1px 0 0 $header-border-color inset;
-				box-shadow: $shadow-bottom;
+				$shadow-top: 0 -1px 0 0 $header-border-color;
+				box-shadow: $shadow-top, $shadow-bottom;
+				padding: 0 15px;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+	
+	
+			.header-row {
+				height: $header-height;
+	
+				&.group {
+					$shadow-bottom: 0 -1px 0 0 $header-border-color inset;
+					box-shadow: $shadow-bottom;
+				}
 			}
 		}
-	}
-
-
-	.footer-wrapper revogr-data {
-		box-shadow: 0 -1px 0 $cell-border-color;
-	}
-
-	revogr-viewport-scroll {
-		&.colPinStart {
-			box-shadow: 1px 0 0 $cell-border-color;
-		}
-
-		&.colPinEnd {
-			box-shadow: -1px 0 0 $cell-border-color;
+	
+	
+		.footer-wrapper revogr-data {
+			box-shadow: 0 -1px 0 $cell-border-color;
 		}
-	}
-
-	revogr-data {
-		text-align: left;
-
-		.row {
-			line-height: $default-rows-size;
+	
+		revogr-viewport-scroll {
+			&.colPinStart {
+				box-shadow: 1px 0 0 $cell-border-color;
+			}
+	
+			&.colPinEnd {
+				box-shadow: -1px 0 0 $cell-border-color;
+			}
 		}
-
-		.data-cell {
-			box-shadow: $cell-shadow-cell;
-			padding: 0 15px;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			color: rgba(black, .87);
 	
-			&.disabled {
-				background-color: $cell-disabled-bg;
+		revogr-data {
+			text-align: left;
+	
+			.row {
+				line-height: $default-rows-size;
+			}
+	
+			.data-cell {
+				box-shadow: $cell-shadow-cell;
+				padding: 0 15px;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				color: rgba(black, .87);
+		
+				&.disabled {
+					background-color: $cell-disabled-bg;
+				}
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/components/revo-grid/revo-grid.tsx b/src/components/revo-grid/revo-grid.tsx
index 90a1973e..2c7a14a7 100644
--- a/src/components/revo-grid/revo-grid.tsx
+++ b/src/components/revo-grid/revo-grid.tsx
@@ -73,7 +73,7 @@ export class RevoGridComponent {
 
 
   /** Theme name */
-  @Prop() theme: 'default'|'material' = 'default';
+  @Prop({ reflect: true }) theme: 'default'|'material' = 'default';
 
 
   // --------------------------------------------------------------------------
@@ -248,6 +248,7 @@ export class RevoGridComponent {
   }
 
   render() {
+    console.log(this.theme);
     return <revogr-viewport
         onSetDimensionSize={e => this.dimensionProvider.setDimensionSize(e.detail.type, e.detail.sizes)}
         onSetViewportCoordinate={e => this.dimensionProvider.setViewPortCoordinate(e.detail)}
diff --git a/src/global/global.ts b/src/global/global.ts
index 56bd60a0..57915af9 100644
--- a/src/global/global.ts
+++ b/src/global/global.ts
@@ -8,5 +8,12 @@ setMode(elm => {
     if (typeof theme === 'string') {
         theme = theme.trim();
     }
-    return  allowedThemes.indexOf(theme) > -1 ? theme : DEFAULT_THEME;
+
+    const isAllowed = allowedThemes.indexOf(theme) > -1;
+    console.log('set', isAllowed);
+    if (!isAllowed) {
+        elm.setAttribute('theme', DEFAULT_THEME);
+        console.log('set', DEFAULT_THEME);
+    }
+    return  isAllowed ? theme : DEFAULT_THEME;
 });