Improve mobile UX

README.md

@@ -101,6 +101,7 @@ Property                             | type      | Default Value    | Desctiptio
 -------------------------------------|-----------|------------------|-----------------------------------------------------------------
 locale                               | Object    | enUS from locale | you can view full list from [here](https://github.com/Adphorus/react-date-range/tree/next/src/locale/index.js). Locales directly exported from [`date-fns/locales`](https://date-fns.org/v2.0.0-alpha.7/docs/I18n#supported-languages).
 className                            | String    |                  | wrapper classname
+narrow		                           | Boolean   |                  | Adjust layout for mobile
 months                               | Number    | 1                | rendered month count
 showSelectionPreview                 | Boolean   | true             | show preview on focused/hovered dates
 showMonthAndYearPickers              | Boolean   | true             | show select tags for month and year on calendar top, if false it will just display the month and year
@@ -119,7 +120,7 @@ onChange(Calendar)                   | Func      |                  | callback f
 onChange(DateRange)                  | Func      |                  | callback function for range changes. fn(changes). changes contains changed ranges with new `startDate`/`endDate` properties.
 color(Calendar)                      | String    | `#3d91ff`        | defines color for selected date in Calendar
 date(Calendar)                       | Date      |                  | date value for Calendar
-showDateDisplay(DateRange)           | Boolean   | true             | show/hide selection display row. Uses `dateDisplayFormat` for formatter
+showDateDisplay(DateRange)           | Boolean   | false            | show/hide selection display row. Uses `dateDisplayFormat` for formatter
 onShownDateChange(DateRange,Calendar)| Function  |                  | Callback function that is called when the shown date changes
 initialFocusedRange(DateRange)       | Object    |                  | Initial value for focused range. See `focusedRange` for usage.
 focusedRange(DateRange)              | Object    |                  | It defines which range and step are focused. Common initial value is `[0, 0]`; first value is index of ranges, second one is which step on date range(startDate or endDate).

demo/src/components/Main.js

@@ -5,9 +5,7 @@ import { format, addDays } from 'date-fns';
 import Section from './Section';
 
 function renderStaticRangeLabel(staticRange) {
-  return (
-    <CustomStaticRangeLabelContent text={'This is a custom label content: '}/>
-  );
+  return <CustomStaticRangeLabelContent text={'This is a custom label content: '} />;
 }
 
 class CustomStaticRangeLabelContent extends React.Component {
@@ -18,14 +16,11 @@ class CustomStaticRangeLabelContent extends React.Component {
       currentDateString: Date(),
     };
 
-    this.intervalId = setInterval(
-      () => {
-        this.setState({
-          currentDateString: Date(),
-        });
-      },
-      1000
-    );
+    this.intervalId = setInterval(() => {
+      this.setState({
+        currentDateString: Date(),
+      });
+    }, 1000);
   }
 
   componentWillUnmount() {
@@ -222,6 +217,33 @@ export default class Main extends Component {
           </div>
         </Section>
 
+        <Section title="DateRangePicker - with `narrow` prop">
+          <div>
+            <input
+              type="text"
+              readOnly
+              value={formatDateDisplay(this.state.dateRangePicker.selection.startDate)}
+            />
+            <input
+              type="text"
+              readOnly
+              value={formatDateDisplay(this.state.dateRangePicker.selection.endDate)}
+            />
+          </div>
+          <div>
+            <DateRangePicker
+              narrow
+              onChange={this.handleRangeChange.bind(this, 'dateRangePicker')}
+              showSelectionPreview={true}
+              moveRangeOnFirstSelection={false}
+              className={'PreviewArea'}
+              months={2}
+              ranges={[this.state.dateRangePicker.selection]}
+              direction="horizontal"
+            />
+          </div>
+        </Section>
+
         <Section title="DateRangePicker - Vertical Infinite">
           <div>
             <input
@@ -263,7 +285,7 @@ export default class Main extends Component {
               readOnly
               value={formatDateDisplay(this.state.multipleRanges.selection1.endDate, 'Continuous')}
             />
-            <div className={'newLine'}/>
+            <div className={'newLine'} />
 
             <label className={'label'}>Selection2 Start:</label>
             <input
@@ -277,7 +299,7 @@ export default class Main extends Component {
               readOnly
               value={formatDateDisplay(this.state.multipleRanges.selection2.endDate, 'Continuous')}
             />
-            <div className={'newLine'}/>
+            <div className={'newLine'} />
 
             <label className={'label'}>Selection3 Start:</label>
             <input
@@ -366,23 +388,22 @@ export default class Main extends Component {
           <DefinedRange
             ranges={[this.state.definedRange.selection]}
             renderStaticRangeLabel={renderStaticRangeLabel}
-            staticRanges={[{
-              label: "Hoy",
-              hasCustomRendering: true,
-              range: () => ({
-                startDate: new Date(),
-                endDate: new Date(),
-              }),
-              isSelected() {
-                return (
-                  true
-                );
+            staticRanges={[
+              {
+                label: 'Hoy',
+                hasCustomRendering: true,
+                range: () => ({
+                  startDate: new Date(),
+                  endDate: new Date(),
+                }),
+                isSelected() {
+                  return true;
+                },
               },
-            }]}
+            ]}
             onChange={this.handleRangeChange.bind(this, 'definedRange')}
             className={'centered'}
-          >
-          </DefinedRange>
+          />
         </Section>
         <Section title="RangePicker with disabled dates">
           <div>
@@ -413,18 +434,18 @@ export default class Main extends Component {
           <DefinedRange
             ranges={[this.state.definedRange.selection]}
             renderStaticRangeLabel={renderStaticRangeLabel}
-            staticRanges={[{
-              hasCustomRendering: true,
-              range: () => ({
-                startDate: new Date(),
-                endDate: new Date(),
-              }),
-              isSelected() {
-                return (
-                  true
-                );
+            staticRanges={[
+              {
+                hasCustomRendering: true,
+                range: () => ({
+                  startDate: new Date(),
+                  endDate: new Date(),
+                }),
+                isSelected() {
+                  return true;
+                },
               },
-            }]}
+            ]}
             onChange={this.handleRangeChange.bind(this, 'definedRange')}
             className={'centered'}
           />

src/components/Calendar.js

@@ -30,8 +30,9 @@ import {
   DateDisplay,
   CalendarWrapper,
   Months,
-  InfiniteMonthsWrapper,
+  InfiniteMonthsList,
   DateDisplayItem,
+  InfiniteMonthsWrapper,
 } from './styles/Calendar.styled.js';
 import { WeekDays, WeekDay } from './styles/Month.styled.js';
 import MonthAndYearPicker from './MonthAndYearPicker.js';
@@ -319,9 +320,9 @@ class Calendar extends PureComponent {
         {showDateDisplay && this.renderDateDisplay()}
         {navigatorRenderer(focusedDate, this.changeShownDate, this.props)}
         {scroll.enabled ? (
-          <div>
+          <InfiniteMonthsWrapper>
             {isVertical && this.renderWeekdays(this.dateOptions)}
-            <InfiniteMonthsWrapper
+            <InfiniteMonthsList
               data-testid="infinite-months"
               direction={direction}
               onMouseLeave={() => onPreviewChange && onPreviewChange()}
@@ -370,8 +371,8 @@ class Calendar extends PureComponent {
                   );
                 }}
               />
-            </InfiniteMonthsWrapper>
-          </div>
+            </InfiniteMonthsList>
+          </InfiniteMonthsWrapper>
         ) : (
           <Months direction={direction}>
             {months.map((monthStep, i) => (
@@ -410,7 +411,7 @@ Calendar.defaultProps = {
   focusedRange: [0, 0],
   dateDisplayFormat: 'MMM D, YYYY',
   monthDisplayFormat: 'MMM YYYY',
-  showDateDisplay: true,
+  showDateDisplay: false,
   showPreview: true,
   displayMode: 'date',
   months: 1,

src/components/DateRange.js

@@ -115,6 +115,14 @@ class DateRange extends Component {
   }
 
   render() {
+    const { narrow, ...props } = this.props;
+    let { direction, months, scroll } = props;
+    if (narrow) {
+      direction = 'vertical';
+      months = 1;
+      scroll = { enabled: true };
+    }
+
     return (
       <Calendar
         focusedRange={this.state.focusedRange}
@@ -123,7 +131,10 @@ class DateRange extends Component {
         onPreviewChange={value => {
           this.updatePreview(value ? this.calcNewSelection(value) : null);
         }}
-        {...this.props}
+        {...props}
+        months={months}
+        scroll={scroll}
+        direction={direction}
         displayMode="dateRange"
         className={this.props.className}
         onChange={this.setSelection}
@@ -146,6 +157,7 @@ DateRange.defaultProps = {
 
 DateRange.propTypes = {
   ...Calendar.propTypes,
+  narrow: PropTypes.bool,
   onChange: PropTypes.func,
   onRangeFocusChange: PropTypes.func,
   className: PropTypes.string,

src/components/DateRangePicker.js

@@ -16,12 +16,14 @@ class DateRangePicker extends Component {
     const { focusedRange } = this.state;
     return (
       <DateRangePickerWrapper className={this.props.className}>
-        <DefinedRange
-          focusedRange={focusedRange}
-          onPreviewChange={value => this.dateRange.updatePreview(value)}
-          {...this.props}
-          range={this.props.ranges[focusedRange[0]]}
-        />
+        {!this.props.narrow && (
+          <DefinedRange
+            focusedRange={focusedRange}
+            onPreviewChange={value => this.dateRange.updatePreview(value)}
+            {...this.props}
+            range={this.props.ranges[focusedRange[0]]}
+          />
+        )}
         <DateRange
           onRangeFocusChange={focusedRange => this.setState({ focusedRange })}
           focusedRange={focusedRange}

src/components/styles/Calendar.styled.js

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { WeekDays } from './Month.styled';
 
 const marginHorizontal = css`
   margin: 0 5px;
@@ -82,8 +83,54 @@ export const Months = styled.div`
 `;
 
 export const InfiniteMonthsWrapper = styled.div`
+  position: relative;
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 10px;
+    left: 0;
+    z-index: 10;
+  }
+
+  &:before {
+    background: linear-gradient(rgba(0, 0, 0, 0.08), transparent);
+    top: 2.667em; /* WeekDays height */
+  }
+
+  &:after {
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.08));
+    bottom: 0;
+  }
+`;
+
+export const InfiniteMonthsList = styled.div`
+  position: relative;
   overflow: auto;
   ${props => (props.direction === 'vertical' ? monthsVertical : monthsHorizontal)};
+
+  > div {
+    &:before,
+    &:after {
+      content: '';
+      height: 10px;
+      width: 100%;
+      left: 0;
+      position: absolute;
+      background: #fff;
+      z-index: 11;
+    }
+
+    &:before {
+      top: 0;
+    }
+
+    &:after {
+      bottom: 0;
+    }
+  }
 `;
 
 //