omnibar
v2.1.1
Расширяемый компонент поиска для React.
Демо-версию можно найти в этом репозитории.
$ npm i -S omnibarИмпортируйте модуль и ваши расширения.
import Omnibar from 'omnibar' ;
import Foo from './Foo' ;
import Bar from './Bar' ;Отобразите это в своем компоненте
export default function MyComponent ( ) {
return < Omnibar placeholder = "Enter keyword" extensions = { [ Foo , Bar ] } / > ;
} В приведенном ниже примере возвращается простой список элементов. <Omnibar /> отобразит элемент привязки со схемой элемента результата по умолчанию.
{
title: string ;
url: string ;
} export default function FooExtension ( ) {
return [
{ title : 'Dropbox' , url : 'https://dropbox.com' } ,
{ title : 'GitHub' , url : 'https://github.com' } ,
{ title : 'Facebook' , url : 'https://facebook.com' } ,
] ;
} Расширения также могут возвращать Promise , которое разрешает список элементов.
Например, учитывая конечную точку API https://myapi.com/ , которая принимает параметр запроса q , она вернет ответ JSON следующим образом:
{
"items" : [
{ "name" : " foo " , "website" : " foo.com " },
{ "name" : " bar " , "website" : " bar.com " }
]
} Ваше расширение может возвращать Promise , которое преобразуется в список элементов. В приведенном ниже примере выполняется запрос к нашей поддельной конечной точке API и сопоставляет ее схему данных со схемой привязки по умолчанию.
export default function SearchExtension ( query ) {
return fetch ( `https://myapi.com/?q= ${ query } ` )
. then ( resp => resp . json ( ) . items . map ( item => ( {
title : item . name ,
url : item . website ,
} ) ; Если вы хотите отображать дополнительные данные в списках результатов, например миниатюры, вы можете передать функцию рендеринга в свойство render в вашем экземпляре <Omnibar /> .
В приведенном ниже примере схема элемента результата меняется на следующую:
{
owner: {
avatar_url: string ;
}
html_url: string ;
full_name: string ;
} class MyComponent extends React . Component {
render ( ) {
return (
< Omnibar placeholder = "Search GitHub" extensions = { [ GitHub ] } >
{ ( { item } ) => < div > { item . full_name } < / div > }
< / Omnibar >
) ;
}
} Или вы можете использовать функцию render , чтобы указать свой собственный компонент:
function ResultItem ( { item } ) {
return (
< div >
< img src = { item . owner . avatar_url } width = { 30 } height = { 30 } / >
< a href = { item . html_url } > { item . full_name } < / a>
< / div >
) ;
}
class MyComponent extends React . Component {
render ( ) {
return (
< Omnibar
placeholder = "Search GitHub"
extensions = { [ GitHub ] }
render = { ResultItem }
/ >
) ;
}
} command() Помощник command() обернет ваше расширение префиксом команды и отфильтрует только те, которые соответствуют команде.
Пример :
import { command } from 'omnibar' ;
function MyExtension ( ) {
return [
// ...items
] ;
}
export default command ( MyExtension , 'foo' ) ; В приведенном выше примере MyExtension будет запрошен, только если пользователь начнет свой запрос с ключевого слова foo .
foo test -> queries extensions
footest -> doesn't query extension
test -> doesn't query extension
withExtensions — это фабричный метод HOC для расширения вашего Omnibar с помощью собственных расширений.
Пример
import Omnibar , { withExtensions } from 'omnibar' ;
const GitSearchBar = withExtensions ( [ GitHub ] ) ( Omnibar ) ;
const NpmSearchBar = withExtensions ( [ Npm ] ) ( Omnibar ) ;
const GlobalSearchBar = withExtensions ( [ GitHub , Npm ] ) ( Omnibar ) ;
// renders a GitHub-only search bar
// <GitSearchBar />
// renders a Npm-only search bar
// <NpmSearchBar />
// renders the global search bar (includes GitHub, and Npm)
// <GlobalSearchBar />Это даст следующие результаты:
// <Omnibar extensions={[GitHub]} {...props} />
// <Omnibar extensions={[Npm]} {...props} />
// <Omnibar extensions={[GitHub, Npm]} {...props} /> withVoice — это еще один заводской метод HOC, позволяющий улучшить ваш Omnibar за счет распознавания голоса с использованием API WebSpeech.
Обратите внимание, что это экспериментальный вариант.
Пример
import Omnibar , { withVoice } from 'omnibar' ;
const VoiceBar = withVoice ( Omnibar ) ;
// voice-enhanced Omnibar
// <VoiceBar />
// regular Omnibar:
// <Omnibar /> В пакет omnibar включена функция compose() , которая позволяет вам применять все эти замечательные функции.
const GitVoiceSearch = withVoice ( withExtensions ( [ GitHub ] ) ) ( Omnibar ) ; const GitVoiceSearch = compose (
withVoice ,
withExtensions ( [ GitHub ] )
) ( Omnibar ) ;
// render
// <GitVoiceSearch /> | Опора | Тип | Необходимый? | Описание |
|---|---|---|---|
autoFocus | boolean | При желании сделайте автофокусировку Omnibar. | |
children | Function | Дополнительная функция рендеринга для каждого элемента результата. Аргументы: { item, isSelected, isHighlighted } | |
inputDelay | number | Установите задержку ввода, используемую для запроса расширений (по умолчанию: 100 мс). | |
maxResults | number | Максимальное количество результатов для отображения в целом. | |
maxViewableResults | number | Максимальное количество результатов, отображаемых в просматриваемом контейнере (до прокрутки). | |
onAction | Function | Примените обратный вызов действия при выполнении элемента. Аргументы: item | |
onQuery | Function | Срабатывает при выполнении запроса | |
placeholder | string | Заполнитель ввода | |
render | Function | Псевдонимы children | |
resultStyle | object | Переопределение объекта стиля для контейнера результатов | |
style | React.CSSProperties | Переопределение объекта стиля для элемента <input /> | |
value | string | Необязательное значение для отправки в омнибар. |
npm i или yarn в каталоге omnibar .npm link в каталоге omnibar .npm i или yarn в каталоге omnibar-www .npm link omnibar в каталоге omnibar-www .npm run dev в каталоге omnibar-www .Нравится то, что вы видите? Станьте патроном и поддержите меня ежемесячным пожертвованием.
MIT © Ву Тран
