Skip to content

Commit

Permalink
Refactor useCollapsibleTrigger with useButton
Browse files Browse the repository at this point in the history
  • Loading branch information
mj12albert committed Sep 4, 2024
1 parent c5f8aa5 commit b5f818e
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 19 deletions.
6 changes: 3 additions & 3 deletions packages/mui-base/src/Accordion/Trigger/AccordionTrigger.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,18 @@ import { accordionStyleHookMapping } from '../Section/styleHooks';

const AccordionTrigger = React.forwardRef(function AccordionTrigger(
props: AccordionTrigger.Props,
forwardedRef: React.ForwardedRef<HTMLButtonElement>,
forwardedRef: React.ForwardedRef<Element>,
) {
const { disabled: disabledProp, className, render, ...otherProps } = props;

const { contentId, disabled: contextDisabled, open, setOpen } = useCollapsibleContext();

const { getRootProps } = useCollapsibleTrigger({
contentId,
disabled: disabledProp || contextDisabled,
open,
rootRef: forwardedRef,
setOpen,
disabled: disabledProp || contextDisabled,
});

const { ownerState, triggerId } = useAccordionSectionContext();
Expand All @@ -31,7 +32,6 @@ const AccordionTrigger = React.forwardRef(function AccordionTrigger(
render: render ?? 'button',
ownerState,
className,
ref: forwardedRef,
extraProps: { ...otherProps, id: triggerId },
customStyleHookMapping: accordionStyleHookMapping,
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@ const CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger(
contentId,
open,
setOpen,
rootRef: forwardedRef,
});

const { renderElement } = useComponentRenderer({
propGetter: getRootProps,
render: render ?? 'button',
ownerState,
className,
ref: forwardedRef,
extraProps: otherProps,
customStyleHookMapping: collapsibleStyleHookMapping,
});
Expand Down
47 changes: 32 additions & 15 deletions packages/mui-base/src/Collapsible/Trigger/useCollapsibleTrigger.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
'use client';
import * as React from 'react';
import { mergeReactProps } from '../../utils/mergeReactProps';
import { useForkRef } from '../../utils/useForkRef';
import { GenericHTMLProps } from '../../utils/types';
import { useButton } from '../../useButton';
/**
*
* Demos:
Expand All @@ -14,20 +17,35 @@ import { mergeReactProps } from '../../utils/mergeReactProps';
export function useCollapsibleTrigger(
parameters: useCollapsibleTrigger.Parameters,
): useCollapsibleTrigger.ReturnValue {
const { contentId, disabled, open, setOpen } = parameters;
const { contentId, disabled, open, rootRef: externalRef, setOpen } = parameters;

const { getRootProps: getButtonProps, rootRef: buttonRef } = useButton({
disabled,
focusableWhenDisabled: true,
type: 'button',
});

const handleRef = useForkRef(externalRef, buttonRef);

const getRootProps: useCollapsibleTrigger.ReturnValue['getRootProps'] = React.useCallback(
(externalProps = {}) =>
mergeReactProps<'button'>(externalProps, {
type: 'button',
'aria-controls': contentId,
'aria-expanded': open,
disabled,
onClick() {
setOpen(!open);
},
}),
[contentId, disabled, open, setOpen],
(externalProps: GenericHTMLProps = {}) =>
mergeReactProps(
externalProps,
mergeReactProps(
{
type: 'button',
'aria-controls': contentId,
'aria-expanded': open,
disabled,
onClick() {
setOpen(!open);
},
ref: handleRef,
},
getButtonProps(),
),
),
[contentId, disabled, getButtonProps, handleRef, open, setOpen],
);

return {
Expand All @@ -46,15 +64,14 @@ export namespace useCollapsibleTrigger {
* The open state of the Collapsible
*/
open: boolean;
rootRef?: React.Ref<Element>;
/**
* A state setter that sets the open state of the Collapsible
*/
setOpen: (open: boolean) => void;
}

export interface ReturnValue {
getRootProps: (
externalProps?: React.ComponentPropsWithRef<'button'>,
) => React.ComponentPropsWithRef<'button'>;
getRootProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
}
}

0 comments on commit b5f818e

Please sign in to comment.