Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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 & {
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 })
];
}
}