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

fix(segment-button): color property is now reactive if previously undefined (#22405)

Browse Source 
resolves #20831
This commit is contained in:
Liam DeBeasi
2020-10-30 16:25:52 -04:00
committed by GitHub
parent 023fb18412
commit 04161c9512
2 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
core/src/components/segment-button/segment-button.tsx
View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Host, Prop, State, h } from '@stencil/core';
import { Component, ComponentInterface, Element, Host, Prop, State, forceUpdate, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { SegmentButtonLayout } from '../../interface';
@ -55,6 +55,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
if (segmentEl) {
this.updateState();
addEventListener(segmentEl, 'ionSelect', this.updateState);
addEventListener(segmentEl, 'ionStyle', this.updateStyle);
}
}
@ -62,6 +63,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
const segmentEl = this.segmentEl;
if (segmentEl) {
removeEventListener(segmentEl, 'ionSelect', this.updateState);
removeEventListener(segmentEl, 'ionStyle', this.updateStyle);
this.segmentEl = null;
}
}
@ -74,6 +76,10 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
return !!this.el.querySelector('ion-icon');
}
private updateStyle = () => {
forceUpdate(this);
}
private updateState = () => {
if (this.segmentEl) {
this.checked = this.segmentEl.value === this.value;
@ -81,8 +87,9 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
}
render() {
const { checked, type, disabled, hasIcon, hasLabel, layout } = this;
const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
const mode = getIonMode(this);
const hasSegmentColor = () => segmentEl !== null && segmentEl.color !== undefined;
return (
<Host
aria-disabled={disabled ? 'true' : null}
@ -91,7 +98,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
'in-toolbar': hostContext('ion-toolbar', this.el),
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
'in-segment': hostContext('ion-segment', this.el),
'in-segment-color': hostContext('ion-segment[color]', this.el),
'in-segment-color': hasSegmentColor(),
'segment-button-has-label': hasLabel,
'segment-button-has-icon': hasIcon,
'segment-button-has-label-only': hasLabel && !hasIcon,