Fix child touch bar items not updating (#11812)
* Fix child touch bar items not updating Deep children of a TouchBar didn't cause the top level touch bar to update, now they do Fixes #11761. * Remove unused newValue property in TB setter
This commit is contained in:
parent
6943ada7e8
commit
66b57858b8
2 changed files with 91 additions and 47 deletions
|
@ -135,7 +135,21 @@ class TouchBar extends EventEmitter {
|
|||
class TouchBarItem extends EventEmitter {
|
||||
constructor () {
|
||||
super()
|
||||
this.id = `${nextItemID++}`
|
||||
this._addImmutableProperty('id', `${nextItemID++}`)
|
||||
this._parents = []
|
||||
}
|
||||
|
||||
_addImmutableProperty (name, value) {
|
||||
Object.defineProperty(this, name, {
|
||||
get: function () {
|
||||
return value
|
||||
},
|
||||
set: function () {
|
||||
throw new Error(`Cannot override property ${name}`)
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: false
|
||||
})
|
||||
}
|
||||
|
||||
_addLiveProperty (name, initialValue) {
|
||||
|
@ -152,22 +166,32 @@ class TouchBarItem extends EventEmitter {
|
|||
enumerable: true
|
||||
})
|
||||
}
|
||||
|
||||
_addParent (item) {
|
||||
const existing = this._parents.some(test => test.id === item.id)
|
||||
if (!existing) {
|
||||
this._parents.push({
|
||||
id: item.id,
|
||||
type: item.type
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TouchBar.TouchBarButton = class TouchBarButton extends TouchBarItem {
|
||||
constructor (config) {
|
||||
super()
|
||||
if (config == null) config = {}
|
||||
this.type = 'button'
|
||||
this._addImmutableProperty('type', 'button')
|
||||
const {click, icon, iconPosition, label, backgroundColor} = config
|
||||
this._addLiveProperty('label', label)
|
||||
this._addLiveProperty('backgroundColor', backgroundColor)
|
||||
this._addLiveProperty('icon', icon)
|
||||
this._addLiveProperty('iconPosition', iconPosition)
|
||||
if (typeof click === 'function') {
|
||||
this.onInteraction = () => {
|
||||
this._addImmutableProperty('onInteraction', () => {
|
||||
config.click()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -176,16 +200,16 @@ TouchBar.TouchBarColorPicker = class TouchBarColorPicker extends TouchBarItem {
|
|||
constructor (config) {
|
||||
super()
|
||||
if (config == null) config = {}
|
||||
this.type = 'colorpicker'
|
||||
this._addImmutableProperty('type', 'colorpicker')
|
||||
const {availableColors, change, selectedColor} = config
|
||||
this._addLiveProperty('availableColors', availableColors)
|
||||
this._addLiveProperty('selectedColor', selectedColor)
|
||||
|
||||
if (typeof change === 'function') {
|
||||
this.onInteraction = (details) => {
|
||||
this._addImmutableProperty('onInteraction', (details) => {
|
||||
this._selectedColor = details.color
|
||||
change(details.color)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -194,11 +218,10 @@ TouchBar.TouchBarGroup = class TouchBarGroup extends TouchBarItem {
|
|||
constructor (config) {
|
||||
super()
|
||||
if (config == null) config = {}
|
||||
this.type = 'group'
|
||||
this.child = config.items
|
||||
if (!(this.child instanceof TouchBar)) {
|
||||
this.child = new TouchBar(this.child)
|
||||
}
|
||||
this._addImmutableProperty('type', 'group')
|
||||
const defaultChild = (config.items instanceof TouchBar) ? config.items : new TouchBar(config.items)
|
||||
this._addLiveProperty('child', defaultChild)
|
||||
this.child.ordereredItems.forEach((item) => item._addParent(this))
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -206,7 +229,7 @@ TouchBar.TouchBarLabel = class TouchBarLabel extends TouchBarItem {
|
|||
constructor (config) {
|
||||
super()
|
||||
if (config == null) config = {}
|
||||
this.type = 'label'
|
||||
this._addImmutableProperty('type', 'label')
|
||||
this._addLiveProperty('label', config.label)
|
||||
this._addLiveProperty('textColor', config.textColor)
|
||||
}
|
||||
|
@ -216,18 +239,13 @@ TouchBar.TouchBarPopover = class TouchBarPopover extends TouchBarItem {
|
|||
constructor (config) {
|
||||
super()
|
||||
if (config == null) config = {}
|
||||
this.type = 'popover'
|
||||
this._addImmutableProperty('type', 'popover')
|
||||
this._addLiveProperty('label', config.label)
|
||||
this._addLiveProperty('icon', config.icon)
|
||||
this.showCloseButton = config.showCloseButton
|
||||
this.child = config.items
|
||||
if (!(this.child instanceof TouchBar)) {
|
||||
this.child = new TouchBar(this.child)
|
||||
}
|
||||
this.child.ordereredItems.forEach((item) => {
|
||||
item._popover = item._popover || []
|
||||
if (!item._popover.includes(this.id)) item._popover.push(this.id)
|
||||
})
|
||||
this._addLiveProperty('showCloseButton', config.showCloseButton)
|
||||
const defaultChild = (config.items instanceof TouchBar) ? config.items : new TouchBar(config.items)
|
||||
this._addLiveProperty('child', defaultChild)
|
||||
this.child.ordereredItems.forEach((item) => item._addParent(this))
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -235,7 +253,7 @@ TouchBar.TouchBarSlider = class TouchBarSlider extends TouchBarItem {
|
|||
constructor (config) {
|
||||
super()
|
||||
if (config == null) config = {}
|
||||
this.type = 'slider'
|
||||
this._addImmutableProperty('type', 'slider')
|
||||
const {change, label, minValue, maxValue, value} = config
|
||||
this._addLiveProperty('label', label)
|
||||
this._addLiveProperty('minValue', minValue)
|
||||
|
@ -243,10 +261,10 @@ TouchBar.TouchBarSlider = class TouchBarSlider extends TouchBarItem {
|
|||
this._addLiveProperty('value', value)
|
||||
|
||||
if (typeof change === 'function') {
|
||||
this.onInteraction = (details) => {
|
||||
this._addImmutableProperty('onInteraction', (details) => {
|
||||
this._value = details.value
|
||||
change(details.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -255,8 +273,8 @@ TouchBar.TouchBarSpacer = class TouchBarSpacer extends TouchBarItem {
|
|||
constructor (config) {
|
||||
super()
|
||||
if (config == null) config = {}
|
||||
this.type = 'spacer'
|
||||
this.size = config.size
|
||||
this._addImmutableProperty('type', 'spacer')
|
||||
this._addImmutableProperty('size', config.size)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -265,17 +283,17 @@ TouchBar.TouchBarSegmentedControl = class TouchBarSegmentedControl extends Touch
|
|||
super()
|
||||
if (config == null) config = {}
|
||||
const {segmentStyle, segments, selectedIndex, change, mode} = config
|
||||
this.type = 'segmented_control'
|
||||
this._addImmutableProperty('type', 'segmented_control')
|
||||
this._addLiveProperty('segmentStyle', segmentStyle)
|
||||
this._addLiveProperty('segments', segments || [])
|
||||
this._addLiveProperty('selectedIndex', selectedIndex)
|
||||
this._addLiveProperty('mode', mode)
|
||||
|
||||
if (typeof change === 'function') {
|
||||
this.onInteraction = (details) => {
|
||||
this._addImmutableProperty('onInteraction', (details) => {
|
||||
this._selectedIndex = details.selectedIndex
|
||||
change(details.selectedIndex, details.isSelected)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -286,7 +304,7 @@ TouchBar.TouchBarScrubber = class TouchBarScrubber extends TouchBarItem {
|
|||
if (config == null) config = {}
|
||||
const {items, selectedStyle, overlayStyle, showArrowButtons, continuous, mode} = config
|
||||
let {select, highlight} = config
|
||||
this.type = 'scrubber'
|
||||
this._addImmutableProperty('type', 'scrubber')
|
||||
this._addLiveProperty('items', items)
|
||||
this._addLiveProperty('selectedStyle', selectedStyle || null)
|
||||
this._addLiveProperty('overlayStyle', overlayStyle || null)
|
||||
|
@ -297,13 +315,13 @@ TouchBar.TouchBarScrubber = class TouchBarScrubber extends TouchBarItem {
|
|||
if (typeof select === 'function' || typeof highlight === 'function') {
|
||||
if (select == null) select = () => {}
|
||||
if (highlight == null) highlight = () => {}
|
||||
this.onInteraction = (details) => {
|
||||
if (details.type === 'select') {
|
||||
this._addImmutableProperty('onInteraction', (details) => {
|
||||
if (details.type === 'select' && typeof select === 'function') {
|
||||
select(details.selectedIndex)
|
||||
} else if (details.type === 'highlight') {
|
||||
} else if (details.type === 'highlight' && typeof highlight === 'function') {
|
||||
highlight(details.highlightedIndex)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue