Unduhan omnibar - pengunduhan kode sumber omnibar

omnibar

Kode sumber lainnya

v2.1.1

Unduh

Mahabar

Komponen pencarian yang dapat diperluas untuk React.

Demo

Demonya dapat ditemukan di repositori ini.

Memasang

$ npm i -S omnibar

Penggunaan

Impor modul dan ekstensi Anda

 import Omnibar from 'omnibar' ;
import Foo from './Foo' ;
import Bar from './Bar' ;

Render di komponen Anda

 export default function MyComponent ( ) {
  return < Omnibar placeholder = "Enter keyword" extensions = { [ Foo , Bar ] } / > ;
}

Memperluas Omnibar Anda

Ekstensi Sederhana

Contoh di bawah ini mengembalikan daftar item sederhana. <Omnibar /> akan merender item jangkar dengan skema item hasil default.

 {
  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' } ,
  ] ;
}

Hasil Berdasarkan Janji

Ekstensi juga dapat mengembalikan Promise yang menyelesaikan daftar item.

Misalnya, jika ada titik akhir API https://myapi.com/ yang menggunakan parameter permintaan q , maka akan mengembalikan respons JSON seperti ini:

{
  "items" : [
    { "name" : " foo " , "website" : " foo.com " },
    { "name" : " bar " , "website" : " bar.com " }
  ]
}

Ekstensi Anda dapat mengembalikan Promise yang ditetapkan menjadi daftar item. Contoh di bawah ini membuat permintaan ke titik akhir API palsu kami dan memetakan skema datanya dengan skema jangkar default.

 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 ,
        } ) ;

Perender Khusus

Jika Anda ingin menampilkan data tambahan dalam daftar hasil seperti thumbnail, Anda dapat meneruskan fungsi rendering ke prop render di instance <Omnibar /> Anda.

Contoh di bawah ini mengubah skema item hasil kita menjadi:

 {
  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 >
    ) ;
  }
}

Atau Anda dapat menggunakan prop render untuk menentukan komponen khusus Anda:

 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 }
      / >
    ) ;
  }
}

Dekorator Ekstensi

`command()`

Helper command() akan membungkus ekstensi Anda melalui awalan perintah dan hanya akan memfilter ekstensi yang cocok dengan perintah tersebut.

Contoh :

 import { command } from 'omnibar' ;

function MyExtension ( ) {
  return [
    // ...items
  ] ;
}

export default command ( MyExtension , 'foo' ) ;

Dalam contoh di atas, MyExtension akan dikueri hanya jika pengguna memulai kuerinya dengan kata kunci foo .

 foo test -> queries extensions
footest -> doesn't query extension
test -> doesn't query extension

Komponen Orde Tinggi

Perluas Omnibar Anda

withExtensions adalah metode pabrik HOC untuk menyempurnakan Omnibar Anda dengan ekstensi Anda sendiri.

Contoh

 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 />

Ini akan menghasilkan hasil di bawah ini:

 // <Omnibar extensions={[GitHub]} {...props} />

// <Omnibar extensions={[Npm]} {...props} />

// <Omnibar extensions={[GitHub, Npm]} {...props} />

Perintah Suara

withVoice adalah metode pabrik HOC lainnya untuk menyempurnakan Omnibar Anda dengan pengenalan suara menggunakan WebSpeech API.

Perhatikan bahwa ini bersifat eksperimental.

Contoh

 import Omnibar , { withVoice } from 'omnibar' ;

const VoiceBar = withVoice ( Omnibar ) ;

// voice-enhanced Omnibar
// <VoiceBar />

// regular Omnibar:
// <Omnibar />

Menyusun Omnibar Anda

Termasuk dalam paket omnibar adalah fungsi compose() yang memungkinkan Anda menerapkan semua fitur bagus ini.

Sebelum

 const GitVoiceSearch = withVoice ( withExtensions ( [ GitHub ] ) ) ( Omnibar ) ;

Setelah

 const GitVoiceSearch = compose (
  withVoice ,
  withExtensions ( [ GitHub ] )
) ( Omnibar ) ;

// render
// <GitVoiceSearch />

Alat peraga

Menopang	Jenis	Keterangan
`autoFocus`	`boolean`	Secara opsional, buat Fokus otomatis Omnibar.
`children`	`Function`	Fungsi rendering opsional untuk setiap item hasil. Argumen: `{ item, isSelected, isHighlighted }`
`inputDelay`	`number`	Menyetel penundaan input yang digunakan untuk menanyakan ekstensi (Default: 100 md)
`maxResults`	`number`	Jumlah hasil maksimum untuk ditampilkan secara keseluruhan.
`maxViewableResults`	`number`	Jumlah maksimum hasil yang akan ditampilkan dalam penampung yang dapat dilihat (sebelum digulir).
`onAction`	`Function`	Menerapkan panggilan balik tindakan ketika item dieksekusi. Argumen: `item`
`onQuery`	`Function`	Dipicu saat kueri dibuat
`placeholder`	`string`	Masukkan pengganti
`render`	`Function`	Alias `children`
`resultStyle`	`object`	Penggantian objek gaya untuk wadah hasil
`style`	`React.CSSProperties`	Penggantian objek gaya untuk elemen `<input />`
`value`	`string`	Nilai opsional untuk dikirim ke Omnibar.