React का उपयोग करके स्मार्ट बटन कैसे बनाएं

यह तीन बटन की एक कहानी है और कैसे एक वेब डेवलपर जो डिजाइन से दूर झूठ बोलता है, उसके सामने के सपने सच हो गए।

आपको समय से पहले पता होना चाहिए कि यहां अधिकांश स्टाइल बॉयलरप्लेट बूटस्ट्रैप है। यह अच्छा लग रहा है और यह एक आंतरिक-सामना करने वाला उत्पाद है, इसलिए हम ऐसी किसी चीज़ को ठीक नहीं करते हैं जो टूटी हुई नहीं है।

हमारा काम रिकॉर्ड से निपटने के लिए एक आसान-से-समझने वाला इंटरफ़ेस बनाना था। हमारे रिकॉर्ड में तीन-भाग हैं - या तो उपलब्ध, बीमार या वाब। एक बार संवाद करने के लिए बहुत सारी स्थिति नहीं है, लेकिन हमें एक पृष्ठ पर इनमें से पांच सप्ताह का मूल्य चाहिए।

साइड नोट: "VAB" एक स्वीडिश शब्द है जो आपके बीमार बच्चे के साथ घर में रहने का संदर्भ देता है। ऐसा करने और खुद के यहाँ बीमार होने के बीच एक अंतर है, वेतन और समय में दोनों!

मौजूदा रिकॉर्ड के लिए जाँच कर रहा है

पहला चरण दिखा रहा था कि उपयोगकर्ता के पास प्रश्न में दिन के लिए रिकॉर्ड था या नहीं। जैसा कि मुझे पता है कि हर रिएक्ट प्रोजेक्ट में, हम एक एपीआई (हमारे अपने) से एक सूची ले रहे थे और उस पर ध्यान दे रहे थे। चूंकि एपीआई मौजूदा रिकॉर्ड की एक सूची वापस करेगा और रिकॉर्ड के बिना दिनों की उपेक्षा करेगा, इसलिए हमें अपने दिनों की अपनी सरणी सेट करने की आवश्यकता होगी।

पाँच दिनों के लायक होने के लिए यहाँ हमारा कोड है:

एक्सपोर्ट कास्ट डेटअरे = (नंबरऑफडे, स्टार्टडेट) => {
  const दिन = पल (startDate);
  const दिन = [];
  जबकि (दिन। गति <नंबरऑफडे) {
    if (day.day () === 6 || day.day () === 0) {
      day.add (1, 'दिन');
    } अन्य {
      days.push (day.format ( 'YYYY-MM-DD'));
    }
    day.add (1, 'दिन');
  }
  वापसी के दिन;
};

मैंने पहले मोमेंट.जेएस के बारे में लिखा है। यदि आप इसका उपयोग नहीं कर रहे हैं, तो पहले से ही रफ़ू पट्टी पर प्राप्त करें यह तारीखों के साथ काम करना आसान बना देता है, जैसे कि जहाँ हम दिन (1, 'दिन') कह सकते हैं या जहाँ हम सप्ताह के दिन को पल (शुरुआत) (दिन) () के साथ प्राप्त कर सकते हैं।

पल-पल की वस्तुएँ परस्पर मिलती हैं! इसलिए आम तौर पर सावधान रहें, लेकिन यहाँ यह बहुत अच्छा है क्योंकि हमें अपने दिन को अपडेट करने की आवश्यकता है और हम बहुत कम कोड के साथ ऐसा कर सकते हैं।

साइड नोट: अमेरिकी स्वाभाविक रूप से सप्ताह के अंतिम दिन - 6 - और रविवार को पहला दिन बनाते हैं - 0. लेकिन स्वेड्स या मूल रूप से दुनिया के बाकी हिस्सों में नहीं। लगभग हर कोई अमेरिकी नहीं है, सप्ताह सोमवार को शुरू होता है। प्रोग्रामिंग बहुत ही अजीब तरह से अमेरिका केंद्रित हो सकता है।

यहां आप देख सकते हैं कि हम तारीखों की एक सूची को इकट्ठा करना शुरू कर रहे हैं, शुरुआत के साथ शुरू कर रहे हैं, और हम तब तक चलते रहते हैं जब तक कि हम नंबर तक नहीं पहुंचते हैं, सप्ताहांत को छोड़ दें। हम अपनी रिकॉर्ड सूची बनाने के लिए इस सरणी का उपयोग करेंगे ताकि हम इस पर कुछ स्वादिष्ट बटन लगा सकें।

