How to use the @dojo/framework/widget-core/mixins/Themed.theme function in @dojo/framework

import TextInput from '@dojo/widgets/text-input';
import * as css from '../styles/workerForm.m.css';

export interface WorkerFormData {
	firstName: string;
	lastName: string;
	email: string;
}

export interface WorkerFormProperties {
	formData: WorkerFormData;
	onFormInput: (data: Partial) => void;
	onFormSave: () => void;
}

@theme(css)
export default class WorkerForm extends ThemedMixin(WidgetBase) {

	private _onSubmit(event: Event) {
		event.preventDefault();
		this.properties.onFormSave();
	}

	protected onFirstNameInput(firstName: string) {
		this.properties.onFormInput({ firstName });
	}

	protected onLastNameInput(lastName: string) {
		this.properties.onFormInput({ lastName });
	}

	protected onEmailInput(email: string) {

import { v } from '@dojo/framework/widget-core/d';
import I18nMixin from '@dojo/framework/widget-core/mixins/I18n';
import ThemedMixin, { theme } from '@dojo/framework/widget-core/mixins/Themed';
import WidgetBase from '@dojo/framework/widget-core/WidgetBase';
import appBundle from '../nls/common';
import * as css from './styles/credits.m.css';

@theme(css)
export default class Credits extends I18nMixin(ThemedMixin(WidgetBase)) {
	protected render() {
		const { messages } = this.localizeBundle(appBundle);

		return [
			v('footer', {
				classes: this.theme(css.footer)
			}, [
				v('p', [ messages.footerInstructions ]),
				v('p', [ messages.footerCredits ]),
				v('p', [ messages.footerPartOf ])
			])
		];
	}
}

import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { TypedTargetEvent } from '@dojo/framework/widget-core/interfaces';
import { v, w } from '@dojo/framework/widget-core/d';
import uuid from '@dojo/framework/core/uuid';
import { ThemedMixin, theme } from '@dojo/framework/widget-core/mixins/Themed';
import TextInput, { TextInputProperties } from '@dojo/widgets/text-input';
import * as css from '../styles/workerForm.m.css';

export interface ValidatedTextInputProperties extends TextInputProperties {
	errorMessage?: string;
	onValidate?: (value: string) => void;
}

@theme(css)
export default class ValidatedTextInput extends ThemedMixin(WidgetBase) {
	private _errorId = uuid();

	private _onBlur(value: string) {
		const { onBlur, onValidate } = this.properties;
		onValidate && onValidate(value);
		onBlur && onBlur();
	}

	private _onInput(value: string) {
		const { invalid, onInput, onValidate } = this.properties;
		onInput && onInput(value);

		if (typeof invalid !== 'undefined') {
			onValidate && onValidate(value);
		}

editTodo: Function;
	updateTodo: Function;
}

function filter(filterName: string = 'all', todo: Todo): boolean {
	switch (filterName) {
		case 'completed':
			return !!todo.completed;
		case 'active':
			return !todo.completed;
		default:
			return true;
	}
}

@theme(css)
export default class TodoList extends ThemedMixin(WidgetBase) {
	protected render() {
		const { activeFilter, todos, toggleTodo, editTodo, updateTodo, removeTodo } = this.properties;
		const todoItems = arrayFrom(todos.entries()).filter(([ , value ]) => filter(activeFilter, value));

		return v('ul', { classes: this.theme(css.todoList) }, todoItems.map(([ key, todo ]) => {
			return w(TodoItem, { key, todo, toggleTodo, editTodo, removeTodo, updateTodo });
		}));
	}
}

import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { v } from '@dojo/framework/widget-core/d';
import { theme, ThemedMixin } from '@dojo/framework/widget-core/mixins/Themed';
import * as css from '../styles/worker.m.css';

export interface WorkerProperties {
	firstName?: string;
	lastName?: string;
	email?: string;
	timePerTask?: number;
	tasks?: string[];
}

@theme(css)
export default class Worker extends ThemedMixin(WidgetBase) {
	private _isFlipped = false;

	protected render() {
		return v('div', {
			classes: this.theme([ css.worker, this._isFlipped ? css.reverse : null ])
		}, [
			this._renderFront(),
			this._renderBack()
		]);
	}

	private _renderFront() {
		const {
			firstName = 'firstName',
			lastName = 'lastName'

import ThemedMixin, { theme } from '@dojo/framework/widget-core/mixins/Themed';
import I18nMixin from '@dojo/framework/widget-core/mixins/I18n';

import appBundle from '../nls/common';
import * as css from './styles/todoHeader.m.css';

export interface TodoHeaderProperties {
	allCompleted: boolean;
	todo: string;
	todoCount: number;
	toggleTodos: (payload: object) => void;
	addTodo: (payload: object) => void;
	setCurrentTodo: (payload: { todo: string }) => void;
}

@theme(css)
export default class TodoHeader extends I18nMixin(ThemedMixin(WidgetBase)) {

	protected toggleTodos() {
		this.properties.toggleTodos({});
	}

	protected addTodo(event: KeyboardEvent) {
		if (event.which === 13) {
			this.properties.addTodo({});
		}
	}

	protected setCurrentTodo({ target: { value: todo } }: any): void {
		this.properties.setCurrentTodo({ todo });
	}

import WidgetBase from '@dojo/framework/widget-core/WidgetBase';
import ThemedMixin, { theme } from '@dojo/framework/widget-core/mixins/Themed';
import { v } from '@dojo/framework/widget-core/d';

import { Todo } from './../todoProcesses';
import * as css from './styles/todoCard.m.css';

export interface TodoCardProperties {
	todo: Todo;
	editTodo: (payload: { id: string }) => void;
	removeTodo: (payload: { id: string }) => void;
	toggleTodo: (payload: { id: string }) => void;
}

@theme(css)
export default class TodoCard extends ThemedMixin(WidgetBase) {

	protected toggleTodo(): void {
		const { toggleTodo, todo: { id } } = this.properties;
		toggleTodo({ id });
	}

	protected editTodo(): void {
		const { editTodo, todo: { id } } = this.properties;
		editTodo({ id });
	}

	protected removeTodo(): void {
		const { removeTodo, todo: { id } } = this.properties;
		removeTodo({ id });
	}

import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import customElement from '@dojo/framework/widget-core/decorators/customElement';
import { v } from '@dojo/framework/widget-core/d';
import { theme, ThemedMixin } from '@dojo/framework/widget-core/mixins/Themed';
import { watch } from '@dojo/framework/widget-core/decorators/watch';

import * as css from './TodoApp.m.css';

@theme(css)
@customElement({
    tag: 'my-todo',
    events: [],
    attributes: [],
    properties: []
})
export default class TodoApp extends ThemedMixin(WidgetBase) {
    @watch()
    private list = [
        { id: 1, text: 'my initial todo', checked: false },
        { id: 2, text: 'Learn about Web Components', checked: true }
    ];

    protected render() {
        return [
            v('h1', {}, ['Todos WC - Dojo2']),

import { theme, ThemedMixin } from '@dojo/framework/widget-core/mixins/Themed';
import { Link } from '@dojo/framework/routing/Link';
import { Outlet } from '@dojo/framework/routing/Outlet';
import { MatchDetails } from '@dojo/framework/routing/interfaces';

import { WorkerFormData } from './WorkerForm';
import { WorkerProperties } from './Worker';
import Banner from './Banner';
import WorkerForm from './../widgets/WorkerForm';
import WorkerContainer from './../widgets/WorkerContainer';

import workerData from './../support/workerData';

import * as css from './../styles/app.m.css';

@theme(css)
export default class App extends ThemedMixin(WidgetBase) {
	private _newWorker: Partial = {};

	private _workerData: WorkerProperties[] = workerData;

	private _addWorker = () => {
		this._workerData = this._workerData.concat(this._newWorker);
		this._newWorker = {};
		this.invalidate();
	}

	private _onFormInput = (data: Partial) => {
		this._newWorker = {
			...this._newWorker,
			...data
		};

import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { w, v } from '@dojo/framework/widget-core/d';
import Worker, { WorkerProperties } from './Worker';
import { theme, ThemedMixin } from '@dojo/framework/widget-core/mixins/Themed';
import * as css from '../styles/workerContainer.m.css';

export interface WorkerContainerProperties {
	workerData?: WorkerProperties[];
}

@theme(css)
export default class WorkerContainer extends ThemedMixin(WidgetBase) {

	protected render() {
		const {
			workerData = []
		} = this.properties;

		const workers = workerData.map((worker, i) => w('worker', {
			key: `worker-${i}`,
			...worker
		}));

		return v('div', {
			classes: this.theme(css.container)
		}, workers);
	}