How to use @dojo/widgets - 10 common examples

import { VNodeProperties } from '@dojo/interfaces/vdom';

export interface LabelProperties extends WidgetProperties {
	label?: string;
	onKeypress?: (event: KeyboardEvent) => void;
	onDblclick?: (event: MouseEvent) => void;
}

export type Label = Widget & {
	onKeypress: (event: KeyboardEvent) => void;
	onDblclick: (event: MouseEvent) => void;
}

export interface LabelFactory extends WidgetFactory {}

const createLabel: LabelFactory = createWidgetBase
	.mixin({
		mixin: {
			tagName: 'label',
			onDblclick(this: Label, event: MouseEvent) {
				this.properties.onDblclick && this.properties.onDblclick(event);
			},
			onKeypress(this: Label, event: KeyboardEvent) {
				this.properties.onKeypress && this.properties.onKeypress(event);
			},
			nodeAttributes: [
				function (this: Label): VNodeProperties {
					return {
						innerHTML: this.properties.label,
						'aria-describedby': 'edit-instructions',
						tabindex: '0',
						onkeyup: this.onKeypress,

const filters = [ 'all', 'active', 'completed' ];
	return filters.map((filterItem) => {
		const label = filterItem[0].toUpperCase() + filterItem.substring(1);
		return v('li', {}, [
			v('a', {
				innerHTML: label,
				href: `#${filterItem}`,
				classes: {
					selected: activeFilter === filterItem
				}
			})
		]);
	});
}

const createTodoFilter: TodoFilterFactory = createWidgetBase.mixin({
	mixin: {
		tagName: 'ul',
		classes: [ 'filters' ],
		getChildrenNodes: function(this: TodoFilter): DNode[] {
			const activeFilter = this.properties.activeFilter || '';
			return createFilterItems(activeFilter);
		}
	}
});

export default createTodoFilter;

import { Widget, WidgetProperties, WidgetFactory } from '@dojo/widgets/interfaces';
import { VNodeProperties } from '@dojo/interfaces/vdom';
import createWidgetBase from '@dojo/widgets/createWidgetBase';

export interface TitleProperties extends WidgetProperties {
	label?: string;
}

export interface TitleFactory extends WidgetFactory, TitleProperties> { }

const createTitle: TitleFactory = createWidgetBase.mixin({
	mixin: {
		tagName: 'h1',
		nodeAttributes: [
			function (this: Widget): VNodeProperties {
				return { innerHTML: this.properties.label };
			}
		]
	}
});

export default createTitle;

import { Widget, WidgetProperties, DNode } from '@dojo/widgets/interfaces';
import createWidgetBase from '@dojo/widgets/createWidgetBase';
import { v, w } from '@dojo/widgets/d';
import createButton from '@dojo/widgets/components/button/createButton';
import { clearCompleted } from '../actions/userActions';
import createTodoFilter from './createTodoFilter';

export interface TodoFooterProperties extends WidgetProperties {
	activeFilter: string;
	activeCount: number;
	completedCount: number;
}

export type TodoFooter = Widget;

const createTodoFooter = createWidgetBase.mixin({
	mixin: {
		tagName: 'footer',
		classes: [ 'footer' ],
		getChildrenNodes: function(this: TodoFooter): (DNode | null)[] {
			const { activeCount, activeFilter, completedCount } = this.properties;
			const countLabel = activeCount === 1 ? 'item' : 'items';

			return [
				v('span', { 'class': 'todo-count' }, [
					v('strong', [activeCount + ' ']),
					v('span', [countLabel + ' left'])
				]),
				w(createTodoFilter, {
					classes: [ 'filters' ],
					activeFilter
				}),

import createLabel from './createLabel';
import { bind } from './../utils';

export interface TodoItemProperties extends WidgetProperties {
	label: string;
	editing: boolean;
	completed: boolean;
}

export type TodoItem = Widget

export type Identifiable<i> = I &amp; {
	todoId?: string;
}

const createTodoItem = createWidgetBase.mixin({
		mixin: {
			tagName: 'li',
			nodeAttributes: [
				function(this: TodoItem): VNodeProperties {
					const { completed, editing } = this.properties;
					return {
						classes: { completed, editing }
					};
				}
			],
			getChildrenNodes: function(this: TodoItem): (DNode | null)[] {
				const { properties: { id: todoId, completed: checked, label, editing: focused = false } } = this;

				return [
					v('div.view', [
						w(createCheckboxInput, { classes: [ 'toggle' ], checked, onChange: bind(todoToggleComplete, this) }),</i>

import { Widget, WidgetFactory, WidgetState, WidgetProperties } from '@dojo/widgets/interfaces';
import createFormFieldMixin, { FormFieldMixin } from '@dojo/widgets/mixins/createFormFieldMixin';
import { VNodeProperties } from '@dojo/interfaces/vdom';

export interface CheckboxProperties extends WidgetProperties {
	checked?: boolean;
	onChange?: (event?: Event) => void;
};

export type CheckboxInput = Widget & FormFieldMixin & {
	onChange: (event?: Event) => void;
}

export type CheckboxInputFactory = WidgetFactory

const createCheckboxInput: CheckboxInputFactory = createWidgetBase
	.mixin(createFormFieldMixin)
	.mixin({
		mixin: {
			tagName: 'input',
			type: 'checkbox',
			onChange(this: CheckboxInput, event?: Event) {
				this.properties.onChange && this.properties.onChange(event);
			},
			nodeAttributes: [
				function (this: CheckboxInput): VNodeProperties {
					const { checked } = this.properties;
					return { checked, onchange: this.onChange };
				}
			]
		}
	});

export type TodoList = Widget;

export interface TodoListFactory extends WidgetFactory {}

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

const createTodoList: TodoListFactory = createWidgetBase.mixin({
		mixin: {
			tagName: 'ul',
			classes: [ 'todo-list' ],
			getChildrenNodes: function(this: TodoList): DNode[] {
				const activeFilter = this.properties.activeFilter || '';
				const todos = this.properties.todos || [];
				return todos
					.filter((todo) => filter(activeFilter, todo))
					.map((todo) => w(createTodoItem, todo));
			}
		}
	});

export default createTodoList;

import { DNode, Widget, WidgetProperties } from '@dojo/widgets/interfaces';
import createWidgetBase from '@dojo/widgets/createWidgetBase';
import { w } from '@dojo/widgets/d';
import { todoToggleAll } from '../actions/userActions';
import createCheckboxInput, { CheckboxProperties } from './createCheckboxInput';
import createTodoList, { TodoListProperties } from './createTodoList';

export interface MainSectionProperties extends WidgetProperties, TodoListProperties {
	allCompleted: boolean;
}

const createMainSection = createWidgetBase.mixin({
	mixin: {
		tagName: 'section',
		classes: [ 'main' ],
		getChildrenNodes: function (this: Widget): DNode[] {
			const { properties: { todos, allCompleted: checked, activeFilter } } = this;
			const checkBoxProperties: CheckboxProperties = {
				id: 'todo-toggle',
				checked,
				classes: [ 'toggle-all' ],
				onChange: todoToggleAll
			};

			return [
				w(createCheckboxInput, checkBoxProperties),
				w(createTodoList, { todos, activeFilter })
			];

focused?: boolean;
	placeholder?: string;
	value?: string;
	onKeyUp?: (event?: KeyboardEvent) => void;
	onBlur?: (event?: Event) => void;
};

export type FocusableTextInput = Widget & FormFieldMixin & {
	onKeyUp: (event?: KeyboardEvent) => void;
	onBlur: (event?: Event) => void;
	afterUpdate?: (element: HTMLInputElement) => void;
}

export interface FocusableTextInputFactory extends WidgetFactory { }

const createFocusableTextInput: FocusableTextInputFactory = createWidgetBase
	.mixin(createFormFieldMixin)
	.mixin({
		mixin: {
			tagName: 'input',

			type: 'text',

			onKeyUp(this: FocusableTextInput, event?: KeyboardEvent) {
				this.properties.onKeyUp && this.properties.onKeyUp(event);
			},
			onBlur(this: FocusableTextInput, event?: Event) {
				this.properties.onBlur && this.properties.onBlur(event);
			},
			afterUpdate(this: FocusableTextInput, element: HTMLInputElement) {
				const focused = this.properties.focused;
				if (focused) {

getChildrenNodes: function (this: Widget): DNode[] {
			const { properties: { todos, allCompleted: checked, activeFilter } } = this;
			const checkBoxProperties: CheckboxProperties = {
				id: 'todo-toggle',
				checked,
				classes: [ 'toggle-all' ],
				onChange: todoToggleAll
			};

			return [
				w(createCheckboxInput, checkBoxProperties),
				w(createTodoList, { todos, activeFilter })
			];
		}
	}