الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

رد فعل شجرة معقدة

مكون شجرة غير قابل للوصول مع خاصية التحديد المتعدد والسحب والإفلات

انظر إلى الوثائق الرسمية لرؤية المزيد من الأمثلة والوثائق الأكثر شمولاً. يتم تناول العديد من المشكلات أو الأسئلة الشائعة في صفحة الأسئلة الشائعة.

سجل التغيير متاح على https://rct.lukasbach.com/docs/changelog. تحقق من ملاحظات الإصدار v2 عند الترحيل من الإصدار v1.x إلى الإصدار v2.x.

الرعاة

يتم دعم تطوير شجرة التفاعل المعقدة من قبل المجتمع. شكر خاص ل:



تعرف على كيفية دعم تطوير شجرة التفاعل المعقدة.

تثبيت

لبدء استخدام React Complex Tree، قم بتثبيته على مشروعك باعتباره تبعية عبر 

 npm install react-complex-tree
yarn add react-complex-tree

ثم قم باستيراده وإضافة هيكل الشجرة الخاص بك به 

 import { UncontrolledTreeEnvironment , Tree , StaticTreeDataProvider } from 'react-complex-tree' ;

< UncontrolledTreeEnvironment
  dataProvider = { new StaticTreeDataProvider ( longTree . items , ( item , data ) => ( { ... item , data } ) ) }
  getItemTitle = { item => item . data }
  viewState = { { } }
>
  < Tree treeId = "tree-1" rootItem = "root" treeLabel = "Tree Example" / >
< / UncontrolledTreeEnvironment > ;

مزيد من التفاصيل في دليل البدء. يعد الدليل الخاص بكيفية دمج البيانات مع موفر بيانات الشجرة الثابتة أيضًا نقطة انطلاق جيدة لفهم كيفية دمج البيانات مع React Complex Tree.

