Skip to content

Commit

Permalink
Refactor default and optional control menu groups
Browse files Browse the repository at this point in the history
  • Loading branch information
aaronrobertshaw committed Sep 10, 2021
1 parent b4cbea8 commit 57d40ce
Showing 1 changed file with 86 additions and 76 deletions.
162 changes: 86 additions & 76 deletions packages/components/src/tools-panel/tools-panel-header/component.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,82 @@ import MenuItem from '../../menu-item';
import { useToolsPanelHeader } from './hook';
import { contextConnect } from '../../ui/context';

const getAriaLabel = ( label, isSelected ) => {
return isSelected
? sprintf(
// translators: %s: The name of the control being hidden and reset e.g. "Padding".
__( 'Hide and reset %s' ),
label
)
: sprintf(
// translators: %s: The name of the control to display e.g. "Padding".
__( 'Show %s' ),
label
);
const DefaultControlsGroup = ( { items, onClose, toggleItem } ) => {
if ( ! items.length ) {
return null;
}

return (
<MenuGroup>
{ items.map( ( [ label, hasValue ] ) => {
const icon = hasValue ? minus : check;
const itemLabel = hasValue
? sprintf(
// translators: %s: The name of the control being reset e.g. "Padding".
__( 'Reset %s' ),
label
)
: undefined;

return (
<MenuItem
key={ label }
icon={ icon }
isSelected={ true }
disabled={ ! hasValue }
label={ itemLabel }
onClick={ () => {
toggleItem( label );
onClose();
} }
role="menuitemcheckbox"
>
{ label }
</MenuItem>
);
} ) }
</MenuGroup>
);
};

const OptionalControlsGroup = ( { items, onClose, toggleItem } ) => {
if ( ! items.length ) {
return null;
}

return (
<MenuGroup>
{ items.map( ( [ label, isSelected ] ) => {
const itemLabel = isSelected
? sprintf(
// translators: %s: The name of the control being hidden and reset e.g. "Padding".
__( 'Hide and reset %s' ),
label
)
: sprintf(
// translators: %s: The name of the control to display e.g. "Padding".
__( 'Show %s' ),
label
);

return (
<MenuItem
key={ label }
icon={ isSelected && check }
isSelected={ isSelected }
label={ itemLabel }
onClick={ () => {
toggleItem( label );
onClose();
} }
role="menuitemcheckbox"
>
{ label }
</MenuItem>
);
} ) }
</MenuGroup>
);
};

const ToolsPanelHeader = ( props, forwardedRef ) => {
Expand Down Expand Up @@ -56,70 +120,16 @@ const ToolsPanelHeader = ( props, forwardedRef ) => {
>
{ ( { onClose } ) => (
<>
{ !! defaultItems?.length && (
<MenuGroup>
{ defaultItems.map(
( [ label, hasValue ] ) => {
const icon = hasValue
? minus
: check;

const itemLabel = hasValue
? sprintf(
// translators: %s: The name of the control being reset e.g. "Padding".
__( 'Reset %s' ),
label
)
: undefined;

return (
<MenuItem
key={ label }
icon={ icon }
isSelected={ true }
disabled={ ! hasValue }
label={ itemLabel }
onClick={ () => {
toggleItem( label );
onClose();
} }
role="menuitemcheckbox"
>
{ label }
</MenuItem>
);
}
) }
</MenuGroup>
) }
{ !! optionalItems?.length && (
<MenuGroup>
{ optionalItems.map(
( [ label, isSelected ] ) => {
const itemLabel = getAriaLabel(
label,
isSelected
);

return (
<MenuItem
key={ label }
icon={ isSelected && check }
isSelected={ isSelected }
label={ itemLabel }
onClick={ () => {
toggleItem( label );
onClose();
} }
role="menuitemcheckbox"
>
{ label }
</MenuItem>
);
}
) }
</MenuGroup>
) }
<DefaultControlsGroup
items={ defaultItems }
onClose={ onClose }
toggleItem={ toggleItem }
/>
<OptionalControlsGroup
items={ optionalItems }
onClose={ onClose }
toggleItem={ toggleItem }
/>
<MenuGroup>
<MenuItem
variant={ 'tertiary' }
Expand Down

0 comments on commit 57d40ce

Please sign in to comment.