kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add "show less" button to showFirstRow

Browse Source
This commit is contained in:
Kuba Orlik 2024-07-28 14:37:55 +02:00
parent f63387df3c
commit 56bbc65e95
2 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/back/routes/common/show-first-row/show-first-row.css
View File

@ -27,4 +27,18 @@
margin: 0 auto;
margin-top: 20px;
}
.show-first-row__show-less-button {
display: none;
}
&:has(input:checked) {
.show-first-row__show-less-button {
display: block;
}
.show-first-row__show-more-button {
display: none;
}
}
}

26
src/back/routes/common/show-first-row/show-first-row.tsx
View File

@ -18,18 +18,27 @@ export async function showFirstRow({
make_show_more_button = () => (
<span class="show-first-row__default-button">Show more</span>
),
add_button_to_content = (content, button) => (
make_show_less_button = () => (
<span class="show-first-row__default-button">Show less</span>
),
add_button_to_content = (content, show_more_button, show_less_button) => (
<>
{content}
{button}
{show_more_button}
{show_less_button}
</>
),
}: {
items: FlatTemplatable[];
min_column_width_px?: number;
make_show_more_button?: () => JSX.Element;
make_show_less_button?: () => JSX.Element;
column_gap_px?: number;
add_button_to_content?: (content: JSX.Element, button: JSX.Element) => JSX.Element;
add_button_to_content?: (
content: JSX.Element,
show_more_button: JSX.Element,
show_less_button: JSX.Element
) => JSX.Element;
}): Promise<string> {
const id = showFirstRowIds.next().value;
const checkbox_id = "show-first-row__checkbox--" + id;
@ -62,8 +71,17 @@ export async function showFirstRow({
<input type="checkbox" id={checkbox_id} style="display: none" />
{add_button_to_content(
<div class={["show-first-row__items"]}>{items}</div>,
<label for={checkbox_id} class={["show-first-row__button"]}>
<label
for={checkbox_id}
class={["show-first-row__button", "show-first-row__show-more-button"]}
>
{make_show_more_button()}
</label>,
<label
for={checkbox_id}
class={["show-first-row__button", "show-first-row__show-less-button"]}
>
{make_show_less_button()}
</label>
)}
</div>