Гутенберг: Как бороться с «перезагрузкой» в RangeControl? - PullRequest
Новая
       122

Гутенберг: Как бороться с «перезагрузкой» в RangeControl?

0 голосов
/ 04 мая 2020

Я добавляю возможность для кого-то установить ширину элемента. Я использую RangeControl и настроил его с помощью allowReset = true.

Проблема, с которой я столкнулся, заключается в том, что когда кто-то нажимает Reset, ползунок перемещается, но цифры не меняются. Они остаются такими, какими они были.

Если я введу ie в onWidthChange и прислушаюсь к value, равному undefined, тогда ползунок переместится и цифры изменятся, однако, если пользователь должен был удалить цифры перед тем, как поместить в новых номерах поле заполняется значением по умолчанию, как только все номера будут удалены. Я чувствую, что это сбивает с толку пользователей, если кто-то просто очищает их, прежде чем вводить новое значение. Это не очень хороший пользовательский опыт.

Как мне обойти это? Я не фанат в любом случае.

Настройка по умолчанию 

viewerWidth: {
    type: 'number',
    default: defaultWidth,
},

При изменении 

const onWidthChange = ( value ) => {
    // handle the reset button
    if ( undefined === value ) {
        value = defaultWidth;
    }
    props.setAttributes( {
        viewerWidth: value,
    } );
};

Регулировка диапазона 

<RangeControl
    label={ __(
        'Viewer Width (pixels)'
    ) }
    help="By default 0 will be 100%. Minimum 580px."
    value={ props.attributes.viewerWidth }
    onChange={ onWidthChange }
    min={ 0 }
    max={ 5000 }
    allowReset={ true }
/>
...