التعداد / الجمع

كيف يعمل التعداد

في Intlayer، يتم تحقيق التعداد من خلال دالة enu، التي تربط مفاتيح محددة بالمحتوى المقابل لها. يمكن أن تمثل هذه المفاتيح قيمًا رقمية، أو نطاقات، أو معرفات مخصصة. عند استخدامها مع React Intlayer أو Next Intlayer، يتم اختيار المحتوى المناسب تلقائيًا بناءً على لغة التطبيق والقواعد المعرفة.

إعداد التعداد

لإعداد التعداد في مشروع Intlayer الخاص بك، تحتاج إلى إنشاء وحدة محتوى تتضمن تعريفات التعداد. فيما يلي مثال على تعداد بسيط لعدد السيارات:

import { enu, type Dictionary } from "intlayer";

const carEnumeration = {
  key: "car_count",
  content: {
    numberOfCar: enu({
      "<-1": "أقل من ناقص سيارة واحدة",
      "-1": "ناقص سيارة واحدة",
      "0": "لا سيارات",
      "1": "سيارة واحدة",
      ">5": "بعض السيارات",
      ">19": "العديد من السيارات",
      "fallback": "قيمة بديلة", // اختياري
    }),
  },
} satisfies Dictionary;

export default carEnumeration;

في هذا المثال، تقوم الدالة enu بربط شروط مختلفة بمحتوى محدد. عند استخدامها في مكون React، يمكن لـ Intlayer اختيار المحتوى المناسب تلقائيًا بناءً على المتغير المعطى.

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

إذا لم يتم إعلان قيمة بديلة (fallback)، ستُعيد الدالة undefined إذا لم تتطابق أي من المفاتيح.

استخدام التعداد مع React Intlayer

لاستخدام التعداد في مكون React، يمكنك الاستفادة من الخطاف useIntlayer من حزمة react-intlayer. يقوم هذا الخطاف باسترجاع المحتوى الصحيح بناءً على المعرف المحدد. إليك مثالًا على كيفية استخدامه:

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const CarComponent: FC = () => {
  const { numberOfCar } = useIntlayer("car_count");

  return (
    <div>
      <p>
        {
          numberOfCar(0) // الناتج: لا توجد سيارات
        }
      </p>
      <p>
        {
          numberOfCar(6) // الناتج: بعض السيارات
        }
      </p>
      <p>
        {
          numberOfCar(20) // الناتج: العديد من السيارات
        }
      </p>
      <p>
        {
          numberOfCar(0.01) // الناتج: قيمة بديلة
        }
      </p>
    </div>
  );
};

في هذا المثال، يقوم المكون بضبط مخرجاته ديناميكيًا بناءً على عدد السيارات. يتم اختيار المحتوى الصحيح تلقائيًا، اعتمادًا على النطاق المحدد.

موارد إضافية

لمزيد من المعلومات التفصيلية حول التكوين والاستخدام، يرجى الرجوع إلى الموارد التالية:

• توثيق Intlayer CLI
• توثيق React Intlayer
• توثيق Next Intlayer

توفر هذه الموارد رؤى إضافية حول إعداد واستخدام Intlayer في بيئات مختلفة ومع أُطُر عمل متنوعة.