Skip to content

Commit 34ad2d3

Browse files
agubleragubler
authored
Update for @dojo/widget-core changes (#306)
* update dojo deps * initial changes for latest widget-core * fix unit tests for widget-core changes * address feedback from review * do not use local dependency :doh:
1 parent df66089 commit 34ad2d3

File tree

18 files changed

+77
-165
lines changed

18 files changed

+77
-165
lines changed

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,16 @@
2121
"test": "grunt test"
2222
},
2323
"peerDependencies": {
24-
"@dojo/core": "beta2",
25-
"@dojo/has": "beta2",
26-
"@dojo/i18n": "beta2",
27-
"@dojo/shim": "beta2",
28-
"@dojo/widget-core": "beta2"
24+
"@dojo/core": "next",
25+
"@dojo/has": "next",
26+
"@dojo/i18n": "next",
27+
"@dojo/shim": "next",
28+
"@dojo/widget-core": "next"
2929
},
3030
"devDependencies": {
31-
"@dojo/interfaces": "beta2",
32-
"@dojo/loader": "beta2",
33-
"@dojo/test-extras": "beta2",
31+
"@dojo/interfaces": "next",
32+
"@dojo/loader": "next",
33+
"@dojo/test-extras": "next",
3434
"@types/chai": "3.4.*",
3535
"@types/glob": "5.0.*",
3636
"@types/grunt": "0.4.*",

‎src/calendar/Calendar.ts‎

Lines changed: 5 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import { WidgetBase, diffProperty } from '@dojo/widget-core/WidgetBase';
1+
import { WidgetBase } from '@dojo/widget-core/WidgetBase';
22
import { ThemeableMixin, ThemeableProperties, theme } from '@dojo/widget-core/mixins/Themeable';
3-
import WidgetRegistry from '@dojo/widget-core/WidgetRegistry';
43
import { v, w } from '@dojo/widget-core/d';
5-
import { reference } from '@dojo/widget-core/diff';
64
import { DNode, Constructor } from '@dojo/widget-core/interfaces';
75
import uuid from '@dojo/core/uuid';
86
import { Keys } from '../common/util';
@@ -18,7 +16,7 @@ import * as iconCss from '../common/styles/icons.m.css';
1816
*
1917
* Properties that can be set on a Calendar component
2018
*
21-
* @property customDateCell Custom widget constructor for the date cell. Should use CalendarCell as a base.
19+
* @property CustomDateCell Custom widget constructor for the date cell. Should use CalendarCell as a base.
2220
* @property labels Customize or internationalize accessible text for the Calendar widget
2321
* @property month Set the currently displayed month, 0-based
2422
* @property monthNames Customize or internationalize full month names and abbreviations
@@ -32,7 +30,7 @@ import * as iconCss from '../common/styles/icons.m.css';
3230
* @property onDateSelect Function called when the user selects a date
3331
*/
3432
export interface CalendarProperties extends ThemeableProperties {
35-
customDateCell?: Constructor<CalendarCell>;
33+
CustomDateCell?: Constructor<CalendarCell>;
3634
labels?: CalendarMessages;
3735
month?: number;
3836
monthNames?: { short: string; long: string; }[];
@@ -88,30 +86,6 @@ export default class Calendar extends CalendarBase<CalendarProperties> {
8886
private _focusedDay = 1;
8987
private _monthLabelId = uuid();
9088
private _popupOpen = false;
91-
private _registry: WidgetRegistry;
92-
93-
constructor() {
94-
/* istanbul ignore next: disregard transpiled `super`'s "else" block */
95-
super();
96-
97-
this._registry = this._createRegistry(CalendarCell);
98-
this.getRegistries().add(this._registry);
99-
}
100-
101-
@diffProperty('customDateCell', reference)
102-
protected onPropertiesChanged(previousProperties: any, newProperties: any) {
103-
const { customDateCell = CalendarCell } = newProperties;
104-
const registry = this._createRegistry(customDateCell);
105-
this.getRegistries().replace(this._registry, registry);
106-
this._registry = registry;
107-
}
108-
109-
private _createRegistry(customDateCell: any) {
110-
const registry = new WidgetRegistry();
111-
registry.define('date-cell', customDateCell);
112-
113-
return registry;
114-
}
11589

11690
private _getMonthLength(month: number, year: number) {
11791
const lastDate = new Date(year, month + 1, 0);
@@ -260,7 +234,7 @@ export default class Calendar extends CalendarBase<CalendarProperties> {
260234
month,
261235
year
262236
} = this._getMonthYear();
263-
const { theme = {} } = this.properties;
237+
const { theme = {}, CustomDateCell = CalendarCell } = this.properties;
264238

265239
const currentMonthLength = this._getMonthLength(month, year);
266240
const previousMonthLength = this._getMonthLength(month - 1, year);
@@ -305,7 +279,7 @@ export default class Calendar extends CalendarBase<CalendarProperties> {
305279
isSelectedDay = false;
306280
}
307281

308-
days.push(w<CalendarCell>('date-cell', {
282+
days.push(w(CustomDateCell, {
309283
key: `date-${week * 7 + i}`,
310284
callFocus: this._callDateFocus && isCurrentMonth && date === this._focusedDay,
311285
date,

‎src/calendar/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ class MyCalendarCell extends CalendarCell {
5757
[ ... ]
5858

5959
w(Calendar, {
60-
customDateCell: MyCalendarCell,
60+
CustomDateCell: MyCalendarCell,
6161
month: this.state.month,
6262
selectedDate: this.state.selectedDate,
6363
year: this.state.year,

‎src/calendar/createCalendarElement.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default function createCalendarElement(): CustomElementDescriptor {
2424
}
2525
],
2626
properties: [
27-
{ propertyName: 'customDateCell' },
27+
{ propertyName: 'CustomDateCell' },
2828
{ propertyName: 'labels' },
2929
{ propertyName: 'monthNames' },
3030
{ propertyName: 'weekdayNames' },

‎src/calendar/tests/unit/Calendar.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const compareId = compareProperty((value: any) => {
2222
let dateIndex = -1;
2323
const expectedDateCell = function(widget: any, date: number, active: boolean) {
2424
dateIndex++;
25-
return w<CalendarCell>('date-cell', {
25+
return w(CalendarCell, {
2626
key: `date-${dateIndex}`,
2727
callFocus: false,
2828
date,
@@ -186,7 +186,7 @@ registerSuite({
186186

187187
'Renders with custom properties'() {
188188
widget.setProperties({
189-
customDateCell: CalendarCell,
189+
CustomDateCell: CalendarCell,
190190
labels: DEFAULT_LABELS,
191191
month: testDate.getMonth(),
192192
monthNames: DEFAULT_MONTHS,

‎src/combobox/ComboBox.ts‎

Lines changed: 11 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import uuid from '@dojo/core/uuid';
22
import { v, w } from '@dojo/widget-core/d';
3-
import { DNode, WNode } from '@dojo/widget-core/interfaces';
3+
import { Constructor, DNode, WNode } from '@dojo/widget-core/interfaces';
44
import { ThemeableMixin, ThemeableProperties, theme } from '@dojo/widget-core/mixins/Themeable';
5-
import { WidgetBase, diffProperty } from '@dojo/widget-core/WidgetBase';
5+
import { WidgetBase } from '@dojo/widget-core/WidgetBase';
6+
import { diffProperty } from '@dojo/widget-core/decorators/diffProperty';
67
import { reference } from '@dojo/widget-core/diff';
7-
import WidgetRegistry from '@dojo/widget-core/WidgetRegistry';
88
import ResultItem from './ResultItem';
99
import ResultMenu from './ResultMenu';
1010
import { Keys } from '../common/util';
@@ -21,8 +21,8 @@ import * as iconCss from '../common/styles/icons.m.css';
2121
*
2222
* @property autoBlur Determines whether the input should blur after value selection
2323
* @property clearable Determines whether the input should be able to be cleared
24-
* @property customResultItem Can be used to render a custom result
25-
* @property customResultMenu Can be used to render a custom result menu
24+
* @property CustomResultItem Can be used to render a custom result
25+
* @property CustomResultMenu Can be used to render a custom result menu
2626
* @property disabled Prevents user interaction and styles content accordingly
2727
* @property getResultLabel Can be used to get the text label of a result based on the underlying result object
2828
* @property inputProperties TextInput properties to set on the underlying input
@@ -43,8 +43,8 @@ import * as iconCss from '../common/styles/icons.m.css';
4343
export interface ComboBoxProperties extends ThemeableProperties {
4444
autoBlur?: boolean;
4545
clearable?: boolean;
46-
customResultItem?: any;
47-
customResultMenu?: any;
46+
CustomResultItem?: Constructor<ResultItem>;
47+
CustomResultMenu?: Constructor<ResultMenu>;
4848
disabled?: boolean;
4949
getResultLabel?(result: any): string;
5050
inputProperties?: TextInputProperties;
@@ -73,6 +73,7 @@ export const ComboBoxBase = ThemeableMixin(WidgetBase);
7373

7474
@theme(css)
7575
@theme(iconCss)
76+
@diffProperty('results', reference)
7677
export default class ComboBox extends ComboBoxBase<ComboBoxProperties> {
7778
private _activeIndex: number | undefined;
7879
private _focused: boolean;
@@ -82,29 +83,12 @@ export default class ComboBox extends ComboBoxBase<ComboBoxProperties> {
8283
private _menuId = uuid();
8384
private _open: boolean;
8485
private _wasOpen: boolean;
85-
private _registry: WidgetRegistry;
86-
87-
constructor() {
88-
/* istanbul ignore next: disregard transpiled `super`'s "else" block */
89-
super();
90-
91-
this._registry = this._createRegistry(ResultItem, ResultMenu);
92-
this.getRegistries().add(this._registry);
93-
}
9486

9587
private _closeMenu() {
9688
this._open = false;
9789
this.invalidate();
9890
}
9991

100-
private _createRegistry(customResultItem: any, customResultMenu: any) {
101-
const registry = new WidgetRegistry();
102-
registry.define('result-item', customResultItem);
103-
registry.define('result-menu', customResultMenu);
104-
105-
return registry;
106-
}
107-
10892
private _getResultLabel(result: any) {
10993
const { getResultLabel } = this.properties;
11094

@@ -307,35 +291,21 @@ export default class ComboBox extends ComboBoxBase<ComboBoxProperties> {
307291
}
308292
}
309293

310-
@diffProperty('customResultItem', reference)
311-
@diffProperty('customResultMenu', reference)
312-
@diffProperty('results', reference)
313-
protected onPropertiesChanged(previousProperties: any, newProperties: any) {
314-
const {
315-
customResultItem = ResultItem,
316-
customResultMenu = ResultMenu
317-
} = newProperties;
318-
319-
const registry = this._createRegistry(customResultItem, customResultMenu);
320-
this.getRegistries().replace(this._registry, registry);
321-
this._registry = registry;
322-
}
323-
324294
protected renderMenu(results: any[]): WNode | null {
325-
const { theme = {}, isResultDisabled } = this.properties;
295+
const { theme = {}, isResultDisabled, CustomResultMenu = ResultMenu, CustomResultItem } = this.properties;
326296

327297
if (results.length === 0 || !this._open) {
328298
return null;
329299
}
330300

331-
return w<ResultMenu>('result-menu', {
301+
return w(CustomResultMenu, {
332302
getResultLabel: this._getResultLabel,
303+
CustomResultItem,
333304
id: this._menuId,
334305
isResultDisabled,
335306
onResultMouseDown: this._onResultMouseDown,
336307
onResultMouseEnter: this._onResultMouseEnter,
337308
onResultMouseUp: this._onResultMouseUp,
338-
registry: this._registry,
339309
results,
340310
selectedIndex: this._activeIndex,
341311
theme

‎src/combobox/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ class CustomResultItem extends ResultItem {
141141
w(ComboBox, {
142142
results: ['foo', 'bar', 'baz'],
143143
value: this.state.currentValue,,
144-
customResultItem: CustomResultItem,
144+
CustomResultItem: CustomResultItem,
145145
onChange: (value: string) => this.setState({ currentValue: value })
146146
});
147147
```

‎src/combobox/ResultMenu.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { WidgetBase } from '@dojo/widget-core/WidgetBase';
22
import { ThemeableMixin, ThemeableProperties, theme } from '@dojo/widget-core/mixins/Themeable';
33
import { v, w } from '@dojo/widget-core/d';
4-
import { DNode, WNode } from '@dojo/widget-core/interfaces';
4+
import { Constructor, DNode, WNode } from '@dojo/widget-core/interfaces';
55
import ResultItem from './ResultItem';
66

77
import * as css from './styles/comboBox.m.css';
@@ -21,6 +21,7 @@ import * as css from './styles/comboBox.m.css';
2121
* @property selectedIndex Position of the selected result in the list of results
2222
*/
2323
export interface ResultMenuProperties extends ThemeableProperties {
24+
CustomResultItem?: Constructor<ResultItem>;
2425
getResultLabel(result: any): string;
2526
id?: string;
2627
isResultDisabled?(result: any): boolean;
@@ -41,6 +42,7 @@ export default class ResultMenu extends ResultMenuBase<ResultMenuProperties> {
4142

4243
render(): DNode {
4344
const {
45+
CustomResultItem = ResultItem,
4446
getResultLabel,
4547
id,
4648
isResultDisabled = () => false,
@@ -52,7 +54,7 @@ export default class ResultMenu extends ResultMenuBase<ResultMenuProperties> {
5254
theme = {}
5355
} = this.properties;
5456

55-
const resultElements = this.renderResults(results.map((result, i) => w<ResultItem>('result-item', {
57+
const resultElements = this.renderResults(results.map((result, i) => w(CustomResultItem, {
5658
getResultLabel,
5759
index: i,
5860
isDisabled: isResultDisabled,

‎src/combobox/createComboBoxElement.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@ export default function createComboBoxElement(): CustomElementDescriptor {
5252
propertyName: 'inputProperties'
5353
},
5454
{
55-
propertyName: 'customResultItem'
55+
propertyName: 'CustomResultItem'
5656
},
5757
{
58-
propertyName: 'customResultMenu'
58+
propertyName: 'CustomResultMenu'
5959
},
6060
{
6161
propertyName: 'getResultLabel'

‎src/combobox/example/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export class App extends WidgetBase<WidgetProperties> {
197197
},
198198
getResultLabel: (result: any) => result.value,
199199
onRequestResults: this.onRequestResults,
200-
customResultItem: CustomResultItem,
200+
CustomResultItem,
201201
results: this._results,
202202
value: this._valueThree,
203203
inputProperties: {
@@ -216,7 +216,7 @@ export class App extends WidgetBase<WidgetProperties> {
216216
onRequestResults: this.onRequestResults,
217217
results: this._results,
218218
value: this._valueFour,
219-
customResultMenu: CustomResultMenu,
219+
CustomResultMenu,
220220
inputProperties: {
221221
placeholder: 'Enter a value'
222222
},

0 commit comments

Comments
 (0)