TypeScript Themed.ThemedMixin函數代碼示例

 *
 * @property direction      Orientation of this SplitPane, can be `row` or `column`
 * @property leading        Content to show in the primary pane
 * @property onResize       Called when the divider is dragged; should be used to update `size`
 * @property size           Size of the primary pane
 * @property trailing       Content to show in the secondary pane
 */
export interface SplitPaneProperties extends ThemedProperties {
	direction?: Direction;
	leading?: DNode;
	onResize?(size: number): void;
	size?: number;
	trailing?: DNode;
};

export const SplitPaneBase = ThemedMixin(WidgetBase);

const DEFAULT_SIZE = 100;

@theme(css)
export default class SplitPane extends SplitPaneBase<SplitPaneProperties> {
	private _divider: HTMLElement;
	private _dragging: boolean;
	private _lastSize?: number;
	private _position: number;
	private _root: HTMLElement;
	private _boundHandlers: any[];

	constructor() {
		/* istanbul ignore next: disregard transpiled `super`'s "else" block */
		super();

 */
export interface LabelProperties extends ThemedProperties {
	forId?: string;
	label: string | LabelOptions;
}

/**
 * This is a helper function for using `extraClasses` with Label.
 * It can be used as follows:
 * extraClasses: { root: parseLabelClasses(this.theme([ css.class1, css.class2 ])) }
 */
export function parseLabelClasses(classes: SupportedClassName | SupportedClassName[]): string {
	return Array.isArray(classes) ? classes.filter((str) => str).join(' ') : classes || '';
}

export const LabelBase = ThemedMixin(WidgetBase);

@theme(css)
export default class Label extends LabelBase<LabelProperties>  {

	render(): DNode {
		const {
			forId,
			label
		} = this.properties;

		// assign string or object label properites with defaults
		let labelProps: LabelOptions;
		if (typeof label === 'string') {
			labelProps = assign({}, labelDefaults, { content: label });
		}

 * @property onFocusCalled    Callback function when the cell receives focus
 * @property onKeyDown        Callback function for the key down event
 */
export interface CalendarCellProperties extends ThemedProperties {
	callFocus?: boolean;
	date: number;
	disabled?: boolean;
	focusable?: boolean;
	selected?: boolean;
	today?: boolean;
	onClick?(date: number, disabled: boolean): void;
	onFocusCalled?(): void;
	onKeyDown?(event: KeyboardEvent): void;
};

export const CalendarCellBase = ThemedMixin(WidgetBase);

@theme(css)
export default class CalendarCell extends CalendarCellBase<CalendarCellProperties> {
	protected onElementCreated(element: HTMLElement, key: string) {
		this._callFocus(element);
	}

	protected onElementUpdated(element: HTMLElement, key: string) {
		this._callFocus(element);
	}

	private _callFocus(element: HTMLElement) {
		const { callFocus, onFocusCalled } = this.properties;
		if (callFocus) {
			element.focus();

	controls: string;
	disabled?: boolean;
	id: string;
	index: number;
	onClick?: (index: number) => void;
	onCloseClick?: (index: number) => void;
	onDownArrowPress?: () => void;
	onEndPress?: () => void;
	onFocusCalled?: () => void;
	onHomePress?: () => void;
	onLeftArrowPress?: () => void;
	onRightArrowPress?: () => void;
	onUpArrowPress?: () => void;
};

export const ThemedBase = I18nMixin(ThemedMixin(WidgetBase));

@theme(css)
export class TabButtonBase<P extends TabButtonProperties = TabButtonProperties> extends ThemedBase<P> {
	private _onClick() {
		const {
			disabled,
			index,
			onClick
		} = this.properties;

		!disabled && onClick && onClick(index);
	}

	private _onCloseClick(event: MouseEvent) {
		const {

import { WidgetProperties } from '@dojo/widget-core/interfaces';
import { ThemedMixin, theme } from '@dojo/widget-core/mixins/Themed';
import { v } from '@dojo/widget-core/d';
import { Todo } from './TodoApp';

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

export interface TodoItemProperties extends WidgetProperties {
	todo: Todo;
	editTodo: Function;
	toggleTodo: Function;
	removeTodo: Function;
	updateTodo: Function;
}

export const TodoItemBase = ThemedMixin(WidgetBase);

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

	render() {
		const { properties: { todo } } = this;

		return v('li', { id: 'todo-item', classes: this.theme([css.todoItem, Boolean(todo.editing) ? css.editing : null, Boolean(todo.completed && !todo.editing) ? css.completed : null ]) }, [
			v('div', { classes: this.theme(css.view) }, [
				v('input', { id: 'toggle', classes: this.theme(css.toggle), type: 'checkbox', checked: todo.completed, onchange: this.toggleTodo }),
				v('label', { classes: this.theme(css.todoLabel), innerHTML: todo.label, ondblclick: this.editTodo }),
				v('button', { id: 'destroy', onclick: this.removeTodo, classes: this.theme(css.destroy) })
			]),
			todo.editing ? v('input', { afterCreate: this.afterCreate, onkeyup: this.updateTodo, onblur: this.updateTodo, value: todo.label, classes: this.theme(css.edit) }) : null
		]);

import { TodoCard } from './TodoCard';
import { TodoDetailsOutlet } from './../outlets/TodoDetailsOutlet';

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

export interface TodoListProperties extends WidgetProperties {
	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 class TodoList extends TodoListBase<TodoListProperties> {
	protected render(): DNode[] {
		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) => {

	onBlur?(event: FocusEvent): void;
	onChange?(event: Event): void;
	onClick?(event: MouseEvent): void;
	onFocus?(event: FocusEvent): void;
	onInput?(event: Event): void;
	onKeyDown?(event: KeyboardEvent): void;
	onKeyPress?(event: KeyboardEvent): void;
	onKeyUp?(event: KeyboardEvent): void;
	onMouseDown?(event: MouseEvent): void;
	onMouseUp?(event: MouseEvent): void;
	onTouchStart?(event: TouchEvent): void;
	onTouchEnd?(event: TouchEvent): void;
	onTouchCancel?(event: TouchEvent): void;
}

export const TextareaBase = ThemedMixin(WidgetBase);

@theme(css)
export default class Textarea extends TextareaBase<TextareaProperties> {
	private _onBlur (event: FocusEvent) { this.properties.onBlur && this.properties.onBlur(event); }
	private _onChange (event: Event) { this.properties.onChange && this.properties.onChange(event); }
	private _onClick (event: MouseEvent) { this.properties.onClick && this.properties.onClick(event); }
	private _onFocus (event: FocusEvent) { this.properties.onFocus && this.properties.onFocus(event); }
	private _onInput (event: Event) { this.properties.onInput && this.properties.onInput(event); }
	private _onKeyDown (event: KeyboardEvent) { this.properties.onKeyDown && this.properties.onKeyDown(event); }
	private _onKeyPress (event: KeyboardEvent) { this.properties.onKeyPress && this.properties.onKeyPress(event); }
	private _onKeyUp (event: KeyboardEvent) { this.properties.onKeyUp && this.properties.onKeyUp(event); }
	private _onMouseDown (event: MouseEvent) { this.properties.onMouseDown && this.properties.onMouseDown(event); }
	private _onMouseUp (event: MouseEvent) { this.properties.onMouseUp && this.properties.onMouseUp(event); }
	private _onTouchStart (event: TouchEvent) { this.properties.onTouchStart && this.properties.onTouchStart(event); }
	private _onTouchEnd (event: TouchEvent) { this.properties.onTouchEnd && this.properties.onTouchEnd(event); }

	onBlur?(event: FocusEvent): void;
	onChange?(event: Event): void;
	onClick?(event: MouseEvent): void;
	onFocus?(event: FocusEvent): void;
	onInput?(event: Event): void;
	onKeyDown?(event: KeyboardEvent): void;
	onKeyPress?(event: KeyboardEvent): void;
	onKeyUp?(event: KeyboardEvent): void;
	onMouseDown?(event: MouseEvent): void;
	onMouseUp?(event: MouseEvent): void;
	onTouchStart?(event: TouchEvent): void;
	onTouchEnd?(event: TouchEvent): void;
	onTouchCancel?(event: TouchEvent): void;
}

export const TextInputBase = ThemedMixin(WidgetBase);

@theme(css)
export default class TextInput extends TextInputBase<TextInputProperties> {
	private _onBlur (event: FocusEvent) { this.properties.onBlur && this.properties.onBlur(event); }
	private _onChange (event: Event) { this.properties.onChange && this.properties.onChange(event); }
	private _onClick (event: MouseEvent) { this.properties.onClick && this.properties.onClick(event); }
	private _onFocus (event: FocusEvent) { this.properties.onFocus && this.properties.onFocus(event); }
	private _onInput (event: Event) { this.properties.onInput && this.properties.onInput(event); }
	private _onKeyDown (event: KeyboardEvent) { this.properties.onKeyDown && this.properties.onKeyDown(event); }
	private _onKeyPress (event: KeyboardEvent) { this.properties.onKeyPress && this.properties.onKeyPress(event); }
	private _onKeyUp (event: KeyboardEvent) { this.properties.onKeyUp && this.properties.onKeyUp(event); }
	private _onMouseDown (event: MouseEvent) { this.properties.onMouseDown && this.properties.onMouseDown(event); }
	private _onMouseUp (event: MouseEvent) { this.properties.onMouseUp && this.properties.onMouseUp(event); }
	private _onTouchStart (event: TouchEvent) { this.properties.onTouchStart && this.properties.onTouchStart(event); }
	private _onTouchEnd (event: TouchEvent) { this.properties.onTouchEnd && this.properties.onTouchEnd(event); }

import { v } from '@dojo/widget-core/d';
import { theme, ThemedMixin } from '@dojo/widget-core/mixins/Themed';
import { DNode } from '@dojo/widget-core/interfaces';
import { WidgetBase } from '@dojo/widget-core/WidgetBase';
import { I18nMixin } from '@dojo/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;
}

export const TodoSearchBase = I18nMixin(ThemedMixin(WidgetBase));

@theme(css)
export class TodoSearch extends TodoSearchBase<TodoSearchProperties> {

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

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

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

	currentTodo: string;
	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;
}

export const TodoAppBase = ThemedMixin(WidgetBase);

@theme(css)
export class TodoApp extends TodoAppBase<TodoAppProperties> {
	protected render() {
		const {
			todos,
			addTodo,
			completed: allCompleted,
			toggleTodos,
			editTodo,
			removeTodo,
			toggleTodo,
			currentTodo: todo,
			setCurrentTodo,
			search,