سمات

  • غير رأي

    لا تضع React Complex Tree أي افتراضات حول أي جماليات لتصميم الويب الخاص بك أو أي تقنيات تستخدمها. إن عملية العرض متروكة لك تمامًا، ويمكن تخصيص كل عقدة مكتوبة في DOM. يتم توفير الإعدادات الافتراضية المعقولة المصممة بواسطة فئات CSS القابلة للتخصيص بسهولة لتسهيل التكامل.

  • يمكن الوصول إليها

    يتوافق هيكل الشجرة مع مواصفات W3C للأشجار التي يمكن الوصول إليها. وهو يدعم برامج قراءة الشاشة وينفذ جميع تفاعلات لوحة المفاتيح الشائعة بحيث يكون كل تفاعل، بدءًا من نقل التركيز إلى سحب العناصر، ممكنًا دون استخدام الماوس.

  • سحب وإسقاط قوي

    توفر الشجرة الإمكانات المتوقعة التي يتوقعها المستخدمون المتميزون من الأدوات المتقدمة. حدد أكبر عدد تريده من العناصر، واسحبها إلى أي مكان داخل نفس الشجرة أو أي شجرة أخرى! تأتي React Complex Tree مع العديد من خيارات التخصيص للسحب والإسقاط، مثل عدم السماح بإعادة الترتيب أو تمكين السحب أو الإسقاط على عناصر معينة فقط.

  • ضوابط لوحة المفاتيح الكاملة

    يمكن التحكم بالشجرة بالكامل عبر لوحة المفاتيح. وهو ينفذ جميع عناصر التحكم التي اقترحها W3C لتسهيل الوصول إلى الأشجار، ويوفر المزيد من عناصر التحكم للسحب والإسقاط أو البحث عن العناصر أو إعادة تسميتها.

  • التبعيات صفر

    نحن نعلم كم هو مزعج إضافة حزمة وينتهي الأمر بمئات من تبعيات الأقران. نظرًا لأن React Complex Tree لا تضع أي افتراضات بشأن أي تبعيات لديك، فإننا أيضًا لا نحتاج إلى تشويش مشروعك بحزم إضافية. عند إضافة React Complex Tree إلى الحزمة الخاصة بك، فإنك تضيف ذلك فقط دون أي تبعيات أخرى.

  • اختيار متعدد

    بخلاف المكتبات الشجرية الأكثر بساطة، تتيح لك React Complex Tree تحديد العدد الذي تريده من العناصر، ونقلها جميعًا مرة واحدة عن طريق السحب إلى موقع مختلف. لماذا توفر للمستخدمين وظائف أقل، بينما يمكنك تقديم إمكانات شجرة قوية دون أي جهد إضافي؟ جرب ذلك في العرض التوضيحي أعلاه وحدد عناصر متعددة مرة واحدة من خلال الضغط باستمرار على لوحة المفاتيح أثناء النقر على العناصر، ثم سحبها كلها مرة واحدة إلى موقع مختلف.

  • إعادة تسمية المدمج في

    توفر React Complex Tree إمكانية إعادة التسمية كميزة أصلية بفضل إمكاناتها. حدد أي عنصر واضغط على F2 لبدء إعادة تسمية العنصر. يوفر هذا طريقة أكثر سهولة لإعادة تسمية العناصر للمستخدمين دون تنفيذ حلول الحوار المخصصة التي تكون أكثر تعطيلًا لسير عمل المستخدمين.

  • وظيفة البحث

    هل سبق لك أن حاولت العثور على هذا الملف في شجرة ملفات ضخمة وفوضوية تعرف بوجودها، ولكن ليس لديك أي فكرة عن مكانها؟ ما عليك سوى البدء في الكتابة مع التركيز على الشجرة، وسيظهر العنصر الأول المطابق لبحثك. يؤدي هذا أيضًا إلى تحسين إمكانية الوصول إلى الشجرة حيث يمكن لمستخدمي لوحة المفاتيح فقط التنقل بسهولة أكبر في بنية الشجرة.

  • بيئات متعددة الأشجار

    يمكنك استخدام العديد من الأشجار في تطبيق الويب الخاص بك والتي تشترك في حالة مشتركة، وتكون قادرة على التفاعل مع بعضها البعض. يتم توفير عناصر الحالة والشجرة لمكون موفر التفاعل الشائع، ويمكن بسهولة دمج أي عدد تريده من الأشجار بمجرد إضافة مكونات الشجرة أسفل الموفر. لا تحتاج الأشجار إلى توفير حالتها الخاصة، فهي تحتاج فقط إلى معرف وعنصر الجذر الخاص بها، ويتم التعامل مع كل المنطق الآخر بواسطة الموفر.

  • الواجهات الخاضعة للرقابة وغير الخاضعة للرقابة

    أسهل طريقة لاستخدام React Complex Tree هي استخدام بيئة شجرية غير متحكم فيها تحافظ على حالة الشجرة، أي العناصر التي تم تحديدها وتوسيعها وما إلى ذلك. ما عليك سوى توفير موفر بيانات يحدد كيفية تحميل العناصر بشكل غير متزامن، وتتولى البيئة الباقي. ومع ذلك، إذا كنت تريد المزيد من التحكم، يمكنك بدلاً من ذلك استخدام البيئة الخاضعة للتحكم للتخصيص الكامل.

  • مدعوم من React وTypeScript

    يتم تشغيل React Complex Tree بواسطة React (duh) ويتم دمجها بسهولة في مشاريع React الحالية بمجرد استيراد المكونات المتوفرة واستخدامها. يتم توفير معلومات شاملة عن النوع كواجهات TypeScript، التي تسهل التكامل وتوفر أمانًا إضافيًا للكتابة، بغض النظر عما إذا كنت تستخدم TypeScript في مشروعك أم لا.

تلميحات للمساهمة

إذا كنت ترغب في تطوير RCT محليًا، فإليك بعض التلميحات:

  • استخدم volta للتأكد من تثبيت إصدار NodeJS وYarn المتوافق
  • قم بتشغيل yarn لتثبيت التبعيات
  • قم بتشغيل yarn build مرة واحدة محليًا قبل تشغيل أي أوامر تطوير
  • قم بتشغيل yarn start لبدء docusaurus والحزمة في وضع المراقبة، و/أو yarn storybook لتشغيل القصص القصيرة
  • تأكد من تشغيل linter والاختبارات قبل دفع التغييرات
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل