Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add spacing to searchbar and simplify render conditions (#1476)

Browse Source 
Adds padding between the search bar and the library list.

Also, the render method was refactored to be a bit simpler.

Backport of #1461
This commit is contained in:
Rômulo Penido
2024-11-07 00:05:57 -03:00
committed by GitHub
parent e6741496dc
commit d4e9a6bec2
1 changed files with 38 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/library-authoring/component-picker/SelectLibrary.tsx
View File

@@ -83,44 +83,44 @@ const SelectLibrary = ({ selectedLibrary, setSelectedLibrary }: SelectLibraryPro
value={searchQuery}
placeholder={intl.formatMessage(messages.selectLibrarySearchPlaceholder)}
/>
<div>
{data.results.length === 0 && (<EmptyState hasSearchQuery={!!searchQuery} />)}
<Form.RadioSet
name="selected-library"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSelectedLibrary(e.target.value)}
value={selectedLibrary}
>
{data.results.map((library) => (
<Card
key={library.id}
isClickable
onClick={() => setSelectedLibrary(library.id)}
className="card-item"
>
<Card.Header
size="sm"
title={<span className="card-item-title">{library.title}</span>}
subtitle={`${library.org} / ${library.slug}`}
actions={(
<Form.Radio value={library.id} name={`select-library-${library.id}`}>{' '}</Form.Radio>
)}
/>
<Card.Body>
<p>{library.description}</p>
</Card.Body>
</Card>
))}
</Form.RadioSet>
</div>
{data.results.length !== 0 && (
<Pagination
paginationLabel={intl.formatMessage(messages.selectLibraryPaginationLabel)}
pageCount={data!.numPages}
currentPage={data!.currentPage}
onPageSelect={(page: number) => setCurrentPage(page)}
variant="secondary"
className="align-self-center"
/>
{data.results.length === 0 ? (<EmptyState hasSearchQuery={!!searchQuery} />) : (
<>
<Form.RadioSet
name="selected-library"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSelectedLibrary(e.target.value)}
value={selectedLibrary}
className="mt-4"
>
{data.results.map((library) => (
<Card
key={library.id}
isClickable
onClick={() => setSelectedLibrary(library.id)}
className="card-item"
>
<Card.Header
size="sm"
title={<span className="card-item-title">{library.title}</span>}
subtitle={`${library.org} / ${library.slug}`}
actions={(
<Form.Radio value={library.id} name={`select-library-${library.id}`}>{' '}</Form.Radio>
)}
/>
<Card.Body>
<p>{library.description}</p>
</Card.Body>
</Card>
))}
</Form.RadioSet>
<Pagination
paginationLabel={intl.formatMessage(messages.selectLibraryPaginationLabel)}
pageCount={data!.numPages}
currentPage={data!.currentPage}
onPageSelect={setCurrentPage}
variant="secondary"
className="align-self-center"
/>
</>
)}
</Stack>
);