Added support to disable date inputs

This commit is contained in:
Alejandro Celaya 2020-04-10 12:25:06 +02:00
parent 8f42e65ccd
commit c67a23c988
4 changed files with 10 additions and 3 deletions

View file

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

View file

@ -7,6 +7,8 @@
.date-input-container__input {
padding-right: 35px !important;
}
.date-input-container__input:not(:disabled) {
background-color: #fff !important;
}

View file

@ -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>

View file

@ -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>