ดาวน์โหลดแถบ omnibar - ดาวน์โหลดซอร์สโค้ด omnibar

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 ของคุณด้วยการจดจำเสียงโดยใช้ WebSpeech API

โปรดทราบว่านี่เป็นการทดลอง

ตัวอย่าง

 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`	ตั้งค่าความล่าช้าในการป้อนข้อมูลที่ใช้สำหรับการสืบค้นส่วนขยาย (ค่าเริ่มต้น: 100ms)
`maxResults`	`number`	จำนวนผลลัพธ์สูงสุดที่จะแสดงโดยรวม
`maxViewableResults`	`number`	จำนวนผลลัพธ์สูงสุดที่จะแสดงในคอนเทนเนอร์ที่ดูได้ (ก่อนเลื่อน)
`onAction`	`Function`	ใช้การเรียกกลับการดำเนินการเมื่อมีการดำเนินการรายการ อาร์กิวเมนต์: `item`
`onQuery`	`Function`	ทริกเกอร์เมื่อมีการสอบถาม
`placeholder`	`string`	ตัวยึดตำแหน่งอินพุต
`render`	`Function`	นามแฝงของ `children`
`resultStyle`	`object`	การแทนที่วัตถุสไตล์สำหรับคอนเทนเนอร์ผลลัพธ์
`style`	`React.CSSProperties`	แทนที่วัตถุสไตล์สำหรับองค์ประกอบ `<input />`
`value`	`string`	ค่าทางเลือกที่จะส่งไปยังแถบอเนกประสงค์