* 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, { const [getUsers] = useLazyQuery(TOP_USERS, {
onCompleted: data => { 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, { const [getSuggestions] = useLazyQuery(USER_SEARCH, {
onCompleted: data => { 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 break
case 'Tab': case 'Tab':
case 'Enter': case 'Enter':
if (e.code === 'Tab' && !selectWithTab) {
break
}
if (suggestions.array?.length === 0) { if (suggestions.array?.length === 0) {
break 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 [ovalue, setOValue] = useState()
const [query, setQuery] = useState() const [query, setQuery] = useState()
return ( return (
<FormGroup label={label} className={groupClassName}> <FormGroup label={label} className={groupClassName}>
<UserSuggest <UserSuggest
transformUser={transformUser} transformUser={transformUser}
filterUsers={filterUsers}
selectWithTab={selectWithTab}
onSelect={setOValue} onSelect={setOValue}
query={query} query={query}
> >

View File

@ -356,6 +356,14 @@ export function LnAddrWithdrawal () {
autoFocus autoFocus
onChange={onAddrChange} onChange={onAddrChange}
transformUser={user => ({ ...user, name: `${user.name}@stacker.news` })} 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 <Input
label='amount' label='amount'