-
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: SingleComboBoxの内部ロジックを整理する #5337
Conversation
…e-add-use-decorators
…toring-SingleComboBox
…toring-SingleComboBox
…e-refactoring-SingleComboBox
…toring-SingleComboBox
…e-refactoring-SingleComboBox
…e-refactoring-SingleComboBox
} else if (!selectedItem && defaultItem) { | ||
if (onSelect) onSelect(defaultItem) | ||
} else if (!selectedItem) { | ||
selectDefaultItem() |
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.
selectDefaultItemにdefaultItemのある無しなどのロジックは押し込められているため、調整しています
if (selectedItem) { | ||
setInputValue(innerText(selectedItem.label)) | ||
} else { | ||
setInputValue('') | ||
} | ||
setInputValue(selectedItem ? innerText(selectedItem.label) : '') |
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.
絶対にsetInputValueは実行されるため、引数のみを条件分岐することでわかりやすくしました
useCallback(() => { | ||
if (!isFocused && onSelect && !selectedItem && defaultItem) { | ||
onSelect(defaultItem) | ||
} | ||
}, [isFocused, selectedItem, onSelect, defaultItem]), | ||
useCallback(() => { | ||
unfocus() | ||
}, [unfocus]), | ||
isFocused || selectedItem ? NOOP : selectDefaultItem, | ||
unfocus, |
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.
無意味にmemo化されていたので調整しています。
if (!isExpanded) { | ||
setIsExpanded(true) | ||
} | ||
} | ||
handleListBoxKeyDown(e) | ||
}, | ||
[isComposing, isExpanded, setIsExpanded, unfocus, handleListBoxKeyDown], |
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.
setIsExpandedはuseStateのsetterなので依存関係に含める必要がありません
if (isExpanded) { | ||
e.stopPropagation() | ||
setIsExpanded(false) | ||
} | ||
} else if (e.key === 'Tab') { | ||
unfocus() | ||
} else { | ||
if (['Down', 'ArrowDown', 'Up', 'ArrowUp'].includes(e.key)) { |
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.
配列をチェックするより、正規表現一発のほうが明らかに高速のため置き換えています
</button> | ||
) | ||
} | ||
|
||
const MemoizedNewIconWithText = React.memo<{ label: ReactNode }>(({ label }) => ( | ||
<FaPlusCircleIcon color="TEXT_LINK" text={<Text color="TEXT_LINK">「{label}」を追加</Text>} /> |
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.
FaPlusCircleIcon
が旧名称でdeprecatedなのでこのタイミングで FaCirclePlusIcon
にしたい...!
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.
やりますか
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.
一点コメントしましたが他は問題ないかなと思います
…e-refactoring-SingleComboBox
関連URL
概要
変更内容
確認方法