वास्तविक दिनों को दर्शाने के लिए हमारे दिनों के सरणी को मैप करना

अब जब हमारे पास वे सभी दिन हैं, जिन्हें हमें दिखाने की आवश्यकता है (नीचे हम डेटअरे कहते हैं), तो हमें यह देखने के लिए कि क्या हमें एक रिकॉर्ड दिखाना चाहिए या नहीं, एपीआई से हमारे डेटा सेट पर लूप करना होगा। क्योंकि हम उन तारीखों को देखना चाहते हैं जिनमें रिकॉर्ड नहीं हैं, हमें कुछ भरे हुए और कुछ खाली रिकॉर्ड के साथ एक सरणी सेट करनी चाहिए:

const userRecords = dateArray (50, startDay) .map (तिथि => {)
  const recordoReturn = data.find (रिकॉर्ड =>)
    record.date === तारीख
  );

  वापसी {दिनांक, रिकॉर्ड: recordToReturn};
});

अब हमारे पास तारीखों की एक सरणी है, कुछ पूर्ण रिकॉर्ड के साथ और अन्य रिकॉर्ड के साथ: अपरिभाषित।

उपलब्ध बटन तर्क

अब हम देख सकते हैं कि उस दिन कोई रिकॉर्ड है या नहीं, हम अपने बटन को हरा दिखाने के लिए शर्त लगा सकते हैं और कह सकते हैं कि "उपलब्ध" या सफेद और "जोड़ें"। फिर, मैं मूल स्टाइल के लिए रिएक्टस्ट्रैप का उपयोग कर रहा हूं। बटन घटक कुछ अच्छे रिक्ति और गोल कोनों और व्हाट्सन के साथ आता है, साथ ही साथ "रंग" पैरामेस जो मैं "जानकारी" और "सफलता" जैसी चीजों पर सेट कर सकता हूं।

<बटन का रंग = {setColor (रिकॉर्ड)}>
  {} This.state.buttonText

बटन टेक्स्ट सेट करना

बटन टेक्स्ट सेट करने के लिए, मैं जांच करूंगा कि क्या कोई रिकॉर्ड है:

const बटन टेक्स्ट = () =>
  isEmpty (यह। props.data.record)? 'जोड़ें': 'उपलब्ध'

याद रखें कि मैं अपने प्रत्येक बटन घटकों में {दिनांक: 'कुछ दिनांक', रिकॉर्ड: {कुछ: 'रिकॉर्ड'}} पास कर रहा हूं। यदि मेरे उपयोगकर्ता रिकॉर्ड उस दिन के लिए रिकॉर्ड नहीं करते हैं, तो हमारे पास data.record में कुछ भी नहीं है और हम कह सकते हैं कि "Add" .Empty उत्कृष्ट जावास्क्रिप्ट लाइब्रेरी लॉश से आता है। एक बार फिर, बैंडबाजे पर सवार हो जाओ। लॉडश जावास्क्रिप्ट को इतना क्लीनर और काम करने के लिए आसान बनाता है।

बटन का रंग सेट करना

हमारा सेटकोलर फ़ंक्शन यह भी जाँच करेगा कि क्या रिकॉर्ड मौजूद है, लेकिन इसे आगे रिकॉर्ड की स्थिति को देखना होगा कि हमें किस रंग को प्रदर्शित करने की आवश्यकता है।

const setColor = () => {
  यदि (मौजूदा रिकॉर्ड और& रिकॉर्ड.स्टैटस === 'उपलब्ध') {
    वापसी 'सफलता';
  } और (अगर (मौजूदा)) {
    वापसी 'ग्रे';
  } अन्य {
    वापसी 'माध्यमिक';
  }
};

