كيفية بناء زر ذكي باستخدام React

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

يجب أن تعلم في وقت مبكر أن معظم التصميم هنا عبارة عن Bootstrap. يبدو جيدًا ومنتجًا داخليًا ، لذا لا نصلح شيئًا لم ينكسر.

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

ملاحظة جانبية: "VAB" هي كلمة سويدية تشير إلى البقاء في المنزل مع ابنك المريض. هناك فرق بين القيام بذلك والمرض نفسك هنا ، سواء في الأجر أو في إجازة!

التحقق من وجود سجل موجود

كانت الخطوة الأولى هي إظهار ما إذا كان لدى المستخدم سجل لليوم المعني أم لا. كما هو الحال في كل مشروع React أعرفه ، كنا نأخذ قائمة من واجهة برمجة التطبيقات (الخاصة بنا) ونكررها. نظرًا لأن API ستُرجع قائمة بالسجلات الحالية وتتجاهل الأيام بدون سجلات ، سنحتاج إلى إعداد مجموعة الأيام الخاصة بنا.

إليك الرمز الخاص بنا للحصول على أيام خمسة أسابيع:

date const dateArray = (numberOfDays، startDate) => {
  يوم const = لحظة (startDate) ؛
  أيام const = [] ؛
  في حين أن (days.length 

لقد كتبت عن Moment.js من قبل. إذا كنت لا تستخدمه ، فاستفد من عربة darn بالفعل! يجعل العمل مع التواريخ أمرًا سهلاً ، كما هو الحال هنا حيث يمكننا الاتصال بـ day.add (1 ، "أيام") أو حيث نحصل على يوم الأسبوع بلحظة (startDate) .day ().

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

ملاحظة جانبية: من الطبيعي أن يجعل الأمريكيون يوم السبت آخر أيام الأسبوع - 6 - ويوم الأحد أول يوم - 0. لكن ليس السويديين أو بقية العالم. لكل شخص تقريبا غير أمريكي ، يبدأ الأسبوع يوم الاثنين. يمكن أن تكون البرمجة غريبة جدًا على أمريكا.

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

تعيين مجموعة أيامنا لتعكس السجلات الفعلية

الآن ، ولدينا جميع الأيام التي نحتاج إلى عرضها (أدناه نسميها dateArray) ، سيتعين علينا إجراء حلقة مستمرة على مجموعة البيانات الخاصة بنا من واجهة برمجة التطبيقات لمعرفة ما إذا كان ينبغي لنا إظهار سجل أم لا. نظرًا لأننا نريد أن نرى التواريخ التي لا تحتوي على سجلات ، يجب علينا إعداد مجموعة بها بعض السجلات المملوءة وبعض السجلات الفارغة:

const userRecords = dateArray (50، startDay) .map (date => {
  const recordToReturn = data.find (record =>
    record.date === التاريخ
  )؛

  return {date، record: recordToReturn}؛
})؛

الآن لدينا مجموعة من التواريخ ، بعضها مع سجل كامل والبعض الآخر مع سجل: غير محدد.

منطق زر المتاحة

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

<زر اللون = {setColor (تسجيل)}>
  {this.state.buttonText}

وضع نص الزر

لتعيين buttonText ، سوف أتحقق مما إذا كان هناك سجل:

const buttonText = () =>
  غير فارغ (this.props.data.record)؟ "إضافة": "متوفر"

تذكر أنني تمر {date: 'some date' ، سجل: {some: 'record'}} في كل مكون من مكونات الأزرار الخاصة بي. إذا لم يعثر userRecords على سجل لهذا اليوم ، فلن يكون لدينا أي شيء في البيانات. سجل ويمكننا أن نقول "إضافة". "الخالي" يأتي من ملف مكتبة جافا سكريبت الممتاز. مرة أخرى ، احصل على عربة. Lodash يجعل جافا سكريبت أكثر نظافة وأسهل في العمل معها.

تحديد لون الزر

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

const setColor = () => {
  إذا كان (موجود سجل && record.status === 'متوفر') {
    عودة "النجاح" ؛
  } آخر إذا (سجل حالي)) {
    عودة "الرمادي" ؛
  } آخر {
    عودة "الثانوية" ؛
  }
}؛

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

توضح الأزرار الملونة أربع حالات.

الآخران الأزرار

يمكنني استخدام شاشة React المشروطة الفائقة لإخفاء الأزرار "المريضة" و "vab" عندما لا يكون هناك سجل. إليك الرمز الخاص بالزرين المتبقيين:

{موجود سجل && (
  
    <زر       color = {setSecondaryColor (سجل ، "مريض")}       style = {{marginRight: '5px'}}     >       مرض          <زر       color = {setSecondaryColor (سجل ، 'vab')}       style = {{marginRight: '5px'}}     >       VAB         )}

للتأكد من أن الأزرار لدينا تحصل على الألوان الصحيحة ، سنقوم فقط بالتحقق من أن الحالة "مريضة" أو "vab" ، على التوالي. إذا كانت حالة السجل لا تتطابق مع الزر ، فسوف نتأكد من أنه غير ملون (لون الزر "الثانوي" باللون الأبيض).

const setSecondaryColor = (سجل ، حالة) => {
  if (record.status! == status) {return 'secondary'}
  إذا (الحالة === "مريض") {return 'risk'}
  if (status === 'vab') {return 'yellow'}
}

الحصول على الهوى مع الانقلاب

في هذه المرحلة ، فعلت الأزرار كل ما احتاجته للقيام به (بالإضافة إلى كل منطق طلب API الذي أغفله من هذا المنشور - نقوم بإنشاء وتحديث السجلات باستخدام هذه الأزرار).

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

أضفت onMouseOver وأحداث onMouseOut إلى زر "متاح" / "إضافة" الخاص بي:

const mouseOver = () => {
  إذا كان (موجود سجل) {
    this.setState ({buttonText: 'Remove'}) ؛
  }
}؛
const mouseOut = () => this.setState ({buttonText: buttonText ()})؛

الآن عند تمرير زر الفأرة ، سيتغير إلى "إزالة" في حالة وجود سجل (والبقاء كما هو). عند الخروج من الماوس ، سيعود إلى عبارة "متاح". جميلة جدًا ، وظيفية للغاية!

مظاهرة Mouseover من وظيفة زر

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