react multi select

Multi Select

Kenshoo Multi Select Component

React-Multi-Select Demo

Multi Select هو مكون مستقيم للأمام يساعد المستخدم على تحديد عناصر متعددة بطريقة واضحة وقابلة للتصفية.

تثبيت

التثبيت باستخدام NPM:

 npm install @kenshooui/react-multi-select --save

التثبيت باستخدام الغزل:

 yarn add @kenshooui/react-multi-select

أنماط الاستيراد

قم بتضمين CSS للمكون على تطبيقك

 import "@kenshooui/react-multi-select/dist/style.css" 

كيفية استخدام

 import React , { Component } from "react" ;
import MultiSelect from "@kenshooui/react-multi-select" ;

class Example extends Component {
  constructor ( props ) {
    super ( props ) ;
    this . handleChange = this . handleChange . bind ( this ) ;
    this . state = {
      items : [
        { id : 0 , label : "item 1" } ,
        { id : 2 , label : "item 2" , disabled : true } ,
        { id : 3 , label : "item 3" , disabled : false } ,
        { id : 4 , label : "item 4" }
      ] ,
      selectedItems : [ ]
    } ;
  }

  handleChange ( selectedItems ) {
    this . setState ( { selectedItems } ) ;
  }
  render ( ) {
    const { items , selectedItems } = this . state ;
    return (
      < MultiSelect
        items = { items }
        selectedItems = { selectedItems }
        onChange = { this . handleChange }
      />
    ) ;
  }
} 

ملكيات

اسم	يكتب	تقصير	وصف
items	List	[]	قائمة العناصر.
selectedItems	Array	[]	قائمة محددة للبدء مع (مجموعة فرعية من العناصر).
onChange	function	() => {}	رد الاتصال للحدث الذي تم تغييره.
loading	boolean	خطأ شنيع	تبديل لإظهار إشارة التحميل.
messages	Object	{}	رسائل مخصصة. يرجى الاطلاع أدناه للحصول على رسائل متوفرة.
showSearch	boolean	حقيقي	تبديل لإظهار خيار البحث.
showSelectAll	boolean	حقيقي	تبديل لإظهار الاختيار كل الخيار في القائمة.
showSelectedItems	boolean	حقيقي	تبديل لإظهار العناصر المحددة في الجزء الأيمن.
wrapperClassName	String	'' '	اسم فئة الغلاف - يستخدم لتخصيص النمط.
height	number	400	ارتفاع قائمة العناصر المتاحة.
itemHeight	number	40	ارتفاع عنصر في القائمة.
selectedItemHeight	number	itemHeight	ارتفاع العنصر المحدد في القائمة.
selectAllHeight	number	itemHeight	سوف يستخدم ارتفاع مكون Selecall ، افتراضيًا قيمة العنصر.
maxSelectedItems	number		يحدد الحد الأقصى للعناصر التي يمكن تحديدها ، ويتجاوز showselectall.
filterFunction	function	بناء على الملصق	الوظيفة المستخدمة لتصفية العناصر بناءً على استعلام البحث.
searchRenderer	Component		مكون لاستبدال مكون البحث الافتراضي.
selectedItemRenderer	Component		مكون لاستبدال مكون العنصر المحدد الافتراضي في قائمة الوجهة.
loaderRenderer	Component		مكون لاستبدال مكون المحمل الافتراضي.
selectAllRenderer	Component		مكون لاستبدال الافتراضي حدد كل المكون.
itemRenderer	Component		مكون لاستبدال مكون العنصر الافتراضي في قائمة المصدر.
selectionStatusRenderer	Component		مكون لاستبدال مكون حالة التحديد الافتراضي.
noItemsRenderer	Component		مكون لاستبدال مكون العناصر الافتراضي.
searchValue	string		قيمة حقل البحث.
searchValueChanged	function		وظيفة للتعامل مع تغيير حقل البحث. يقبل القيمة كوسيطة واحدة.
responsiveHeight	string	400 بكسل	ارتفاع مستجيب لمكون الغلاف ، يمكن أن يرسل في المئة على سبيل المثال: 70%
withGrouping	boolean	خطأ شنيع	سيتم تجميع العناصر الخاصة بك بواسطة قيم Prop Group - راجع قسم "تجميع العناصر" أدناه
showSelectedItemsSearch	boolean	خطأ شنيع	تبديل لإظهار خيار البحث في قائمة الكشف.
searchSelectedItemsValue	string		قيمة حقل البحث لقائمة الوجهة.
searchSelectedItemsChanged	function		وظيفة للتعامل مع تغيير حقل البحث لقائمة الوجهة. يقبل القيمة كوسيطة واحدة.
selectedItemsFilterFunction	function	بناء على الملصق	هو نفسه FilterFunction افتراضيًا لتصفية العناصر بناءً على استعلام البحث في قائمة الوجهة.
isLocked	function	item => item.disabled	وظيفة لاستخدامها لتحديد ما إذا كان العنصر مغلقًا أم لا

التخصيص

العارضون

يمكنك استبدال عارضات المكونات التالية:

غرض

استخدم itemRenderer لاستبدال المكون الافتراضي.

يتلقى كل عنصر الدعائم التالية:

item - يحتفظ ببيانات العنصر الخاص بك

height - يتلقى الارتفاع المحدد في القائمة

onClick - الحدث لتبديل الاختيار على المكون

