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
8746cd7e
Commit
8746cd7e
authored
Mar 04, 2021
by
Stefan Probst
Browse files
feat: make source select a combobox
parent
1d8467b4
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/components/item/SourceFormSection/SourceFormSection.tsx
View file @
8746cd7e
import
{
useState
}
from
'
react
'
import
{
useGetSources
}
from
'
@/api/sshoc
'
import
{
useDebouncedState
}
from
'
@/lib/hooks/useDebouncedState
'
import
{
FormComboBox
}
from
'
@/modules/form/components/FormComboBox/FormComboBox
'
import
{
FormSection
}
from
'
@/modules/form/components/FormSection/FormSection
'
import
{
FormSelect
}
from
'
@/modules/form/components/FormSelect/FormSelect
'
import
{
FormTextField
}
from
'
@/modules/form/components/FormTextField/FormTextField
'
export
interface
SoureFormSectionProps
{
initialValues
?:
any
}
/**
* Form section for item source.
*/
export
function
SourceFormSection
():
JSX
.
Element
{
export
function
SourceFormSection
(
props
:
SoureFormSectionProps
):
JSX
.
Element
{
return
(
<
FormSection
title
=
{
'
Source
'
}
>
<
div
className
=
"flex space-x-4"
>
<
SourceSelect
name
=
"source.id"
label
=
{
'
Source
'
}
/>
<
SourceComboBox
name
=
"source.id"
label
=
{
'
Source
'
}
initialValues
=
{
props
.
initialValues
}
/>
<
FormTextField
name
=
"sourceItemId"
label
=
{
'
Source ID
'
}
...
...
@@ -25,23 +35,34 @@ export function SourceFormSection(): JSX.Element {
interface
SourceSelectProps
{
name
:
string
label
:
string
initialValues
?:
any
}
/**
* Source.
*/
function
SourceSelect
(
props
:
SourceSelectProps
):
JSX
.
Element
{
const
sources
=
useGetSources
({})
function
SourceComboBox
(
props
:
SourceSelectProps
):
JSX
.
Element
{
const
initialLabel
=
props
.
initialValues
?.
source
?.
id
??
''
const
[
searchTerm
,
setSearchTerm
]
=
useState
(
initialLabel
)
const
debouncedSearchTerm
=
useDebouncedState
(
searchTerm
,
150
).
trim
()
const
sources
=
useGetSources
(
{
q
:
debouncedSearchTerm
},
{
// enabled: debouncedSearchTerm.length > 2,
keepPreviousData
:
true
,
},
)
return
(
<
Form
Select
<
Form
ComboBox
name
=
{
props
.
name
}
label
=
{
props
.
label
}
items
=
{
sources
.
data
?.
sources
??
[]
}
onInputChange
=
{
setSearchTerm
}
isLoading
=
{
sources
.
isLoading
}
variant
=
"form"
>
{
(
item
)
=>
<
Form
Select
.
Item
>
{
item
.
label
}
</
Form
Select
.
Item
>
}
</
Form
Select
>
{
(
item
)
=>
<
Form
ComboBox
.
Item
>
{
item
.
label
}
</
Form
ComboBox
.
Item
>
}
</
Form
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