Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changes for next widget-core release #242

Merged
merged 6 commits into from
Jul 6, 2017
Merged

Changes for next widget-core release #242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0f527b3
Changes for next widget-core release
agubler Jun 26, 2017
96a3249
remove StatefulMixin from examples
agubler Jun 26, 2017
71c941b
changes for ts 2.4 and latest widget-core
agubler Jun 30, 2017
22c7651
do not initialise button press state
agubler Jul 6, 2017
eb2675a
use defaulted variable
agubler Jul 6, 2017
cd7fe0c
do not initialise button press state
agubler Jul 6, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,6 @@
"grunt-dojo2": "latest",
"intern": "^3.4.1",
"sinon": "^1.17.6",
"typescript": "~2.3.2"
"typescript": "~2.4.1"
}
}
10 changes: 5 additions & 5 deletions src/button/example/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { WidgetBase } from '@dojo/widget-core/WidgetBase';
import { WidgetProperties, TypedTargetEvent } from '@dojo/widget-core/interfaces';
import { StatefulMixin } from '@dojo/widget-core/mixins/Stateful';
import { ProjectorMixin } from '@dojo/widget-core/mixins/Projector';
import { w, v } from '@dojo/widget-core/d';
import Button from '../../button/Button';
import dojoTheme from '../../themes/dojo/theme';