checked - يشير إلى ما إذا تم تحديد العنصر

indeterminate - يستخدمه SELECT All Componnt لعرض الوضع غير المحدد

disabled - يحدد ما إذا كان ينبغي تعطيل العنصر. لن يتم النقر على العنصر للاختيار وسيتم تجاهله عند النقر فوق "حدد الكل".

group - عنصر المجموعة - بدون مربع اختيار ، غير قابل للنقر ، اللون الأسود

حدد كل شيء

استخدم selectAllRenderer لاستبدال المكون الافتراضي.

يتلقى مكون SelectAll الدعائم التالية:

height - يتلقى الارتفاع المحدد من قبل الوالد

onClick - يحفز الحدث Select All/مسح All All At Click

isAllSelected - يشير إلى أنه يتم اختيار جميع العناصر

selectAllMessage - يحدد رسالة المكون SelectAll

selectedIds - يحمل قائمة بمعرفات جميع العناصر المحددة

عنصر محدد

استخدم selectAllRenderer لاستبدال المكون الافتراضي.

يتلقى مكون SelectedItem الدعائم التالية:

item - يحتفظ ببيانات العنصر الخاص بك

height - يتلقى الارتفاع المحدد بواسطة القائمة

يمكنك تعطيل عناصر محددة محددة عن طريق تمرير item.disabled: true أو Pass isLocked التي سيتم استخدامها لتحديد ما إذا كان العنصر معاقًا.

مثال (محدد وعلق):

 function Exemple ( ) {
  const items = [ { id : 0 , label : 'item 0' } , { id : 1 , label : 'item 1' } ] ;
  return (
        < MultiSelect
          isLocked = { item => item . label === 'item 0' }
          items = { items }
          selectedItems = { items }
        />
}

يبحث

استخدم searchRenderer لاستبدال المكون الافتراضي.

يتلقى مكون Search الدعائم التالية:

searchPlaceholder - يحدد الرسالة التي سيتم عرضها في صاحب البحث

onChange - يؤدي إلى تغيير قيمة البحث

حالة الاختيار

استخدم selectionStatusRenderer لاستبدال المكون الافتراضي.

يتلقى مكون SelectionStatus الدعائم التالية:

selected - مجموعة من جميع المعرفات المحددة

clearAll - رد الاتصال لمسح جميع العناصر المحددة

clearAllMessage - نص للعرض في النص المسح

noneSelectedMessage - نص لعرضه عند تحديد أي عناصر

selectedMessage - نص للعرض عندما يكون هناك عناصر محددة

اللودر

استخدم loaderRenderer لاستبدال المكون الافتراضي.

لا يتلقى أي الدعائم.

لا توجد عناصر

استخدم noItemsRenderer لاستبدال المكون الافتراضي.

لا يتلقى أي الدعائم.

وظيفة البحث

من أجل استيعاب مرشحات العناصر المعقدة ، يمكنك توفير طريقة التصفية الخاصة بك في filterFunction Prop.

مثال (افتراضي):

 value => item =>
  String ( item . label )
    . toLowerCase ( )
    . includes ( value . toLowerCase ( ) )

يؤدي البحث على جانب الخادم

 value => {
    callServer ( value ) . then ( items => this . setState ( { items } ) ) ;
    // At the end return the expected method
    return item => true ;
} 

رسائل

يمكنك استخدام رسائلك الخاصة. هنا كائن الرسائل الافتراضية:

 messages: {
    searchPlaceholder : "Search..." ,
    noItemsMessage : "No Items..." ,
    noneSelectedMessage : "None Selected" ,
    selectedMessage : "selected" ,
    selectAllMessage : "Select All" ,
    clearAllMessage : "Clear All" ,
    disabledItemsTooltip : "You can only select 1 file"
  } 

تجميع العناصر

يمكنك أيضًا إضافة التجميع إلى العناصر الخاصة بك - إضافة دعامة جماعية مع اسم المجموعة كقيمة لكل عنصر من عناصرك وإضافة TithGrouping Prop أيضًا.

 < MultiSelect
    items = { [ { id : 1 , label : "item1" , group : "group1" } ,
            { id : 2 , label : "item2" , group : "group1" }
            { id : 3 , label : "item3" , group : "group2" } ] }
    withGrouping
    selectedItems = { selectedItems }
    onChange = { this . handleChange }
  /> 

كيفية المساهمة

إنشاء بيئة التنمية

1. مفترق المستودع وإنشاء فرعك من master .
2. تثبيت المشروع: yarn install
3. اختبارات التشغيل: yarn test أو yarn test:watch
4. Run Dev Environment: yarn storybook وتوجه إلى https: // localhost: 6006

إصدار تغيير

1. ادفع إلى جيثب.
2. إذا قمت بإصلاح خطأ أو رمز إضافي يجب اختباره ، فأضف الاختبارات.
3. افتح طلب سحب مع الإرشادات التالية:
   • اضبط بادئة العنوان على ميزة/خطأ وتزويد عنوان العلاقات العامة الوصفية.
   • أضف وصفًا إلى طلب السحب الذي يصف التغيير الخاص بك.
4. بمجرد إصدار طلب السحب الخاص بك ، سيتم تشغيل مجموعة الاختبار وعمليات الإنشاء وسيتم مراجعة التغيير.

التوافق

• رد فعل 16 أو أحدث