javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +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,

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

@ -36,6 +36,22 @@ export class Segment implements ComponentInterface {
* For more information on colors, see [theming](/docs/theming/basics).
*/
@Prop() color?: Color;
@Watch('color')
protected colorChanged(value?: Color, oldValue?: Color) {
/**
* If color is set after not having
* previously been set (or vice versa),
* we need to emit style so the segment-buttons
* can apply their color classes properly.
*/
if (
(oldValue === undefined && value !== undefined) ||
(oldValue !== undefined && value === undefined)
) {
this.emitStyle();
}
}
/**
* If `true`, the user cannot interact with the segment.