diff --git a/src/components/BrowserFilter/BrowserFilter.react.js b/src/components/BrowserFilter/BrowserFilter.react.js index 38aeba2825..c08dddb6fa 100644 --- a/src/components/BrowserFilter/BrowserFilter.react.js +++ b/src/components/BrowserFilter/BrowserFilter.react.js @@ -17,6 +17,7 @@ import Label from 'components/Label/Label.react'; import Position from 'lib/Position'; import React from 'react'; import styles from 'components/BrowserFilter/BrowserFilter.scss'; +import Checkbox from 'components/Checkbox/Checkbox.react'; import { List, Map } from 'immutable'; const POPOVER_CONTENT_ID = 'browserFilterPopover'; @@ -32,6 +33,7 @@ export default class BrowserFilter extends React.Component { confirmName: false, name: '', blacklistedFilters: Filters.BLACKLISTED_FILTERS.concat(props.blacklistedFilters), + relativeDates: false, }; this.toggle = this.toggle.bind(this); this.wrapRef = React.createRef(); @@ -114,7 +116,7 @@ export default class BrowserFilter extends React.Component { } return filter; }); - this.props.onSaveFilter(formatted, this.state.name); + this.props.onSaveFilter(formatted, this.state.name, this.state.relativeDates); this.toggle(); } @@ -137,6 +139,8 @@ export default class BrowserFilter extends React.Component { this.state.blacklistedFilters, this.state.filters ); + + const hasDateState = this.state.filters.some(filter => filter.get('compareTo')?.__type === 'Date'); popover = ( {this.state.confirmName && ( - } - input={ - this.setState({ name })} - /> - } - /> + <> + } + input={ + this.setState({ name })} + /> + } + /> + {hasDateState && + } + input={ + this.setState({ relativeDates: checked })} + className={styles.checkbox} + /> + } + /> + } + )} + {this.state.confirmName && (