New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add multi format support to DateInput #437

Merged
merged 7 commits into from Nov 30, 2018

Conversation

Projects
None yet
5 participants
@onlyann
Contributor

onlyann commented Nov 14, 2018

Extend the format prop of the DateInput to allow an array of formats.
The component then uses the array of formats when attempting to parse a date from the input.
The first value of the array determines the displayed format.

A typical use case is to allow the user to enter in several supported formats, such as D/M/YY or DD/MM/YYYY

@ant-design-bot

This comment has been minimized.

ant-design-bot commented Nov 14, 2018

Deploy preview for rc-calendar failed.

Built with commit 3ff0bf6

https://app.netlify.com/sites/rc-calendar/deploys/5bff611640e2a4716e67e188

@onlyann onlyann changed the title from add multi format support for DateInput to add multi format support to DateInput Nov 14, 2018

@codecov-io

This comment has been minimized.

codecov-io commented Nov 14, 2018

Codecov Report

Merging #437 into master will increase coverage by 0.3%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff            @@
##           master     #437     +/-   ##
=========================================
+ Coverage   88.31%   88.62%   +0.3%     
=========================================
  Files          10       10             
  Lines         702      712     +10     
  Branches      192      193      +1     
=========================================
+ Hits          620      631     +11     
+ Misses         69       68      -1     
  Partials       13       13
Impacted Files Coverage Δ
src/util/index.js 100% <100%> (ø) ⬆️
src/date/DateInput.js 84.84% <100%> (+2.59%) ⬆️

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 c92cf57...3ff0bf6. Read the comment docs.

@zombieJ

This comment has been minimized.

Member

zombieJ commented Nov 14, 2018

This pull request introduces 2 alerts when merging 117550f into c92cf57 - view on LGTM.com

new alerts:

  • 1 for Potentially inconsistent state update
  • 1 for Unused or undefined state property

Comment posted by LGTM.com

@zombieJ

This comment has been minimized.

Member

zombieJ commented Nov 14, 2018

This pull request introduces 1 alert when merging 907c18e into c92cf57 - view on LGTM.com

new alerts:

  • 1 for Potentially inconsistent state update

Comment posted by LGTM.com

@zombieJ

This comment has been minimized.

Member

zombieJ commented Nov 14, 2018

This pull request introduces 1 alert when merging 6cdfa36 into c92cf57 - view on LGTM.com

new alerts:

  • 1 for Potentially inconsistent state update

Comment posted by LGTM.com

@onlyann

This comment has been minimized.

Contributor

onlyann commented Nov 15, 2018

@mischa-s

This comment has been minimized.

mischa-s commented Nov 26, 2018

Yay thank you for this 😃 , was just about to try and hack around it 🛠 are there any blocks to this being merged?

@mischa-s

This comment has been minimized.

mischa-s commented Nov 26, 2018

@zombieJ it looks like you have been doing a lot of the releases for this repo, thanks for the great work!!! Is there anything I can do to help get this and #438 merged?

@onlyann

This comment has been minimized.

Contributor

onlyann commented Nov 26, 2018

@zombieJ it looks like you have been doing a lot of the releases for this repo, thanks for the great work!!! Is there anything I can do to help get this and #438 merged?

@zombieJ is a bot

@mischa-s

This comment has been minimized.

mischa-s commented Nov 27, 2018

@zombieJ it looks like you have been doing a lot of the releases for this repo, thanks for the great work!!! Is there anything I can do to help get this and #438 merged?

@zombieJ is a bot

Cool! I've never seen a bot that has starred 41 repos has 62 personal repos and has a github.io blog... @onlyann thanks for making the two PRs mentioned, do you have write access or do you know who does?

@onlyann

This comment has been minimized.

Contributor

onlyann commented Nov 27, 2018

I don't know the maintainers. We can only hope that one of them will find the time to review and accept the PR

Show resolved Hide resolved README.md Outdated
@zombieJ

This comment has been minimized.

Member

zombieJ commented Nov 28, 2018

Aha, I'm not robot but LGTM add auto comment. Currently lack of time, sorry for delay~

@zombieJ

This comment has been minimized.

Member

zombieJ commented Nov 28, 2018

Pls add the package-lock.json in ignore file.

@onlyann

This comment has been minimized.

Contributor

onlyann commented Nov 28, 2018

I didn't know there was a real account on top of the automated comments 😅

Made the recommended changes.
Thanks for your time @zombieJ

str: selectedValue && selectedValue.format(nextProps.format) || '',
invalid: false,
});
if (!this.state.hasFocus) {

This comment has been minimized.

@zombieJ

zombieJ Nov 29, 2018

Member

This makes str & invalid un-control. It's better to compare selectedValue & format changed to setState instead of focus status.

This comment has been minimized.

@onlyann

onlyann Nov 29, 2018

Contributor

I am not sure I understand what you suggest.

This is done to prevent re-formatting the input while a user is editing the date, i.e. to prevent reformatting 1/12/18 to 01/12/2018 until focus is lost.

I could change the condition to be:

const hasMultipleFormats = !!nextProps.format && nextProps.format.length > 1;

if (!hasMultipleFormats || !this.state.hasFocus) {
   this.setState({
      str: formatDate(selectedValue, nextProps.format),
      invalid: false,
   });
}

Would that work for you or am I missing something else?

This comment has been minimized.

@zombieJ

zombieJ Nov 29, 2018

Member

I mean when props of selectedValue or format changed. Current code will not makes state update. I suggest to modify like this:

if (
  !shallowEqual(this.props.format, format) ||
  (!this.props.selectedValue && selectedValue) ||
  !this.props.selectedValue.isSame(selectedValue, 'date')
) {
  // ...
}

This comment has been minimized.

@onlyann

onlyann Nov 29, 2018

Contributor

This won't work because on every key stroke, if the input parses to a valid date, the Calendar component will change the selectedValue prop, effectively triggering componentWillReceiveProps on DateInput and that will override the date input to a different format while the user is typing.

This comment has been minimized.

@zombieJ

zombieJ Nov 30, 2018

Member

tested. You're correct.

Show resolved Hide resolved src/util/index.js Outdated

@zombieJ zombieJ merged commit c99075d into react-component:master Nov 30, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment