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

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 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 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/todoItem.m.css';

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

export const TodoItemBase = ThemedMixin(WidgetBase);

@theme(css)
export default class TodoItem extends TodoItemBase {

	private toggleTodo() {
		this.properties.toggleTodo({ id: this.properties.todo.id });
	}

	private editTodo() {
		this.properties.editTodo({ id: this.properties.todo.id });
	}

	private removeTodo() {
		this.properties.removeTodo({ id: this.properties.todo.id });
	}

searchValue: string;
	activeCount: number;
	todoCount: number;
	completed: boolean;
	addTodo: (payload: object) => void;
	editTodo: (payload: { id: string }) => void;
	setCurrentTodo: (payload: { todo: string }) => void;
	search: (payload: { search: string }) => void;
	removeTodo: (payload: { id: string }) => void;
	toggleTodo: (payload: { id: string }) => void;
	toggleTodos: (payload: object) => void;
	clearCompleted: (payload: object) => void;
}

@theme(css)
export default class TodoApp extends ThemedMixin(WidgetBase) {
	protected render() {
		const {
			todos,
			addTodo,
			completed: allCompleted,
			toggleTodos,
			editTodo,
			removeTodo,
			toggleTodo,
			currentTodo: todo,
			setCurrentTodo,
			search,
			searchValue,
			todoCount,
			activeCount,
			clearCompleted

@theme(css)
@customElement>({
	tag: 'dojo-grid',
	properties: [
		'theme',
		'classes',
		'height',
		'fetcher',
		'updater',
		'columnConfig',
		'store'
	],
	attributes: [ 'storeId' ]
})
export default class Grid<s> extends ThemedMixin(WidgetBase)&gt; {
	private _store = new Store&gt;();
	private _handle: any;
	private _scrollLeft = 0;
	private _pageSize = 100;

	constructor() {
		super();
		this._handle = this._store.onChange(this._store.path('_grid'), this.invalidate.bind(this));
	}

	@diffProperty('store', reference)
	protected onStoreProperty(previous: any, current: any) {
		const { storeId = '_grid' } = current;
		this._handle.remove();
		this._store = current.store;
		this._handle = this._store.onChange(this._store.path(storeId), () =&gt; {</s>

import WidgetBase from '@dojo/framework/widget-core/WidgetBase';
import { v } from '@dojo/framework/widget-core/d';
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/todoSearch.m.css';

export interface TodoSearchProperties {
	search: (payload: { search: string }) => void;
	searchValue: string;
}

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

	protected onInput({ target: { value: search } }: any) {
		this.properties.search({ search });
	}

	protected render() {
		const { searchValue: value } = this.properties;
		const { messages } = this.localizeBundle(appBundle);

		return [
			v('span', { classes: this.theme(css.searchIcon) }),
			v('input', {
				type: 'text',
				classes: this.theme(css.search),
				placeholder: messages.searchPlaceholder,
				value,

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

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

export interface TodoViewSwitchProperties {
	view: string;
}

@theme(css)
export default class TodoViewSwitch extends ThemedMixin(WidgetBase) {
	protected render() {
		const { view } = this.properties;

		return v('ul', {
			classes: this.theme(css.viewChooser)
		}, [
			v('li', [
				w(Link, {
					key: 'list',
					to: 'view',
					isOutlet: true,
					params: { view: 'list' },
					classes: this.theme([ css.list, view === 'list' ? css.active : null ])
				})
			]),
			v('li', [

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

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

interface ThemeSwitcherProperties {
	changeTheme: (wantsPirate: boolean) => void;
}

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

	private _onClick(event: MouseEvent) {
		const target = event.target as HTMLInputElement;
		this.properties.changeTheme(target.checked);
	}

	protected render() {
		const { messages } = this.localizeBundle(appBundle);

		return v('label', {
			classes: this.theme(css.themeSwitcher)
		}, [
			v('span', [ messages.themeSwitchTitle ]),
			v('input', {
				type: 'checkbox',
				onclick: this._onClick,

import * as css from './styles/todoList.m.css';
import { Outlet } from '@dojo/framework/routing/Outlet';
import TodoDetailsContainer from '../containers/TodoDetailsContainer';
import { MatchDetails } from '@dojo/framework/routing/interfaces';

export interface TodoListProperties {
	view: string;
	filter: string;
	todos: Todo[];
	searchValue: string;
	toggleTodo: (payload: { id: string }) => void;
	removeTodo: (payload: { id: string }) => void;
	editTodo: (payload: { id: string }) => void;
}

export const TodoListBase = ThemedMixin(WidgetBase);

function filterTodos(todos: Todo[], quickFilter: string, filter: string): Todo[] {
	return todos.filter((todo) => {
		return (quickFilter === '' || 	todo.label.toLowerCase().indexOf(quickFilter.toLowerCase()) >= 0) &&
			(filter === 'completed' && todo.completed || filter === 'active' && !todo.completed || filter === 'all');
	});
}

@theme(css)
export default class TodoList extends TodoListBase {
	protected render() {
		const { todos, searchValue, view, filter, toggleTodo, removeTodo, editTodo } = this.properties;

		return [
			v('ul', { classes: this.theme([ css.todoList, view === 'card' && todos.length > 0 ? css.cardList : null ]) }, filterTodos(todos, searchValue, filter).map((todo) => {
				return view === 'list' ?

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

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

export interface TodoFilterProperties {
	filter?: string;
}

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

	protected render() {
		const { filter } = this.properties;
		const { messages } = this.localizeBundle(appBundle);

		return v('ul', { classes: this.theme(css.filters) }, [
			v('li', [
				w(Link, {
					key: 'all',
					classes: this.theme(filter === 'all' ? css.selected : null),
					to: 'view',
					isOutlet: true,
					params: { filter: 'all' }
				}, [ messages.filterAll ]),
				w(Link, {
					key: 'active',