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. * @output {SegmentButtonEvent} Emitted when the segment button is clicked.
*/ */
@Event() ionClick: EventEmitter; @Event() ionClick: EventEmitter<SegmentButtonEventDetail>;
@State() activated: boolean = false; @State() activated: boolean = false;
@ -62,7 +62,7 @@ export class SegmentButton {
clearTimeout(this.styleTmr); clearTimeout(this.styleTmr);
this.styleTmr = setTimeout(() => { this.styleTmr = setTimeout(() => {
this.ionClick.emit({ segmentButton: this }); this.ionClick.emit();
}); });
} }
@ -105,9 +105,10 @@ export class SegmentButton {
} }
} }
export interface SegmentButtonEvent extends CustomEvent {
export interface SegmentButtonEvent extends Event { detail: SegmentButtonEventDetail;
detail: { }
segmentButton: SegmentButton;
}; 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. * @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. * @input {string} The color to use from your Sass `$colors` map.
@ -69,13 +69,13 @@ export class Segment {
@Listen('ionClick') @Listen('ionClick')
segmentClick(ev: CustomEvent) { segmentClick(ev: CustomEvent) {
let selectedButton = ev.detail.segmentButton; const selectedButton = ev.target as HTMLIonSegmentButtonElement;
this.value = selectedButton.value; this.value = selectedButton.value;
this.selectButton(this.value); this.selectButton(this.value);
// TODO should this move to valueChanged // TODO should this move to valueChanged
this.ionChange.emit({ segment: this }); this.ionChange.emit();
} }
selectButton(val: string) { selectButton(val: string) {
@ -101,8 +101,9 @@ export class Segment {
} }
} }
export interface SegmentEvent extends Event { export interface SegmentEvent extends CustomEvent {
detail: { detail: SegmentEventDetail;
segment: Segment; }
};
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> <script src="/dist/ionic.js"></script>
</head> </head>
<body> <body onload="listenForEvent()">
<ion-app> <ion-app>
<ion-page> <ion-page>
<ion-header> <ion-header>
@ -19,7 +19,7 @@
<ion-content> <ion-content>
<ion-toolbar no-border-top> <ion-toolbar no-border-top>
<ion-segment value="Free"> <ion-segment class="event-tester" value="Free">
<ion-segment-button value="Paid"> <ion-segment-button value="Paid">
Paid Paid
</ion-segment-button> </ion-segment-button>
@ -111,6 +111,14 @@
dynamicAttrElem.setAttribute('value', 'active'); 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> </script>
</ion-content> </ion-content>
</ion-page> </ion-page>