Skip to content
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

feat <DateRangePicker /> #1369

Merged
merged 4 commits into from
Aug 16, 2023
Merged

feat <DateRangePicker /> #1369

merged 4 commits into from
Aug 16, 2023

Conversation

takurinton
Copy link
Contributor

@changeset-bot
Copy link

changeset-bot bot commented Aug 16, 2023

🦋 Changeset detected

Latest commit: dab5c64

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
ingred-ui Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link

netlify bot commented Aug 16, 2023

Deploy Preview for ingred-ui ready!

Name Link
🔨 Latest commit dab5c64
🔍 Latest deploy log https://app.netlify.com/sites/ingred-ui/deploys/64dc80659b72f1000889c697
😎 Deploy Preview https://deploy-preview-1369--ingred-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@takurinton
Copy link
Contributor Author

DateRangePicker について、社内で以前話し合ったしようで以下のようなものがある。

  • バツボタン、esc、blur で閉じる(日付の反映はしない)
  • 日付を選択したら閉じる(その時点で反映)

というのがあるけど、日付は現状の実装だと即時反映になっている。

@takurinton
Copy link
Contributor Author

takurinton commented Aug 16, 2023

これについてどう対応しようかと思ってるけど、パッと思いつく唯一の解決方法は CalendarRange 単体で機能することを諦めて、使う側でよしなにしてねに振り切ることだと思ってる
上位コンポーネントありきでの状態管理になるので当然 storybook に載せない選択になる(厳しい)

@takurinton
Copy link
Contributor Author

Comment on lines +21 to +24
/**
* 親コンポーネントで calendar を任意のタイミングで閉じたい場合に使用する
*/
onClose?: (clickState: "start" | "end") => void;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

オプショナルで onDatesChange が発火したときに差し込めるハンドラーを定義した。
#1369 (comment)

Comment on lines +46 to +50
const handleClose = (clickState: "start" | "end") => {
if (clickState === "end") {
setOpen(false);
}
};
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

こんな感じで指定すると終了日をクリックしたタイミングで閉じることができるようになる。
親コンポーネントの都合であまり props 生やしたくないけど、ひとまずこの対応で。

@takurinton takurinton marked this pull request as ready for review August 16, 2023 07:54
Copy link
Contributor

@ryokosuge ryokosuge left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@takurinton takurinton merged commit 8ec9cc7 into master Aug 16, 2023
2 checks passed
@takurinton takurinton deleted the add-date-range-picker branch August 16, 2023 07:58
@FluctMember FluctMember mentioned this pull request Aug 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants