-
Notifications
You must be signed in to change notification settings - Fork 141
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
chore: ComboBoxのカスタムhookを整理する #5334
Conversation
…e-add-use-decorators
…y.from + map をシンプルなforに置き換える
45cd39a
to
0ee6ef6
Compare
…e-refactoring-ComboBox-useOptions
…e-refactoring-ComboBox-useListBox
…e-refactoring-ComboBox-useFocusControl
…toring-ComboBox-useFocusControl
…toring-ComboBox-useFocusControl
…e-refactoring-ComboBox-useFocusControl
856ccf7
to
9c0181a
Compare
9c0181a
to
25e7e80
Compare
let nextIndex = 0 | ||
|
||
if (currentActiveIndex !== -1) { | ||
nextIndex = (currentActiveIndex + delta + options.length) % options.length | ||
} else if (delta !== 1) { | ||
nextIndex = options.length - 1 | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
生成するのはnextIndexだけであり、他の変数の生成などもないため、無名関数でスコープを切り出すほどではないと判断しました。
またletでnextIndexの初期値を0にすることで条件分岐を整理しています
if (focusedIndex !== null) { | ||
const nextIndex = Math.max(focusedIndex - 1, 0) | ||
|
||
deletionButtonRefs[nextIndex].current?.focus() | ||
setFocusedIndex(nextIndex) | ||
} else if (inputRef.current?.selectionStart === 0) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
条件がややこしいことになっていたのでネストしなくても良いように条件調整しました
deletionButtonRefs[nextIndex].current?.focus() | ||
setFocusedIndex(nextIndex) | ||
} | ||
}, [deletionButtonRefs, focusedIndex, selectedItemLength]) | ||
|
||
const focusNextDeletionButton = useCallback(() => { | ||
if (deletionButtonRefs.length === 0) { | ||
if (deletionButtonRefs.length === 0 || focusedIndex === null) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
せっかく早期returnしているので、即終了する条件をまとめています
…e-refactoring-ComboBox-useFocusControl
const moveActivePositionDown = useCallback(() => { | ||
moveActiveOptionIndex(activeOption, 1) | ||
}, [activeOption, moveActiveOptionIndex]) | ||
|
||
const moveActivePositionUp = useCallback(() => { | ||
moveActiveOptionIndex(activeOption, -1) | ||
}, [activeOption, moveActiveOptionIndex]) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
activeOption が変更される度にmemoが更新され、また利用箇所も一箇所だけ、引数や処理なども複雑ではないため、あまり旨味のあるuseCallbackでは有りませんでした。
moveActiveOptionIndexをexportするようにします
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
関連URL
概要
変更内容
確認方法