GitLab will be upgraded on June 23rd evening. During the upgrade the service will be unavailable, sorry for the inconvenience.

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

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