From 9a467661aec978ec25f6bc6cfd1d90141ad0faec Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 18 Jul 2017 14:27:23 +0530
Subject: [PATCH] toggle icon fix (#178)

---
 IconToggle/IconToggle.jsx | 19 ++++++++++++++++++-
 README.md                 |  2 +-
 package.json              |  2 +-
 sample/home.jsx           | 12 ++++++++++--
 sample/webpack.config.js  |  6 +-----
 5 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/IconToggle/IconToggle.jsx b/IconToggle/IconToggle.jsx
index d500668cc..da25de038 100644
--- a/IconToggle/IconToggle.jsx
+++ b/IconToggle/IconToggle.jsx
@@ -1,4 +1,5 @@
 import { h } from "preact";
+import { MDCIconToggle } from "@material/icon-toggle/";
 import MaterialComponent from "../MaterialComponent";
 
 /**
@@ -9,9 +10,25 @@ export default class IconToggle extends MaterialComponent {
     super();
     this.componentName = "icon-toggle";
   }
+  componentDidMount() {
+    this.MDComponent = new MDCIconToggle(this.control);
+  }
+  componentWillUnmount() {
+    this.MDComponent.destroy && this.MDComponent.destroy();
+  }
   materialDom(props) {
+    if (props["data-toggle-on"])
+      props["data-toggle-on"] = JSON.stringify(props["data-toggle-on"]);
+    if (props["data-toggle-off"])
+      props["data-toggle-off"] = JSON.stringify(props["data-toggle-off"]);
     return (
-      <i {...props} className="material-icons">
+      <i
+        {...props}
+        className="material-icons"
+        ref={control => {
+          this.control = control;
+        }}
+      >
         {props.children}
       </i>
     );
diff --git a/README.md b/README.md
index ab28105bd..d9af0e655 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,7 @@ Smaller bundles FTW!!!
 
 - 👍 form-field
 
-- 👎🏽 icon-toggle
+- 👍 icon-toggle
 
 - 👍 layout-grid
 
diff --git a/package.json b/package.json
index f12ef977c..e2dc59aa7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "preact-material-components",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "preact wrapper for \"Material Components for the web\"",
   "module": "index.js",
   "main": "dist/index.js",
diff --git a/sample/home.jsx b/sample/home.jsx
index 1f4ba2669..e3f31e09c 100644
--- a/sample/home.jsx
+++ b/sample/home.jsx
@@ -31,6 +31,14 @@ export default class Home extends Component {
     };
   }
   render() {
+    const toggleOnIcon = {
+      content: "favorite",
+      label: "Remove From Favorites"
+    };
+    const toggleOffIcon = {
+      content: "favorite_border",
+      label: "Add to Favorites"
+    };
     return (
       <div>
         <Toolbar>
@@ -90,8 +98,8 @@ export default class Home extends Component {
             tabindex="0"
             aria-pressed="false"
             aria-label="Add to favorites"
-            data-toggle-on="{'content': 'favorite', 'label': 'Remove From Favorites'}"
-            data-toggle-off="{'content': 'favorite_border', 'label': 'Add to Favorites'}"
+            data-toggle-on={toggleOnIcon}
+            data-toggle-off={toggleOffIcon}
           >
             favorite_border
           </IconToggle>
diff --git a/sample/webpack.config.js b/sample/webpack.config.js
index c33cc930c..3ad3badf3 100644
--- a/sample/webpack.config.js
+++ b/sample/webpack.config.js
@@ -29,11 +29,7 @@ const config = {
 	]
   },
   plugins: [
-      new CleanWebpackPlugin('./public'),
-      new webpack.optimize.CommonsChunkPlugin({
-        name: 'vendor',
-        minChunks: 2,
-      }),
+      new CleanWebpackPlugin('./public')
   ]
 };