Select time feature by shadrech · Pull Request #839 · Hacker0x01/react-datepicker

shadrech · 2017-04-23T23:03:40Z

Feature allows users to select a time along with the date. So moment object returned will have specific time
Also includes time filtering with minTime, maxTime and excludeTimes

codecov-io · 2017-04-24T00:06:19Z

Codecov Report

Merging #839 into master will decrease coverage by 7.07%.
The diff coverage is 26.82%.

@@            Coverage Diff             @@
##           master     #839      +/-   ##
==========================================
- Coverage   85.84%   78.77%   -7.08%     
==========================================
  Files          12       13       +1     
  Lines         643      716      +73     
  Branches      128      141      +13     
==========================================
+ Hits          552      564      +12     
- Misses          6       61      +55     
- Partials       85       91       +6

Impacted Files	Coverage Δ
src/date_utils.js	`79.66% <14.28%> (-20.34%)`	⬇️
src/datepicker.jsx	`89.94% <50%> (-2.15%)`	⬇️
src/calendar.jsx	`85.6% <63.15%> (-2.8%)`	⬇️
src/time.jsx	`9.09% <9.75%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7e7b2fe...e400d89. Read the comment docs.

shadrech · 2017-04-24T11:49:59Z

Will work on tests at the weekend. Will creating tests be all thats needed to fix the codecov errors?

martijnrusschen · 2017-04-24T11:51:33Z

@shadrech Thanks, yes. Codecov only complains about the fact that the current test coverage of this PR is below the target of 75%. Currently the overall coverage floats around 95% for the complete project.

martijnrusschen

Based on the recent comment. Please add tests, to make sure all new functionality works as expected.

martijnrusschen · 2017-04-24T11:53:03Z

 type: `bool`
 defaultValue: `false`

+


You can remove this submissions. This will be autogenerated when releasing a new version.

martijnrusschen · 2017-04-24T11:53:12Z

 app.use(express.static('docs-site'))

-app.listen(8080, 'localhost', function (err) {
+app.listen(9000, 'localhost', function (err) {


Do we need this change?

Sorry forgot to change that back. That port was occupied with a different process when I was developing the datepicker. That change isn't necessary at all

martijnrusschen · 2017-04-24T11:53:31Z

  static get defaultProps () {
    return {
-      dateFormat: 'L',
+      dateFormat: 'LLL',


Why's this changed?

"LLL" is more verbose. It displays the time as well. Maybe I should set a if statement if this.props.showTimeSelect is instantiated before changing the format to display time as well

spiroski · 2017-06-16T10:58:49Z

Any progress on this issue?

shadrech · 2017-06-16T11:13:24Z

My bad. Been really busy at work. Will work on tests this weekend hopefully 🤞🏾

…e in timezone_date.tsx

…teFormat must be changed to 'LLL' for time to be displayed

…er ref with setState

shadrech · 2017-09-03T23:49:26Z

@martijnrusschen Sorry for hiatus. Added tests but codecov still not happy. Please advise on best way forward? What am I missing here?

martijnrusschen

Looks cool! Few comments, I'll let some others review this as well since this is a pretty major addition to the component.

Also, perhaps it would be nice to add something to the Readme about this as well.

martijnrusschen · 2017-09-04T09:40:03Z

@@ -84,6 +84,8 @@
  border-top-right-radius: 0.3rem;


Can you please exclude changes to this file from the PR? This will be automatically updated when I'm going to run a new release.

martijnrusschen · 2017-09-04T09:40:22Z

@@ -1116,7 +1116,7 @@



Can you please exclude changes to this file from the PR? This will be automatically updated when I'm going to run a new release.

martijnrusschen · 2017-09-04T09:40:58Z

@@ -68,4 +68,4 @@ General datepicker component.
 |`value`|`string`|||


Can you please exclude changes to this file from the PR? This will be automatically updated when I'm going to run a new release.

I'm pretty sure I didn't edit these files. They must have been edited when running yarn start and editing files in src/ directory

@shadrech Yes, they're build outputs.

@martijnrusschen Is there a way we could improve the release process so everyone doesn't need to manually avoid committing these sorts of changes?

@aij Add files ending in .js/.md/.css in directories docs/ & docs-site/ to .gitignore? Since files are auto generated

Problem is that we need the .js and .css files in the gh-pages branch for the docs. It seems pretty hard to ignore something in one branch but have it checked in into the other branch. I read something about it here: https://stackoverflow.com/questions/1836742/using-git-how-do-i-ignore-a-file-in-one-branch-but-have-it-committed-in-another but haven't found the silver bullet yet. Ideas are welcome!

We can't ignore the .md files since those are served in the docs folder in the master branch.

shadrech · 2017-09-04T15:10:34Z

Yh I can add this to README. I had just included examples of how to use the new feature in docs-site/src/examples (exclude_time_period.jsx, exclude_times.jsx, show_time.jsx). But yh I will add some info in README

shadrech · 2017-09-04T15:10:46Z

What of the tests? @martijnrusschen

martijnrusschen · 2017-09-04T15:13:25Z

Not sure why codecov isn't liking them. Need to look into that, but for now this seems fine. @aij Any thougths on this PR?

martijnrusschen · 2017-09-04T15:13:33Z

@alex-shamshurin ^

aij

Thanks for the great work.

aij · 2017-09-05T14:33:48Z

      var monthKey = `month-${i}`
      monthList.push(
-          <div key={monthKey} className="react-datepicker__month-container">
+          <div key={monthKey} ref="monthContainer" className="react-datepicker__month-container">


ref="string" is deprecated in newer React. The new equivalent is ref={r => this.refs.monthContainer = r} instead, though most people seem to be taking it a step further by avoiding this.refs entirely, though I'm not sure there's any basis for the later beyond a prominent example.

aij · 2017-09-05T14:37:27Z

+
+export function isTimeInDisabledRange (time, { minTime, maxTime }) {
+  if (!minTime || !maxTime) {
+    throw new Error('Both minTime and maxTime props required')


Why should both be required? For dates we allow upper and lower bounds to be specified independently.

Only applicable if user decides to have a time range. Both values required to create time window. Since time loops at 24 (24 hr clock), setting a lower bound with no upper bound for example won't create a finite window (not good at explaining, hopefully that makes sense)

aij · 2017-09-05T14:45:07Z

  }

+  handleTimeChange = (time) => {
+    const selected = (this.props.selected) ? this.props.selected : moment()


We don't always default to the current date, and it is not always valid. See calcInitialState()/ setOpen().

aij · 2017-09-05T14:52:16Z

+import React from 'react'
+import PropTypes from 'prop-types'
+import ReactDOM from 'react-dom'
+import Tether from 'tether'


This looks like the file that was deleted with the conversion to Popper. Was it accidentally reverted somehow?

Yeah seems an artifact of recent changes. We don't use Tether anymore.

aij · 2017-09-05T15:22:29Z

+  static propTypes = {
+    intervals: PropTypes.number,
+    selected: PropTypes.object,
+    onTimeChange: PropTypes.func,


I have a slight preference for standard prop names (eg onChange) if we expect this component to be used directly, so users don't need to wrap the component in another component that does little more than renaming props.

aij · 2017-09-05T16:00:11Z

+            selected={this.state.startDate}
+            onChange={this.handleChange}
+            showTimeSelect
+            excludeTimes={[moment().hours(17).minutes(0), moment().hours(18).minutes(30), moment().hours(19).minutes(30), moment().hours(17).minutes(30)]}


Making this a function/predicate instead of an array might be more flexible, especially if whole time ranges need to be excluded, or if the exclusions need to depend on the date. (Eg, if it is based on available appointment times from a DB, or varies with DST.)

If we expect a fixed/predefined list to be much more common this could be easier to use though. Thoughts?

I find an array to be more simpler. I imagine a scenario where an api call returns a json array of moment.toISOString strings, and all client has to do is convert these to moment() objects and plug the array into excludeTimes. Even maybe extend excludeTime that first a check is made to see if objects received are strings, and automatically convert to moment() objects. That way client can just pass the json array directly to excludeTimes via a simple JSON.parse?

aij · 2017-09-05T16:02:29Z

+  .react-datepicker__time-container .react-datepicker__time {
+    position: relative;
+    background: white; }
+    .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {


Indentation here and below.

Also seems like a lot of special casing.

Auto generated file, should be removed from this PR.

Yh most of it removed. Main function of special casing was for sizing the time component. Now thats done by calculating the month container height via clientHeight (passed via refs)

aij · 2017-09-05T16:16:45Z

@@ -68,4 +68,4 @@ General datepicker component.
 |`value`|`string`|||


@shadrech Yes, they're build outputs.

@martijnrusschen Is there a way we could improve the release process so everyone doesn't need to manually avoid committing these sorts of changes?

aij · 2017-09-05T16:17:05Z

  },
  {
-    title: 'Don\'t hide calendar on date selection',
-    component: <DontCloseOnSelect/>


Why was this example removed?

aij · 2017-09-05T16:31:34Z

+          maxTime={moment().hours(18).minutes(0)} />
+    )
+    var times = datePicker.find('li.react-datepicker__time-list-item')
+    expect(times).to.exist


Wouldn't this test pass even if minTime and maxTime are ignored?

Lol yh my bad. At first I wanted to test the number of .react-datepicker__time-list-item they'll be; there should be 3 with configuration above. I tried testing with expect(times).to.have.length(3) but kept getting a fail as length always comes back as 0. Any ideas what I'm missing here? Maybe theres another test I can do that'll achieve desired result

shadrech · 2017-09-06T08:09:33Z

Will work on requests at the weekend

- Removed excessive special casing in scss - Reinstated DontCloseOnSelect - refactored onTimeChange prop name to onChange on Time.tsx - Moved time examples to top of example_components

martijnrusschen · 2017-09-11T07:32:59Z

@@ -0,0 +1,149 @@
+import React from 'react'


Please remove the entire file. This isn't used.

dola · 2017-09-19T13:09:29Z

Overall looking pretty cool. I'm looking forward to using this!
However I would advise to only merge to master when the feature is due to be released. Otherwise the master Readme shows documentation for a feature that is not yet available. (confuses new users)

actraiser · 2017-09-20T12:27:13Z

Thanks @dola - that was exactly the case for me. I was wondering why adding showTimeSelect to the props did not show up anything when I tested react-datepicker for the first time using 0.54.0.

actraiser · 2017-09-20T18:31:07Z

PS: The just released 0.55.0 now behaves as expected. Thx!

martijnrusschen · 2017-09-20T18:37:18Z

Sorry for the confusion, forgot to release this earlier.

martijnrusschen requested changes Apr 24, 2017

View reviewed changes

martijnrusschen reviewed Apr 24, 2017

View reviewed changes

Tatenda Chawanzwa and others added 13 commits September 2, 2017 20:17

First working draft of selectTime feature

9d123c0

Added excludeTimePeriod and excludeTimes to API

115aba1

Changed excludeTimePeriod API to minTime, maxTime | Added docs

9b60bf9

Ran 'npm start build'

6afa3c9

Passes tests

e5a6a49

Commit after rebase from master and npm install

c6316d1

Minor scss fix for time container alignment and fix for missing modul…

fefe0d3

…e in timezone_date.tsx

Fix for making time container be same height as month container

74289f1

Revert back to old port

4f8d182

Reverted back to default 'L' for dateFormat. Show in examples that da…

7702d2c

…teFormat must be changed to 'LLL' for time to be displayed

Wrote first test for time feature

a6d71d8

Fix for failed tests. Also used props instead of passing monthContain…

5f6d6f9

…er ref with setState

Added more tests for time feature

fe0a5b8

shadrech force-pushed the select-time-feature branch from 89bb96e to fe0a5b8 Compare September 3, 2017 23:39

Changed time styling to match month styling when selected

647a163

martijnrusschen reviewed Sep 4, 2017

View reviewed changes

martijnrusschen requested review from aij and alex-shamshurin September 4, 2017 15:13

martijnrusschen approved these changes Sep 5, 2017

View reviewed changes

aij reviewed Sep 5, 2017

View reviewed changes

Tatenda Chawanzwa added 3 commits September 10, 2017 21:36

Code review changes

cec2f0f

- Removed excessive special casing in scss - Reinstated DontCloseOnSelect - refactored onTimeChange prop name to onChange on Time.tsx - Moved time examples to top of example_components

Removed showTimeSelect from portal examples

e919c53

Mentioned time picker in README.md

5227086

martijnrusschen reviewed Sep 11, 2017

View reviewed changes

Deleted tether_component.jsx component

e400d89

martijnrusschen merged commit 1957c31 into Hacker0x01:master Sep 12, 2017

		@@ -68,4 +68,4 @@ General datepicker component.
		\|`value`\|`string`\|\|\|

Conversation

shadrech commented Apr 23, 2017

Uh oh!

codecov-io commented Apr 24, 2017 • edited by codecov Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

shadrech commented Apr 24, 2017

Uh oh!

martijnrusschen commented Apr 24, 2017

Uh oh!

martijnrusschen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

spiroski commented Jun 16, 2017

Uh oh!

shadrech commented Jun 16, 2017

Uh oh!

shadrech commented Sep 3, 2017

Uh oh!

martijnrusschen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shadrech commented Sep 4, 2017

Uh oh!

shadrech commented Sep 4, 2017

Uh oh!

martijnrusschen commented Sep 4, 2017

Uh oh!

martijnrusschen commented Sep 4, 2017

Uh oh!

aij left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov-io commented Apr 24, 2017 •

edited by codecov Bot

Loading

actraiser commented Sep 20, 2017 •

edited

Loading