[Settings] Hooks

Option Hooks

Sometimes required to do something when some option(s) is changed. To do this, you need to use special hooks on updating options. The hook registration function setUpdateHook is available as one of props in your component. Register a hook when necessary (for example, via useEffect) and it will be called when the value of the required option is changed:

❗ Улучшить пример, сейчас он немного путает... зачем сбрасывать иконки??

// WordPress dependencies

const { useState, useEffect, useCallback } = wp.element;

// Zukit dependencies

const { ZukitPanel, SelectItemControl } = wp.zukit.components;

const MypluginSection = ({
    options,
    updateOptions,
    ajaxAction,
    setUpdateHook,
}) => {

    const [icons, setIcons] = useState(null);

    const onToggle = useCallback(() => {
        if(icons === null) {
            ajaxAction('myplugin_get_icons', data => {
                const iconset = get(data, 'icons', []);
                if(iconset.length) setIcons(iconset);
            });
        }
    }, [ajaxAction, icons]);

    // reset icons set when 'icons' or 'more_icons' option is updated
    useEffect(() => {
        setUpdateHook(['icons', 'more_icons'], () => {
            setIcons(null);
        });
    }, [setIcons, setUpdateHook]);

    return (
        <ZukitPanel id="icons" initialOpen={ false } onToggle={ onToggle }>
            <SelectItemControl
                columns={ 3 }
                label={ __('Select Icon', 'myplugin') }
                options={ icons }
                selectedItem={ options.icon }
                onClick={ value => updateOptions({ icon: value }) }
                transformValue={ value => (<div className={ `dashicons ${value}` }></div>) }
            />
        </ZukitPanel>
    );
};

export default MypluginSection;