बूटस्ट्रैप सुखदता को परिभाषित करता है। हमने अपने स्वयं के रंगों के साथ इन डिफ़ॉल्ट शब्दों को ओवरराइट कर दिया है, लेकिन आउट-ऑफ-द-बॉक्स विकल्प भी अच्छे हैं। यहां हम जांचते हैं कि क्या रिकॉर्ड उपलब्ध है। यदि यह उपलब्ध नहीं है, लेकिन अभी भी एक रिकॉर्ड है, तो यह बीमार या थकाऊ होना चाहिए, लेकिन किसी भी स्थिति में, उपयोगकर्ता उस दिन उपलब्ध नहीं होता है, इसलिए हमें बटन को धूसर करना होगा।

रंगीन बटन चार स्थितियों को प्रदर्शित करते हैं।

अन्य दो बटन

जब कोई रिकॉर्ड नहीं होता है तो मैं "बीमार" और "वाब" बटन को छिपाने के लिए रिएक्ट के सुपर-हेंडल सशर्त प्रदर्शन का उपयोग कर सकता हूं। शेष दो बटन के लिए कोड यहाँ है:

{मौजूदाRord और& (
  
    <बटन       रंग = {समुच्चयबोधक (रिकॉर्ड, 'बीमार')}       शैली = {{मार्जिन: R 5px ’}}     >       बीमार          <बटन       रंग = {setSondondaryColor (रिकॉर्ड, 'vab')}       शैली = {{मार्जिन: R 5px ’}}     >       VAB         )}

यह सुनिश्चित करने के लिए कि हमारे बटन सही रंग प्राप्त कर रहे हैं, हम सिर्फ यह जाँचेंगे कि रिकॉर्ड में क्रमशः "बीमार" या "वाब" है। यदि रिकॉर्ड की स्थिति बटन से मेल नहीं खाती है, तो हम सुनिश्चित करेंगे कि यह रंगीन नहीं है (हमारा "द्वितीयक" बटन का रंग सफेद है)।

const setSondondaryColor = (रिकॉर्ड, स्थिति) => {
  अगर (record.status! == स्थिति) {वापसी 'माध्यमिक'}
  अगर (स्थिति === 'बीमार') {वापसी 'खतरे'}
  अगर (स्थिति === 'vab') {वापसी 'पीला'}
}

रोलओवर के साथ फैंसी हो रही है

इस बिंदु पर, बटन ने वह सब कुछ किया जो मुझे करने की आवश्यकता थी (साथ ही सभी एपीआई अनुरोध तर्क मैं इस पोस्ट से छोड़ रहा हूं - हम इन बटन के साथ रिकॉर्ड बना रहे हैं और अपडेट कर रहे हैं)।

लेकिन रोलओवर प्रभाव न होने पर कोई लड़की अपने बटनों से कैसे संतुष्ट हो सकती है? हमें किसी तरह एक दिन के लिए रिकॉर्ड निकालने में सक्षम होना चाहिए। एक X बनाने और हमारे उपयोगकर्ता क्लिक करने के बजाय, क्या यह बेहतर नहीं होगा कि वे रिकॉर्ड हटाने के लिए मौजूदा बटनों में से एक पर क्लिक कर सकें? मुझे ऐसा लगा।

मैंने अपने "उपलब्ध" / "जोड़ें" बटन पर एक onMouseOver और onMouseOut घटनाओं को जोड़ा:

const माउसओवर = () => {
  यदि (विद्यमान) {
    this.setState ({buttonText: 'Remove'});
  }
};
const mouseOut = () => this.setState ({buttonText: buttonText ()});

अब जब आप बटन को हटाते हैं, तो यह रिकॉर्ड में मौजूद होने पर "हटाएं" में बदल जाएगा (और अन्यथा वही रहेगा)। जब आप बाहर निकलते हैं, तो यह "उपलब्ध" कहकर वापस चला जाएगा। इतना सुंदर, इतना कार्यात्मक!

बटन कार्यक्षमता का माउसओवर प्रदर्शन

मैं इस बात से आश्चर्यचकित था कि कितना कुछ सोचा और प्रयास अपेक्षाकृत सरल था। सही रंग होने के लिए बटन प्राप्त करना, सही पाठ होना और सही चीजें करना अधिक जटिल है जितना कि यह प्रतीत हो सकता है। वास्तव में, मैंने अपने पति जैसे लोगों को ये बटन दिखाए हैं, जो सिर्फ सिकुड़ गए हैं। यह जीवन का एक तथ्य है: कोई भी आपके बटनों को उतना पसंद नहीं करने वाला है जितना आप करते हैं।