Компонент CustomSelectControl в WordPress позволяет пользователям выбирать элемент из меню с одним вариантом, при этом он предоставляет возможность для кастомизации стилей каждого элемента в меню. Это означает, что компонент не использует стандартный HTML-элемент <select>, а вместо этого предлагает более гибкое решение с возможностью стилизации, что делает его идеальным для интерфейсов с кастомными стилями.
Что такое CustomSelectControl?
Компонент CustomSelectControl представляет собой более продвинутую версию обычного селектора, но с возможностью применения кастомных стилей для каждого элемента меню. Если вам не нужно использовать стандартный <select>, а необходимо больше контроля над стилями, то CustomSelectControl — это подходящее решение.
Основные особенности компонента:
- Поддержка пользовательских стилей для каждого элемента списка.
- Возможность интеграции с любым React-приложением, поддерживающим интерфейс WordPress.
- Легкость в настройке и гибкость в использовании.
Пример 1: Неконтролируемый компонент
В этом примере мы создадим простое приложение, которое отображает выпадающий список с возможностью выбора размера шрифта. Компонент будет обновлять значение при выборе элемента:
import { useState } from 'react';
import { CustomSelectControl } from '@wordpress/components';
const options = [
{
key: 'small',
name: 'Small',
style: { fontSize: '50%' },
},
{
key: 'normal',
name: 'Normal',
style: { fontSize: '100%' },
},
{
key: 'large',
name: 'Large',
style: { fontSize: '200%' },
},
{
key: 'huge',
name: 'Huge',
style: { fontSize: '300%' },
},
];
function MyCustomSelectControl() {
const [ , setFontSize ] = useState();
return (
<CustomSelectControl
label="Font Size"
options={ options }
onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
/>
);
}
В этом примере компонент позволяет пользователю выбрать один из вариантов, и при выборе обновляется состояние.
Пример 2: Контролируемый компонент
Если вы хотите контролировать выбор извне (например, сохранить выбранное значение в родительском компоненте), можно использовать контролируемую версию компонента, которая принимает пропс value для выбора текущего элемента:
import { useState } from 'react';
import { CustomSelectControl } from '@wordpress/components';
const options = [
{
key: 'small',
name: 'Small',
style: { fontSize: '50%' },
},
{
key: 'normal',
name: 'Normal',
style: { fontSize: '100%' },
},
{
key: 'large',
name: 'Large',
style: { fontSize: '200%' },
},
];
function MyControlledCustomSelectControl() {
const [fontSize, setFontSize] = useState(options[0]); // Устанавливаем начальное значение
return (
<CustomSelectControl
label="Font Size"
options={options}
onChange={({ selectedItem }) => setFontSize(selectedItem)}
value={options.find(option => option.key === fontSize.key)} // Контролируемое значение
/>
);
}
Здесь компонент обновляет состояние родительского компонента с выбранным элементом, а также отображает текущее выбранное значение.
Пропсы компонента CustomSelectControl
Компонент CustomSelectControl имеет несколько пропсов, которые позволяют настроить поведение и внешний вид компонента.
Основные пропсы:
className: Дополнительный класс для стилизации компонента. Используется для добавления кастомных стилей.- Тип:
string - Опционально: Да
- Тип:
hideLabelFromVision: Скрывает метку компонента визуально, оставляя ее доступной для вспомогательных технологий.- Тип:
boolean - Опционально: Да
- Тип:
describedBy: Описание кнопки выбора для вспомогательных технологий. Если не передано, используется текст по умолчанию: «Currently selected: selectedItem.name».- Тип:
string - Опционально: Да
- Тип:
label: Метка для компонента (обязательный пропс).- Тип:
string - Обязательный: Да
- Тип:
onChange: Функция, которая вызывается при изменении внутреннего состояния компонента. ПараметрselectedItemсодержит выбранный элемент.- Тип:
(newValue: ChangeObject) => void - Опционально: Нет
- Тип:
options: Массив объектов с вариантами, которые могут быть выбраны.- Тип:
Array<Option> - Обязательный: Да
- Тип:
size: Размер компонента. Можно выбрать между значениями'default','small', и'__unstable-large'.- Тип:
'default' | 'small' | '__unstable-large' - Опционально: Да
- По умолчанию:
'default'
- Тип:
showSelectedHint: Показывает подсказку с выбранным элементом на кнопке выбора.- Тип:
boolean - Опционально: Да
- Тип:
value: Можно использовать для внешнего контроля выбранного значения (как в примере с контролируемым компонентом).- Тип:
Option - Опционально: Да
- Тип:
onMouseOver,onMouseOut,onFocus,onBlur: Обработчики событий для различных состояний кнопки выбора (например, наведение или потеря фокуса).- Тип:
MouseEventHandler<HTMLButtonElement>илиFocusEventHandler<HTMLButtonElement> - Опционально: Да
- Тип:
__next40pxDefaultSize: Опция для выбора большего размера по умолчанию, который станет стандартом в будущей версии.- Тип:
boolean - Опционально: Да
- По умолчанию:
false
- Тип:
Пример с дополнительными параметрами
Пример компонента, где для каждого элемента настроены индивидуальные стили и используется кастомный текст на кнопках:
import { useState } from 'react';
import { CustomSelectControl } from '@wordpress/components';
const options = [
{
key: 'small',
name: 'Small',
style: { fontSize: '50%' },
},
{
key: 'normal',
name: 'Normal',
style: { fontSize: '100%' },
},
{
key: 'large',
name: 'Large',
style: { fontSize: '200%' },
},
];
function Example() {
const [fontSize, setFontSize] = useState(options[0]);
return (
<CustomSelectControl
label="Font Size"
options={options}
onChange={({ selectedItem }) => setFontSize(selectedItem)}
value={options.find(option => option.key === fontSize.key)}
confirmButtonText="Confirm"
cancelButtonText="Cancel"
/>
);
}
Лучшие практики при использовании CustomSelectControl
- Использование кастомных стилей: Этот компонент идеально подходит для случаев, когда необходимо применить уникальные стили для каждого варианта в списке.
- Поддержка доступности: Убедитесь, что вы используете все доступные пропсы, такие как
labelиdescribedBy, для улучшения доступности компонента. - Не перегружайте компоненты: Старайтесь избегать слишком большого количества элементов в списке, так как это может затруднить выбор для пользователя.
Заключение
Компонент CustomSelectControl в WordPress с React — это мощный инструмент для создания настраиваемых селекторов с уникальными стилями. Он дает вам полный контроль над внешним видом и поведением элементов, что позволяет создавать более визуально привлекательные и функциональные интерфейсы.