adding back docs

This commit is contained in:
Ken
2019-02-22 20:25:09 -08:00
parent 78368cdf39
commit f70417f6ae
166 changed files with 4344 additions and 516 deletions
@@ -3,7 +3,7 @@
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
<script type="text/javascript" src="../step1-06/step1-06.js"></script></body>
<script src="../../step1-06/demo/step1-06/demo.js"></script></body>
</html>
+16
View File
@@ -0,0 +1,16 @@
import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
export class TodoApp extends React.Component {
render() {
return (
<div>
<TodoHeader />
<TodoList />
<TodoFooter />
</div>
);
}
}
@@ -0,0 +1,11 @@
import React from 'react';
export const TodoFooter = (props: any) => {
const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
return (
<footer>
<span>4 items left</span>
<button className="submit">Clear Completed</button>
</footer>
);
};
@@ -0,0 +1,29 @@
import React from 'react';
export class TodoHeader extends React.Component<any, any> {
constructor(props) {
super(props);
this.state = { labelInput: '' };
}
render() {
return (
<header>
<h1>todos</h1>
<div className="addTodo">
<input className="textfield" placeholder="add todo" />
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className="completed">all</button>
<button>active</button>
<button>completed</button>
</nav>
</header>
);
}
_onChange = evt => {
this.setState({ labelInput: evt.target.value });
};
}
@@ -0,0 +1,20 @@
import React from 'react';
import { TodoListItem } from './TodoListItem';
export class TodoList extends React.Component<any, any> {
render() {
const { filter, todos } = this.props;
const filteredTodos = Object.keys(todos).filter(id => {
return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
});
return (
<ul className="todos">
<TodoListItem />
<TodoListItem />
<TodoListItem />
<TodoListItem />
</ul>
);
}
}
@@ -0,0 +1,13 @@
import React from "react";
export class TodoListItem extends React.Component {
render() {
return (
<li className="todo">
<label>
<input type="checkbox" /> Todo 1
</label>
</li>
);
}
}
@@ -3,19 +3,21 @@ body {
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
.addTodo {
display: flex;
}
.textfield {
width: 80%;
flex-grow: 1;
margin-right: 10px;
}
.add {
margin-left: 5%;
}
.button {
.submit {
border: none;
padding: 5px 10px;
}
@@ -28,6 +30,7 @@ h1 {
background: transparent;
border: none;
}
.filter .selected {
border-bottom: 2px solid blue;
}
@@ -44,7 +47,3 @@ footer {
footer span {
flex-grow: 1;
}
.hidden {
display: none;
}
File diff suppressed because one or more lines are too long
+9
View File
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
<script src="../../step1-06/exercise/step1-06/exercise.js"></script></body>
</html>
@@ -0,0 +1,11 @@
import React from 'react';
export const TodoFooter = (props: any) => {
const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
return (
<footer>
<span>4 items left</span>
<button className="submit">Clear Completed</button>
</footer>
);
};
@@ -1,19 +1,30 @@
import React from 'react';
export class TodoHeader extends React.Component<any, any> {
constructor(props) {
super(props);
this.state = { labelInput: '' };
}
render() {
const { filter } = this.props;
return (
<div>
<header>
<h1>todos</h1>
<input className="textfield" placeholder="add todo" />
<button className="button add">Add</button>
<div className="filter">
<div className="addTodo">
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className={filter == 'all' ? 'completed' : ''}>all</button>
<button className={filter == 'active' ? 'completed' : ''}>active</button>
<button className={filter == 'completed' ? 'completed' : ''}>completed</button>
</div>
</div>
</nav>
</header>
);
}
_onChange = evt => {
this.setState({ labelInput: evt.target.value });
};
}
@@ -0,0 +1,13 @@
import React from 'react';
export class TodoListItem extends React.Component<any, any> {
render() {
return (
<li className="todo">
<label>
<input type="checkbox" /> Todo 1
</label>
</li>
);
}
}
+4
View File
@@ -0,0 +1,4 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { TodoApp } from './TodoApp';
ReactDOM.render(<TodoApp />, document.getElementById('app'));
+49
View File
@@ -0,0 +1,49 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
.addTodo {
display: flex;
}
.textfield {
flex-grow: 1;
margin-right: 10px;
}
.submit {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .selected {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}
File diff suppressed because one or more lines are too long
+9
View File
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
<script src="../../step1-06/final/step1-06/final.js"></script></body>
</html>
+41
View File
@@ -0,0 +1,41 @@
import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
export class TodoApp extends React.Component<any, any> {
constructor(props) {
super(props);
this.state = {
todos: {
'04': {
label: 'Todo 4',
completed: true
},
'03': {
label: 'Todo 3',
completed: false
},
'02': {
label: 'Todo 2',
completed: false
},
'01': {
label: 'Todo 1',
completed: false
}
},
filter: 'all'
};
}
render() {
const { filter, todos } = this.state;
return (
<div>
<TodoHeader filter={filter} />
<TodoList todos={todos} filter={filter} />
<TodoFooter todos={todos} />
</div>
);
}
}
@@ -7,7 +7,7 @@ export const TodoFooter = (props: any) => {
<span>
{itemCount} item{itemCount > 1 ? 's' : ''} left
</span>
<button className="button">Clear Completed</button>
<button className="submit">Clear Completed</button>
</footer>
);
};
@@ -0,0 +1,30 @@
import React from 'react';
export class TodoHeader extends React.Component<any, any> {
render() {
const { filter } = this.props;
return (
<header>
<h1>todos</h1>
<div className="addTodo">
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className={filter == 'all' ? 'completed' : ''}>all</button>
<button className={filter == 'active' ? 'completed' : ''}>active</button>
<button className={filter == 'completed' ? 'completed' : ''}>completed</button>
</nav>
</header>
);
}
_onChange = evt => {
this.setState({ labelInput: evt.target.value });
};
_onAdd = () => {
console.log(this.state.labelInput);
this.setState({ labelInput: '' });
};
}
@@ -0,0 +1,19 @@
import React from 'react';
import { TodoListItem } from './TodoListItem';
export class TodoList extends React.Component<any, any> {
render() {
const { filter, todos } = this.props;
const filteredTodos = Object.keys(todos).filter(id => {
return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
});
return (
<ul className="todos">
{filteredTodos.map(id => (
<TodoListItem key={id} {...todos[id]} />
))}
</ul>
);
}
}
+4
View File
@@ -0,0 +1,4 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { TodoApp } from './TodoApp';
ReactDOM.render(<TodoApp />, document.getElementById('app'));
+49
View File
@@ -0,0 +1,49 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
.addTodo {
display: flex;
}
.textfield {
flex-grow: 1;
margin-right: 10px;
}
.submit {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .selected {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}
@@ -81,7 +81,7 @@
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./step1-06/src/index.tsx");
/******/ return __webpack_require__(__webpack_require__.s = "./step1-06/final/src/index.tsx");
/******/ })
/************************************************************************/
/******/ ({
@@ -229,75 +229,75 @@ eval("var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn th
/***/ }),
/***/ "./step1-06/src/TodoApp.tsx":
/*!**********************************!*\
!*** ./step1-06/src/TodoApp.tsx ***!
\**********************************/
/***/ "./step1-06/final/src/TodoApp.tsx":
/*!****************************************!*\
!*** ./step1-06/final/src/TodoApp.tsx ***!
\****************************************/
/*! exports provided: TodoApp */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoApp\", function() { return TodoApp; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _components_TodoFooter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/TodoFooter */ \"./step1-06/src/components/TodoFooter.tsx\");\n/* harmony import */ var _components_TodoHeader__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/TodoHeader */ \"./step1-06/src/components/TodoHeader.tsx\");\n/* harmony import */ var _components_TodoList__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/TodoList */ \"./step1-06/src/components/TodoList.tsx\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n\n\n\n\nvar TodoApp = /** @class */ (function (_super) {\n __extends(TodoApp, _super);\n function TodoApp(props) {\n var _this = _super.call(this, props) || this;\n _this.state = {\n todos: {\n '04': {\n label: 'Todo 4',\n completed: true\n },\n '03': {\n label: 'Todo 3',\n completed: false\n },\n '02': {\n label: 'Todo 2',\n completed: false\n },\n '01': {\n label: 'Todo 1',\n completed: false\n }\n },\n filter: 'all'\n };\n return _this;\n }\n TodoApp.prototype.render = function () {\n var _a = this.state, filter = _a.filter, todos = _a.todos;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_TodoHeader__WEBPACK_IMPORTED_MODULE_2__[\"TodoHeader\"], { filter: filter }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_TodoList__WEBPACK_IMPORTED_MODULE_3__[\"TodoList\"], { todos: todos, filter: filter }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_TodoFooter__WEBPACK_IMPORTED_MODULE_1__[\"TodoFooter\"], { todos: todos })));\n };\n return TodoApp;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-06/src/TodoApp.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoApp\", function() { return TodoApp; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _components_TodoFooter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/TodoFooter */ \"./step1-06/final/src/components/TodoFooter.tsx\");\n/* harmony import */ var _components_TodoHeader__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/TodoHeader */ \"./step1-06/final/src/components/TodoHeader.tsx\");\n/* harmony import */ var _components_TodoList__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/TodoList */ \"./step1-06/final/src/components/TodoList.tsx\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n\n\n\n\nvar TodoApp = /** @class */ (function (_super) {\n __extends(TodoApp, _super);\n function TodoApp(props) {\n var _this = _super.call(this, props) || this;\n _this.state = {\n todos: {\n '04': {\n label: 'Todo 4',\n completed: true\n },\n '03': {\n label: 'Todo 3',\n completed: false\n },\n '02': {\n label: 'Todo 2',\n completed: false\n },\n '01': {\n label: 'Todo 1',\n completed: false\n }\n },\n filter: 'all'\n };\n return _this;\n }\n TodoApp.prototype.render = function () {\n var _a = this.state, filter = _a.filter, todos = _a.todos;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_TodoHeader__WEBPACK_IMPORTED_MODULE_2__[\"TodoHeader\"], { filter: filter }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_TodoList__WEBPACK_IMPORTED_MODULE_3__[\"TodoList\"], { todos: todos, filter: filter }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_TodoFooter__WEBPACK_IMPORTED_MODULE_1__[\"TodoFooter\"], { todos: todos })));\n };\n return TodoApp;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-06/final/src/TodoApp.tsx?");
/***/ }),
/***/ "./step1-06/src/components/TodoFooter.tsx":
/*!************************************************!*\
!*** ./step1-06/src/components/TodoFooter.tsx ***!
\************************************************/
/***/ "./step1-06/final/src/components/TodoFooter.tsx":
/*!******************************************************!*\
!*** ./step1-06/final/src/components/TodoFooter.tsx ***!
\******************************************************/
/*! exports provided: TodoFooter */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoFooter\", function() { return TodoFooter; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nvar TodoFooter = function (props) {\n var itemCount = Object.keys(props.todos).filter(function (id) { return !props.todos[id].completed; }).length;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"footer\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", null,\n itemCount,\n \" item\",\n itemCount > 1 ? 's' : '',\n \" left\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { className: \"button\" }, \"Clear Completed\")));\n};\n\n\n//# sourceURL=webpack:///./step1-06/src/components/TodoFooter.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoFooter\", function() { return TodoFooter; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nvar TodoFooter = function (props) {\n var itemCount = Object.keys(props.todos).filter(function (id) { return !props.todos[id].completed; }).length;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"footer\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", null,\n itemCount,\n \" item\",\n itemCount > 1 ? 's' : '',\n \" left\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { className: \"submit\" }, \"Clear Completed\")));\n};\n\n\n//# sourceURL=webpack:///./step1-06/final/src/components/TodoFooter.tsx?");
/***/ }),
/***/ "./step1-06/src/components/TodoHeader.tsx":
/*!************************************************!*\
!*** ./step1-06/src/components/TodoHeader.tsx ***!
\************************************************/
/***/ "./step1-06/final/src/components/TodoHeader.tsx":
/*!******************************************************!*\
!*** ./step1-06/final/src/components/TodoHeader.tsx ***!
\******************************************************/
/*! exports provided: TodoHeader */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoHeader\", function() { return TodoHeader; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n\nvar TodoHeader = /** @class */ (function (_super) {\n __extends(TodoHeader, _super);\n function TodoHeader() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n TodoHeader.prototype.render = function () {\n var filter = this.props.filter;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"h1\", null, \"todos\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", { className: \"textfield\", placeholder: \"add todo\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { className: \"button add\" }, \"Add\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", { className: \"filter\" },\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { className: filter == 'all' ? 'active' : '' }, \"all\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { className: filter == 'active' ? 'active' : '' }, \"active\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { className: filter == 'completed' ? 'active' : '' }, \"completed\"))));\n };\n return TodoHeader;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-06/src/components/TodoHeader.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoHeader\", function() { return TodoHeader; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n\nvar TodoHeader = /** @class */ (function (_super) {\n __extends(TodoHeader, _super);\n function TodoHeader() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._onChange = function (evt) {\n _this.setState({ labelInput: evt.target.value });\n };\n _this._onAdd = function () {\n console.log(_this.state.labelInput);\n _this.setState({ labelInput: '' });\n };\n return _this;\n }\n TodoHeader.prototype.render = function () {\n var filter = this.props.filter;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"header\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"h1\", null, \"todos\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", { className: \"addTodo\" },\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", { value: this.state.labelInput, onChange: this._onChange, className: \"textfield\", placeholder: \"add todo\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { className: \"submit\" }, \"Add\")),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"nav\", { className: \"filter\" },\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { className: filter == 'all' ? 'completed' : '' }, \"all\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { className: filter == 'active' ? 'completed' : '' }, \"active\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { className: filter == 'completed' ? 'completed' : '' }, \"completed\"))));\n };\n return TodoHeader;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-06/final/src/components/TodoHeader.tsx?");
/***/ }),
/***/ "./step1-06/src/components/TodoList.tsx":
/*!**********************************************!*\
!*** ./step1-06/src/components/TodoList.tsx ***!
\**********************************************/
/***/ "./step1-06/final/src/components/TodoList.tsx":
/*!****************************************************!*\
!*** ./step1-06/final/src/components/TodoList.tsx ***!
\****************************************************/
/*! exports provided: TodoList */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoList\", function() { return TodoList; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _TodoListItem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./TodoListItem */ \"./step1-06/src/components/TodoListItem.tsx\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\n\n\nvar TodoList = /** @class */ (function (_super) {\n __extends(TodoList, _super);\n function TodoList() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n TodoList.prototype.render = function () {\n var _a = this.props, filter = _a.filter, todos = _a.todos;\n var filteredTodos = Object.keys(todos).filter(function (id) {\n return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);\n });\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"ul\", { className: \"todos\" }, filteredTodos.map(function (id) { return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_TodoListItem__WEBPACK_IMPORTED_MODULE_1__[\"TodoListItem\"], __assign({ key: id }, todos[id]))); })));\n };\n return TodoList;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-06/src/components/TodoList.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoList\", function() { return TodoList; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _TodoListItem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./TodoListItem */ \"./step1-06/final/src/components/TodoListItem.tsx\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\n\n\nvar TodoList = /** @class */ (function (_super) {\n __extends(TodoList, _super);\n function TodoList() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n TodoList.prototype.render = function () {\n var _a = this.props, filter = _a.filter, todos = _a.todos;\n var filteredTodos = Object.keys(todos).filter(function (id) {\n return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);\n });\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"ul\", { className: \"todos\" }, filteredTodos.map(function (id) { return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_TodoListItem__WEBPACK_IMPORTED_MODULE_1__[\"TodoListItem\"], __assign({ key: id }, todos[id]))); })));\n };\n return TodoList;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-06/final/src/components/TodoList.tsx?");
/***/ }),
/***/ "./step1-06/src/components/TodoListItem.tsx":
/*!**************************************************!*\
!*** ./step1-06/src/components/TodoListItem.tsx ***!
\**************************************************/
/***/ "./step1-06/final/src/components/TodoListItem.tsx":
/*!********************************************************!*\
!*** ./step1-06/final/src/components/TodoListItem.tsx ***!
\********************************************************/
/*! exports provided: TodoListItem */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoListItem\", function() { return TodoListItem; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n\nvar TodoListItem = /** @class */ (function (_super) {\n __extends(TodoListItem, _super);\n function TodoListItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n TodoListItem.prototype.render = function () {\n var _a = this.props, label = _a.label, completed = _a.completed;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"li\", { className: \"todo\" },\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", { type: \"checkbox\", checked: completed }),\n \" \",\n label)));\n };\n return TodoListItem;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-06/src/components/TodoListItem.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoListItem\", function() { return TodoListItem; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n\nvar TodoListItem = /** @class */ (function (_super) {\n __extends(TodoListItem, _super);\n function TodoListItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n TodoListItem.prototype.render = function () {\n var _a = this.props, label = _a.label, completed = _a.completed;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"li\", { className: \"todo\" },\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", { type: \"checkbox\", checked: completed }),\n \" \",\n label)));\n };\n return TodoListItem;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-06/final/src/components/TodoListItem.tsx?");
/***/ }),
/***/ "./step1-06/src/index.tsx":
/*!********************************!*\
!*** ./step1-06/src/index.tsx ***!
\********************************/
/***/ "./step1-06/final/src/index.tsx":
/*!**************************************!*\
!*** ./step1-06/final/src/index.tsx ***!
\**************************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _TodoApp__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TodoApp */ \"./step1-06/src/TodoApp.tsx\");\n\n\n\nreact_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_TodoApp__WEBPACK_IMPORTED_MODULE_2__[\"TodoApp\"], null), document.getElementById('app'));\n\n\n//# sourceURL=webpack:///./step1-06/src/index.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _TodoApp__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TodoApp */ \"./step1-06/final/src/TodoApp.tsx\");\n\n\n\nreact_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_TodoApp__WEBPACK_IMPORTED_MODULE_2__[\"TodoApp\"], null), document.getElementById('app'));\n\n\n//# sourceURL=webpack:///./step1-06/final/src/index.tsx?");
/***/ })