89 lines
1.9 KiB
TypeScript
89 lines
1.9 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import classnames from 'classnames';
|
|
import { withInstanceId } from '@wordpress/compose';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { RadioControlOption } from '../radio-control';
|
|
|
|
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;
|
|
}
|
|
|
|
const RadioControlAccordion = ( {
|
|
className,
|
|
instanceId,
|
|
id,
|
|
selected,
|
|
onChange,
|
|
options = [],
|
|
}: RadioControlAccordionProps ): JSX.Element | null => {
|
|
const radioControlId = id || instanceId;
|
|
|
|
if ( ! options.length ) {
|
|
return null;
|
|
}
|
|
return (
|
|
<div
|
|
className={ classnames(
|
|
'wc-block-components-radio-control',
|
|
className
|
|
) }
|
|
>
|
|
{ options.map( ( option ) => {
|
|
const hasOptionContent =
|
|
typeof option === 'object' && 'content' in option;
|
|
const checked = option.value === selected;
|
|
return (
|
|
<div
|
|
className="wc-block-components-radio-control-accordion-option"
|
|
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={ classnames(
|
|
'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 };
|