toggle icon fix (#178)

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>
     );

README.md

@@ -31,7 +31,7 @@ Smaller bundles FTW!!!
 
 - 👍 form-field
 
-- 👎🏽 icon-toggle
+- 👍 icon-toggle
 
 - 👍 layout-grid
 

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",

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>

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')
   ]
 };