From 892c4db008d58ab44df4603536fe956750b275dc Mon Sep 17 00:00:00 2001 From: Ken Date: Sat, 16 Feb 2019 15:18:08 -0800 Subject: [PATCH] WIP: step 2-5 --- step2-05/README.md | 9 +++ step2-05/index.html | 6 ++ step2-05/src/components/TodoApp.tsx | 95 ++++++++++++++++++++++++ step2-05/src/components/TodoFooter.tsx | 23 ++++++ step2-05/src/components/TodoHeader.tsx | 58 +++++++++++++++ step2-05/src/components/TodoList.tsx | 27 +++++++ step2-05/src/components/TodoListItem.tsx | 75 +++++++++++++++++++ step2-05/src/index.tsx | 10 +++ step2-05/src/store/index.ts | 14 ++++ 9 files changed, 317 insertions(+) create mode 100644 step2-05/README.md create mode 100644 step2-05/index.html create mode 100644 step2-05/src/components/TodoApp.tsx create mode 100644 step2-05/src/components/TodoFooter.tsx create mode 100644 step2-05/src/components/TodoHeader.tsx create mode 100644 step2-05/src/components/TodoList.tsx create mode 100644 step2-05/src/components/TodoListItem.tsx create mode 100644 step2-05/src/index.tsx create mode 100644 step2-05/src/store/index.ts diff --git a/step2-05/README.md b/step2-05/README.md new file mode 100644 index 0000000..430fbea --- /dev/null +++ b/step2-05/README.md @@ -0,0 +1,9 @@ +# Step 2.2 + +Integrates Fabric + +Learn about Basic Components + +- Stack +- Text +- Show case some components diff --git a/step2-05/index.html b/step2-05/index.html new file mode 100644 index 0000000..454cef5 --- /dev/null +++ b/step2-05/index.html @@ -0,0 +1,6 @@ + + + +
+ + diff --git a/step2-05/src/components/TodoApp.tsx b/step2-05/src/components/TodoApp.tsx new file mode 100644 index 0000000..6a05102 --- /dev/null +++ b/step2-05/src/components/TodoApp.tsx @@ -0,0 +1,95 @@ +import React from 'react'; +import { Stack, Customizer, mergeStyles, getTheme } from 'office-ui-fabric-react'; +import { TodoFooter } from './TodoFooter'; +import { TodoHeader } from './TodoHeader'; +import { TodoList } from './TodoList'; +import { Store } from '../store'; +import { FluentCustomizations } from '@uifabric/fluent-theme'; + +let index = 0; + +const className = mergeStyles({ + padding: 25, + ...getTheme().effects.elevation4 +}); + +export class TodoApp extends React.Component { + constructor(props) { + super(props); + this.state = { + todos: {}, + filter: 'all' + }; + } + render() { + const { filter, todos } = this.state; + return ( + + + + + + + + + + ); + } + + private _addTodo = label => { + const { todos } = this.state; + const id = index++; + + this.setState({ + todos: { ...todos, [id]: { label } } + }); + }; + + private _remove = id => { + const newTodos = { ...this.state.todos }; + delete newTodos[id]; + + this.setState({ + todos: newTodos + }); + }; + + private _complete = id => { + const newTodos = { ...this.state.todos }; + newTodos[id].completed = !newTodos[id].completed; + + this.setState({ + todos: newTodos + }); + }; + + private _edit = (id, label) => { + const newTodos = { ...this.state.todos }; + newTodos[id] = { ...newTodos[id], label }; + + this.setState({ + todos: newTodos + }); + }; + + private _clear = () => { + const { todos } = this.state; + const newTodos = {}; + + Object.keys(this.state.todos).forEach(id => { + if (!todos[id].completed) { + newTodos[id] = todos[id]; + } + }); + + this.setState({ + todos: newTodos + }); + }; + + private _setFilter = filter => { + this.setState({ + filter: filter + }); + }; +} diff --git a/step2-05/src/components/TodoFooter.tsx b/step2-05/src/components/TodoFooter.tsx new file mode 100644 index 0000000..6a44d83 --- /dev/null +++ b/step2-05/src/components/TodoFooter.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Text } from '@uifabric/experiments'; +import { Stack } from 'office-ui-fabric-react'; +import { Store } from '../store'; +import { DefaultButton } from 'office-ui-fabric-react'; + +interface TodoFooterProps { + clear: () => void; + todos: Store['todos']; +} + +export const TodoFooter = (props: TodoFooterProps) => { + const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length; + + return ( + + + {itemCount} item{itemCount > 1 ? 's' : ''} left + + props.clear()}>Clear Completed + + ); +}; diff --git a/step2-05/src/components/TodoHeader.tsx b/step2-05/src/components/TodoHeader.tsx new file mode 100644 index 0000000..0015717 --- /dev/null +++ b/step2-05/src/components/TodoHeader.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { Text } from '@uifabric/experiments'; +import { Stack } from 'office-ui-fabric-react'; +import { Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react'; +import { FilterTypes } from '../store'; + +interface TodoHeaderProps { + addTodo: (label: string) => void; + setFilter: (filter: FilterTypes) => void; + filter: string; +} + +interface TodoHeaderState { + labelInput: string; +} + +export class TodoHeader extends React.Component { + constructor(props: TodoHeaderProps) { + super(props); + this.state = { labelInput: undefined }; + } + + render() { + return ( + + + todos + + + + + + + Add + + + + + + + + + ); + } + + private onAdd = () => { + this.props.addTodo(this.state.labelInput); + this.setState({ labelInput: undefined }); + }; + + private onChange = (evt: React.FormEvent, newValue: string) => { + this.setState({ labelInput: newValue }); + }; + + private onFilter = (item: PivotItem) => { + this.props.setFilter(item.props.headerText as FilterTypes); + }; +} diff --git a/step2-05/src/components/TodoList.tsx b/step2-05/src/components/TodoList.tsx new file mode 100644 index 0000000..805bd8f --- /dev/null +++ b/step2-05/src/components/TodoList.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Stack } from 'office-ui-fabric-react'; +import { TodoListItem } from './TodoListItem'; +import { Store, FilterTypes } from '../store'; + +interface TodoListProps { + complete: (id: string) => void; + remove: (id: string) => void; + todos: Store['todos']; + filter: FilterTypes; + edit: (id: string, label: string) => void; +} + +export const TodoList = (props: TodoListProps) => { + const { filter, todos, complete, remove, edit } = props; + const filteredTodos = Object.keys(todos).filter(id => { + return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed); + }); + + return ( + + {filteredTodos.map(id => ( + + ))} + + ); +}; diff --git a/step2-05/src/components/TodoListItem.tsx b/step2-05/src/components/TodoListItem.tsx new file mode 100644 index 0000000..030aa73 --- /dev/null +++ b/step2-05/src/components/TodoListItem.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react'; +import { Store } from '../store'; + +interface TodoListItemProps { + id: string; + todos: Store['todos']; + remove: (id: string) => void; + complete: (id: string) => void; + edit: (id: string, label: string) => void; +} + +interface TodoListItemState { + editing: boolean; + editLabel: string; +} + +export class TodoListItem extends React.Component { + constructor(props: TodoListItemProps) { + super(props); + this.state = { editing: false, editLabel: undefined }; + } + + render() { + const { todos, id, complete, remove } = this.props; + const item = todos[id]; + + return ( + + {!this.state.editing && ( + <> + complete(id)} /> +
+ + remove(id)} /> +
+ + )} + + {this.state.editing && ( + + + + + + Save + + + )} + + ); + } + + private onEdit = () => { + const { todos, id } = this.props; + const { label } = todos[id]; + + this.setState({ + editing: true, + editLabel: this.state.editLabel || label + }); + }; + + private onDoneEdit = () => { + this.props.edit(this.props.id, this.state.editLabel); + this.setState({ + editing: false, + editLabel: undefined + }); + }; + + private onChange = (evt: React.FormEvent, newValue: string) => { + this.setState({ editLabel: newValue }); + }; +} diff --git a/step2-05/src/index.tsx b/step2-05/src/index.tsx new file mode 100644 index 0000000..2587243 --- /dev/null +++ b/step2-05/src/index.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { TodoApp } from './components/TodoApp'; +import { initializeIcons } from '@uifabric/icons'; + +// Initializes the UI Fabric icons that we can use +// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons +initializeIcons(); + +ReactDOM.render(, document.getElementById('app')); diff --git a/step2-05/src/store/index.ts b/step2-05/src/store/index.ts new file mode 100644 index 0000000..221b5f4 --- /dev/null +++ b/step2-05/src/store/index.ts @@ -0,0 +1,14 @@ +export type FilterTypes = 'all' | 'active' | 'completed'; + +export interface TodoItem { + label: string; + completed: boolean; +} + +export interface Store { + todos: { + [id: string]: TodoItem; + }; + + filter: FilterTypes; +}