From d645f2401f35a02c3f7b7622748505e57a13ff37 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 20 Mar 2025 15:43:17 -0700 Subject: [PATCH 1/3] refactor(segment-button): update when the errors are displayed --- .../segment-button/segment-button.tsx | 83 ++++++------------- 1 file changed, 25 insertions(+), 58 deletions(-) diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index 3a2135421c2..1cbcf7fb3f0 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -2,7 +2,7 @@ import type { ComponentInterface } from '@stencil/core'; import { Component, Element, Host, Prop, Method, State, Watch, forceUpdate, h } from '@stencil/core'; import type { ButtonInterface } from '@utils/element-interface'; import type { Attributes } from '@utils/helpers'; -import { addEventListener, removeEventListener, inheritAttributes, getNextSiblingOfType } from '@utils/helpers'; +import { addEventListener, removeEventListener, inheritAttributes } from '@utils/helpers'; import { hostContext } from '@utils/theme'; import { getIonMode } from '../../global/ionic-global'; @@ -65,58 +65,40 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { this.updateState(); } - private waitForSegmentContent(ionSegment: HTMLIonSegmentElement | null, contentId: string): Promise { - return new Promise((resolve, reject) => { - let timeoutId: NodeJS.Timeout | undefined = undefined; - let animationFrameId: number; - - const check = () => { - if (!ionSegment) { - reject(new Error(`Segment not found when looking for Segment Content`)); - return; - } - - const segmentView = getNextSiblingOfType(ionSegment); // Skip the text nodes - const segmentContent = segmentView?.querySelector( - `ion-segment-content[id="${contentId}"]` - ) as HTMLIonSegmentContentElement | null; - if (segmentContent && timeoutId) { - clearTimeout(timeoutId); // Clear the timeout if the segmentContent is found - cancelAnimationFrame(animationFrameId); - resolve(segmentContent); - } else { - animationFrameId = requestAnimationFrame(check); // Keep checking on the next animation frame - } - }; - - check(); - - // Set a timeout to reject the promise - timeoutId = setTimeout(() => { - cancelAnimationFrame(animationFrameId); - reject(new Error(`Unable to find Segment Content with id="${contentId} within 1000 ms`)); - }, 1000); - }); - } - - async connectedCallback() { + connectedCallback() { const segmentEl = (this.segmentEl = this.el.closest('ion-segment')); if (segmentEl) { this.updateState(); addEventListener(segmentEl, 'ionSelect', this.updateState); addEventListener(segmentEl, 'ionStyle', this.updateStyle); } + } + + + + disconnectedCallback() { + const segmentEl = this.segmentEl; + if (segmentEl) { + removeEventListener(segmentEl, 'ionSelect', this.updateState); + removeEventListener(segmentEl, 'ionStyle', this.updateStyle); + this.segmentEl = null; + } + } + + componentWillLoad() { + this.inheritedAttributes = { + ...inheritAttributes(this.el, ['aria-label']), + }; // Return if there is no contentId defined if (!this.contentId) return; - let segmentContent; - try { - // Attempt to find the Segment Content by its contentId - segmentContent = await this.waitForSegmentContent(segmentEl, this.contentId); - } catch (error) { - // If no associated Segment Content exists, log an error and return - console.error('Segment Button: ', (error as Error).message); + // Attempt to find the Segment Content by its contentId + const segmentContent = document.getElementById(this.contentId) as HTMLIonSegmentContentElement | null; + + // If no associated Segment Content exists, log an error and return + if (!segmentContent) { + console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`); return; } @@ -133,21 +115,6 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { } } - disconnectedCallback() { - const segmentEl = this.segmentEl; - if (segmentEl) { - removeEventListener(segmentEl, 'ionSelect', this.updateState); - removeEventListener(segmentEl, 'ionStyle', this.updateStyle); - this.segmentEl = null; - } - } - - componentWillLoad() { - this.inheritedAttributes = { - ...inheritAttributes(this.el, ['aria-label']), - }; - } - private get hasLabel() { return !!this.el.querySelector('ion-label'); } From b51674ddbe7b38a14b1a26673e7fc383808e4756 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 20 Mar 2025 16:22:37 -0700 Subject: [PATCH 2/3] refactor(segment-view): separate disabled console error --- .../components/segment-button/segment-button.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index 1cbcf7fb3f0..fb940c9d99b 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -72,9 +72,13 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { addEventListener(segmentEl, 'ionSelect', this.updateState); addEventListener(segmentEl, 'ionStyle', this.updateStyle); } - } - + // Prevent buttons from being disabled when associated with segment content + if (this.contentId && this.disabled) { + console.warn(`Segment Button: Segment buttons cannot be disabled when associated with an .`); + this.disabled = false; + } + } disconnectedCallback() { const segmentEl = this.segmentEl; @@ -107,12 +111,6 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { console.error(`Segment Button: Element with id="${this.contentId}" is not an element.`); return; } - - // Prevent buttons from being disabled when associated with segment content - if (this.disabled) { - console.warn(`Segment Button: Segment buttons cannot be disabled when associated with an .`); - this.disabled = false; - } } private get hasLabel() { From 25e1f48c3c36025f66d440c1b42ada6d5919f05f Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 21 Mar 2025 13:26:34 -0700 Subject: [PATCH 3/3] refactor(helpers): remove unneeded function --- core/src/utils/helpers.ts | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts index 1a3cd15b0d8..e2a65407c0d 100644 --- a/core/src/utils/helpers.ts +++ b/core/src/utils/helpers.ts @@ -388,17 +388,6 @@ export const shallowEqualStringMap = ( return true; }; -export const getNextSiblingOfType = (element: Element): T | null => { - let sibling = element.nextSibling; - while (sibling) { - if (sibling.nodeType === Node.ELEMENT_NODE && (sibling as T) !== null) { - return sibling as T; - } - sibling = sibling.nextSibling; - } - return null; -}; - /** * Checks input for usable number. Not NaN and not Infinite. */