added: any ingredient can now be collapsed

clarabstract · May 5, 2017 · c7be7f3 · c7be7f3
1 parent 6c5ee08
commit c7be7f3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/calc.jsx b/calc.jsx
@@ -101,10 +101,10 @@ var Calc = React.createClass({
     if (this.state.result) {
       var self = this;
       results = this.state.result.recipes.map(function(recipe) {
-        return (<Ingredients key={recipe.name} req={recipe} ingredients="toggle" onRemove={recipe.name == self.state.input.recipe ? null : self.removeRecipe}/>);
+        return (<Ingredients key={recipe.name} req={recipe} ingredients="off" onRemove={recipe.name == self.state.input.recipe ? null : self.removeRecipe}/>);
       });
       subtotals = this.state.result.totals.map(function(total) {
-        return (<Ingredients key={total.name} req={total} onExplain={self.explain}/>);    
+        return (<Ingredients key={total.name} req={total} ingredients="never" onExplain={self.explain}/>);    
       });
     }
     var header = (

diff --git a/ingredients.jsx b/ingredients.jsx
@@ -3,10 +3,9 @@
 var Ingredients = React.createClass({
   getInitialState: function() {
     return {
-      showIngredients: false
+      showIngredients: this.props.ingredients == "on"
     };
   },
-
   toggleShowIngredients: function(event) {
     event.preventDefault();
     this.setState({showIngredients: !this.state.showIngredients});
@@ -32,7 +31,7 @@ var Ingredients = React.createClass({
       inputs = (
         <div className="inputs">
           {this.props.req.ingredients.map(function(ingredient){
-            return <Ingredients key={ingredient.recipe.name} req={ingredient.recipe} ingredients="always"/>;
+            return <Ingredients key={ingredient.recipe.name} req={ingredient.recipe} ingredients="on"/>;
           })}
         </div>
       );
@@ -82,10 +81,10 @@ var Ingredients = React.createClass({
     }
 
     var name;
-    if (this.props.ingredients == "toggle") {
-      name = (<div className="name"><a href onClick={this.toggleShowIngredients}>{this.props.req.name}</a></div>);
-    } else {
+    if (this.props.ingredients == "always" || this.props.ingredients == "never" || !this.props.req.ingredients || !this.props.req.ingredients.length) {
       name = (<div className="name">{this.props.req.name}</div>);
+    } else {
+      name = (<div className="name"><a href onClick={this.toggleShowIngredients}>{this.state.showIngredients ? "-" : "+"} {this.props.req.name}</a></div>);
     }
 
     return (