javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(segment): fix events to use component as api

Browse Source
This commit is contained in:
Dan Bucholtz
2018-01-09 15:09:12 -06:00
parent 135d6b6e78
commit 71889411db
3 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/core/src/components/segment-button/segment-button.tsx
View File

@ -14,7 +14,7 @@ export class SegmentButton {
/**
* @output {SegmentButtonEvent} Emitted when the segment button is clicked.
*/
@Event() ionClick: EventEmitter;
@Event() ionClick: EventEmitter<SegmentButtonEventDetail>;
@State() activated: boolean = false;
@ -62,7 +62,7 @@ export class SegmentButton {
clearTimeout(this.styleTmr);
this.styleTmr = setTimeout(() => {
this.ionClick.emit({ segmentButton: this });
this.ionClick.emit();
});
}
@ -105,9 +105,10 @@ export class SegmentButton {
}
}
export interface SegmentButtonEvent extends Event {
detail: {
segmentButton: SegmentButton;
};
export interface SegmentButtonEvent extends CustomEvent {
detail: SegmentButtonEventDetail;
}
export interface SegmentButtonEventDetail {
}

15
packages/core/src/components/segment/segment.tsx
View File

@ -20,7 +20,7 @@ export class Segment {
/**
* @output {Event} Emitted when the value property has changed.
*/
@Event() ionChange: EventEmitter;
@Event() ionChange: EventEmitter<SegmentEventDetail>;
/**
* @input {string} The color to use from your Sass `$colors` map.
@ -69,13 +69,13 @@ export class Segment {
@Listen('ionClick')
segmentClick(ev: CustomEvent) {
let selectedButton = ev.detail.segmentButton;
const selectedButton = ev.target as HTMLIonSegmentButtonElement;
this.value = selectedButton.value;
this.selectButton(this.value);
// TODO should this move to valueChanged
this.ionChange.emit({ segment: this });
this.ionChange.emit();
}
selectButton(val: string) {
@ -101,8 +101,9 @@ export class Segment {
}
}
export interface SegmentEvent extends Event {
detail: {
segment: Segment;
};
export interface SegmentEvent extends CustomEvent {
detail: SegmentEventDetail;
}
export interface SegmentEventDetail {
}

12
packages/core/src/components/segment/test/basic/index.html
View File

@ -8,7 +8,7 @@
<script src="/dist/ionic.js"></script>
</head>
<body>
<body onload="listenForEvent()">
<ion-app>
<ion-page>
<ion-header>
@ -19,7 +19,7 @@
<ion-content>
<ion-toolbar no-border-top>
<ion-segment value="Free">
<ion-segment class="event-tester" value="Free">
<ion-segment-button value="Paid">
Paid
</ion-segment-button>
@ -111,6 +111,14 @@
dynamicAttrElem.setAttribute('value', 'active');
}
}
async function listenForEvent() {
const ionSegmentElement = document.querySelector('ion-segment.event-tester');
await ionSegmentElement.componentOnReady();
ionSegmentElement.addEventListener('ionChange', (event) => {
console.log('event.target: ', event.target.value);
});
}
</script>
</ion-content>
</ion-page>