* Hide suggestions if the user is typing a ln addr that is not on stacker.news

* Don't select suggestion with tab in this particular instance of InputUseSuggest
This commit is contained in:
Satoshi Nakamoto 2023-10-10 19:15:10 -04:00
parent 6d3482a288
commit e907b40845
2 changed files with 30 additions and 4 deletions

View File

@ -394,15 +394,28 @@ function InputInner ({
)
}
export function UserSuggest ({ query, onSelect, dropdownStyle, children, transformUser = user => user }) {
export function UserSuggest ({
query, onSelect, dropdownStyle, children,
transformUser = user => user, selectWithTab = true, filterUsers = () => true
}) {
const [getUsers] = useLazyQuery(TOP_USERS, {
onCompleted: data => {
setSuggestions({ array: data.topUsers.users.map(transformUser), index: 0 })
setSuggestions({
array: data.topUsers.users
.filter((...args) => filterUsers(query, ...args))
.map(transformUser),
index: 0
})
}
})
const [getSuggestions] = useLazyQuery(USER_SEARCH, {
onCompleted: data => {
setSuggestions({ array: data.searchUsers.map(transformUser), index: 0 })
setSuggestions({
array: data.searchUsers
.filter((...args) => filterUsers(query, ...args))
.map(transformUser),
index: 0
})
}
})
@ -449,6 +462,9 @@ export function UserSuggest ({ query, onSelect, dropdownStyle, children, transfo
break
case 'Tab':
case 'Enter':
if (e.code === 'Tab' && !selectWithTab) {
break
}
if (suggestions.array?.length === 0) {
break
}
@ -486,13 +502,15 @@ export function UserSuggest ({ query, onSelect, dropdownStyle, children, transfo
)
}
export function InputUserSuggest ({ label, groupClassName, transformUser, ...props }) {
export function InputUserSuggest ({ label, groupClassName, transformUser, filterUsers, selectWithTab, ...props }) {
const [ovalue, setOValue] = useState()
const [query, setQuery] = useState()
return (
<FormGroup label={label} className={groupClassName}>
<UserSuggest
transformUser={transformUser}
filterUsers={filterUsers}
selectWithTab={selectWithTab}
onSelect={setOValue}
query={query}
>

View File

@ -356,6 +356,14 @@ export function LnAddrWithdrawal () {
autoFocus
onChange={onAddrChange}
transformUser={user => ({ ...user, name: `${user.name}@stacker.news` })}
selectWithTab={false}
filterUsers={(query) => {
if (!query.includes('@')) {
return true
}
const [, domain] = query.split('@')
return 'stacker.news'.startsWith(domain)
}}
/>
<Input
label='amount'