/*Downloaded from https://www.codeseek.co/11abdullah11/recipe-box-OjxOYa */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var RecipeBox = function (_React$Component) {
_inherits(RecipeBox, _React$Component);
function RecipeBox(props) {
_classCallCheck(this, RecipeBox);
var _this = _possibleConstructorReturn(this, (RecipeBox.__proto__ || Object.getPrototypeOf(RecipeBox)).call(this, props));
_this.save = function () {
var naam = $("#name").val();
var Ing_comma = $("#form-ingredients").val();
console.log(naam);
};
_this.state = {
Recipes: [{ name: "Spaghetti", ingredient: ["ASd", "asdsa"] }, { name: "asd", ingredient: ["ASd", "asdsa"] }]
};
return _this;
}
_createClass(RecipeBox, [{
key: "returnFun",
value: function returnFun() {
var temp = [];
for (var i = 0; i < this.state.Recipes.length; i++) {
var tempa = React.createElement(Recipe, { name: this.state.Recipes[i].name, ingredients: this.state.Recipes[i].ingredient });
temp.push(tempa);
}
return temp;
}
}, {
key: "render",
value: function render() {
return React.createElement(
"div",
null,
React.createElement(
"div",
null,
this.returnFun()
),
React.createElement("div", { className: "Save", onClick: this.save })
);
}
}]);
return RecipeBox;
}(React.Component);
var Recipe = function (_React$Component2) {
_inherits(Recipe, _React$Component2);
function Recipe(props) {
_classCallCheck(this, Recipe);
var _this2 = _possibleConstructorReturn(this, (Recipe.__proto__ || Object.getPrototypeOf(Recipe)).call(this, props));
_this2.handleClick = function (e) {
console.log(this);
e.preventDefault();
if (this.state.display === "name") {
this.setState({
display: "full"
});
} else {
this.setState({
display: "name"
});
}
};
_this2.state = {
name: props.name,
ingredients: props.ingredients,
display: "name"
};
_this2.handleClick = _this2.handleClick.bind(_this2);
return _this2;
}
_createClass(Recipe, [{
key: "ingredient",
value: function ingredient() {
var tempo = [];
for (var i = 0; i < this.state.ingredients.length; i++) {
tempo.push(React.createElement(
"div",
{ className: "Ing" },
this.state.ingredients[i]
));
}
return tempo;
}
}, {
key: "render",
value: function render() {
if (this.state.display === "full") {
return React.createElement(
"div",
null,
React.createElement(
"div",
{ className: "recipe well" },
React.createElement(
"a",
{ onClick: this.handleClick, href: "#" },
this.state.name
)
),
React.createElement(
"div",
{ className: "ing-head well" },
React.createElement(
"h4",
{ className: "text-center" },
"Ingredients"
),
React.createElement("hr", null),
React.createElement(
"div",
{ className: "ing-well well" },
this.ingredient()
),
React.createElement(
"div",
{ className: "text-left" },
React.createElement(
"button",
{ className: "btn btn-defualt btn-danger" },
"Delete"
),
React.createElement(
"button",
{ className: "btn btn-defualt btn-info" },
"Edit"
)
)
)
);
} else {
return React.createElement(
"div",
null,
React.createElement(
"div",
{ className: "recipe well" },
React.createElement(
"a",
{ onClick: this.handleClick, href: "#" },
this.state.name
)
)
);
}
}
}]);
return Recipe;
}(React.Component);
ReactDOM.render(React.createElement(RecipeBox, null), document.getElementById("main"));