javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(all): enable strictPropertyInitialization

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-04-19 18:48:38 +02:00
parent 78bd146ad2
commit 4ea8881f33
129 changed files with 1513 additions and 1664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
core/src/components/segment/segment.tsx
View File

@ -1,4 +1,5 @@
import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
import { Mode } from '../..';
@Component({
@ -12,19 +13,20 @@ import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@s
}
})
export class Segment {
@Element() private el: HTMLElement;
@Element() el!: HTMLElement;
/**
* The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
@Prop() color: string;
@Prop() color!: string;
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode: 'ios' | 'md';
@Prop() mode!: Mode;
/*
* If true, the user cannot interact with the segment. Defaults to `false`.
@ -34,42 +36,38 @@ export class Segment {
/**
* the value of the segment.
*/
@Prop({ mutable: true }) value: string;
@Prop({ mutable: true }) value?: string;
@Watch('value')
protected valueChanged(val: string) {
this.selectButton(val);
this.ionChange.emit();
protected valueChanged(value: string | undefined) {
this.selectButton();
this.ionChange.emit({value});
}
/**
* Emitted when the value property has changed.
*/
@Event() ionChange: EventEmitter;
componentDidLoad() {
this.selectButton(this.value);
}
@Event() ionChange!: EventEmitter;
@Listen('ionClick')
segmentClick(ev: CustomEvent) {
const selectedButton = ev.target as HTMLIonSegmentButtonElement;
this.value = selectedButton.value;
}
selectButton(val: string) {
const buttons = this.el.querySelectorAll('ion-segment-button');
componentDidLoad() {
this.selectButton();
}
for (let i = 0; i < buttons.length; i++) {
const button = buttons[i];
button.activated = (button.value === val);
private selectButton() {
const value = this.value;
const buttons = Array.from(this.el.querySelectorAll('ion-segment-button'));
for (const button of buttons) {
button.activated = (button.value === value);
// If there is no value set on the segment and a button
// is checked we should activate it
if (!val && button.checked) {
if (!value && button.checked) {
button.activated = button.checked;
}
}