export const AppBase = StatefulMixin(WidgetBase);
export class App extends AppBase<WidgetProperties> {
export class App extends WidgetBase<WidgetProperties> {
private _theme: {};
private _buttonPressed: boolean;

themeChange(event: TypedTargetEvent<HTMLInputElement>) {
const checked = event.target.checked;
Expand All @@ -17,7 +16,8 @@ export class App extends AppBase<WidgetProperties> {
}

toggleButton() {
this.setState({ buttonPressed: !this.state.buttonPressed });
this._buttonPressed = !this._buttonPressed;
this.invalidate();
}

render() {
Expand Down Expand Up @@ -52,7 +52,7 @@ export class App extends AppBase<WidgetProperties> {
w(Button, {
key: 'b3',
theme: this._theme,
pressed: this.state.buttonPressed,
pressed: this._buttonPressed,
onClick: this.toggleButton
}, [ 'Button state' ])
])
Expand Down
28 changes: 11 additions & 17 deletions src/calendar/Calendar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { WidgetBase, onPropertiesChanged, diffProperty, DiffType } from '@dojo/widget-core/WidgetBase';
import { WidgetBase, diffProperty } from '@dojo/widget-core/WidgetBase';
import { ThemeableMixin, ThemeableProperties, theme } from '@dojo/widget-core/mixins/Themeable';
import WidgetRegistry from '@dojo/widget-core/WidgetRegistry';
import { v, w } from '@dojo/widget-core/d';
import { DNode, PropertiesChangeEvent, Constructor } from '@dojo/widget-core/interfaces';
import { reference } from '@dojo/widget-core/diff';
import { DNode, Constructor } from '@dojo/widget-core/interfaces';
import uuid from '@dojo/core/uuid';
import { includes } from '@dojo/shim/array';
import { Keys } from '../common/util';
import MonthPicker, { CalendarMessages } from './MonthPicker';
import CalendarCell from './CalendarCell';
Expand Down Expand Up @@ -41,7 +41,7 @@ export interface CalendarProperties extends ThemeableProperties {
onMonthChange?(month: number): void;
onYearChange?(year: number): void;
onDateSelect?(date: Date): void;
};
}

export const DEFAULT_MONTHS = [
{short: 'Jan', long: 'January'},
Expand Down Expand Up @@ -78,7 +78,6 @@ export const DEFAULT_LABELS: CalendarMessages = {
export const CalendarBase = ThemeableMixin(WidgetBase);

@theme(css)
@diffProperty('customDateCell', DiffType.REFERENCE)
export default class Calendar extends CalendarBase<CalendarProperties> {
private _callDateFocus = false;
private _defaultDate = new Date();
Expand All @@ -92,20 +91,15 @@ export default class Calendar extends CalendarBase<CalendarProperties> {
super();

this._registry = this._createRegistry(CalendarCell);
this.registries.add(this._registry);
this.getRegistries().add(this._registry);
}

@onPropertiesChanged()
protected onPropertiesChanged(evt: PropertiesChangeEvent<this, CalendarProperties>) {
const { customDateCell = CalendarCell } = this.properties;

// update custom option registry
if ( includes(evt.changedPropertyKeys, 'customDateCell')) {
const registry = this._createRegistry(customDateCell);

this.registries.replace(this._registry, registry);
this._registry = registry;
}
@diffProperty('customDateCell', reference)
protected onPropertiesChanged(previousProperties: any, newProperties: any) {
const { customDateCell = CalendarCell } = newProperties;
const registry = this._createRegistry(customDateCell);
this.getRegistries().replace(this._registry, registry);
this._registry = registry;
}

private _createRegistry(customDateCell: any) {
Expand Down
28 changes: 18 additions & 10 deletions src/calendar/example/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { WidgetBase } from '@dojo/widget-core/WidgetBase';
import { WidgetProperties } from '@dojo/widget-core/interfaces';
import { StatefulMixin } from '@dojo/widget-core/mixins/Stateful';
import { ProjectorMixin } from '@dojo/widget-core/mixins/Projector';
import { v, w } from '@dojo/widget-core/d';
import Calendar from '../../calendar/Calendar';
import Checkbox from '../../checkbox/Checkbox';
import dojoTheme from '../../themes/dojo/theme';

const AppBase = StatefulMixin(WidgetBase);
export class App extends AppBase<WidgetProperties> {
export class App extends WidgetBase<WidgetProperties> {
private _theme: {};
private _month: number;
private _year: number;
private _selectedDate: Date;

themeChange(event: Event) {
const checked = (<HTMLInputElement> event.target).checked;
Expand All @@ -27,17 +28,24 @@ export class App extends AppBase<WidgetProperties> {
onChange: this.themeChange
}),
w(Calendar, {
month: this.state.month,
selectedDate: this.state.selectedDate,
month: this._month,
selectedDate: this._selectedDate,
theme: this._theme,
year: this.state.year,
onMonthChange: (month: number) => { this.setState({ 'month': month }); },
onYearChange: (year: number) => { this.setState({ 'year': year }); },
year: this._year,
onMonthChange: (month: number) => {
this._month = month;
this.invalidate();
},
onYearChange: (year: number) => {
this._year = year;
this.invalidate();
},
onDateSelect: (date: Date) => {
this.setState({ 'selectedDate': date });
this._selectedDate = date;
this.invalidate();
}
}),
this.state.selectedDate ? v('p', [ `Selected Date: ${this.state.selectedDate.toDateString()}` ]) : null
this._selectedDate ? v('p', [ `Selected Date: ${this._selectedDate.toDateString()}` ]) : null
]);
}
}
Expand Down
16 changes: 10 additions & 6 deletions src/calendar/tests/unit/MonthPicker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,10 @@ const expected = function(widget: any, open = false) {
]);
};

interface TestEventInit extends EventInit {
which: number;
}

registerSuite({
name: 'Calendar MonthPicker',

Expand Down Expand Up @@ -219,7 +223,7 @@ registerSuite({
});

// escape key
widget.sendEvent('keydown', {
widget.sendEvent<TestEventInit>('keydown', {
eventInit: {
which: Keys.Escape
},
Expand All @@ -229,7 +233,7 @@ registerSuite({

// enter key
closed = false;
widget.sendEvent('keydown', {
widget.sendEvent<TestEventInit>('keydown', {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

need to see if there is a way to make this easier... sigh works for now though

eventInit: {
which: Keys.Enter
},
Expand All @@ -239,7 +243,7 @@ registerSuite({

// space key
closed = false;
widget.sendEvent('keydown', {
widget.sendEvent<TestEventInit>('keydown', {
eventInit: {
which: Keys.Space
},
Expand All @@ -249,7 +253,7 @@ registerSuite({

// random key
closed = false;
widget.sendEvent('keydown', {
widget.sendEvent<TestEventInit>('keydown', {
eventInit: {
which: Keys.PageDown
},
Expand All @@ -266,7 +270,7 @@ registerSuite({
onRequestYearChange: (year: number) => { currentYear = year; }
});

widget.sendEvent('keydown', {
widget.sendEvent<any>('keydown', {
eventInit: {
which: Keys.Right
},
Expand All @@ -275,7 +279,7 @@ registerSuite({

assert.strictEqual(currentYear, 2018, 'Right arrow key increased year');

widget.sendEvent('keydown', {
widget.sendEvent<TestEventInit>('keydown', {
eventInit: {
which: Keys.Left
},
Expand Down
16 changes: 11 additions & 5 deletions src/checkbox/example/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import { WidgetBase } from '@dojo/widget-core/WidgetBase';
import { WidgetProperties, TypedTargetEvent } from '@dojo/widget-core/interfaces';
import { ProjectorMixin } from '@dojo/widget-core/mixins/Projector';
import { StatefulMixin } from '@dojo/widget-core/mixins/Stateful';
import { v, w } from '@dojo/widget-core/d';
import Checkbox, { Mode } from '../../checkbox/Checkbox';
import dojoTheme from '../../themes/dojo/theme';

export const AppBase = StatefulMixin(WidgetBase);
export class App extends AppBase<WidgetProperties> {
export class App extends WidgetBase<WidgetProperties> {
private _theme: {};
private _checkboxStates: { [key: string]: boolean } = {
c1: true,
c2: false,
c3: false,
c4: false,
c5: true
};

themeChange(event: TypedTargetEvent<HTMLInputElement>) {
const checked = event.target.checked;
Expand All @@ -19,7 +24,8 @@ export class App extends AppBase<WidgetProperties> {
onChange(event: TypedTargetEvent<HTMLInputElement>) {
const value = event.target.value;
const checked = event.target.checked;
this.setState({ [value]: checked });
this._checkboxStates[value] = checked;
this.invalidate();
}

render() {
Expand All @@ -29,7 +35,7 @@ export class App extends AppBase<WidgetProperties> {
c3 = false,
c4 = false,
c5 = true
} = this.state;
} = this._checkboxStates;

return v('div', [
v('h2', {
Expand Down
32 changes: 13 additions & 19 deletions src/combobox/ComboBox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import uuid from '@dojo/core/uuid';
import { includes } from '@dojo/shim/array';
import { v, w } from '@dojo/widget-core/d';
import { DNode, WNode, PropertiesChangeEvent } from '@dojo/widget-core/interfaces';
import { DNode, WNode } from '@dojo/widget-core/interfaces';
import { ThemeableMixin, ThemeableProperties, theme } from '@dojo/widget-core/mixins/Themeable';
import { WidgetBase, onPropertiesChanged, diffProperty, DiffType } from '@dojo/widget-core/WidgetBase';
import { WidgetBase, diffProperty } from '@dojo/widget-core/WidgetBase';
import { reference } from '@dojo/widget-core/diff';
import WidgetRegistry from '@dojo/widget-core/WidgetRegistry';
import ResultItem from './ResultItem';
import ResultMenu from './ResultMenu';
Expand Down Expand Up @@ -63,20 +63,18 @@ export interface ComboBoxProperties extends ThemeableProperties {
required?: boolean;
results?: any[];
value?: string;
};
}

// Enum used when traversing items using arrow keys
export const enum Operation {
increase = 1,
decrease = -1
};
}

export const ComboBoxBase = ThemeableMixin(WidgetBase);

@theme(css)
@theme(iconCss)
@diffProperty('customResultItem', DiffType.REFERENCE)
@diffProperty('customResultMenu', DiffType.REFERENCE)
export default class ComboBox extends ComboBoxBase<ComboBoxProperties> {
private _activeIndex: number | undefined;
private _focused: boolean;
Expand All @@ -93,7 +91,7 @@ export default class ComboBox extends ComboBoxBase<ComboBoxProperties> {
super();

this._registry = this._createRegistry(ResultItem, ResultMenu);
this.registries.add(this._registry);
this.getRegistries().add(this._registry);
}

private _closeMenu() {
Expand Down Expand Up @@ -311,21 +309,17 @@ export default class ComboBox extends ComboBoxBase<ComboBoxProperties> {
}
}

@onPropertiesChanged()
protected onPropertiesChanged(evt: PropertiesChangeEvent<this, ComboBoxProperties>) {
@diffProperty('customResultItem', reference)
@diffProperty('customResultMenu', reference)
protected onPropertiesChanged(previousProperties: any, newProperties: any) {
const {
customResultItem = ResultItem,
customResultMenu = ResultMenu
} = this.properties;
} = newProperties;

if (
includes(evt.changedPropertyKeys, 'customResultItem') ||
includes(evt.changedPropertyKeys, 'customResultMenu')) {
const registry = this._createRegistry(customResultItem, customResultMenu);

this.registries.replace(this._registry, registry);
this._registry = registry;
}
const registry = this._createRegistry(customResultItem, customResultMenu);
this.getRegistries().replace(this._registry, registry);
this._registry = registry;
}

protected renderMenu(results: any[]): WNode | null {
Expand Down
Loading