h.expectPartial('@slider1', () => v('input', {
...sliderProps,
key: 'slider1',
disabled: true,
name: '_min',
value: '0',
styles: {
clip: 'rect(auto, 0px, auto, auto)'
}
}));
protected render() {
const { activeCount, completedItems } = this.properties;
const countLabel = activeCount === 1 ? 'item' : 'items';
return v('footer', { classes: this.theme(css.footer) }, [
v('span', { classes: this.theme(css.todoCount) }, [
v('strong', [activeCount + ' ']),
v('span', [countLabel + ' left'])
]),
w(Outlet, { id: 'filter', renderer: (matchDetails: MatchDetails) => {
return w(TodoFilter, { activeFilter: matchDetails.params.filter });
} }),
completedItems ? v('button', {
onclick: this.clearCompleted,
innerHTML: 'Clear completed',
classes: this.theme(css.clearCompleted)
}) : null
]);
}
const expected = function(options: {open?: boolean, closeable?: boolean, heading?: string, transition?: boolean} = {}) {
const {
open = true,
closeable = true,
heading = null,
transition = true
} = options;
return v('div', {
classes: [ css.root, open ? css.open : null, fixedCss.rootFixed ]
}, [
w(GlobalEvent, { window: { resize: noop }, key: 'global' }),
v('div', {
'aria-level': heading,
classes: [ css.title, closeable ? css.closeable : null, fixedCss.titleFixed, closeable ? fixedCss.closeableFixed : null ],
role: 'heading'
}, [
v('button', {
'aria-controls': '',
'aria-expanded': `${open}`,
classes: [ fixedCss.titleButtonFixed, css.titleButton ],
disabled: !closeable,
id: '',
type: 'button',
onclick: noop
}, [
v('span', { classes: css.arrow }, [
w(Icon, { type: open ? 'downIcon' : 'rightIcon', theme: undefined })
]),
'test'
])
]),
v('div', {
'aria-hidden': open ? null : 'true',
'aria-labelledby': '',
classes: [ css.content, transition ? css.contentTransition : null, fixedCss.contentFixed ],
styles: {
marginTop: open ? '0px' : '-100px'
},
id: '',
key: 'content'
}, [ ])
]);
};
const expectedCloseButton = function() {
return v('button', {
classes: css.close,
type: 'button',
onclick: noop
}, [
'close ',
w(Icon, { type: 'closeIcon', theme: undefined, classes: undefined })
]);
};
protected renderProgress(percent: number): DNode[] {
return [
v('div', {
classes: this.theme(css.progress),
styles: {
width: `${percent}%`
}
})
];
}
h.expectPartial('@slider2', () => v('input', {
...sliderProps,
key: 'slider2',
required: true,
name: '_max',
value: '100',
styles: {
clip: 'rect(auto, auto, auto, 0px)'
}
}));
h.expectPartial('@slider1', () => v('input', {
...sliderProps,
'aria-invalid': 'true',
key: 'slider1',
name: '_min',
value: '0',
styles: {
clip: 'rect(auto, 0px, auto, auto)'
}
}));
tags.map((tag, index) =>
v('a', {
href: '',
onclick: (event: MouseEvent) => {
event.preventDefault();
this.properties.fetchFeed({ type: 'tag', page: 0, filter: tag });
},
key: `${index}`,
classes: ['tag-pill', 'tag-default']
}, [tag])
protected render(): VNode {
const { text, valid } = this.properties;
return v('div', {
key: 'root',
classes: this.theme([
css.root,
valid === true ? css.valid : null,
valid === false ? css.invalid : null
])
}, [
text && v('p', {
key: 'text',
classes: this.theme(css.text),
'aria-hidden': 'true',
title: text
}, [text])
]);
}
protected render() {
const {
favoriteArticle,
followUser,
deleteArticle,
username,
favorited,
favoritesCount,
isAuthenticated,
createdAt,
slug,
authorProfile
} = this.properties;
return v('div', { classes: 'article-meta' }, [
w(Link, { to: 'user', params: { username: authorProfile.username } }, [
v('img', { src: authorProfile.image })
]),
v('div', { classes: 'info' }, [
w(Link, { to: 'user', classes: 'author', params: { username: authorProfile.username } }, [
authorProfile.username
]),
v('span', { classes: 'date' }, [new Date(createdAt).toDateString()])
]),
isAuthenticated
? username === authorProfile.username
? w(ArticleAuthorControls, {
slug,
deleteArticle
})
: w(ArticleControls, {
favorited,
followUser,
favoriteArticle,
favoritesCount,
slug,
following: authorProfile.following,
authorUsername: authorProfile.username
})
: null
]);
}
