From 8486568bbc6541b8bbba30ed5a0e50fb9f099c43 Mon Sep 17 00:00:00 2001 From: Anthony Gubler Date: Thu, 21 Sep 2017 15:51:01 +0100 Subject: [PATCH 1/5] update dojo deps --- package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index b2ad3ceb25..4c6223d376 100644 --- a/package.json +++ b/package.json @@ -21,15 +21,15 @@ "test": "grunt test" }, "peerDependencies": { - "@dojo/core": "beta2", - "@dojo/has": "beta2", - "@dojo/i18n": "beta2", - "@dojo/shim": "beta2", - "@dojo/widget-core": "beta2" + "@dojo/core": "next", + "@dojo/has": "next", + "@dojo/i18n": "next", + "@dojo/shim": "next", + "@dojo/widget-core": "next" }, "devDependencies": { - "@dojo/interfaces": "beta2", - "@dojo/loader": "beta2", + "@dojo/interfaces": "next", + "@dojo/loader": "next", "@dojo/test-extras": "beta2", "@types/chai": "3.4.*", "@types/glob": "5.0.*", From 06d2e760d3d6ac1053026cd01dbb84d4ec7a12b7 Mon Sep 17 00:00:00 2001 From: Anthony Gubler Date: Thu, 21 Sep 2017 16:26:31 +0100 Subject: [PATCH 2/5] initial changes for latest widget-core --- package.json | 2 +- src/calendar/Calendar.ts | 32 ++---------------- src/combobox/ComboBox.ts | 48 +++++---------------------- src/combobox/ResultMenu.ts | 6 ++-- src/combobox/example/index.ts | 4 +-- src/combobox/tests/unit/ComboBox.ts | 8 ++--- src/combobox/tests/unit/ResultMenu.ts | 6 ---- src/label/Label.ts | 2 -- src/select/Select.ts | 43 +++++------------------- src/select/example/index.ts | 4 +-- src/select/tests/unit/Select.ts | 10 ++---- src/timepicker/TimePicker.ts | 7 ++-- 12 files changed, 39 insertions(+), 133 deletions(-) diff --git a/package.json b/package.json index 4c6223d376..5f7af2d37c 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "devDependencies": { "@dojo/interfaces": "next", "@dojo/loader": "next", - "@dojo/test-extras": "beta2", + "@dojo/test-extras": "file:../test-extras/dist/dojo-test-extras-2.0.0-alpha.1.tgz", "@types/chai": "3.4.*", "@types/glob": "5.0.*", "@types/grunt": "0.4.*", diff --git a/src/calendar/Calendar.ts b/src/calendar/Calendar.ts index 927237ca05..034fe1fc99 100644 --- a/src/calendar/Calendar.ts +++ b/src/calendar/Calendar.ts @@ -1,8 +1,6 @@ -import { WidgetBase, diffProperty } from '@dojo/widget-core/WidgetBase'; +import { WidgetBase } 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 { reference } from '@dojo/widget-core/diff'; import { DNode, Constructor } from '@dojo/widget-core/interfaces'; import uuid from '@dojo/core/uuid'; import { Keys } from '../common/util'; @@ -88,30 +86,6 @@ export default class Calendar extends CalendarBase { private _focusedDay = 1; private _monthLabelId = uuid(); private _popupOpen = false; - private _registry: WidgetRegistry; - - constructor() { - /* istanbul ignore next: disregard transpiled `super`'s "else" block */ - super(); - - this._registry = this._createRegistry(CalendarCell); - this.getRegistries().add(this._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) { - const registry = new WidgetRegistry(); - registry.define('date-cell', customDateCell); - - return registry; - } private _getMonthLength(month: number, year: number) { const lastDate = new Date(year, month + 1, 0); @@ -260,7 +234,7 @@ export default class Calendar extends CalendarBase { month, year } = this._getMonthYear(); - const { theme = {} } = this.properties; + const { theme = {}, customDateCell } = this.properties; const currentMonthLength = this._getMonthLength(month, year); const previousMonthLength = this._getMonthLength(month - 1, year); @@ -305,7 +279,7 @@ export default class Calendar extends CalendarBase { isSelectedDay = false; } - days.push(w('date-cell', { + days.push(w(customDateCell || CalendarCell, { key: `date-${week * 7 + i}`, callFocus: this._callDateFocus && isCurrentMonth && date === this._focusedDay, date, diff --git a/src/combobox/ComboBox.ts b/src/combobox/ComboBox.ts index 6486978229..7bf470a415 100644 --- a/src/combobox/ComboBox.ts +++ b/src/combobox/ComboBox.ts @@ -1,10 +1,10 @@ import uuid from '@dojo/core/uuid'; import { v, w } from '@dojo/widget-core/d'; -import { DNode, WNode } from '@dojo/widget-core/interfaces'; +import { Constructor, DNode, WNode } from '@dojo/widget-core/interfaces'; import { ThemeableMixin, ThemeableProperties, theme } from '@dojo/widget-core/mixins/Themeable'; -import { WidgetBase, diffProperty } from '@dojo/widget-core/WidgetBase'; +import { WidgetBase } from '@dojo/widget-core/WidgetBase'; +import { diffProperty } from '@dojo/widget-core/decorators/diffProperty'; import { reference } from '@dojo/widget-core/diff'; -import WidgetRegistry from '@dojo/widget-core/WidgetRegistry'; import ResultItem from './ResultItem'; import ResultMenu from './ResultMenu'; import { Keys } from '../common/util'; @@ -43,8 +43,8 @@ import * as iconCss from '../common/styles/icons.m.css'; export interface ComboBoxProperties extends ThemeableProperties { autoBlur?: boolean; clearable?: boolean; - customResultItem?: any; - customResultMenu?: any; + CustomResultItem?: Constructor; + CustomResultMenu?: Constructor; disabled?: boolean; getResultLabel?(result: any): string; inputProperties?: TextInputProperties; @@ -73,6 +73,7 @@ export const ComboBoxBase = ThemeableMixin(WidgetBase); @theme(css) @theme(iconCss) +@diffProperty('results', reference) export default class ComboBox extends ComboBoxBase { private _activeIndex: number | undefined; private _focused: boolean; @@ -82,29 +83,12 @@ export default class ComboBox extends ComboBoxBase { private _menuId = uuid(); private _open: boolean; private _wasOpen: boolean; - private _registry: WidgetRegistry; - - constructor() { - /* istanbul ignore next: disregard transpiled `super`'s "else" block */ - super(); - - this._registry = this._createRegistry(ResultItem, ResultMenu); - this.getRegistries().add(this._registry); - } private _closeMenu() { this._open = false; this.invalidate(); } - private _createRegistry(customResultItem: any, customResultMenu: any) { - const registry = new WidgetRegistry(); - registry.define('result-item', customResultItem); - registry.define('result-menu', customResultMenu); - - return registry; - } - private _getResultLabel(result: any) { const { getResultLabel } = this.properties; @@ -307,35 +291,21 @@ export default class ComboBox extends ComboBoxBase { } } - @diffProperty('customResultItem', reference) - @diffProperty('customResultMenu', reference) - @diffProperty('results', reference) - protected onPropertiesChanged(previousProperties: any, newProperties: any) { - const { - customResultItem = ResultItem, - customResultMenu = ResultMenu - } = newProperties; - - const registry = this._createRegistry(customResultItem, customResultMenu); - this.getRegistries().replace(this._registry, registry); - this._registry = registry; - } - protected renderMenu(results: any[]): WNode | null { - const { theme = {}, isResultDisabled } = this.properties; + const { theme = {}, isResultDisabled, CustomResultMenu = ResultMenu, CustomResultItem } = this.properties; if (results.length === 0 || !this._open) { return null; } - return w('result-menu', { + return w(CustomResultMenu, { getResultLabel: this._getResultLabel, + CustomResultItem, id: this._menuId, isResultDisabled, onResultMouseDown: this._onResultMouseDown, onResultMouseEnter: this._onResultMouseEnter, onResultMouseUp: this._onResultMouseUp, - registry: this._registry, results, selectedIndex: this._activeIndex, theme diff --git a/src/combobox/ResultMenu.ts b/src/combobox/ResultMenu.ts index 98563c76ef..b2304e1860 100644 --- a/src/combobox/ResultMenu.ts +++ b/src/combobox/ResultMenu.ts @@ -1,7 +1,7 @@ import { WidgetBase } from '@dojo/widget-core/WidgetBase'; import { ThemeableMixin, ThemeableProperties, theme } from '@dojo/widget-core/mixins/Themeable'; import { v, w } from '@dojo/widget-core/d'; -import { DNode, WNode } from '@dojo/widget-core/interfaces'; +import { Constructor, DNode, WNode } from '@dojo/widget-core/interfaces'; import ResultItem from './ResultItem'; import * as css from './styles/comboBox.m.css'; @@ -21,6 +21,7 @@ import * as css from './styles/comboBox.m.css'; * @property selectedIndex Position of the selected result in the list of results */ export interface ResultMenuProperties extends ThemeableProperties { + CustomResultItem?: Constructor; getResultLabel(result: any): string; id?: string; isResultDisabled?(result: any): boolean; @@ -41,6 +42,7 @@ export default class ResultMenu extends ResultMenuBase { render(): DNode { const { + CustomResultItem = ResultItem, getResultLabel, id, isResultDisabled = () => false, @@ -52,7 +54,7 @@ export default class ResultMenu extends ResultMenuBase { theme = {} } = this.properties; - const resultElements = this.renderResults(results.map((result, i) => w('result-item', { + const resultElements = this.renderResults(results.map((result, i) => w(CustomResultItem, { getResultLabel, index: i, isDisabled: isResultDisabled, diff --git a/src/combobox/example/index.ts b/src/combobox/example/index.ts index 94fc562ed3..c657269f8b 100644 --- a/src/combobox/example/index.ts +++ b/src/combobox/example/index.ts @@ -197,7 +197,7 @@ export class App extends WidgetBase { }, getResultLabel: (result: any) => result.value, onRequestResults: this.onRequestResults, - customResultItem: CustomResultItem, + CustomResultItem, results: this._results, value: this._valueThree, inputProperties: { @@ -216,7 +216,7 @@ export class App extends WidgetBase { onRequestResults: this.onRequestResults, results: this._results, value: this._valueFour, - customResultMenu: CustomResultMenu, + CustomResultMenu, inputProperties: { placeholder: 'Enter a value' }, diff --git a/src/combobox/tests/unit/ComboBox.ts b/src/combobox/tests/unit/ComboBox.ts index a9c66bb183..c7aae19af5 100644 --- a/src/combobox/tests/unit/ComboBox.ts +++ b/src/combobox/tests/unit/ComboBox.ts @@ -111,10 +111,10 @@ registerSuite({ results: ['a', 'b'] }); comboBox.__setProperties__({ - customResultItem: ResultItem + CustomResultItem: ResultItem }); comboBox.__setProperties__({ - customResultMenu: ResultMenu + CustomResultMenu: ResultMenu }); comboBox.__setProperties__({ onBlur: () => called = true @@ -133,8 +133,8 @@ registerSuite({ comboBox.__setProperties__({ results: ['1', '2'], required: true, - customResultItem: ResultItem, - customResultMenu: ResultMenu + CustomResultItem: ResultItem, + CustomResultMenu: ResultMenu }); ( comboBox)._onArrowClick(); diff --git a/src/combobox/tests/unit/ResultMenu.ts b/src/combobox/tests/unit/ResultMenu.ts index cd874a1d8b..c00604a35c 100644 --- a/src/combobox/tests/unit/ResultMenu.ts +++ b/src/combobox/tests/unit/ResultMenu.ts @@ -3,16 +3,10 @@ import * as assert from 'intern/chai!assert'; import { VNode } from '@dojo/interfaces/vdom'; import ResultMenu from '../../ResultMenu'; import { assign } from '@dojo/core/lang'; -import WidgetRegistry from '@dojo/widget-core/WidgetRegistry'; -import ResultItem from '../../ResultItem'; - -const registry = new WidgetRegistry(); -registry.define('result-item', ResultItem); function props(props = {}) { return assign({ results: ['a', 'b'], - registry: registry, selectedIndex: 0, getResultLabel: () => '', onResultMouseEnter: () => true, diff --git a/src/label/Label.ts b/src/label/Label.ts index 294dbeea45..a6b98ab2f7 100644 --- a/src/label/Label.ts +++ b/src/label/Label.ts @@ -1,7 +1,6 @@ import { WidgetBase } from '@dojo/widget-core/WidgetBase'; import { DNode } from '@dojo/widget-core/interfaces'; import { ThemeableMixin, ThemeableProperties, theme } from '@dojo/widget-core/mixins/Themeable'; -import { WidgetRegistry } from '@dojo/widget-core/WidgetRegistry'; import { v } from '@dojo/widget-core/d'; import { assign } from '@dojo/core/lang'; import * as css from './styles/label.m.css'; @@ -34,7 +33,6 @@ const labelDefaults = { * @property label Label settings for form label text, position, and visibility */ export interface LabelProperties extends ThemeableProperties { - registry?: WidgetRegistry; forId?: string; label: string | LabelOptions; } diff --git a/src/select/Select.ts b/src/select/Select.ts index 90d442dba7..714340a3bf 100644 --- a/src/select/Select.ts +++ b/src/select/Select.ts @@ -1,9 +1,9 @@ -import { WidgetBase, diffProperty } from '@dojo/widget-core/WidgetBase'; -import { DNode } from '@dojo/widget-core/interfaces'; +import { WidgetBase } from '@dojo/widget-core/WidgetBase'; +import { diffProperty } from '@dojo/widget-core/decorators/diffProperty'; +import { Constructor, DNode } from '@dojo/widget-core/interfaces'; 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 { reference, auto } from '@dojo/widget-core/diff'; +import { auto } from '@dojo/widget-core/diff'; import uuid from '@dojo/core/uuid'; import { assign } from '@dojo/core/lang'; import { find } from '@dojo/shim/array'; @@ -37,7 +37,7 @@ import * as iconCss from '../common/styles/icons.m.css'; * @property onKeyDown Called on the input's keydown event */ export interface SelectProperties extends ThemeableProperties { - customOption?: any; + CustomOption?: Constructor; describedBy?: string; disabled?: boolean; invalid?: boolean; @@ -65,7 +65,6 @@ export default class Select extends SelectBase { private _ignoreBlur = false; private _open = false; private _selectId = uuid(); - private _registry: WidgetRegistry; private _options: OptionData[] = []; private _onBlur (event: FocusEvent) { this.properties.onBlur && this.properties.onBlur(event); } @@ -73,21 +72,6 @@ export default class Select extends SelectBase { private _onFocus (event: FocusEvent) { this.properties.onFocus && this.properties.onFocus(event); } private _onKeyDown (event: KeyboardEvent) { this.properties.onKeyDown && this.properties.onKeyDown(event); } - constructor() { - /* istanbul ignore next: disregard transpiled `super`'s "else" block */ - super(); - - this._registry = this._createRegistry(SelectOption); - this.getRegistries().add(this._registry); - } - - private _createRegistry(customOption: any) { - const registry = new WidgetRegistry(); - registry.define('select-option', customOption); - - return registry; - } - // native select events private _onNativeChange (event: Event) { const { @@ -206,16 +190,17 @@ export default class Select extends SelectBase { private _renderCustomOptions(): DNode[] { const { + CustomOption = SelectOption, multiple, value, theme } = this.properties; - const optionNodes = this._options.map((option, i) => w('select-option', { + const optionNodes = this._options.map((option, i) => w(CustomOption, { focused: this._focusedIndex === i, index: i, key: i + '', - optionData: assign({}, option, { + optionData: assign({}, option, { id: option.id, selected: multiple ? option.selected : value === option.value }), @@ -227,17 +212,6 @@ export default class Select extends SelectBase { return optionNodes; } - @diffProperty('customOption', reference) - protected onCustomOptionChange(previousProperties: any, newProperties: any) { - const { - customOption = SelectOption - } = newProperties; - - const registry = this._createRegistry(customOption); - this.getRegistries().replace(this._registry, registry); - this._registry = registry; - } - @diffProperty('options', auto) protected onOptionsChange(previousProperties: { options: OptionData[] }, newProperties: { options: OptionData[] }) { const { @@ -414,7 +388,6 @@ export default class Select extends SelectBase { rootWidget = w(Label, { extraClasses: { root: parseLabelClasses(this.classes(css.root, ...stateClasses)()) }, label, - registry: this._registry, theme }, [ select ]); } diff --git a/src/select/example/index.ts b/src/select/example/index.ts index bd9a909783..83adaad7f3 100644 --- a/src/select/example/index.ts +++ b/src/select/example/index.ts @@ -120,7 +120,7 @@ export class App extends WidgetBase { v('h2', {}, [ 'Custom Select Box, single select:' ]), w(Select, { key: 'select2', - customOption: CustomOption, + CustomOption: CustomOption, label: 'Custom box!', options: this._selectOptions, value: this._value2, @@ -145,7 +145,7 @@ export class App extends WidgetBase { v('h2', {}, [ 'Custom multiselect widget' ]), w(Select, { key: 'select4', - customOption: CustomOption, + CustomOption: CustomOption, options: this._evenMoreSelectOptions, multiple: true, theme: this._theme, diff --git a/src/select/tests/unit/Select.ts b/src/select/tests/unit/Select.ts index 8522ba07ae..737b1e19d9 100644 --- a/src/select/tests/unit/Select.ts +++ b/src/select/tests/unit/Select.ts @@ -10,7 +10,6 @@ import { Keys } from '../../../common/util'; import Select, { SelectProperties } from '../../Select'; import SelectOption, { OptionData } from '../../SelectOption'; import Label from '../../../label/Label'; -import WidgetRegistry from '@dojo/widget-core/WidgetRegistry'; import * as css from '../../styles/select.m.css'; import * as iconCss from '../../../common/styles/icons.m.css'; @@ -20,10 +19,6 @@ const compareId = compareProperty((value: any) => { return typeof value === 'string'; }); -const compareRegistry = compareProperty((value: any) => { - return value instanceof WidgetRegistry; -}); - interface TestEventInit extends EventInit { which: number; } @@ -208,7 +203,6 @@ const expected = function(widget: any, selectVdom: any, label = false) { return w(Label, { extraClasses: { root: css.root }, label: 'foo', - registry: compareRegistry, theme: undefined }, [ selectVdom ]); } @@ -336,7 +330,7 @@ registerSuite({ } } widget.setProperties({ - customOption: CustomOption, + CustomOption: CustomOption, options: testOptions }); @@ -344,7 +338,7 @@ registerSuite({ widget.expectRender(expected(widget, selectVdom)); widget.setProperties({ - customOption: undefined, + CustomOption: undefined, options: testOptions }); diff --git a/src/timepicker/TimePicker.ts b/src/timepicker/TimePicker.ts index c96ae0bde6..3abff26566 100644 --- a/src/timepicker/TimePicker.ts +++ b/src/timepicker/TimePicker.ts @@ -2,7 +2,8 @@ import { padStart } from '@dojo/shim/string'; import { v, w } from '@dojo/widget-core/d'; import { DNode } from '@dojo/widget-core/interfaces'; import ThemeableMixin, { theme, ThemeableProperties } from '@dojo/widget-core/mixins/Themeable'; -import { diffProperty, WidgetBase } from '@dojo/widget-core/WidgetBase'; +import { WidgetBase } from '@dojo/widget-core/WidgetBase'; +import { diffProperty } from '@dojo/widget-core/decorators/diffProperty'; import { auto } from '@dojo/widget-core/diff'; import * as css from './styles/timePicker.m.css'; import ComboBox from '../combobox/ComboBox'; @@ -290,8 +291,8 @@ export class TimePicker extends TimePickerBase { return w(ComboBox, { autoBlur, clearable, - customResultItem: customOptionItem, - customResultMenu: customOptionMenu, + CustomResultItem: customOptionItem, + CustomResultMenu: customOptionMenu, disabled, extraClasses, getResultLabel: this._getOptionLabel.bind(this), From 074e16ca1c6c611d64e1e5def37b14ecaf5eff62 Mon Sep 17 00:00:00 2001 From: Anthony Gubler Date: Thu, 21 Sep 2017 16:58:51 +0100 Subject: [PATCH 3/5] fix unit tests for widget-core changes --- package.json | 2 +- src/calendar/tests/unit/Calendar.ts | 2 +- src/select/tests/unit/Select.ts | 14 ++++++++++---- src/timepicker/tests/unit/TimePicker.ts | 8 ++++---- 4 files changed, 16 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 5f7af2d37c..39f9d21b58 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "devDependencies": { "@dojo/interfaces": "next", "@dojo/loader": "next", - "@dojo/test-extras": "file:../test-extras/dist/dojo-test-extras-2.0.0-alpha.1.tgz", + "@dojo/test-extras": "next", "@types/chai": "3.4.*", "@types/glob": "5.0.*", "@types/grunt": "0.4.*", diff --git a/src/calendar/tests/unit/Calendar.ts b/src/calendar/tests/unit/Calendar.ts index bd59b791c2..c9051227b9 100644 --- a/src/calendar/tests/unit/Calendar.ts +++ b/src/calendar/tests/unit/Calendar.ts @@ -22,7 +22,7 @@ const compareId = compareProperty((value: any) => { let dateIndex = -1; const expectedDateCell = function(widget: any, date: number, active: boolean) { dateIndex++; - return w('date-cell', { + return w(CalendarCell, { key: `date-${dateIndex}`, callFocus: false, date, diff --git a/src/select/tests/unit/Select.ts b/src/select/tests/unit/Select.ts index 737b1e19d9..6c7f3c5a35 100644 --- a/src/select/tests/unit/Select.ts +++ b/src/select/tests/unit/Select.ts @@ -41,6 +41,8 @@ const testOptions: OptionData[] = [ } ]; +let ExpectedCustomOption: typeof SelectOption; + const expectedNative = function(widget: any, multiple = false) { return v('div', { classes: widget.classes(css.inputWrapper) }, [ v('select', { @@ -89,7 +91,7 @@ const expectedNative = function(widget: any, multiple = false) { const expectedOptions = function(widget: any, multiple = false) { return [ - w('select-option', { + w(ExpectedCustomOption, { focused: true, index: 0, key: '0', @@ -103,7 +105,7 @@ const expectedOptions = function(widget: any, multiple = false) { onClick: widget.listener, theme: undefined }), - w('select-option', { + w(ExpectedCustomOption, { focused: false, index: 1, key: '1', @@ -117,7 +119,7 @@ const expectedOptions = function(widget: any, multiple = false) { onClick: widget.listener, theme: undefined }), - w('select-option', { + w(ExpectedCustomOption, { focused: false, index: 2, key: '2', @@ -218,6 +220,7 @@ registerSuite({ beforeEach() { widget = harness(Select); + ExpectedCustomOption = SelectOption; }, afterEach() { @@ -329,14 +332,17 @@ registerSuite({ return 'foo'; } } + + ExpectedCustomOption = CustomOption; widget.setProperties({ - CustomOption: CustomOption, + CustomOption, options: testOptions }); let selectVdom = expectedSingle(widget); widget.expectRender(expected(widget, selectVdom)); + ExpectedCustomOption = SelectOption; widget.setProperties({ CustomOption: undefined, options: testOptions diff --git a/src/timepicker/tests/unit/TimePicker.ts b/src/timepicker/tests/unit/TimePicker.ts index 198aa82fb9..58f9ad6603 100644 --- a/src/timepicker/tests/unit/TimePicker.ts +++ b/src/timepicker/tests/unit/TimePicker.ts @@ -5,7 +5,7 @@ import * as assert from 'intern/chai!assert'; import * as sinon from 'sinon'; import TimePicker, { getOptions, parseUnits } from '../../TimePicker'; import * as css from '../../styles/timePicker.m.css'; -import ComboBox, { ComboBoxProperties } from '../../../combobox/ComboBox'; +import ComboBox from '../../../combobox/ComboBox'; import Label, { parseLabelClasses } from '../../../label/Label'; registerSuite({ @@ -73,11 +73,11 @@ registerSuite({ value: 'some value' }); - picker.expectRender(w(ComboBox, { + picker.expectRender(w(ComboBox, { autoBlur: false, clearable: true, - customResultItem: undefined, - customResultMenu: undefined, + CustomResultItem: undefined, + CustomResultMenu: undefined, disabled: false, getResultLabel: picker.listener, inputProperties: undefined, From 42a6e9f7397b7436df6af3c0a5581d75f800b518 Mon Sep 17 00:00:00 2001 From: Anthony Gubler Date: Tue, 26 Sep 2017 14:06:44 +0100 Subject: [PATCH 4/5] address feedback from review --- package.json | 2 +- src/calendar/Calendar.ts | 8 ++++---- src/calendar/README.md | 2 +- src/calendar/createCalendarElement.ts | 2 +- src/calendar/tests/unit/Calendar.ts | 2 +- src/combobox/ComboBox.ts | 4 ++-- src/combobox/README.md | 2 +- src/combobox/createComboBoxElement.ts | 4 ++-- src/select/Select.ts | 2 +- src/timepicker/TimePicker.ts | 16 ++++++++-------- 10 files changed, 22 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 39f9d21b58..fcefb1f509 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "devDependencies": { "@dojo/interfaces": "next", "@dojo/loader": "next", - "@dojo/test-extras": "next", + "@dojo/test-extras": "file:../../dojo-org/test-extras/dist/dojo-test-extras-2.0.0-alpha.1.tgz", "@types/chai": "3.4.*", "@types/glob": "5.0.*", "@types/grunt": "0.4.*", diff --git a/src/calendar/Calendar.ts b/src/calendar/Calendar.ts index 034fe1fc99..e7f0435022 100644 --- a/src/calendar/Calendar.ts +++ b/src/calendar/Calendar.ts @@ -16,7 +16,7 @@ import * as iconCss from '../common/styles/icons.m.css'; * * Properties that can be set on a Calendar component * - * @property customDateCell Custom widget constructor for the date cell. Should use CalendarCell as a base. + * @property CustomDateCell Custom widget constructor for the date cell. Should use CalendarCell as a base. * @property labels Customize or internationalize accessible text for the Calendar widget * @property month Set the currently displayed month, 0-based * @property monthNames Customize or internationalize full month names and abbreviations @@ -30,7 +30,7 @@ import * as iconCss from '../common/styles/icons.m.css'; * @property onDateSelect Function called when the user selects a date */ export interface CalendarProperties extends ThemeableProperties { - customDateCell?: Constructor; + CustomDateCell?: Constructor; labels?: CalendarMessages; month?: number; monthNames?: { short: string; long: string; }[]; @@ -234,7 +234,7 @@ export default class Calendar extends CalendarBase { month, year } = this._getMonthYear(); - const { theme = {}, customDateCell } = this.properties; + const { theme = {}, CustomDateCell = CalendarCell } = this.properties; const currentMonthLength = this._getMonthLength(month, year); const previousMonthLength = this._getMonthLength(month - 1, year); @@ -279,7 +279,7 @@ export default class Calendar extends CalendarBase { isSelectedDay = false; } - days.push(w(customDateCell || CalendarCell, { + days.push(w(CustomDateCell, { key: `date-${week * 7 + i}`, callFocus: this._callDateFocus && isCurrentMonth && date === this._focusedDay, date, diff --git a/src/calendar/README.md b/src/calendar/README.md index 591f5986c5..9e95215c05 100644 --- a/src/calendar/README.md +++ b/src/calendar/README.md @@ -57,7 +57,7 @@ class MyCalendarCell extends CalendarCell { [ ... ] w(Calendar, { - customDateCell: MyCalendarCell, + CustomDateCell: MyCalendarCell, month: this.state.month, selectedDate: this.state.selectedDate, year: this.state.year, diff --git a/src/calendar/createCalendarElement.ts b/src/calendar/createCalendarElement.ts index 5fb2e3b365..48feb86390 100644 --- a/src/calendar/createCalendarElement.ts +++ b/src/calendar/createCalendarElement.ts @@ -24,7 +24,7 @@ export default function createCalendarElement(): CustomElementDescriptor { } ], properties: [ - { propertyName: 'customDateCell' }, + { propertyName: 'CustomDateCell' }, { propertyName: 'labels' }, { propertyName: 'monthNames' }, { propertyName: 'weekdayNames' }, diff --git a/src/calendar/tests/unit/Calendar.ts b/src/calendar/tests/unit/Calendar.ts index c9051227b9..fadf66a97c 100644 --- a/src/calendar/tests/unit/Calendar.ts +++ b/src/calendar/tests/unit/Calendar.ts @@ -186,7 +186,7 @@ registerSuite({ 'Renders with custom properties'() { widget.setProperties({ - customDateCell: CalendarCell, + CustomDateCell: CalendarCell, labels: DEFAULT_LABELS, month: testDate.getMonth(), monthNames: DEFAULT_MONTHS, diff --git a/src/combobox/ComboBox.ts b/src/combobox/ComboBox.ts index 7bf470a415..fd551dfbf6 100644 --- a/src/combobox/ComboBox.ts +++ b/src/combobox/ComboBox.ts @@ -21,8 +21,8 @@ import * as iconCss from '../common/styles/icons.m.css'; * * @property autoBlur Determines whether the input should blur after value selection * @property clearable Determines whether the input should be able to be cleared - * @property customResultItem Can be used to render a custom result - * @property customResultMenu Can be used to render a custom result menu + * @property CustomResultItem Can be used to render a custom result + * @property CustomResultMenu Can be used to render a custom result menu * @property disabled Prevents user interaction and styles content accordingly * @property getResultLabel Can be used to get the text label of a result based on the underlying result object * @property inputProperties TextInput properties to set on the underlying input diff --git a/src/combobox/README.md b/src/combobox/README.md index 7fe338c55a..ec8200b798 100644 --- a/src/combobox/README.md +++ b/src/combobox/README.md @@ -141,7 +141,7 @@ class CustomResultItem extends ResultItem { w(ComboBox, { results: ['foo', 'bar', 'baz'], value: this.state.currentValue,, - customResultItem: CustomResultItem, + CustomResultItem: CustomResultItem, onChange: (value: string) => this.setState({ currentValue: value }) }); ``` diff --git a/src/combobox/createComboBoxElement.ts b/src/combobox/createComboBoxElement.ts index b1b1ca27c4..b4d31471de 100644 --- a/src/combobox/createComboBoxElement.ts +++ b/src/combobox/createComboBoxElement.ts @@ -52,10 +52,10 @@ export default function createComboBoxElement(): CustomElementDescriptor { propertyName: 'inputProperties' }, { - propertyName: 'customResultItem' + propertyName: 'CustomResultItem' }, { - propertyName: 'customResultMenu' + propertyName: 'CustomResultMenu' }, { propertyName: 'getResultLabel' diff --git a/src/select/Select.ts b/src/select/Select.ts index 714340a3bf..66c1bc1dfa 100644 --- a/src/select/Select.ts +++ b/src/select/Select.ts @@ -18,7 +18,7 @@ import * as iconCss from '../common/styles/icons.m.css'; * * Properties that can be set on a Select component * - * @property customOption Custom widget constructor for options. Should use SelectOption as a base + * @property CustomOption Custom widget constructor for options. Should use SelectOption as a base * @property describedBy ID of an element that provides more descriptive text * @property disabled Prevents the user from interacting with the form field * @property invalid Indicates the value entered in the form field is invalid diff --git a/src/timepicker/TimePicker.ts b/src/timepicker/TimePicker.ts index 3abff26566..0ef59786a4 100644 --- a/src/timepicker/TimePicker.ts +++ b/src/timepicker/TimePicker.ts @@ -17,8 +17,8 @@ import { TextInputProperties } from '../textinput/TextInput'; * * @property autoBlur Determines whether the input should blur after value selection * @property clearable Determines whether the custom input should be able to be cleared - * @property customOptionItem Can be used to render a custom option - * @property customOptionMenu Can be used to render a custom option menu + * @property CustomOptionItem Can be used to render a custom option + * @property CustomOptionMenu Can be used to render a custom option menu * @property disabled Prevents user interaction and styles content accordingly * @property end The maximum time to display in the menu (defaults to '23:59:59') * @property getOptionLabel Can be used to get the text label of an option based on the underlying option object @@ -44,8 +44,8 @@ import { TextInputProperties } from '../textinput/TextInput'; export interface TimePickerProperties extends ThemeableProperties { autoBlur?: boolean; clearable?: boolean; - customOptionItem?: any; - customOptionMenu?: any; + CustomOptionItem?: any; + CustomOptionMenu?: any; disabled?: boolean; end?: string; getOptionLabel?(option: TimeUnits): string; @@ -268,8 +268,8 @@ export class TimePicker extends TimePickerBase { const { autoBlur, clearable, - customOptionItem, - customOptionMenu, + CustomOptionItem, + CustomOptionMenu, disabled, extraClasses, inputProperties, @@ -291,8 +291,8 @@ export class TimePicker extends TimePickerBase { return w(ComboBox, { autoBlur, clearable, - CustomResultItem: customOptionItem, - CustomResultMenu: customOptionMenu, + CustomResultItem: CustomOptionItem, + CustomResultMenu: CustomOptionMenu, disabled, extraClasses, getResultLabel: this._getOptionLabel.bind(this), From cb9600e3bcf4f938dc9aff8ba5d3ee549eb144d6 Mon Sep 17 00:00:00 2001 From: Anthony Gubler Date: Tue, 26 Sep 2017 14:18:39 +0100 Subject: [PATCH 5/5] do not use local dependency :doh: --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fcefb1f509..39f9d21b58 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "devDependencies": { "@dojo/interfaces": "next", "@dojo/loader": "next", - "@dojo/test-extras": "file:../../dojo-org/test-extras/dist/dojo-test-extras-2.0.0-alpha.1.tgz", + "@dojo/test-extras": "next", "@types/chai": "3.4.*", "@types/glob": "5.0.*", "@types/grunt": "0.4.*",