112 lines
2.7 KiB
TypeScript
112 lines
2.7 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import clsx from 'clsx';
|
|
import { withInstanceId } from '@wordpress/compose';
|
|
import { useMemo } from '@wordpress/element';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { RadioControlOption } from '../radio-control';
|
|
|
|
export interface RadioControlAccordionProps {
|
|
className?: string;
|
|
instanceId: number;
|
|
id: string;
|
|
onChange: ( value: string ) => void;
|
|
options: Array< {
|
|
value: string;
|
|
label: string | JSX.Element;
|
|
onChange?: ( value: string ) => void;
|
|
name: string;
|
|
content: JSX.Element;
|
|
} >;
|
|
selected: string | null;
|
|
// Should the selected option be highlighted with a border?
|
|
highlightChecked?: boolean;
|
|
}
|
|
|
|
const RadioControlAccordion = ( {
|
|
className,
|
|
instanceId,
|
|
id,
|
|
selected,
|
|
onChange,
|
|
options = [],
|
|
highlightChecked = false,
|
|
}: RadioControlAccordionProps ): JSX.Element | null => {
|
|
const radioControlId = id || instanceId;
|
|
|
|
const selectedOptionNumber = useMemo( () => {
|
|
return options.findIndex( ( option ) => option.value === selected );
|
|
}, [ options, selected ] );
|
|
|
|
if ( ! options.length ) {
|
|
return null;
|
|
}
|
|
return (
|
|
<div
|
|
className={ clsx(
|
|
'wc-block-components-radio-control',
|
|
{
|
|
'wc-block-components-radio-control--highlight-checked':
|
|
highlightChecked,
|
|
'wc-block-components-radio-control--highlight-checked--first-selected':
|
|
highlightChecked && selectedOptionNumber === 0,
|
|
'wc-block-components-radio-control--highlight-checked--last-selected':
|
|
highlightChecked &&
|
|
selectedOptionNumber === options.length - 1,
|
|
},
|
|
className
|
|
) }
|
|
>
|
|
{ options.map( ( option ) => {
|
|
const hasOptionContent =
|
|
typeof option === 'object' && 'content' in option;
|
|
const checked = option.value === selected;
|
|
return (
|
|
<div
|
|
className={ clsx(
|
|
'wc-block-components-radio-control-accordion-option',
|
|
{
|
|
'wc-block-components-radio-control-accordion-option--checked-option-highlighted':
|
|
checked && highlightChecked,
|
|
}
|
|
) }
|
|
key={ option.value }
|
|
>
|
|
<RadioControlOption
|
|
name={ `radio-control-${ radioControlId }` }
|
|
checked={ checked }
|
|
option={ option }
|
|
onChange={ ( value ) => {
|
|
onChange( value );
|
|
if ( typeof option.onChange === 'function' ) {
|
|
option.onChange( value );
|
|
}
|
|
} }
|
|
/>
|
|
{ hasOptionContent && checked && (
|
|
<div
|
|
className={ clsx(
|
|
'wc-block-components-radio-control-accordion-content',
|
|
{
|
|
'wc-block-components-radio-control-accordion-content-hide':
|
|
! checked,
|
|
}
|
|
) }
|
|
>
|
|
{ option.content }
|
|
</div>
|
|
) }
|
|
</div>
|
|
);
|
|
} ) }
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default withInstanceId( RadioControlAccordion );
|
|
export { RadioControlAccordion };
|