Merge pull request #59 from variadicjs/clear-button

added clear button

Author: jhowardjr

src/components/FuncCard.css

@@ -23,4 +23,30 @@
 
 .modal-width {
 	width: 70%;
+}
+
+.small-btn {
+	height: 25px;
+	width: 25px;
+	position: absolute;
+	top: 183px;
+	left: 11px;
+	opacity: .3;
+}
+
+.small-btn i {
+	position: relative;
+	bottom: 7px;
+	font-size: 18px;
+}
+
+pre {
+	width: 100%;
+	margin-left: 2px;
+}
+
+.results-div {
+	display: flex;
+	width: 340px;
+	margin-left: -20px;
 }

src/components/FuncCard.js

@@ -21,6 +21,7 @@ class FuncCard extends Component {
     this.handleToggleCode = this.handleToggleCode.bind(this);
     this.handleParamsChange = this.handleParamsChange.bind(this);
     this.handleRunCode = this.handleRunCode.bind(this);
+    this.handleClearParams = this.handleClearParams.bind(this);
   }
 
   componentDidMount() {
@@ -54,6 +55,10 @@ class FuncCard extends Component {
     this.setState(prevState => ({showCode: !prevState.showCode}));
   }
 
+  handleClearParams() {
+    this.setState({params: [], result: "", error: ""})
+  }
+
   render() {
     const {
       funcName,
@@ -91,9 +96,17 @@ class FuncCard extends Component {
             onParamsChange={this.handleParamsChange}
             onSubmit={this.handleParamSubmit}
         />
-
-        <Highlight lang="js" value={callCode} />
-
+        <div className="results-div">
+          <Button 
+            floating 
+            disabled={params.length === 0 && !result} 
+            className='grey darken-3 small-btn' 
+            waves='light' 
+            icon='clear' 
+            onClick={this.handleClearParams} 
+          />
+          <Highlight lang="js" value={callCode} />
+        </div>
         <Button onClick={this.handleRunCode}>Run</Button>
         <Modal
           className="modal-width"

src/containers/CardList.js

@@ -56,9 +56,8 @@ class CardList extends Component {
           data={data}
           handleDropdownChange={(e, value) => this.handleDropdownChange(value)}
         />
-        <Carousel>
-          {funcCards}
-        </Carousel>
+        <Carousel children={funcCards} />
+       
       </div>
     );
   }