當前位置: 首頁>>代碼示例>>TypeScript>>正文


TypeScript createWidgetBase.mixin函數代碼示例

本文整理匯總了TypeScript中@dojo/widgets/createWidgetBase.mixin函數的典型用法代碼示例。如果您正苦於以下問題:TypeScript mixin函數的具體用法?TypeScript mixin怎麽用?TypeScript mixin使用的例子?那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。


在下文中一共展示了mixin函數的7個代碼示例,這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚,您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1:

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

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

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

const createCheckboxInput = 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 { onChange: onchange } = this;
					const { checked } = this.state;

					return checked !== undefined ? { checked, onchange } : { onchange };
				}
			]
開發者ID:Tomdye,項目名稱:examples,代碼行數:31,代碼來源:createCheckboxInput.ts

示例2:

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

export type FocusableTextInput = Widget<FocusableTextProperties> & FormFieldMixin<string, WidgetProperties> & {
	onKeyUp: (event?: KeyboardEvent) => void;
	onInput: (event?: KeyboardEvent) => void;
	onBlur: (event?: Event) => void;
	afterCreate: (element: HTMLInputElement) => void;
}

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

			onBlur(this: FocusableTextInput, event?: Event) {
				this.properties.onBlur && this.properties.onBlur(event);
			},
			onInput(this: FocusableTextInput, event?: KeyboardEvent) {
				this.properties.onInput && this.properties.onInput(event);
			},
			onKeyUp(this: FocusableTextInput, event?: KeyboardEvent) {
				this.properties.onKeyUp && this.properties.onKeyUp(event);
			},
開發者ID:Tomdye,項目名稱:examples,代碼行數:31,代碼來源:createFocusableTextInput.ts

示例3: Date

export type FormattedDate = Widget<FormattedDateProperties>;

const createFormattedDate = createWidgetBase.mixin({
	mixin: {
		tagName: 'span',
		nodeAttributes: [
			function (this: FormattedDate): VNodeProperties {
				const { date = new Date() } = this.state;
				let hours = date.getHours();
				const minutes = String(date.getMinutes());
				let suffix = 'am';

				if (hours >= 12) {
					suffix = 'pm';

					hours = hours % 12;
					if (!hours) {
						hours = 12;
					}
				}

				return {
					innerHTML: `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()} at ${hours}:${padStart(minutes, 2, '0')}${suffix}`
				};
			}
		]
	}
});

export default createFormattedDate;
開發者ID:Tomdye,項目名稱:examples,代碼行數:30,代碼來源:createFormattedDate.ts

示例4:

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

interface TitleProperties {
	label: string;
}

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

export default createTitle;
開發者ID:Tomdye,項目名稱:examples,代碼行數:20,代碼來源:createTitle.ts

示例5: v

		const label = filterItem[0].toUpperCase() + filterItem.substring(1);
		return v('li', {}, [
			v('a', {
				innerHTML: label,
				href: router.link(mainRoute, {
					filter: filterItem,
					view: activeView
				}),
				classes: {
					selected: activeFilter === filterItem
				}
			})
		]);
	});
}

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

			return createFilterItems(activeFilter, activeView);
		}
	}
});

export default createTodoFilter;
開發者ID:Tomdye,項目名稱:examples,代碼行數:30,代碼來源:createTodoFilter.ts

示例6:

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

export interface SearchInputProperties extends WidgetProperties {
	onKeyUp?: (event?: KeyboardEvent) => void;
}

export type SearchInput = Widget<SearchInputProperties> & {
	onKeyUp?: (event?: KeyboardEvent) => void;
}

const createSearchInput = createWidget
	.mixin(createFormFieldMixin)
	.mixin({
		mixin: {
			classes: [ 'search' ],
			tagName: 'input',
			type: 'text',
			onKeyUp(this: SearchInput, event?: KeyboardEvent) {
				this.properties.onKeyUp && this.properties.onKeyUp(event);
			},
			nodeAttributes: [
				function (this: SearchInput): VNodeProperties {
					const { onKeyUp: onkeyup } = this;
					const { placeholder = '' } = this.properties;

					return {
						placeholder,
						onkeyup
開發者ID:Tomdye,項目名稱:examples,代碼行數:31,代碼來源:createSearchInput.ts

示例7: function

const createViewChooser = createWidgetBase.mixin({
	mixin: {
		tagName: 'ul',
		classes: [ 'view-chooser' ],
		getChildrenNodes: function (this: TodoList): DNode[] {
			const { activeView = 'list', activeFilter = 'all' } = this.state;

			return [
				v('li.view-mode', {}, [
					v('a', {
						href: router.link(mainRoute, {
							filter: activeFilter,
							view: 'list'
						}),
						classes: {
							list: true,
							active: activeView === 'list'
						}
					})
				]),
				v('li.view-mode', {}, [
					v('a', {
						href: router.link(mainRoute, {
							filter: activeFilter,
							view: 'cards'
						}),
						classes: {
							cards: true,
							active: activeView === 'cards'
						}
					})
				])
			];
		}
	}
});
開發者ID:Tomdye,項目名稱:examples,代碼行數:36,代碼來源:createViewChooser.ts


注:本文中的@dojo/widgets/createWidgetBase.mixin函數示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台,相關代碼片段篩選自各路編程大神貢獻的開源項目,源碼版權歸原作者所有,傳播和使用請參考對應項目的License;未經允許,請勿轉載。