How can I add conditional control field in Inspector controls of Gutenberg?

Question

I'm developing a countdown Block for Gutenberg. I have 7 styles in the block, So I want to show/hide some control fields in the inspector control based on the style.

As far I know Gutenberg didn't introduce conditional field yet. So I want to do it by custom code. Here is my full code for the inspector controls. https://pastebin.com/177BDgMQ

And here is a screenshot of what i want. I'm a javascript beginner, so can't understand how can I apply a condition in tenter code herehere.

Answer 1

I've learned how to put the condition. The condition should be like this:

{ style == 2 && (
<PanelColor
    title={ __( 'Text Bg Color', 'prefixx' ) }
    colorValue={ textBgColor }
    initialOpen={ false }
>
    <ColorPalette
        value={ textBgColor }
        onChange={ textBgColor => setAttributes( { textBgColor } ) }
    />
</PanelColor>
) }