كيفية إنشاء مكون العد التنازلي باستخدام React & MomentJS

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

يمكنك العثور على النتيجة النهائية في مثال Codepen هذا:

أولاً ، سننشئ وظيفة العد التنازلي ، ثم سنبحث في كيفية إنشاء القوس المتحرك باستخدام SVG مع بعض الوظائف الفاخرة.

إنشاء وظيفة العد التنازلي

لهذا ، سنستخدم مكتبة MomentJS التي ستساعدنا في تحليل التواريخ والأوقات والتحقق منها ومعالجتها وعرضها.

ما نحتاج إليه هو تحديد تاريخين:

  • التاريخ الحالي أو الآن
  • التاريخ النهائي أو بعد ذلك

عندما يكون لدينا هذان التاريخان ، فيمكننا طرح الآن من ثم استخدام اللحظة وسنحصل على الوقت المتبقي (أو قيمة العد التنازلي).

لتاريخ ذلك الوقت ، سنحتاج إلى تمرير سلسلتين:

  • واحد ، سلسلة TimeTillDate التي تحتوي على التاريخ النهائي الذي نريد عده (على سبيل المثال: 05 26 2019 ، 6:00 ص)
  • ثانياً ، سلسلة تنسيق الوقت التي تستخدمها لحظة من أجل التحقق من صحة تنسيق الوقت (في مثالنا سيكون: MM DD YYYY ، h: mm a)

يمكنك معرفة المزيد حول تحليل السلاسل وتنسيقها في الوثائق.

دعونا نرى كيف يبدو هذا في الكود:

ملاحظة: سيتم توفير وقت timeTillDate ، وقيم تنسيق الوقت داخل مكون التفاعل. الآن نحن نستخدمها كأمثلة.

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

سنقوم لاحقًا بإضافة هذا الرمز في فاصل JS الذي سيتم استدعاؤه كل ثانية ، ولكن قبل ذلك ، دعونا نعد مكون التفاعل الخاص به.

مكون العد التنازلي

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

بعد ذلك ، دعونا ننشئ الفاصل الزمني الذي يعمل كل ثانية ويحفظ القيم في حالة المكون. سنفعل هذا الفاصل الزمني داخل طريقة دورة حياة componentDidMount. سنقوم بمسح الفاصل الزمني في أسلوب دورة حياة componentWillUnmount ، حيث لا نريد الاحتفاظ به قيد التشغيل بعد إزالة المكون من DOM.

المغلق

لدينا جميع وظائف العد التنازلي وتعمل الآن ، لذلك دعونا نسير عليها قليلاً:

لا شيء يتوهم في المغلق. نحن نستخدم flexbox لوضع العناصر داخل المجمع.

أخيرًا ، دعنا ننشئ قوس SVG الذي سيحيط بكل عنصر في العد التنازلي.

مكون SVGCircle

قبل القيام بذلك ، هناك بعض الوظائف التي نحتاجها لإنشاء قوس SVG القابل للتخصيص. لقد وجدت هذه على StackOverflow. لمزيد من المعلومات ، يجب عليك الذهاب إلى هناك وقراءة الشرح التفصيلي للوظائف.

تقوم الوظيفة أعلاه بشكل أساسي بحساب كيفية رسم القوس من خلال توفير مجموعة من القيم على النحو التالي: نقاط البداية والنهاية ، نصف القطر والزوايا.

العودة إلى مكون التفاعل لدينا: سنقوم بإنشاء svg وسيكون لدينا علامة مسار داخلها والتي ستقسم القوس (the d prop) من خلال إعطائها خاصية نصف قطرها. يتم إصلاح القيم الأربعة الأخرى ضمن وظيفة descriptionArc ، حيث أننا لا نريد تعديلها ونقوم بتخصيصها لتبدو جيدة لمثالنا.

ونحتاج أيضًا إلى القليل من CSS لوضعه داخل عنصر .countdown (انظر إلى أين يذهب هذا المكون في قسم النتيجة النهائية):

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

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

النتيجة النهائية

أخيرًا ، دعونا نضيف مكون SVGCircle الجديد داخل كل عنصر من عناصر .countdown ونضع كل شيء معًا:

كل ما عليك القيام به الآن لاستخدام مكون العد التنازلي هو تمريره الدعائم اثنين (timeTillDate و timeFormat) وأنت ذهبية :

خاتمة

كان مشروع صغير ممتع مع React ، أليس كذلك؟

عندما قمت ببناء هذا ، تعلمت أكثر قليلاً عن كيفية العمل مع مكتبة عزم الدوران وأيضًا مع svgs لرسم قوس.

اسمحوا لي أن أعرف إذا كان لديك أي أسئلة بخصوص هذا البرنامج التعليمي.

ترميز سعيد!

نشرت أصلا على www.florin-pop.com