chore: Calendarの内部処理を整理する #5346
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…e-refactoring-Calendar-YearPicker
yagimushi
force-pushed
the
chore-refactoring-Calendar
branch
from
8a18400 to
1c2384a
Compare
yagimushi
force-pushed
the
chore-refactoring-Calendar
branch
from
e9a39e5 to
5a054a4
Compare
AtsushiM
commented
Feb 3, 2025
AtsushiM
commented
Feb 3, 2025
| const lastDate = dayjs(date).add(1, 'month').date(0).date() | ||
| const day = dayjs(date) | ||
| const startDay = day.date(1).day() | ||
| const lastDate = day.add(1, 'month').date(0).date() |
There was a problem hiding this comment.
dayjsのdateやaddメソッドは別オブジェクトを生成するため、dayjs自体の実行結果を別変数にしました。
こうすることでメソッド呼び出し、実行のコストが浮きます
AtsushiM
commented
Feb 3, 2025
Comment on lines
+64
to
+71
| const length = Math.max(Math.min(toYear, 9999) - fromYear + 1, 0) | ||
| const result: number[] = [] | ||
|
|
||
| for (let i = 0; i < length; i++) { | ||
| result[i] = fromYear + i | ||
| } | ||
|
|
||
| return result |
There was a problem hiding this comment.
元の処理では
- numOfYear分の長さの配列を生成
- その後nillで全部埋める
- その後nullを無視してindexを元に年を計算....
とかなり無駄な処理をしてしまっていました。
結局何回ループするのか？ が微妙に分かりづらいので
- 空配列を生成
- 空配列に対してindexを元に年を計算して詰める
ようにロジックを変更しました
AtsushiM
commented
Feb 3, 2025
| }, | ||
| }) | ||
|
|
||
| export const YearPicker: FC<Props & ElementProps> = ({ | ||
| export const YearPicker: FC<Props & ElementProps> = ({ isDisplayed, ...rest }) => | ||
| isDisplayed ? <ActualYearPicker {...rest} /> : null |
There was a problem hiding this comment.
isDisplayedではない場合でYearPickerを常に計算するようになっていたため、
他コンポーネントと合わせて、そもそも表示しない場合はロジックを実行しないようにしました。
年の選択UIはそもそも利用されない可能性も十分に有るため、既存のロジックより効率的なはずです
AtsushiM
commented
Feb 3, 2025
| const fromDay = dayjs(from) | ||
| const toDay = dayjs(to) | ||
| // HINT: dayjsのisSameは文字列でも比較可能なため、cacheが効きやすいstringにする | ||
| const nowDateStr = dayjs().startOf('date').toString() |
There was a problem hiding this comment.
nowの情報が欲しいため、memo化できません。
ただここで生成する文字列は1日単位なのでキャシュしちゃってもいいかもですが...
AtsushiM
commented
Feb 3, 2025
Comment on lines
+67
to
+86
| const formattedFrom = useMemo(() => { | ||
| const date = getFromDate(from) | ||
| const day = dayjs(date) | ||
|
|
||
| return { | ||
| day, | ||
| date, | ||
| year: day.year(), | ||
| } | ||
| }, [from]) | ||
| const formattedTo = useMemo(() => { | ||
| const date = getToDate(to) | ||
| const day = dayjs(date) | ||
|
|
||
| return { | ||
| day, | ||
| date, | ||
| year: day.year(), | ||
| } | ||
| }, [to]) |
There was a problem hiding this comment.
from, to はほぼ固定で変わる可能性は低いため、memo化しています
またこれらをベースに計算される値も同様です
AtsushiM
requested review from
misako0927 and
hiroki0525
and removed request for
a team
Qs-F
reviewed
Feb 25, 2025
| slots: { | ||
| container: | ||
| 'smarthr-ui-Calendar shr-inline-block shr-overflow-hidden shr-rounded-m shr-bg-white shr-text-black shr-shadow-layer-3 forced-colors:shr-border-shorthand forced-colors:shr-shadow-none', | ||
| header: 'smarthr-ui-Calendar-header shr-border-b-shorthand shr-flex shr-items-center shr-p-1', | ||
| yearMonth: 'smarthr-ui-Calendar-yearMonth shr-me-0.5 shr-text-base shr-font-bold', | ||
| monthButtons: 'smarthr-ui-Calendar-monthButtons shr-ms-auto shr-flex', | ||
| tableLayout: 'shr-relative', | ||
| yearSelectButton: | ||
| 'smarthr-ui-Calendar-selectingYear [&[aria-expanded="true"]_.smarthr-ui-Icon]:shr-rotate-180', |
| @@ -13,13 +15,12 @@ import React, { | |||
| import { tv } from 'tailwind-variants' | |||
|
|
|||
| import { Button } from '../Button' | |||
| import { FaCaretDownIcon, FaCaretUpIcon, FaChevronLeftIcon, FaChevronRightIcon } from '../Icon' | |||
There was a problem hiding this comment.
note: アイコンを逆さまにして表示するようにしたので必要なくなったよう
|
|
||
| const calendar = tv({ | ||
| const classNameGenerator = tv({ |
There was a problem hiding this comment.
nits: classNamesGenerator のほうが正しいかも？と思いました
There was a problem hiding this comment.
あー、これlintで一律同じような名前に揃える、という感じになっているので...
一旦このままいかせてください。
必要に応じてlintを変えます
…e-refactoring-Calendar
…e-refactoring-Calendar
…e-refactoring-Calendar
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
関連URL
概要
変更内容
確認方法