render() {
return v('div', {}, [
w(Checkbox, {
label: 'Use Dojo Theme',
onChange: this.themeChange
}),
w(Calendar, {
month: this._month,
selectedDate: this._selectedDate,
theme: this._theme,
year: this._year,
onMonthChange: (month: number) => {
this._month = month;
this.invalidate();
},
onYearChange: (year: number) => {
this._year = year;
this.invalidate();
},
onDateSelect: (date: Date) => {
this._selectedDate = date;
this.invalidate();
}
}),
this._selectedDate ? v('p', [ `Selected Date: ${this._selectedDate.toDateString()}` ]) : null
]);
}
protected render(): DNode {
const {
aria = {},
value,
showOutput = true,
max = 100,
min = 0,
id
} = this.properties;
const percent = Math.round(((value - min) / (max - min)) * 100);
const output = this._output(value, percent);
return v('div', { classes: this.theme(css.root) }, [
v('div', {
...formatAriaProperties(aria),
classes: this.theme(css.bar),
role: 'progressbar',
'aria-valuemin': `${min}`,
'aria-valuemax': `${max}`,
'aria-valuenow': `${value}`,
'aria-valuetext': output,
id
}, this.renderProgress(percent)),
showOutput ? v('span', { classes: this.theme(css.output) }, [ output ]) : null
]);
}
render() {
const { filter } = this.properties;
const messages = this.localizeBundle(appBundle);
return v('ul', { classes: this.theme(css.filters) }, [
v('li', [
w(Link, {
key: 'all',
classes: this.theme(filter === 'all' ? css.selected : null),
to: 'view',
isOutlet: true,
params: { filter: 'all' }
}, [ messages.filterAll ]),
w(Link, {
key: 'active',
classes: this.theme(filter === 'active' ? css.selected : null),
to: 'view',
isOutlet: true,
params: { filter: 'active' }
}, [ messages.filterActive ]),
w(Link, {
key: 'completed',
classes: this.theme(filter === 'completed' ? css.selected : null),
to: 'view',
isOutlet: true,
params: { filter: 'completed' }
}, [ messages.filterCompleted ])
])
]);
}
protected render() {
const { view } = this.properties;
return v('ul', {
classes: this.theme(css.viewChooser)
}, [
v('li', [
w(Link, {
key: 'list',
to: 'view',
isOutlet: true,
params: { view: 'list' },
classes: this.theme([ css.list, view === 'list' ? css.active : null ])
})
]),
v('li', [
w(Link, {
key: 'card',
to: 'view',
isOutlet: true,
params: { view: 'card' },
classes: this.theme([ css.cards, view === 'card' ? css.active : null ])
})
])
]);
}
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 });
}
else {
labelProps = assign({}, labelDefaults, label);
}
// add label text node to children
const labelText = v('span', {
innerHTML: labelProps.content,
classes: [ this.theme(css.labelText), labelProps.hidden ? baseCss.visuallyHidden : null ]
});
if (labelProps.before) {
this.children.unshift(labelText);
}
else {
this.children.push(labelText);
}
return v('label', {
classes: this.theme(css.root),
for: forId
}, this.children);
}
const expectedToggle = function(widget: Harness<Checkbox>, labels = false) {
if (labels) {
return [
v('div', {
key: 'offLabel',
classes: css.offLabel,
'aria-hidden': null
}, [ 'off' ]),
v('div', {
key: 'toggle',
classes: css.toggleSwitch
}),
v('div', {
key: 'onLabel',
classes: css.onLabel,
'aria-hidden': 'true'
}, [ 'on' ])
];
}
return [
null,
v('div', {
key: 'toggle',
classes: css.toggleSwitch
}),
null
];
};
const expectedVDom = function(args: any) {
const {
width,
output,
value,
showOutput = true,
max = 100,
min = 0,
id
} = args;
return v('div', { classes: css.root }, [
v('div', {
classes: css.bar,
'aria-valuemax': `${max}`,
'aria-valuemin': `${min}`,
'aria-valuenow': `${value}`,
'aria-valuetext': `${output}`,
role: 'progressbar',
id
}, [
v('div', {
classes: css.progress,
styles: {
width: `${width}%`
}
})
]),
showOutput ? v('span', { classes: css.output }, [ output ]) : null
]);
};
protected render() {
return v('div', { classes: 'home-page' }, [
w(Banner, {}),
v('div', { classes: ['container', 'page'] }, [
v('div', { classes: 'row' }, [w(FeedsContainer, {}), w(TagsContainer, {})])
])
]);
}
protected render() {
return v('div', { classes: 'banner' }, [
v('div', { classes: 'container' }, [
v('h1', { classes: 'logo-font' }, ['conduit']),
v('p', ['A place to share your knowledge.'])
])
]);
}
protected renderNativeInput(): DNode {
const {
disabled,
end,
inputProperties = {},
invalid,
name,
readOnly,
required,
start,
step,
value,
label,
theme,
labelHidden = false,
labelAfter = false
} = this.properties;
const { aria = {} } = inputProperties;
const children = [
label ? w(Label, {
theme,
disabled,
invalid,
readOnly,
required,
hidden: labelHidden,
forId: this._uuid
}, [ label ]) : null,
v('input', {
id: this._uuid,
...formatAriaProperties(aria),
'aria-invalid': invalid === true ? 'true' : null,
'aria-readonly': readOnly === true ? 'true' : null,
classes: this.theme(css.input),
disabled,
invalid,
key: 'native-input',
max: end,
min: start,
name,
onblur: this._onNativeBlur,
onchange: this._onNativeChange,
onfocus: this._onNativeFocus,
readOnly,
required,
step,
type: 'time',
value
})
];
return v('div', {
key: 'root',
classes: this.theme(this.getRootClasses())
}, labelAfter ? children.reverse() : children);
}
