From c67a23c988094253b971497283a3fcc32be88395 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Fri, 10 Apr 2020 12:25:06 +0200
Subject: [PATCH] Added support to disable date inputs

---
 src/utils/DateInput.js       | 1 +
 src/utils/DateInput.scss     | 2 ++
 src/utils/DateRangeRow.js    | 5 ++++-
 src/visits/ShortUrlVisits.js | 5 +++--
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/utils/DateInput.js b/src/utils/DateInput.js
index 382ae753..52905c62 100644
--- a/src/utils/DateInput.js
+++ b/src/utils/DateInput.js
@@ -12,6 +12,7 @@ const propTypes = {
   isClearable: PropTypes.bool,
   selected: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]),
   ref: PropTypes.object,
+  disabled: PropTypes.bool,
 };
 
 const DateInput = (props) => {
diff --git a/src/utils/DateInput.scss b/src/utils/DateInput.scss
index 5f2e23ff..cbcbe996 100644
--- a/src/utils/DateInput.scss
+++ b/src/utils/DateInput.scss
@@ -7,6 +7,8 @@
 
 .date-input-container__input {
   padding-right: 35px !important;
+}
+.date-input-container__input:not(:disabled) {
   background-color: #fff !important;
 }
 
diff --git a/src/utils/DateRangeRow.js b/src/utils/DateRangeRow.js
index 376ee671..ca547e4a 100644
--- a/src/utils/DateRangeRow.js
+++ b/src/utils/DateRangeRow.js
@@ -9,9 +9,10 @@ const propTypes = {
   endDate: dateType,
   onStartDateChange: PropTypes.func.isRequired,
   onEndDateChange: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
 };
 
-const DateRangeRow = ({ startDate, endDate, onStartDateChange, onEndDateChange }) => (
+const DateRangeRow = ({ startDate, endDate, onStartDateChange, onEndDateChange, disabled = false }) => (
   <div className="row">
     <div className="col-md-6">
       <DateInput
@@ -19,6 +20,7 @@ const DateRangeRow = ({ startDate, endDate, onStartDateChange, onEndDateChange }
         placeholderText="Since"
         isClearable
         maxDate={endDate}
+        disabled={disabled}
         onChange={onStartDateChange}
       />
     </div>
@@ -29,6 +31,7 @@ const DateRangeRow = ({ startDate, endDate, onStartDateChange, onEndDateChange }
         placeholderText="Until"
         isClearable
         minDate={startDate}
+        disabled={disabled}
         onChange={onEndDateChange}
       />
     </div>
diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js
index 5c233bb9..9415cf77 100644
--- a/src/visits/ShortUrlVisits.js
+++ b/src/visits/ShortUrlVisits.js
@@ -175,6 +175,7 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
           <div className="row flex-md-row-reverse">
             <div className="col-lg-8 col-xl-6">
               <DateRangeRow
+                disabled={loading}
                 startDate={startDate}
                 endDate={endDate}
                 onStartDateChange={setStartDate}
@@ -184,8 +185,8 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
             <div className="col-lg-4 col-xl-6 mt-4 mt-lg-0">
               {showTableControls && (
                 <Button outline block={isMobileDevice} onClick={toggleTable}>
-                  {showTable ? 'Hide' : 'Show'} table{' '}
-                  <FontAwesomeIcon icon={chevronDown} rotation={showTable ? 180 : undefined} />
+                  {showTable ? 'Hide' : 'Show'} table
+                  <FontAwesomeIcon icon={chevronDown} rotation={showTable ? 180 : undefined} className="ml-2" />
                 </Button>
               )}
             </div>