Merge pull request Hacker0x01#1216 from jennyscript-ridecell/feature/add-include-times

rafeememon · web-flow · commit 41b6e30a1cb1 · 2018-01-22T17:12:32.000-08:00
Add an includeTimes prop
diff --git a/docs-site/src/example_components.jsx b/docs-site/src/example_components.jsx
@@ -44,6 +44,7 @@ import RawChange from './examples/raw_change'
 import ShowTime from './examples/show_time'
 import ExcludeTimes from './examples/exclude_times'
 import ExcludeTimePeriod from './examples/exclude_time_period'
+import IncludeTimes from './examples/include_times'
 import DontCloseOnSelect from './examples/dont_close_onSelect'
 import OpenByDefault from './examples/open_by_default'
 
@@ -67,6 +68,10 @@ export default class exampleComponents extends React.Component {
     title: 'Exclude Times',
     component: <ExcludeTimes />
   },
+  {
+    title: 'Include Times',
+    component: <IncludeTimes />
+  },
   {
     title: 'Specific Time Range',
     component: <ExcludeTimePeriod />
diff --git a/docs-site/src/examples/include_times.jsx b/docs-site/src/examples/include_times.jsx
@@ -0,0 +1,66 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+import moment from "moment";
+
+export default class IncludeTimes extends React.Component {
+  state = {
+    startDate: moment()
+      .hours(16)
+      .minutes(30)
+  };
+
+  handleChange = date => {
+    this.setState({
+      startDate: date
+    });
+  };
+
+  render() {
+    return (
+      <div className="row">
+        <pre className="column example__code">
+          <code className="jsx">
+            {"<DatePicker"}
+            <br />
+            {"  selected={this.state.startDate}"}
+            <br />
+            {"  onChange={this.handleChange}"}
+            <br />
+            <strong>
+              {"  showTimeSelect"}
+              <br />
+              {
+                "  includeTimes={[moment().hours(17).minutes(0), moment().hours(18).minutes(30), moment().hours(19).minutes(30)], moment().hours(17).minutes(30)}"
+              }
+            </strong>
+            <br />
+            <strong>{'  dateFormat="LLL"'}</strong>
+            <br />
+            {"/>"}
+          </code>
+        </pre>
+        <div className="column">
+          <DatePicker
+            selected={this.state.startDate}
+            onChange={this.handleChange}
+            showTimeSelect
+            includeTimes={[
+              moment()
+                .hours(17)
+                .minutes(0),
+              moment()
+                .hours(18)
+                .minutes(30),
+              moment()
+                .hours(19)
+                .minutes(30),
+              moment()
+                .hours(17)
+                .minutes(30)
+            ]}
+            dateFormat="LLL"/>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/docs/datepicker.md b/docs/datepicker.md
@@ -28,6 +28,7 @@ General datepicker component.
 | `highlightDates`             | `array`                        |                 |                                            |
 | `id`                         | `string`                       |                 |                                            |
 | `includeDates`               | `array`                        |                 |                                            |
+| `includeTimes`               | `array`                        |                 |                                            |
 | `inline`                     | `bool`                         |                 |                                            |
 | `isClearable`                | `bool`                         |                 |                                            |
 | `locale`                     | `string`                       |                 |                                            |
diff --git a/docs/index.md b/docs/index.md
@@ -29,6 +29,7 @@ General datepicker component.
 | `highlightDates`              | `array`                        |                 |             |
 | `id`                          | `string`                       |                 |             |
 | `includeDates`                | `array`                        |                 |             |
+| `includeTimes`                | `array`                        |                 |             |
 | `inline`                      | `bool`                         |                 |             |
 | `isClearable`                 | `bool`                         |                 |             |
 | `locale`                      | `string`                       |                 |             |
diff --git a/src/calendar.jsx b/src/calendar.jsx
@@ -61,6 +61,7 @@ export default class Calendar extends React.Component {
     formatWeekNumber: PropTypes.func,
     highlightDates: PropTypes.instanceOf(Map),
     includeDates: PropTypes.array,
+    includeTimes: PropTypes.array,
     inline: PropTypes.bool,
     locale: PropTypes.string,
     maxDate: PropTypes.object,
@@ -500,6 +501,7 @@ export default class Calendar extends React.Component {
           selected={this.props.selected}
           onChange={this.props.onTimeChange}
           format={this.props.timeFormat}
+          includeTimes={this.props.includeTimes}
           intervals={this.props.timeIntervals}
           minTime={this.props.minTime}
           maxTime={this.props.maxTime}
diff --git a/src/date_utils.js b/src/date_utils.js
@@ -336,8 +336,8 @@ export function getMonthInLocale(locale, date, format) {
   return locale.months(date, format);
 }
 
-export function getMonthShortInLocale (locale, date) {
-  return locale.monthsShort(date)
+export function getMonthShortInLocale(locale, date) {
+  return locale.monthsShort(date);
 }
 
 // ** Utils for some components **
diff --git a/src/index.jsx b/src/index.jsx
@@ -70,6 +70,7 @@ export default class DatePicker extends React.Component {
     highlightDates: PropTypes.array,
     id: PropTypes.string,
     includeDates: PropTypes.array,
+    includeTimes: PropTypes.array,
     inline: PropTypes.bool,
     isClearable: PropTypes.bool,
     locale: PropTypes.string,
@@ -492,6 +493,7 @@ export default class DatePicker extends React.Component {
         formatWeekNumber={this.props.formatWeekNumber}
         highlightDates={this.state.highlightDates}
         includeDates={this.props.includeDates}
+        includeTimes={this.props.includeTimes}
         inline={this.props.inline}
         peekNextMonth={this.props.peekNextMonth}
         showMonthDropdown={this.props.showMonthDropdown}
diff --git a/src/time.jsx b/src/time.jsx
@@ -15,6 +15,7 @@ import {
 export default class Time extends React.Component {
   static propTypes = {
     format: PropTypes.string,
+    includeTimes: PropTypes.array,
     intervals: PropTypes.number,
     selected: PropTypes.object,
     onChange: PropTypes.func,
@@ -46,7 +47,8 @@ export default class Time extends React.Component {
     if (
       ((this.props.minTime || this.props.maxTime) &&
         isTimeInDisabledRange(time, this.props)) ||
-      (this.props.excludeTimes && isTimeDisabled(time, this.props.excludeTimes))
+      (this.props.excludeTimes && isTimeDisabled(time, this.props.excludeTimes)) ||
+      (this.props.includeTimes && !isTimeDisabled(time, this.props.includeTimes))
     ) {
       return;
     }
@@ -63,7 +65,8 @@ export default class Time extends React.Component {
     if (
       ((this.props.minTime || this.props.maxTime) &&
         isTimeInDisabledRange(time, this.props)) ||
-      (this.props.excludeTimes && isTimeDisabled(time, this.props.excludeTimes))
+      (this.props.excludeTimes && isTimeDisabled(time, this.props.excludeTimes)) ||
+      (this.props.includeTimes && !isTimeDisabled(time, this.props.includeTimes))
     ) {
       classes.push("react-datepicker__time-list-item--disabled");
     }
diff --git a/test/include_times_test.js b/test/include_times_test.js
@@ -0,0 +1,39 @@
+import React from "react";
+import { mount } from "enzyme";
+import * as utils from "../src/date_utils";
+import { setTime, cloneDate, newDate } from "../src/date_utils";
+import TimeComponent from "../src/time";
+
+function cloneDateWithTime(date, time) {
+  return setTime(cloneDate(date), time);
+}
+
+describe("TimeComponent", () => {
+  let sandbox;
+
+  beforeEach(() => {
+    sandbox = sinon.sandbox.create();
+  });
+
+  afterEach(() => {
+    sandbox.restore();
+  });
+
+  it("should only enable times specified in includeTimes props", () => {
+    const today = utils.getStartOfDay(utils.newDate());
+    const timeComponent = mount(
+      <TimeComponent
+        includeTimes={[
+          utils.addMinutes(cloneDate(today), 60),
+          utils.addMinutes(cloneDate(today), 120),
+          utils.addMinutes(cloneDate(today), 150)
+        ]}
+      />
+    );
+
+    const disabledItems = timeComponent.find(
+      ".react-datepicker__time-list-item--disabled"
+    );
+    expect(disabledItems).to.have.length(45);
+  });
+});

Original file line number	Diff line number	Diff line change
`@@ -336,8 +336,8 @@ export function getMonthInLocale(locale, date, format) {`
`336`	`336`	`return locale.months(date, format);`
`337`	`337`	`}`
`338`	`338`
`339`		`-export function getMonthShortInLocale (locale, date) {`
`340`		`- return locale.monthsShort(date)`
	`339`	`+export function getMonthShortInLocale(locale, date) {`
	`340`	`+ return locale.monthsShort(date);`
`341`	`341`	`}`
`342`	`342`
`343`	`343`	`// Utils for some components `