diff --git a/packages/unstyled/accordion/src/AccordionItem.tsx b/packages/unstyled/accordion/src/AccordionItem.tsx index 30476ff3eb..e4e7b590da 100644 --- a/packages/unstyled/accordion/src/AccordionItem.tsx +++ b/packages/unstyled/accordion/src/AccordionItem.tsx @@ -1,10 +1,11 @@ -import React, { forwardRef, useContext, useMemo } from 'react'; +import React, { forwardRef, useContext, useMemo, useState } from 'react'; import { AccordionContext, AccordionItemContext } from './Context'; import { IAccordionItemProps } from './types'; import { useAccordionItem } from '@react-native-aria/accordion'; export const AccordionItem = (StyledAccordionItem: any) => forwardRef(({ children, ...props }: T & IAccordionItemProps, ref?: any) => { + const [titleText, setTitleText] = useState(''); const { state, isDisabledAccordion, selectedValues } = useContext(AccordionContext); @@ -23,14 +24,17 @@ export const AccordionItem = (StyledAccordionItem: any) => value, buttonProps, regionProps, + titleText, + setTitleText, }; }, [ isDisabled, isDisabledAccordion, + isExpanded, value, buttonProps, regionProps, - isExpanded, + titleText, ]); return ( diff --git a/packages/unstyled/accordion/src/AccordionTitleText.tsx b/packages/unstyled/accordion/src/AccordionTitleText.tsx index b7bf1b6882..6f7e51280a 100644 --- a/packages/unstyled/accordion/src/AccordionTitleText.tsx +++ b/packages/unstyled/accordion/src/AccordionTitleText.tsx @@ -1,10 +1,28 @@ -import React, { forwardRef } from 'react'; +import React, { forwardRef, useContext, useEffect } from 'react'; +import { AccordionItemContext } from './Context'; export const AccordionTitleText = (StyledAccordionTitleText: any) => - forwardRef(({ children, ...props }: any, ref?: any) => { - return ( - - {children} - - ); - }); + forwardRef( + ( + { + children, + ...props + }: { + children: string; + props: any; + }, + ref?: any + ) => { + const { setTitleText } = useContext(AccordionItemContext); + + useEffect(() => { + setTitleText(children); + }, [children, setTitleText]); + + return ( + + {children} + + ); + } + ); diff --git a/packages/unstyled/accordion/src/AccordionTrigger.tsx b/packages/unstyled/accordion/src/AccordionTrigger.tsx index 8088bc9650..80d0e1f4f1 100644 --- a/packages/unstyled/accordion/src/AccordionTrigger.tsx +++ b/packages/unstyled/accordion/src/AccordionTrigger.tsx @@ -17,6 +17,7 @@ export const AccordionTrigger = (StyledAccordionTrigger: any) => }: any, ref?: any ) => { + const { titleText } = useContext(AccordionItemContext); const { isDisabled, buttonProps, isExpanded } = useContext(AccordionItemContext); @@ -33,6 +34,8 @@ export const AccordionTrigger = (StyledAccordionTrigger: any) => return (