Commit 145b91d2 authored by Loic Huder's avatar Loic Huder
Browse files

Extracted date filter compenent

parent 65cda56f
import React from 'react';
import { Glyphicon, Button } from 'react-bootstrap';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import { formatDate, parseDate } from 'react-day-picker/moment';
import { INVESTIGATION_DATE_FORMAT } from '../../constants';
import styles from './InvestigationDateFilter.module.css';
function InvestigationDateFilter(props) {
const { rootClassName, value, onDayChange, onClear } = props;
return (
<div className={rootClassName}>
<DayPickerInput
inputProps={{ className: styles.dateFilterInput }}
value={value}
placeholder="Filter by start date"
format={INVESTIGATION_DATE_FORMAT}
formatDate={formatDate}
parseDate={parseDate}
onDayChange={onDayChange}
/>
<Button
disabled={!value}
onClick={onClear}
bsStyle="link"
className={styles.clearButton}
>
<Glyphicon glyph="remove" />
</Button>
</div>
);
}
export default InvestigationDateFilter;
.clearButton {
color: inherit;
padding-left: 6px;
}
.clearButton:hover {
color: darkslategray;
}
.dateFilterInput {
padding: 7px 0;
}
......@@ -7,9 +7,7 @@ import ResponsiveTable from '../Table/ResponsiveTable';
import StatusFilterDropdown from './StatusFilterDropdown';
import styles from './ParcelTable.module.css';
import moment from 'moment';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import { formatDate, parseDate } from 'react-day-picker/moment';
import { INVESTIGATION_DATE_FORMAT } from '../../constants';
import InvestigationDateFilter from '../Investigation/InvestigationDateFilter';
function getActionColumn(handleView) {
return {
......@@ -170,25 +168,12 @@ function ParcelTable(props) {
</Button>
</div>
{investigations && (
<div className={styles.filter}>
<DayPickerInput
inputProps={{ className: styles.dateFilterInput }}
value={dateFilter && dateFilter.toDate()}
placeholder="Filter by start date"
format={INVESTIGATION_DATE_FORMAT}
formatDate={formatDate}
parseDate={parseDate}
onDayChange={handleStartDateChange}
/>
<Button
disabled={!dateFilter}
onClick={handleDateFilterClear}
bsStyle="link"
className={styles.clearButton}
>
<Glyphicon glyph="remove" />
</Button>
</div>
<InvestigationDateFilter
rootClassName={styles.filter}
value={dateFilter && dateFilter.toDate()}
onDayChange={handleStartDateChange}
onClear={handleDateFilterClear}
/>
)}
</div>
<ResponsiveTable
......
......@@ -31,10 +31,6 @@
color: darkslategray;
}
.dateFilterInput {
padding: 7px 0;
}
.clickable {
cursor: pointer;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment