From a8e5d75f62e362128cbe7f84f2edf464d5ce5456 Mon Sep 17 00:00:00 2001 From: Saurav Dutta <137750958+SauravCGiOS@users.noreply.github.com> Date: Wed, 21 May 2025 15:39:11 +0530 Subject: [PATCH 1/6] Revert "[ILX-52190] Android - On inspection questions, first question and 'Next' button are cut off when detail view is loaded" --- Collapsible.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/Collapsible.js b/Collapsible.js index d03f1ac..fb3cbb5 100644 --- a/Collapsible.js +++ b/Collapsible.js @@ -28,9 +28,7 @@ export default class Collapsible extends Component { componentDidMount() { if (!this.props.collapsed) { - setTimeout(() => { - this._measureContent((height) => this.state.height.setValue(height)); - }, 0); + this._measureContent((height) => this.state.height.setValue(height)); } } From 7b361a41427517406e1df5995f9c2fdf88a2ba9c Mon Sep 17 00:00:00 2001 From: Saurav Dutta Date: Wed, 21 May 2025 15:41:19 +0530 Subject: [PATCH 2/6] Update Collapsible.js --- Collapsible.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Collapsible.js b/Collapsible.js index fb3cbb5..4f1bab6 100644 --- a/Collapsible.js +++ b/Collapsible.js @@ -27,9 +27,9 @@ export default class Collapsible extends Component { } componentDidMount() { - if (!this.props.collapsed) { + setTimeout(() => { this._measureContent((height) => this.state.height.setValue(height)); - } + }, 1000); } componentDidUpdate(prevProps) { From 988954356b9fec66d385dc266e68e12f8ab30c53 Mon Sep 17 00:00:00 2001 From: Saurav Dutta Date: Wed, 21 May 2025 16:07:04 +0530 Subject: [PATCH 3/6] Update Collapsible.js --- Collapsible.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Collapsible.js b/Collapsible.js index 4f1bab6..a4ec9ab 100644 --- a/Collapsible.js +++ b/Collapsible.js @@ -29,7 +29,7 @@ export default class Collapsible extends Component { componentDidMount() { setTimeout(() => { this._measureContent((height) => this.state.height.setValue(height)); - }, 1000); + }, 100); } componentDidUpdate(prevProps) { From 6616c808074e455d6f4c5cdd848d5baf1f68056e Mon Sep 17 00:00:00 2001 From: Saurav Dutta Date: Wed, 21 May 2025 17:09:32 +0530 Subject: [PATCH 4/6] Revert "Update Collapsible.js" This reverts commit 988954356b9fec66d385dc266e68e12f8ab30c53. --- Collapsible.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/Collapsible.js b/Collapsible.js index a4ec9ab..827a239 100644 --- a/Collapsible.js +++ b/Collapsible.js @@ -27,9 +27,7 @@ export default class Collapsible extends Component { } componentDidMount() { - setTimeout(() => { - this._measureContent((height) => this.state.height.setValue(height)); - }, 100); + this._measureContent((height) => this.state.height.setValue(height)); } componentDidUpdate(prevProps) { From 94bb88e83d9ce3ca4364853efb4e553399f04928 Mon Sep 17 00:00:00 2001 From: Saurav Dutta Date: Wed, 21 May 2025 17:24:51 +0530 Subject: [PATCH 5/6] Changes with content height updation --- Accordion.js | 1 + Collapsible.js | 9 ++++++++- index.d.ts | 9 ++++++++- 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/Accordion.js b/Accordion.js index b89f78a..ba534ac 100644 --- a/Accordion.js +++ b/Accordion.js @@ -12,6 +12,7 @@ const COLLAPSIBLE_PROPS = [ 'easing', 'style', 'onAnimationEnd', + '_key' ]; export default class Accordion extends Component { diff --git a/Collapsible.js b/Collapsible.js index 827a239..015c127 100644 --- a/Collapsible.js +++ b/Collapsible.js @@ -13,6 +13,7 @@ export default class Collapsible extends Component { easing: 'easeOutCubic', onAnimationEnd: () => null, renderChildrenCollapsed: true, + _key: undefined, }; constructor(props) { @@ -27,7 +28,9 @@ export default class Collapsible extends Component { } componentDidMount() { - this._measureContent((height) => this.state.height.setValue(height)); + if (!this.props.collapsed) { + this._measureContent((height) => height != null && this.state.height.setValue(height)); + } } componentDidUpdate(prevProps) { @@ -52,6 +55,10 @@ export default class Collapsible extends Component { prevProps.collapsedHeight !== this.props.collapsedHeight ) { this.state.height.setValue(this.props.collapsedHeight); + } else if (prevProps._key !== undefined && this.props._key !== undefined && prevProps._key !== this.props._key) { + if (!this.props.collapsed) { + this._measureContent((height) => height != null && this.state.height.setValue(height)); + } } } diff --git a/index.d.ts b/index.d.ts index ccfc6d3..8a6b381 100644 --- a/index.d.ts +++ b/index.d.ts @@ -84,6 +84,13 @@ export interface CollapsibleProps { */ renderChildrenCollapsed?: boolean; + /** + * Check the height of children again and change height if key is changed + * + * @default undefined + */ + _key?: string | number | boolean | undefined; + /** * Optional styling for the container */ @@ -97,4 +104,4 @@ export interface CollapsibleProps { children: React.ReactNode; } -export default class Collapsible extends React.Component {} +export default class Collapsible extends React.Component { } From 06c4229eaea602b735906c44d5bb1280d0d1173d Mon Sep 17 00:00:00 2001 From: Saurav Dutta Date: Wed, 21 May 2025 17:30:24 +0530 Subject: [PATCH 6/6] Revert "Changes with content height updation" This reverts commit 94bb88e83d9ce3ca4364853efb4e553399f04928. --- Accordion.js | 1 - Collapsible.js | 9 +-------- index.d.ts | 9 +-------- 3 files changed, 2 insertions(+), 17 deletions(-) diff --git a/Accordion.js b/Accordion.js index ba534ac..b89f78a 100644 --- a/Accordion.js +++ b/Accordion.js @@ -12,7 +12,6 @@ const COLLAPSIBLE_PROPS = [ 'easing', 'style', 'onAnimationEnd', - '_key' ]; export default class Accordion extends Component { diff --git a/Collapsible.js b/Collapsible.js index 015c127..827a239 100644 --- a/Collapsible.js +++ b/Collapsible.js @@ -13,7 +13,6 @@ export default class Collapsible extends Component { easing: 'easeOutCubic', onAnimationEnd: () => null, renderChildrenCollapsed: true, - _key: undefined, }; constructor(props) { @@ -28,9 +27,7 @@ export default class Collapsible extends Component { } componentDidMount() { - if (!this.props.collapsed) { - this._measureContent((height) => height != null && this.state.height.setValue(height)); - } + this._measureContent((height) => this.state.height.setValue(height)); } componentDidUpdate(prevProps) { @@ -55,10 +52,6 @@ export default class Collapsible extends Component { prevProps.collapsedHeight !== this.props.collapsedHeight ) { this.state.height.setValue(this.props.collapsedHeight); - } else if (prevProps._key !== undefined && this.props._key !== undefined && prevProps._key !== this.props._key) { - if (!this.props.collapsed) { - this._measureContent((height) => height != null && this.state.height.setValue(height)); - } } } diff --git a/index.d.ts b/index.d.ts index 8a6b381..ccfc6d3 100644 --- a/index.d.ts +++ b/index.d.ts @@ -84,13 +84,6 @@ export interface CollapsibleProps { */ renderChildrenCollapsed?: boolean; - /** - * Check the height of children again and change height if key is changed - * - * @default undefined - */ - _key?: string | number | boolean | undefined; - /** * Optional styling for the container */ @@ -104,4 +97,4 @@ export interface CollapsibleProps { children: React.ReactNode; } -export default class Collapsible extends React.Component { } +export default class Collapsible extends React.Component {}