61 lines
1.4 KiB
JavaScript
61 lines
1.4 KiB
JavaScript
|
import './style.scss';
|
||
|
|
|
||
|
|
import {
|
||
|
|
__experimentalToggleGroupControl,
|
||
|
|
__experimentalToggleGroupControlOption,
|
||
|
|
ToggleGroupControl as __stableToggleGroupControl,
|
||
|
|
ToggleGroupControlOption as __stableToggleGroupControlOption,
|
||
|
|
} from '@wordpress/components';
|
||
|
|
import { Fragment, useState } from '@wordpress/element';
|
||
|
|
|
||
|
|
const ToggleGroupControl =
|
||
|
|
__stableToggleGroupControl || __experimentalToggleGroupControl;
|
||
|
|
const ToggleGroupControlOption =
|
||
|
|
__stableToggleGroupControlOption || __experimentalToggleGroupControlOption;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Component Class
|
||
|
|
*
|
||
|
|
* @param props
|
||
|
|
*/
|
||
|
|
export default function ToggleGroupCustomControl(props) {
|
||
|
|
const { children, options } = props;
|
||
|
|
|
||
|
|
const [collapsed, setCollapsed] = useState(options[0].category);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="vpf-component-toggle-group-control">
|
||
|
|
<ToggleGroupControl
|
||
|
|
className="vpf-component-toggle-group-control-toggle"
|
||
|
|
value={collapsed}
|
||
|
|
onChange={(val) => {
|
||
|
|
setCollapsed(val);
|
||
|
|
}}
|
||
|
|
isBlock
|
||
|
|
>
|
||
|
|
{options.map((option) => {
|
||
|
|
return (
|
||
|
|
<ToggleGroupControlOption
|
||
|
|
key={option.category}
|
||
|
|
value={option.category}
|
||
|
|
label={option.title}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</ToggleGroupControl>
|
||
|
|
|
||
|
|
{options.map((option) => {
|
||
|
|
if (collapsed === option.category) {
|
||
|
|
return (
|
||
|
|
<Fragment key={option.category}>
|
||
|
|
{children(option)}
|
||
|
|
</Fragment>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return null;
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|