Current path: home/webdevt/www/cryptoimpot.fr/wp-content/themes/blocksy/static/js/editor/components/
?? Go up: /home/webdevt/www/cryptoimpot.fr/wp-content/themes/blocksy/static/js/editor
import { createElement, useRef } from '@wordpress/element'
import { __ } from 'ct-i18n'
import deepEqual from 'deep-equal'
import {
PanelBody,
__experimentalBoxControl as BoxControl,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
__experimentalUnitControl as UnitControl,
} from '@wordpress/components'
import OptionsPanel from '../../options/OptionsPanel'
import { getFirstLevelOptions } from '../../options/helpers/get-value-from-input'
import { optionWithDefault } from '../../options/GenericOptionType'
const ToolsWithOptionsPanel = ({
label,
options,
attributes,
setAttributes,
}) => {
const panelItems = getFirstLevelOptions(options)
return (
<ToolsPanel
label={label}
resetAll={() => {
const defaultValue = Object.keys(panelItems).reduce(
(acc, item) => {
return {
...acc,
[item]: panelItems[item].value,
}
},
{}
)
setAttributes(defaultValue)
}}>
{Object.keys(panelItems).map((optionId, index) => {
const option = panelItems[optionId]
return (
<ToolsPanelItem
isShownByDefault
onDeselect={() => {
setAttributes({
[optionId]: option.value,
})
}}
hasValue={() =>
!deepEqual(
option.value,
optionWithDefault({
value: attributes[optionId],
option,
})
)
}
key={optionId}
label={option.label}>
{index === 0 && (
<OptionsPanel
purpose="gutenberg"
onChange={(optionId, optionValue) => {
setAttributes({
[optionId]: optionValue,
})
}}
options={options}
value={attributes}
hasRevertButton={false}
/>
)}
</ToolsPanelItem>
)
})}
</ToolsPanel>
)
}
export default ToolsWithOptionsPanel