Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SSHOC
sshoc-marketplace-frontend
Commits
6a940195
Commit
6a940195
authored
Mar 08, 2021
by
Stefan Probst
Browse files
refactor: remove wrapper from searchform
parent
54969294
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/elements/ComboBox/ComboBox.tsx
View file @
6a940195
...
...
@@ -39,6 +39,8 @@ export interface ComboBoxProps<T>
shouldFocusWrap
?:
boolean
hideSelectionIcon
?:
boolean
hideButton
?:
boolean
/** @default "text" */
type
?:
'
text
'
|
'
search
'
/** @default "default" */
variant
?:
'
default
'
|
'
search
'
|
'
form
'
style
?:
CSSProperties
...
...
src/modules/search/ItemSearchForm.tsx
View file @
6a940195
import
{
useRouter
}
from
'
next/router
'
import
{
ReactNode
,
useMemo
,
useState
}
from
'
react
'
import
{
FormEvent
,
ReactNode
,
useMemo
,
useState
}
from
'
react
'
import
{
useAutocompleteItems
,
useGetItemCategories
}
from
'
@/api/sshoc
'
import
{
ItemCategory
,
ItemSearchQuery
}
from
'
@/api/sshoc/types
'
import
{
Button
}
from
'
@/elements/Button/Button
'
import
{
HighlightedText
}
from
'
@/elements/HighlightedText/HighlightedText
'
import
{
useDebouncedState
}
from
'
@/lib/hooks/useDebouncedState
'
import
{
useQueryParam
}
from
'
@/lib/hooks/useQueryParam
'
import
{
FormComboBox
}
from
'
@/modules/form/components/FormComboBox/FormComboBox
'
import
{
FormSelect
}
from
'
@/modules/form/components/FormSelect/FormSelect
'
import
{
Form
}
from
'
@/modules/form/Form
'
import
{
ComboBox
}
from
'
@/elements/ComboBox/ComboBox
'
import
{
Select
}
from
'
@/elements/Select/Select
'
interface
SearchFormValues
{
q
?:
string
...
...
@@ -25,13 +24,17 @@ export default function ItemSearchForm(
):
JSX
.
Element
{
const
router
=
useRouter
()
function
onSubmit
(
values
:
SearchFormValues
)
{
function
onSubmit
(
event
:
FormEvent
<
HTMLFormElement
>
)
{
const
values
:
SearchFormValues
=
Object
.
fromEntries
(
new
FormData
(
event
.
currentTarget
),
)
const
query
:
ItemSearchQuery
=
{}
if
(
values
.
q
!=
=
undefined
&&
values
.
q
.
length
>
0
)
{
if
(
values
.
q
!=
null
&&
values
.
q
.
length
>
0
)
{
query
.
q
=
values
.
q
}
if
(
values
.
category
!=
=
undefined
&&
values
.
category
.
length
>
0
)
{
if
(
values
.
category
!=
null
&&
values
.
category
.
length
>
0
)
{
query
.
categories
=
[
values
.
category
]
}
...
...
@@ -39,19 +42,9 @@ export default function ItemSearchForm(
}
return
(
<
Form
onSubmit
=
{
onSubmit
}
>
{
({
handleSubmit
})
=>
{
return
(
<
form
onSubmit
=
{
handleSubmit
}
role
=
"search"
className
=
{
props
.
className
}
>
{
props
.
children
}
</
form
>
)
}
}
</
Form
>
<
form
onSubmit
=
{
onSubmit
}
role
=
"search"
className
=
{
props
.
className
}
>
{
props
.
children
}
</
form
>
)
}
...
...
@@ -70,7 +63,7 @@ export function ItemCategorySelect(): JSX.Element {
},
[
categories
.
data
])
return
(
<
Form
Select
<
Select
name
=
"category"
aria-label
=
"Category"
isLoading
=
{
categories
.
isLoading
}
...
...
@@ -79,8 +72,8 @@ export function ItemCategorySelect(): JSX.Element {
defaultSelectedKey
=
""
variant
=
"search"
>
{
(
item
)
=>
<
Form
Select
.
Item
key
=
{
item
.
id
}
>
{
item
.
label
}
</
Form
Select
.
Item
>
}
</
Form
Select
>
{
(
item
)
=>
<
Select
.
Item
key
=
{
item
.
id
}
>
{
item
.
label
}
</
Select
.
Item
>
}
</
Select
>
)
}
...
...
@@ -107,15 +100,16 @@ export function ItemSearchComboBox(
items
.
data
?.
suggestions
?.
map
((
suggestion
)
=>
({
suggestion
}))
??
[]
return
(
<
Form
ComboBox
<
ComboBox
name
=
"q"
aria-label
=
"Search term"
allowsCustomValue
items
=
{
suggestions
}
//
isLoading={items.isLoading}
isLoading
=
{
items
.
isLoading
}
defaultInputValue
=
{
defaultSearchTerm
}
onInputChange
=
{
setSearchTerm
}
variant
=
"search"
type
=
"search"
hideSelectionIcon
hideButton
style
=
{
...
...
@@ -125,14 +119,14 @@ export function ItemSearchComboBox(
}
>
{
(
item
)
=>
(
<
Form
ComboBox
.
Item
key
=
{
item
.
suggestion
}
textValue
=
{
item
.
suggestion
}
>
<
ComboBox
.
Item
key
=
{
item
.
suggestion
}
textValue
=
{
item
.
suggestion
}
>
<
HighlightedText
text
=
{
item
.
suggestion
}
searchPhrase
=
{
debouncedSearchTerm
}
/>
</
Form
ComboBox
.
Item
>
</
ComboBox
.
Item
>
)
}
</
Form
ComboBox
>
</
ComboBox
>
)
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment