TypeScript createWidgetBase.mixin函數代碼示例

export interface ButtonProperties extends WidgetProperties {
	label?: string;
	name?: string;
	onClick?(event: MouseEvent): void;
}

export type Button = Widget<ButtonProperties> & {
	onClick(event?: MouseEvent): void;
};

export interface ButtonFactory extends WidgetFactory<Button, ButtonProperties> { }

const createButton: ButtonFactory = createWidgetBase
	.mixin({
		mixin: {
			onClick(this: Button, event: MouseEvent) {
				this.properties.onClick && this.properties.onClick(event);
			},
			nodeAttributes: [
				function(this: Button): VNodeProperties {
					return { innerHTML: this.properties.label, onclick: this.onClick };
				}
			],
			tagName: 'button',
			type: 'button'
		}
	});

export default createButton;

	onDblclick: (event: MouseEvent) => void;
}

export interface LabelFactory extends WidgetFactory<Label, LabelProperties> {}

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,
						ondblclick: this.onDblclick
					};
				}
			]
		}
	});

export default createLabel;

export type TodoFooter = Widget<TodoFooterProperties>;

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('todo-filter', {
					classes: [ 'filters' ],
					activeFilter
				}),
				completedCount ? w('button', {
					onClick: clearCompleted,
					label: 'Clear completed',
					classes: [ 'clear-completed' ]
				}) : null
			];
		}
	}
});

export default createTodoFooter;

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

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

export type CheckboxInputFactory = WidgetFactory<CheckboxInput, CheckboxProperties>

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

export default createCheckboxInput;

const createFocusableTextInput: FocusableTextInputFactory = createWidgetBase
	.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) {
					setTimeout(() => element.focus(), 0);
				}
				else if (!focused && document.activeElement === element) {
					element.blur();
				}
			},
			nodeAttributes: [
				function (this: FocusableTextInput): VNodeProperties {
					const { onKeyUp: onkeyup, onBlur: onblur, afterUpdate, afterUpdate: afterCreate } = this;
					const { placeholder, value = '' } = this.properties;

					return { afterUpdate, placeholder, innerHTML: value, value, afterCreate, onkeyup, onblur };
				}
			]
		}
	});

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

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

export interface TitleFactory extends WidgetFactory<Widget<TitleProperties>, TitleProperties> { }

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

export default createTitle;

import { DNode, Widget, WidgetProperties } from '@dojo/widget-core/interfaces';
import createWidgetBase from '@dojo/widget-core/createWidgetBase';
import { w } from '@dojo/widget-core/d';
import { todoToggleAll } from '../actions/userActions';

export interface MainSectionProperties extends WidgetProperties {
	allCompleted: boolean;
	store: any;
}

const createMainSection = createWidgetBase.mixin({
	mixin: {
		tagName: 'section',
		classes: [ 'main' ],
		getChildrenNodes: function (this: Widget<MainSectionProperties>): DNode[] {
			const { properties: { activeFilter, todos, allCompleted: checked } } = this;

			return [
				w('checkbox', { checked, onChange: todoToggleAll, classes: [ 'toggle-all' ]}),
				w('todo-list', { todos, activeFilter })
			];
		}
	}
});

export default createMainSection;

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('checkbox', { classes: [ 'toggle' ], checked, onChange: bind(todoToggleComplete, this) }),
						w('label', { label, onDblclick: bind(todoEdit, this), onKeypress: bind(todoEdit, this) }),
						w('button', { classes: [ 'destroy' ], onClick: bind(todoRemove, this) })
					]),
					focused ? w('text-input', {
						value: label,
						id: todoId,
						focused, classes: [ 'edit' ],
						onBlur: bind(todoSave, this),
						onKeyUp: bind(todoEditInput, this)
					}) : null
				];
			}
		}
});

export type TodoFilterFactory = WidgetFactory<TodoFilter, TodoFilterProperties>

function createFilterItems(activeFilter: string): DNode[] {
	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 { DNode, WidgetOptions, WidgetMixin, WidgetFactory, WidgetProperties } from '@dojo/widget-core/interfaces';
import createWidgetBase from '@dojo/widget-core/createWidgetBase';
import storeMixin, { StoreMixinApi, StoreMixinProperties } from '@dojo/widget-core/mixins/storeMixin';
import { v, w } from '@dojo/widget-core/d';

import { todoInput } from './actions/userActions';
import { bind } from './utils';

export interface AppProperties extends WidgetProperties, StoreMixinProperties { }

export interface AppMixin extends WidgetMixin<AppProperties>, StoreMixinApi { }

export interface AppFactory extends WidgetFactory<AppMixin, WidgetOptions<AppProperties>> { }

const createApp: AppFactory = createWidgetBase
	.mixin(storeMixin)
	.mixin({
		mixin: {
			classes: [ 'todoapp' ],
			tagName: 'section',
			getChildrenNodes: function(this: AppMixin): DNode[] {
				const { todos = [], activeCount, completedCount, allCompleted, activeFilter } = this.state;
				const classes = todos && todos.length ? [] : [ 'hidden' ];
				const todoFooterProperties = { id: 'todo-footer', activeCount, completedCount, activeFilter, classes };

				return [
					v('header', {}, [
						w('title', { label: 'todos' }),
						w('text-input', { classes: ['new-todo'], focused: true, placeholder: 'What needs to be done?', onKeyUp: bind(todoInput, this) })
					]),
					w('main-section', { todos, activeFilter, allCompleted }),