Merge pull request #9315 from electron/segmented-control-mode
Add mode prop to segmented touch bar control
This commit is contained in:
commit
eebae82bc1
3 changed files with 21 additions and 5 deletions
|
@ -224,6 +224,7 @@ static NSString* const ImageScrubberItemIdentifier = @"scrubber.image.item";
|
||||||
NSString* item_id = [NSString stringWithFormat:@"%ld", ((NSSegmentedControl*)sender).tag];
|
NSString* item_id = [NSString stringWithFormat:@"%ld", ((NSSegmentedControl*)sender).tag];
|
||||||
base::DictionaryValue details;
|
base::DictionaryValue details;
|
||||||
details.SetInteger("selectedIndex", ((NSSegmentedControl*)sender).selectedSegment);
|
details.SetInteger("selectedIndex", ((NSSegmentedControl*)sender).selectedSegment);
|
||||||
|
details.SetBoolean("isSelected", [((NSSegmentedControl*)sender) isSelectedForSegment:((NSSegmentedControl*)sender).selectedSegment]);
|
||||||
window_->NotifyTouchBarItemInteraction([item_id UTF8String],
|
window_->NotifyTouchBarItemInteraction([item_id UTF8String],
|
||||||
details);
|
details);
|
||||||
}
|
}
|
||||||
|
@ -520,6 +521,15 @@ static NSString* const ImageScrubberItemIdentifier = @"scrubber.image.item";
|
||||||
else
|
else
|
||||||
control.segmentStyle = NSSegmentStyleAutomatic;
|
control.segmentStyle = NSSegmentStyleAutomatic;
|
||||||
|
|
||||||
|
std::string segmentMode;
|
||||||
|
settings.Get("mode", &segmentMode);
|
||||||
|
if (segmentMode == "multiple")
|
||||||
|
control.trackingMode = NSSegmentSwitchTrackingSelectAny;
|
||||||
|
else if (segmentMode == "buttons")
|
||||||
|
control.trackingMode = NSSegmentSwitchTrackingMomentary;
|
||||||
|
else
|
||||||
|
control.trackingMode = NSSegmentSwitchTrackingSelectOne;
|
||||||
|
|
||||||
std::vector<mate::Dictionary> segments;
|
std::vector<mate::Dictionary> segments;
|
||||||
settings.Get("segments", &segments);
|
settings.Get("segments", &segments);
|
||||||
|
|
||||||
|
|
|
@ -21,10 +21,15 @@ Process: [Main](../tutorial/quick-start.md#main-process)
|
||||||
* `small-square` - The control is displayed using the small square style.
|
* `small-square` - The control is displayed using the small square style.
|
||||||
* `separated` - The segments in the control are displayed very close to each
|
* `separated` - The segments in the control are displayed very close to each
|
||||||
other but not touching.
|
other but not touching.
|
||||||
* `segments` [SegmentedControlSegment[]](structures/segmented-control-segment.md) - An array of segments to place in this control
|
* `mode` String - (Optional) The selection mode of the control:
|
||||||
* `selectedIndex` Integer (Optional) - The index of the currently selected segment, will update automatically with user interaction
|
* `single` - Default. One item selected at a time, selecting one deselects the previously selected item.
|
||||||
|
* `multiple` - Multiple items can be selected at a time.
|
||||||
|
* `buttons` - Make the segments act as buttons, each segment can be pressed and released but never marked as active.
|
||||||
|
* `segments` [SegmentedControlSegment[]](structures/segmented-control-segment.md) - An array of segments to place in this control.
|
||||||
|
* `selectedIndex` Integer (Optional) - The index of the currently selected segment, will update automatically with user interaction. When the mode is multiple it will be the last selected item.
|
||||||
* `change` Function - Called when the user selects a new segment
|
* `change` Function - Called when the user selects a new segment
|
||||||
* `selectedIndex` Integer - The index of the segment the user selected
|
* `selectedIndex` Integer - The index of the segment the user selected.
|
||||||
|
* `isSelected` Boolean - Whether as a result of user selection the segment is selected or not.
|
||||||
|
|
||||||
### Instance Properties
|
### Instance Properties
|
||||||
|
|
||||||
|
|
|
@ -264,16 +264,17 @@ TouchBar.TouchBarSegmentedControl = class TouchBarSegmentedControl extends Touch
|
||||||
constructor (config) {
|
constructor (config) {
|
||||||
super()
|
super()
|
||||||
if (config == null) config = {}
|
if (config == null) config = {}
|
||||||
const {segmentStyle, segments, selectedIndex, change} = config
|
const {segmentStyle, segments, selectedIndex, change, mode} = config
|
||||||
this.type = 'segmented_control'
|
this.type = 'segmented_control'
|
||||||
this._addLiveProperty('segmentStyle', segmentStyle)
|
this._addLiveProperty('segmentStyle', segmentStyle)
|
||||||
this._addLiveProperty('segments', segments || [])
|
this._addLiveProperty('segments', segments || [])
|
||||||
this._addLiveProperty('selectedIndex', selectedIndex)
|
this._addLiveProperty('selectedIndex', selectedIndex)
|
||||||
|
this._addLiveProperty('mode', mode)
|
||||||
|
|
||||||
if (typeof change === 'function') {
|
if (typeof change === 'function') {
|
||||||
this.onInteraction = (details) => {
|
this.onInteraction = (details) => {
|
||||||
this._selectedIndex = details.selectedIndex
|
this._selectedIndex = details.selectedIndex
|
||||||
change(details.selectedIndex)
|
change(details.selectedIndex, details.isSelected)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue