Merge pull request #150 from mapbox/react-datepicker

Replace native date input with react-datepicker

package.json

@@ -24,6 +24,7 @@
     "react": "^15.6.1",
     "react-anchorify-text": "^2.1.0",
     "react-click-outside": "^2.3.1",
+    "react-datepicker": "^0.48.0",
     "react-dom": "^15.6.1",
     "react-ga": "^2.2.0",
     "react-notification-system": "^0.2.14",

src/components/filters/date.js

@@ -0,0 +1,61 @@
+// @flow
+import React from 'react';
+import { List, fromJS } from 'immutable';
+import moment from 'moment';
+import type { InputType } from './';
+import type Moment from 'moment';
+
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+export class Date extends React.Component {
+  props: {
+    name: string,
+    display: string,
+    type: string,
+    placeholder: string,
+    value: List<InputType>,
+    className: string,
+    disabled: ?boolean,
+    onChange: (string, ?List<InputType>) => any,
+    min: ?string,
+    max: ?string
+  };
+  static defaultProps = {
+    className: ''
+  };
+  handleDateChange = (momentObj: ?Moment) => {
+    const value = momentObj ? momentObj.format('YYYY-MM-DD') : null;
+    const name = this.props.name;
+    if (value) {
+      this.props.onChange(
+        name,
+        fromJS([
+          // allways sends 1 size array to keep things consistent
+          {
+            label: value,
+            value
+          }
+        ])
+      );
+    } else {
+      this.props.onChange(name, null);
+    }
+  };
+  render() {
+    const { placeholder, display, value, className, min, max } = this.props;
+    const hasValue = value && value.getIn([0, 'value']);
+    return (
+      <DatePicker
+        className={`input ${className}`}
+        dateFormat="DD/MM/YYYY"
+        isClearable={true}
+        selected={hasValue ? moment(value.getIn([0, 'value'])) : null}
+        placeholderText={placeholder || display}
+        onChange={this.handleDateChange}
+        minDate={min && moment(min)}
+        maxDate={max && moment(max)}
+      />
+    );
+  }
+}

src/components/filters/index.js

@@ -5,5 +5,6 @@ export { Text } from './text';
 export { MultiSelect } from './multi_select';
 export { Wrapper } from './wrapper';
 export { Meta } from './meta';
+export { Date } from './date';
 
 export type InputType = Map<'label' | 'value', string>;

src/views/filters.js

@@ -7,7 +7,14 @@ import 'date-input-polyfill';
 
 import { Link } from 'react-router-dom';
 
-import { Text, Radio, MultiSelect, Wrapper, Meta } from '../components/filters';
+import {
+  Text,
+  Radio,
+  MultiSelect,
+  Wrapper,
+  Meta,
+  Date
+} from '../components/filters';
 
 import { Button } from '../components/button';
 import { BBoxPicker } from '../components/bbox_picker';
@@ -120,10 +127,9 @@ export class _Filters extends React.PureComponent {
       key: k,
       description: this.state.active === f.name && f.description
     };
-    if (f.range) {
+    if (f.range && f.type === 'number') {
       const gteValue = this.state.filters.get(f.name + '__gte');
       const lteValue = this.state.filters.get(f.name + '__lte');
-      const today = moment().format('YYYY-MM-DD');
       return (
         <Wrapper
           {...wrapperProps}
@@ -139,19 +145,47 @@ export class _Filters extends React.PureComponent {
               name={f.name + '__gte'}
               value={gteValue}
               placeholder={'from'}
-              min={f.type === 'number' && 0}
-              max={
-                (lteValue && lteValue.getIn([0, 'value'])) ||
-                (f.type === 'date' && today)
-              }
+              min={0}
+              max={lteValue && lteValue.getIn([0, 'value'])}
             />
             <Text
               {...propsToSend}
               name={f.name + '__lte'}
               value={lteValue}
               placeholder={'to'}
               min={gteValue && gteValue.getIn([0, 'value'])}
-              max={f.type === 'date' && today}
+            />
+          </span>
+        </Wrapper>
+      );
+    }
+    if (f.range && f.type === 'date') {
+      const gteValue = this.state.filters.get(f.name + '__gte');
+      const lteValue = this.state.filters.get(f.name + '__lte');
+      const today = moment().format('YYYY-MM-DD');
+      return (
+        <Wrapper
+          {...wrapperProps}
+          hasValue={
+            this.state.filters.has(f.name + '__gte') ||
+            this.state.filters.has(f.name + '__lte')
+          }
+        >
+          <span className="flex-parent flex-parent--row h36">
+            <Date
+              {...propsToSend}
+              name={f.name + '__gte'}
+              value={gteValue}
+              placeholder={'From'}
+              max={(lteValue && lteValue.getIn([0, 'value'])) || today}
+            />
+            <Date
+              {...propsToSend}
+              name={f.name + '__lte'}
+              value={lteValue}
+              placeholder={'To'}
+              min={gteValue && gteValue.getIn([0, 'value'])}
+              max={today}
             />
           </span>
         </Wrapper>