Skip to content

Commit

Permalink
fix(disclosure): add forwardRef
Browse files Browse the repository at this point in the history
BREAKING CHANGE: component is now using fowardRef
  • Loading branch information
richbachman committed Dec 17, 2020
1 parent ca8ef5b commit c8835fb
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 14 deletions.
31 changes: 20 additions & 11 deletions packages/paste-core/components/disclosure/src/Disclosure.tsx
Expand Up @@ -5,6 +5,7 @@ import {
DisclosurePrimitiveInitialState,
DisclosurePrimitveStateReturn,
} from '@twilio-paste/disclosure-primitive';
import {Box} from '@twilio-paste/box';
import {Card} from '@twilio-paste/card';

export type Variants = 'contained' | 'default';
Expand All @@ -26,23 +27,31 @@ export interface DisclosureProps extends DisclosurePrimitiveInitialState {
variant?: Variants;
}

const Disclosure: React.FC<DisclosureProps> = ({children, variant = 'default', state, ...props}) => {
const disclosure = state || useDisclosurePrimitiveState({...props});
const disclosureContext = {
disclosure,
variant,
};
const Disclosure = React.forwardRef<HTMLDivElement, DisclosureProps>(
({children, variant = 'default', state, ...props}, ref) => {
const disclosure = state || useDisclosurePrimitiveState({...props});
const disclosureContext = {
disclosure,
variant,
};

if (variant === 'contained') {
return (
<DisclosureContext.Provider value={disclosureContext}>
<Card padding="space0" ref={ref}>
{children}
</Card>
</DisclosureContext.Provider>
);
}

if (variant === 'contained') {
return (
<DisclosureContext.Provider value={disclosureContext}>
<Card padding="space0">{children}</Card>
<Box ref={ref}>{children}</Box>
</DisclosureContext.Provider>
);
}

return <DisclosureContext.Provider value={disclosureContext}>{children}</DisclosureContext.Provider>;
};
);
Disclosure.displayName = 'Disclosure';

if (process.env.NODE_ENV === 'development') {
Expand Down
Expand Up @@ -21,14 +21,14 @@ const getVariantStyles = (variant: Variants): BoxStyleProps => {
export interface DisclosureContentProps extends Omit<DisclosurePrimitiveContentProps, keyof BoxStyleProps> {
children: NonNullable<React.ReactNode>;
}
const DisclosureContent: React.FC<DisclosureContentProps> = ({children, ...props}) => {
const DisclosureContent = React.forwardRef<HTMLDivElement, DisclosureContentProps>(({children, ...props}, ref) => {
const {disclosure, variant} = React.useContext(DisclosureContext);
return (
<DisclosurePrimitiveContent {...disclosure} {...props} as={Box} {...getVariantStyles(variant)}>
<DisclosurePrimitiveContent {...disclosure} {...props} as={Box} ref={ref} {...getVariantStyles(variant)}>
{children}
</DisclosurePrimitiveContent>
);
};
});
DisclosureContent.displayName = 'DisclosureContent';

if (process.env.NODE_ENV === 'development') {
Expand Down

0 comments on commit c8835fb

Please sign in to comment.