Prop Getters Pattern In React

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

كمثال عملي، سنستخدم نفس المُكون Progress Bar الذي صممناه في مقال سابق، مع العلم أنه يُمكن الرجوع إلى المقال من هنا لمن يرغب في الإطلاع على الشرح التفصيلي لأجزاء المُكون، حيث سنركز فقط في هذا المقال على الجزء الذي يستخدم نمط Prop Getters.

تعريف نمط التصميم Prop Getters

في عالم ألعاب الفيديو، تُوفر وحدات التحكم (controllers) ميزة تعديل وظائف الأزرار وإعادة تخصيصها لتُناسب تفضيلات اللاعب. يمكنك مثلاً في لعبة FIFA تغيير زر التسديد أو التمرير إلى زر آخر. هذه القدرة على إعادة تخصيص وحدة التحكم تشبه كثيرا ما يفعله نمط Prop Getters. يُتيح لك هذا النمط إعادة تعيين وتغيير "خصائص" المكونات في تطبيقك، مما يمنحك القدرة على تكييف وظائفها ومظهرها بما يتوافق مع متطلباتك الخاصة.

بناءا على هذا المثال يُمكننا تعريف نمط الـ Prop Getters على أنه طريقة لإعطاء المزيد من القدرة على التحكم للمستخدمين في كيفية تخصيص المكونات. يتم ذلك من خلال توفير دوال (functions) تُعيد مجموعة من الخصائص (props)، والتي يُمكن للمستخدمين بعد ذلك استخدامها لتعديل وتخصيص المكونات. هذا يُشبه إلى حدٍ ما إعطاء الأشخاص عدة أدوات لتخصيص منتج ما حسب رغبتهم، بدلاً من تقديم المنتج بصورة نهائية لا يُمكن تعديلها.

مزايا نمط التصميم Prop Getters

• توفير خيارات تخصيص مرنة: يسمح نمط Prop Getters لمستخدمي المكون بتخصيص السلوك والمظهر بشكل أكثر دقة ومرونة. يمكن للمطورين تجاوز السلوك الافتراضي أو توسيعه بسهولة، مما يجعل المكونات أكثر قابلية للتكيف مع المتطلبات المُتغيرة.

// ❌ Without Prop Getters Pattern

<DropdownMenu
  className={`dropdown-menu ${true ? 'dropdown-menu-bordered' : ''} dropdown-menu-primary dropdown-menu-blue`}
  style={{
    overflow: "auto",
    border: true ? '1px solid blue' : 'none',
    padding: '10px',
    boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.2)',
    // ... المزيد من التنسيقات الخاصة بالقائمة الرئيسية
  }}
  // ... أي خصائص أخرى محددة للقائمة الرئيسية
>
  <DropdownMenuItem
    className="dropdown-item dropdown-item-small"
    style={{
      color: 'blue',
      backgroundColor: 'white',
      padding: '5px',
      margin: '5px',
      border: '1px solid lightgray',
      // ... المزيد من التنسيقات الخاصة بعنصر القائمة
    }}
    // ... أي خصائص أخرى محددة لعنصر القائمة
  >
    Item 1
  </DropdownMenuItem>
  <DropdownMenuItem
    className="dropdown-item dropdown-item-small"
    style={{
      color: 'blue',
      backgroundColor: 'white',
      padding: '5px',
      margin: '5px',
      border: '1px solid lightgray',
      // ... المزيد من التنسيقات الخاصة بعنصر القائمة
    }}
    // ... أي خصائص أخرى محددة لعنصر القائمة
  >
    Item 2
  </DropdownMenuItem>
  {/* المزيد من عناصر القائمة */}
</DropdownMenu>

// ✅ With Prop Getters Pattern

// 👉 use-dropdown-menu.ts
function getDropdownMenuProps({ colorScheme, accentColor, hasBorder, customProps }) {
  return {
    className: `dropdown-menu dropdown-menu-${colorScheme} dropdown-menu-${accentColor} ${hasBorder ? 'dropdown-menu-bordered' : ''}`,
    style: {
      overflow: customProps.scrollBehavior,
      border: hasBorder ? '1px solid blue' : 'none',
      padding: '10px',
      boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.2)',
      // ... أي تنسيقات أخرى
    },
    // ... أي خصائص أخرى
  };
}

function getDropdownMenuItemProps({ size }) {
  return {
    className: `dropdown-item dropdown-item-${size}`,
    style: {
      color: 'blue',
      backgroundColor: 'white',
      padding: '5px',
      margin: '5px',
      border: '1px solid lightgray',
      // ... أي تنسيقات أخرى
    },
    // ... أي خصائص أخرى
  };
}

// 👉 dropdown-menu.tsx
// أنظر كيف يبدو المُكون الآن أقل تعقيدا و واجهته أنظف مع سهولة التخصيص
<DropdownMenu {...getDropdownMenuProps({
  colorScheme: "primary",
  accentColor: "blue",
  hasBorder: true,
  customProps: {
    scrollBehavior: "auto",
  },
})}>
  <DropdownMenuItem {...getDropdownMenuItemProps({ size: "small" })}>
    Item 1
  </DropdownMenuItem>
  <DropdownMenuItem {...getDropdownMenuItemProps({ size: "small" })}>
    Item 2
  </DropdownMenuItem>
  {/* المزيد من عناصر القائمة */}
</DropdownMenu>

• تقليل تضخم الخصائص وتعقيدها: بدلاً من إضافة العديد من الخصائص لتغطية كل سيناريو ممكن، يمكن لـ Prop Getters تبسيط واجهة المكون. يتم تحقيق ذلك من خلال توفير وظائف تسمح بتخصيص دقيق دون الحاجة إلى إضافة العديد من الخصائص.