feat(example): add more modifiers to example

stoeffel · Apr 2, 2018 · 431974c · 431974c
1 parent 54b64c8
commit 431974c
Show file tree

Hide file tree

Showing 3 changed files with 241 additions and 12 deletions.
diff --git a/example/src/App.js b/example/src/App.js
@@ -2,29 +2,59 @@ import Drawer from "../../lib/drawer.jsx";
 import React, { Component } from "react";
 import image from "url-loader!../planurahuette.jpg";
 
-const style = {
-  background: "#F9F9F9",
-  boxShadow: "rgba(0, 0, 0, 0.188235) 0px 10px 20px, rgba(0, 0, 0, 0.227451) 0px 6px 6px"
-};
-
 export default class App extends Component {
   state = {
     openLeft: false,
     openRight: false,
+    drawerStyle: `
+{
+  "background": "#F9F9F9",
+  "boxShadow": "rgba(0, 0, 0, 0.188235) 0px 10px 20px, rgba(0, 0, 0, 0.227451) 0px 6px 6px"
+}`,
     relativeWidth: false,
-    width: 300
+    width: 300,
+    noTouchOpen: false,
+    noTouchClose: false,
   };
 
   setWidth = e => {
     this.setState({
       width: Number(e.target.value) || e.target.value
     });
   };
+
+  setTouch = e => {
+    this.setState({
+      [e.target.name]: !e.target.checked
+    })
+  }
+
+  setDrawerStyle = e => {
+    e.preventDefault()
+    this.setState({
+      drawerStyle: this.drawerStyleRef.value
+    })
+  }
+
   render() {
-    const { openLeft, openRight } = this.state;
+    const {
+      drawerStyle: stringDrawerStyle,
+      openLeft,
+      openRight,
+      noTouchOpen,
+      noTouchClose
+    } = this.state;
+
+    let drawerStyle = {}
+    try {
+      drawerStyle = JSON.parse(stringDrawerStyle)
+    } catch (err) {
+      console.error('Error parsing JSON: ', err)
+    }
+
     const drawerProps = {
       overlayColor: "rgba(255,255,255,0.6)",
-      drawerStyle: style
+      drawerStyle
     };
 
     return (
@@ -33,9 +63,11 @@ export default class App extends Component {
           <Drawer
             {...drawerProps}
             width={this.state.width}
-            fadeOut={true}
+            fadeOut
             open={openLeft}
             onChange={open => this.setState({ openLeft: open })}
+            noTouchOpen={noTouchOpen}
+            noTouchClose={noTouchClose}
           >
             <div style={{ width: "100%" }}>
               <img src={image} />
@@ -46,11 +78,13 @@ export default class App extends Component {
           </Drawer>}
         {!openLeft &&
           <Drawer
-            right={true}
+            right
             width={this.state.width}
             {...drawerProps}
             open={openRight}
             onChange={open => this.setState({ openRight: open })}
+            noTouchOpen={noTouchOpen}
+            noTouchClose={noTouchClose}
           >
             {val => {
               var per = val / 300;
@@ -98,6 +132,7 @@ export default class App extends Component {
         </div>
         <div className="options">
           <form className="row">
+            <h5>Size Controls</h5>
             <p className="col s4">
               <label htmlFor="width">Set width</label>
               <input
@@ -108,6 +143,47 @@ export default class App extends Component {
               />
             </p>
           </form>
+          <form className="row">
+            <h5>Touch Controls</h5>
+            <p className="col s4">
+              <input
+                name="noTouchOpen"
+                id="noTouchOpen"
+                type="checkbox"
+                onChange={this.setTouch}
+                checked={!noTouchOpen}
+              />
+              <label htmlFor="noTouchOpen">Touch open</label>
+            </p>
+            <p className="col s4" >
+              <input
+                name="noTouchClose"
+                id="noTouchClose"
+                type="checkbox"
+                onChange={this.setTouch}
+                checked={!noTouchClose}
+              />
+              <label htmlFor="noTouchClose">Touch close</label>
+            </p>
+          </form>
+          <form className="row">
+            <h5>Custom Styles <small style={{ fontSize: 'small', color: '#777' }}>Must be JSON for the example</small></h5>
+            <p className="col s8 input-field">
+              <textarea
+                id="drawerStyle"
+                className="materialize-textarea"
+                ref={ref => this.drawerStyleRef = ref}
+                defaultValue={stringDrawerStyle}
+              />
+              <label htmlFor="drawerStyle">drawerStyle</label>
+              <button
+                className="waves-effect waves-light btn"
+                onClick={this.setDrawerStyle}
+              >
+                Set drawerStyle
+              </button>
+            </p>
+          </form>
         </div>
       </div>
     );

diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "build": "babel lib --out-dir ./",
     "build-example": "webpack --config example/webpack.config.js",
-    "serve": "webpack-dev-server --config example/webpack.config.js",
+    "dev": "run-p \"build --watch\" serve",
+    "serve": "npm run build-example && webpack-dev-server --config example/webpack.config.js",
     "open": "opn http://localhost:8888/example/index.html",
     "lint": "eslint lib",
     "patch-release": "npm version patch && npm publish && git push --follow-tags",
@@ -51,6 +52,7 @@
     "eslint": "^4.9.0",
     "eslint-plugin-react": "^7.4.0",
     "file-loader": "^1.1.5",
+    "npm-run-all": "^4.1.2",
     "opn-cli": "^3.1.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",