Added support to disable date inputs

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) => {

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;
 }
 

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>

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{' '}
+                  {showTable ? 'Hide' : 'Show'} table
-                  <FontAwesomeIcon icon={chevronDown} rotation={showTable ? 180 : undefined} />
+                  <FontAwesomeIcon icon={chevronDown} rotation={showTable ? 180 : undefined} className="ml-2" />
                 </Button>
               )}
             </div>