Packages
moon
2.87.8
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/components/pagination.ex
defmodule Moon.Components.PaginationButton do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Components.Button
prop(size, :string, required: true)
prop(page_number, :integer, required: true)
prop(current_page_number, :integer, required: true)
prop(label, :string)
prop(variant, :string)
prop(disabled, :boolean, default: false)
prop(class, :string)
prop(on_click, :event)
def render(assigns) do
~F"""
<Button
size={@size}
variant={if @page_number == @current_page_number, do: "primary", else: @variant}
class={"mx-2 font-semibold transition-none rounded-moon-s-sm #{@class}"}
on_click={@on_click}
value_name="page"
value={@page_number}
disabled={@disabled}
>{@label || @page_number}</Button>
"""
end
end
defmodule Moon.Components.Pagination do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Components.PaginationButton
prop(current_page_number, :integer, required: true)
prop(total_pages, :integer, required: true)
prop(range_before, :integer, default: 1)
prop(range_after, :integer, default: 1)
prop(size, :string, values: ["xsmall", "small", "medium", "large"], default: "xsmall")
prop(previous_button_label, :string, default: "Previous")
prop(next_button_label, :string, default: "Next")
prop(on_change, :event)
def render(assigns) do
~F"""
<div class="flex flex-wrap items-center justify-center">
<div class="mb-4 w-full lg:w-auto">
<PaginationButton
size={@size}
page_number={@current_page_number - 1}
label={@previous_button_label}
current_page_number={@current_page_number}
disabled={@current_page_number <= 1}
class="block mx-auto"
on_click={@on_change}
/>
</div>
<div class="flex grow items-center justify-center mb-4">
<PaginationButton
size={@size}
page_number={1}
current_page_number={@current_page_number}
variant="tertiary"
on_click={@on_change}
/>
<div :if={@current_page_number - @range_before > 2} class="mx-2">…</div>
<PaginationButton
:if={@total_pages > 2}
:for={page <- page_range(@current_page_number, @range_before, @range_after, @total_pages)}
size={@size}
page_number={page}
current_page_number={@current_page_number}
variant="tertiary"
on_click={@on_change}
/>
<div :if={@current_page_number + @range_after < @total_pages - 1} class="mx-2">…</div>
<PaginationButton
:if={@total_pages > 1}
size={@size}
page_number={@total_pages}
current_page_number={@current_page_number}
variant="tertiary"
on_click={@on_change}
/>
</div>
<div class="mb-4 w-full lg:w-auto">
<PaginationButton
size={@size}
page_number={@current_page_number + 1}
label={@next_button_label}
current_page_number={@current_page_number}
disabled={@current_page_number >= @total_pages}
class="block mx-auto"
on_click={@on_change}
/>
</div>
</div>
"""
end
def page_range(current_page, range_before, range_after, total_pages) do
min_page = max(2, current_page - range_before)
max_page = min(current_page + range_after, total_pages - 1)
min_page..max_page
end
end