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 الخاص بك

ملحق بسيط

يعرض المثال أدناه قائمة بسيطة من العناصر. سيعرض <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 يحل قائمة العناصر.

على سبيل المثال، نظرًا لنقطة نهاية واجهة برمجة التطبيقات https://myapi.com/ التي تأخذ معلمة الطلب q ، فسوف تُرجع استجابة JSON كما يلي:

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

يمكن أن يُرجع ملحقك Promise يتم حله في قائمة العناصر. يقدم المثال أدناه طلبًا إلى نقطة نهاية واجهة برمجة التطبيقات المزيفة لدينا ويعين مخطط بياناتها باستخدام مخطط الربط الافتراضي.

 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

مكونات النظام العالي

تمديد Omnibar الخاص بك

إن withExtensions عبارة عن طريقة مصنع ذات ترتيب مخصص لتحسين 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 الخاص بك

تتضمن حزمة 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`	قيمة اختيارية لإرسالها إلى Omnibar.